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
- Pertama , silahkan sobat
masuk ke dasbhor blog sobat terlebih dahulu
- Masuk ke bagian Temlate
=> Edit Html
- Kemudian Salin dan letakkan kode berikut tepat di atas ]]</b:skin>
- (COPY DI SEBELAH INI ; /*----- TAB POPULER -----*/ #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
- Terkahir
simpan template dan lihat hasilnya
Taraa kini widget popular post anda sudah menjadi warna - warni , hembs mudah bukan cara bikin popular post jadi warna-warni , bila ada yang ingin ditanyakan silahkan komen dibawah yaEMOGA BERMANFAATBACA JUGA :1. CARA MENGURANGI BUNCIT PERUT http://caratoni17.blogspot.co.id/2017/02/cara-mengurangi-buncit-perut.html2. CARA/ UPAYA AGAR SEGERA MENDAPAT MOMONGAN http://caratoni17.blogspot.co.id/2017/03/cara-agar-segera-mendapat-momongan.html3. CARA AGAR ISTRI BISA PUAS DULUAN http://caratoni17.blogspot.co.id/2017/03/cara-agar-istri-bisa-puas-duluan.html4. CARA MENGUPAYAKAN AGAR MENDAPATKAN KETURUNAN LAKI- LAKI5. CARA MENDAPATKAN PASANGAN YANG SHOLIKHAH.CARA MEMBUAT AIR STRUM SEDERHANA. CARA MENGETAHUI KUTUP LISTRIK DC YANG POSITIP DAN NEGATIP SECARA SEDERHANAhttp://caratoni17.blogspot.co.id/2017/02/cara-mengetahui-kutup-listrik-dc-yang.html4. CARA MENGAWASI ANAK REMAJA5 CARA MENDIDIK ANAK BIAR JADI ANAK PENURUT http://caratoni17.blogspot.co.id/2017/02/cara-mendidik-anak-biar-jadi-anak.html6. CARA MENJAGA ROMANTISME SUAMI ISTRI7. CARA MENJAGA KEBAHAGIAAN KELUARGA8. CARA MEMBUAT SUAMI BETAH DI RUMAH9. CARA AGAR KITA BISA BERBUAT DENGAN IKHLAS10. CARA AGAR TIDAK GAMPANG STREES11. CARA MEMACU DIRI AGAR RAJIN BERIBADAH12 CARA AGAR HARTA KITA BERKAH13 CARA AGAR KITA DAN KELUARGA PANDAI BERSYUKUR http://caratoni17.blogspot.co.id/2017/02/cara-agar-kita-dan-keluarga-pandai.html14 CARA MENGURANGI /MENGHILANGKAN RASA ASIN DI IKAN KERING (GEREH) http://caratoni17.blogspot.co.id/2017/02/cara-mengurangi-menghilangkan-rasa-asin.html15 CARA MEMBUAT DAGING SATE EMPUK16 CARA AGAR ANAK TERJAMIN PENDIDIKAN DAN PERUMAHANNYA17. CARA AGAR BISA SEGERA DAPAT PORSI NAIK HAJI18 CARA MENDAPATKAN PASANGAN YANG SOLIKH19 CARA MENDAPATKAN PASANGAN YANG SHOLIKHAHMAAF NUMPANG PROMOPANDUAN RINGKAS MENGHASILKAN UANG DI PROPELLER ADS DISERTAI LANGKAH DAN GAMBARCobalah 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 SINI3.Pilihlah / KLIK kotak kiri bawah (BECOME A PUBLISHER)4. GAMBAR AKAN SEPERTI DI BAWAH IN1- KLIK DI SINI25. KLIK Lingkaran kiri atas (Individual account) akan keluar gambar seperti ini :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 SINI47. KLIK kotak bawah kanan SIGN UP AS PUBLISHER8. 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 gambar10. 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 SINI612. kembalilah ke halaman Propeller ads silahkan klik sebelah kanan atas , seperti gambar di bawah ini:
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 SINI816 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 PANAHSILAHKAN LIHAT GAMBARNYA DENGAN CARA MENGKLIK DI SINI919. 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 KLIK1021.kemudian pastekan pada blog anda yang ada setelan blog meta seperti di bawah ini
SILAHKAN KLIK DI SINI11
DAN KLIK DI SINI222. 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
SEMOGA BERHASIL DAN JANGAN KIKIIR UNTUK BERBAGI ILMU. TRIM
- Terkahir
simpan template dan lihat hasilnya
Tidak ada komentar:
Posting Komentar