ads

Senin, 24 Oktober 2016

Cara Membuat Menu Dropdown Responsive di Blog Keren Banget

Cara Membuat Menu Dropdown Responsive di Blog Keren Banget
Langkah Membuat Menu Dropdown Responsive dan Valid di Blog + Search Box - Tahukah anda bahwa menu naviagasi yang tepasang di blog anda merupakan salah satu hal untuk membuat blog anda menjadi user seo friendly karena dengan terpasang menu dropdown di blog dapat meningkatkan jumlah pagviews anda lebih banya dua kali lipat dibanding UV atau unik Visitor . Kalau nggak percaya silahkan lihat statistik blog saya melalui histats

Oh iya , navigasi meni dropdown kali ini berbeda dengan yang lainya , karena telah di modifikasi dan ditambahi fitur responsive untuk menyesuaikan trend dan perkembangan zaman saat ini , serta ditambahi kotak pencarian untuk mempermudah pengunjung mencari artikel meanrik unik lainya yang ada di blog sobat.

Bentuk penampakan menu dropdownnya seperti apa mas ? untuk hasilnya nanti , kurang lebih jadiya akan seperti gambar dibawah ini . Gimana keren bangetss bukan ?
Langkah Membuat Menu Dropdown Responsive + Kotak Pencarian di Blog
  1. Pertama , silahkan sobat masuk ke dasbhor blog sobat terlebih dahulu
  2. Masuk ke bagian Temlate => Edit Html 
  3. Kemudian Salin dan letakkan kode berikut tepat di atas ]]</b:skin>(  av{text-transform:uppercase;position:relative;font:bold 12px Arial,Sans-Serif;background:#e74c3c} nav *{margin:0 0 0 0;padding:0 0 0 0;list-style:none} nav ul{overflow:hidden;background:rgba(231,76,60,0.84);float:left} nav li{float:left;display:inline} nav li a{padding:3px 15px;line-height:40px;color:#fff!important;display:block;text-decoration:none} nav li a:hover{background:rgba(231,76,60,0.84)!important} nav li ul{display:block;width:170px;position:absolute;left:auto;z-index:10;visibility:hidden;opacity:0;height:auto;transition:all 0.26s ease-out 0.2s} nav li li{display:block;float:none;width:100%} nav li:hover > ul{visibility:visible;width:200px;opacity:1} nav li li ul{left:200px;margin-top:-40px} nav li.sub > a{position:relative;padding-right:30px} nav li.sub > a:after{content:"";width:0;height:0;border-width:4px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:20px;right:10px} nav li.sub li.sub > a:after{content:"";width:0;height:0;border-width:4px;border-style:solid;border-color:transparent transparent transparent #eee;position:absolute;top:16px;right:10px}           )

  1. Supaya menu tersebut dapat berubah power rangers responsive, maka kita harus menambahkan media query ke template anda. Terdapat 2 media query, yaitu pada ukuran 600px dan 380px. Letakkan media query ini sesuai dengan media query yang ada di template anda. Atau letakkan bisa letakkan kode berikut tepat di atas ]]</b:skin>
  2. (   media screen and (max-width:600px){#nav2{display:inherit;margin:5px;float:left;padding:8px}nav ul{display:none}} @media screen and (max-width:380px){#nav2{padding:3px}#search-top{padding:5px}input[type="text"]{padding:5px;width:90px}#search-button-top{background-image:url("http://3.bp.blogspot.com/-60fYApN0j2M/Ub8uXOv4rNI/AAAAAAAACBs/6PDa4uu3cHk/s1600/csg-51bf2d6764c79.png");background-repeat:no-repeat;transition:all 0.7s ease 0s;height:26px;width:29px;background-color:#34495e;background-position:7px -247px;border:none;float:right;cursor:pointer}}}           )
  3. . Kemudian letakkan kode berikut suka-suka anda, kalau saya meletakannya di bawah header
  4. (  a href="/search/label/Tutorial">Tutorial</a></li> <li class="sub"><a href="/search/label/Template">Template</a><ul> <li><a href="/search/label/CSS3">CSS3</a></li> <li><a href="/search/label/HTML5">HTML5</a></li> <li><a href="/search/label/Responsive">Responsive</a></li> <li><a href="/search/label/SEO">SEO</a></li> </ul> </li> </ul> <select class="nav2" id="nav2" onchange="document.location.href=this.options[this.selectedIndex].value;"> <option value="/">Home</option> <option value="/search/label/Tutorial">Tutorial</option> <option value="/search/label/Template">Template</option> <option value="/search/label/CSS3">- CSS3</option> <option value="/search/label/HTML5">- HTML5</option> <option value="/search/label/Responsive">- Responsive</option> <option value="/search/label/SEO">- SEO</option> </select> <form action="/search" id="search-top" method="get"> <input name="q" placeholder="Search..." type="text"/><input id="search-button-top" type="submit" value=""/></form> </nav>        )

  1. Yang Terkhir Silahkan Simpan Template dan Lihat perubahanya
Taraaa Menu Dropdown Responsive di Blog di bawah header kini sudah terpasang di blog sobat , oh iya saya sarankan ketika sobat melakukan tutorial diatas gunakanlah blog demo terlebih dahulu jangan blog utama , nanti kalau sobat kurang tepat malah jadi kacau deh template blog utama , kalau di blog demo udah berhasil kemudian baru di blog utama , sekian tutorial membuat dan memasang menu dropdowns di blog yang keren dan responsive , semoga bermanfaat bagi anda
EMOGA BERMANFAAT
BACA JUGA :


2. CARA/ UPAYA AGAR SEGERA MENDAPAT MOMONGAN http://caratoni17.blogspot.co.id/2017/03/cara-agar-segera-mendapat-momongan.html


4. CARA MENGUPAYAKAN AGAR MENDAPATKAN KETURUNAN LAKI- LAKI

5. CARA MENDAPATKAN PASANGAN YANG SHOLIKHAH


.CARA MEMBUAT AIR STRUM SEDERHANA

. CARA MENGETAHUI KUTUP LISTRIK DC YANG POSITIP DAN NEGATIP SECARA SEDERHANA
http://caratoni17.blogspot.co.id/2017/02/cara-mengetahui-kutup-listrik-dc-yang.html

4. CARA MENGAWASI ANAK REMAJA


6. CARA MENJAGA ROMANTISME SUAMI ISTRI

7. CARA MENJAGA KEBAHAGIAAN KELUARGA

8. CARA MEMBUAT SUAMI BETAH DI RUMAH

9. CARA AGAR KITA BISA BERBUAT DENGAN IKHLAS

10. CARA AGAR TIDAK GAMPANG STREES

11. CARA MEMACU DIRI AGAR RAJIN BERIBADAH

12 CARA AGAR HARTA KITA BERKAH


14 CARA MENGURANGI /MENGHILANGKAN RASA ASIN DI IKAN KERING (GEREH) http://caratoni17.blogspot.co.id/2017/02/cara-mengurangi-menghilangkan-rasa-asin.html

15 CARA MEMBUAT DAGING SATE EMPUK

16 CARA AGAR ANAK TERJAMIN PENDIDIKAN DAN PERUMAHANNYA

17. CARA AGAR BISA SEGERA DAPAT PORSI NAIK HAJI

18 CARA MENDAPATKAN PASANGAN YANG SOLIKH

19 CARA MENDAPATKAN PASANGAN YANG SHOLIKHAH



MAAF NUMPANG PROMO

PANDUAN RINGKAS MENGHASILKAN UANG DI PROPELLER ADS DISERTAI LANGKAH DAN GAMBAR
Cobalah buat sebuah blog yang paling sederhana atau bila Anda sudah memiliki sebuah blog dengan konten apapun (asal tidak gambar dan artikel tentang ancaman, kekerasan maupun gambar porno) maka bergabunhlah dengan PROPELLER ADS
PROPELLER Ads adalah salah satu alternatip mendulang dolar/rupiah di GOOGLE yang saat ini mulai berkembang dan diminati pada blogger pemula . Mengapa banyak diminati ? Sebabnya antara lain karena pendaftarannya GRATIS , operasionalnya mudah dan fleksibel serta cepat mendapatkan penghasilan.
Sekali lagi siapapun dapat mendaftar dan masih GRATIS untuk saat ini. Anda tak perlu menunggu sekian lama untuk dapat pendapat pengakuan (diverifikasi) dan menunggu iklannya keluar padahal blog sudah dibuat sedemikian bagus . Pokoknya banyak kemudahan deh.
Anda akan saya pandu sebagai berikut:

1.Untuk pendaftaran gratis Silakan masuk di halaman PROPELLER Ads  yakni di www.propellerads.com atau KLIK DI SINI

2. Akan muncul gambar seperti di bawah ini : KLIK DI SINI

3.Pilihlah / KLIK kotak kiri bawah (BECOME A PUBLISHER)
4. GAMBAR AKAN SEPERTI DI BAWAH IN1- KLIK DI SINI2

5. KLIK Lingkaran kiri atas (Individual account) akan keluar gambar seperti  ini :
-KLIK GAMBAR DI SINI3

6. isilah form tersebut dengan contoh seperti gab prop 4 ( bila url/http blog anda yang dimasukkan selalu gagal maka cobalah diisi dengan url youtobe anda yang masih aktip )

LIHAT GAMBARNYA ? SILAKAN KLIK DI SINI4

7. KLIK kotak bawah kanan SIGN UP AS PUBLISHER
8. Bila sudah berhasil maka gambar akan seperti ini prop 5

9.buka email anda yang tadi di masukkan dalam form pendaftaran maka akan ada email  confirmation letter.seperti contoh di bawah ini gambar

SILAHKAN KLIK DI SINI5

10. KLIK TULISAN PALING BAWAH- FOLLOW... akan muncul seperti di baah ini gb prop 7


11. Lihatlah lagi email Anda maka akan diperoleh email ucapan selamat (welcome ) lihat contoh gambar

                          SILAHKAN KLIK DI SINI6


12. kembalilah ke halaman Propeller ads silahkan klik sebelah kanan atas , seperti gambar di bawah ini:

13 Maka akan keluar gambar  berikut

MAU LIHAT GAMBARNYA ? SILAHKAN KLIK DI SINI7

14. Lalu klik pada register maka akan muncul gambar seperti ini prop 11


15. Klik pada PUBLISHER dan akan muncul gambar berikut

 UNTUK MELIHAT GAMBARNYA SILAHKAN KLIK DI SINI8


16 silahkan login dengan menggunakan username email anda dan paswordnya adalah sesuai dengan kode yang diberikan pada email selamat datang (emai yang ada welcome)
17 SETELAH LOGIN AKAN MUNCUL GAMBAR DASHBOARD YANG ISINYA SEPERTI GAMBAR DI BAWAH INI, LALU KLIK PADA KANAN ATAS SEPERTI GAMBAR BAWAH INI PROP 14

18 GAMBAR AKAN BERUBAH SEPERTI DI BAWAH INI LALU KLIK SITE SEPERTI GAMBAR DI BAWAH INI YANG DITUNJUKKAN DENGAN ANAK PANAH 

SILAHKAN LIHAT GAMBARNYA DENGAN CARA MENGKLIK DI SINI9

19.  Tampilan gambar setelah itu adalah seperti di bawah ini . Langkah selanjutnya klik add new chanel (kotak kanan atas ) kemudian klik lingkaran yang ada tulisannya popunder (lingkaran paling atas) lalu klik next (kotak kiri bawah)
20. Silahkan klik next setelah diisi alamat blognya seperti ini   prp 19

21 Copy lah kode iklan yang ditunjuk anak panah gambar di bawah ini


 GAMBARNYA ADA DI SINI. SILAHKAN KLIK10

21.kemudian pastekan pada blog anda yang ada setelan blog meta seperti di bawah ini

 SILAHKAN KLIK DI SINI11

DAN KLIK DI SINI2

22. Setelah diverifikasi maka klik add new site dan isikan url blog yang akan dipasangi iklan lalu klik submit seperti gb prop 22


23 Silakan klik get code lalu pasangkan pada blog Anda .Seperti gb Prop 23


YANG PAHAM SILAHKAN SEGERA DAFTAR DENGAN

                                            KLIK DI SINI

SEMOGA BERHASIL DAN JANGAN KIKIIR UNTUK BERBAGI ILMU. TRIM






Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Entri Populer

ADESENSE 4