Cara Membuat Menu Navigasi Floating dan menambah element baru dibawah header

Navigasi Folating resvonsive Seo Friendly - Membuat menu navigasi untuk di terapkan di blog dengan tujuan mempercantik tampilan web bukan lah hal yang sedikit, bahkan sangat banyak beredaran seperti hal nya membuat navigasi di atas header, page laman diatas header dan menambah element blog di bawah header dan sebagainya. Seperti yang akan saya jelaskan di bawah ini, dari beberapa kumpulan navigasi resvonsif salah satunya navigasi Floating.

Cara ini sudah saya terapkan di blog saya sendiri dan berhasil tanpa mengalami eror sedikitpun. Bagi anda yang kiranya tertarik untuk mencoba merubah tampilan atau hoby dengan mengotak-ngatik template, tidak ada salah nya cara ini anda gunakan sebagai bahan percobaan, siapa tau cocok kan lumayan buat nambah sesuatu yang enak di pandang ketika blog di visit oleh pengunjung.

Untuk masalah warna bisa anda cocokan dengan template anda sendiri dan cara penerapan dan pengubahanya pun sanagat mudah dan tidak ribet, tentunya untuk blogger newbie seperti saya ini sangat tidak suka dengan keribetan yang membuat pusing kepala ketika berhadapan dengan yang namanya Coding. Untuk lebih jelas nya mari kita simak cara berikut :

Cara Membuat Menu naviagasi Floating di blog

1. Anda masuk ke Dashbord blog, lalu lanjut dengan klik > Template > Edit HTML
2. Bila perlu anda Backup terlebih dahulu, ini bertujuan untuk mencegah terjadinya kesalahan
3. Gunakan CTRL+F untuk mempermudah anda melakukan pencarian kode HTML
4. Tuliskan di kolom pencarian tersebut dengan kode CSS Berikut :

]]></b:skin> atau bisa juga dengan mengetikan ]]><

5. Jika sudah anda temukan, letakan kode di bawah ini di atas kode tersebut

 /*NAVIGASI (FLOATING) RESVONSIVE*/
.menu {text-shadow:none;position: fixed;height: 100%;width: 10px;background:      #000000;transition:width 1s;overflow: hidden;font-family: 'Offside', sans-serif;z-index: 99;left:0;top:0}
.menu:hover {width: 210px;}
.menuItem span {position: absolute;left:60px;top:30px;transition:color 1s;color:rgba(255,255,255,0);}
.menu:hover .menuItem  span {color:rgba(255,255,255,1);}
.menuItem {color:#fff;position: relative;padding: 18px;transition:border .4s, background .1s;}
.menuItem a {color:#fff;}
.menuItem:hover {background: #000000;cursor: pointer;}
.satu {border-left:5px solid #000000;}
.satu:hover{border-left:18px solid #16a085;}
.dua {border-left:5px solid #2f4f4f;}
.dua:hover {border-left:18px solid #2f4f4f;}
.tiga {border-left:5px solid #8e44ad;}
.tiga:hover {border-left:18px solid #8e44ad;}
.empat {border-left:5px solid #191970;}
.empat:hover {border-left:18px solid #e67e22;}
.lima {border-left:5px solid #e74c3c;}
.lima:hover {border-left:18px solid #e74c3c;}

6. Langkah selanjutnya anda cari kode </body> lalu letakan kode di bawah ini tepat di atas kode tersebut

* <div class='menu'><div class='menuItem satu'>1<span><a href='#'>Media</a></span></div><div class='menuItem dua'>2<span><a href='#'>Tutorial</a></span></div><div class='menuItem tiga'>3<span><a href='#'>Blogging</a></span></div><div class='menuItem empat'>4<span><a href='#'>Tools</a></span></div><div class='menuItem lima'>5<span><a href='#'>Bisnis</a></span></div></div>

"NOTE"

Anda ubah tanda ( # ) dengan Link url blog anda sendiri. Dan untuk warna yang tidak sesuai dengan template yang anda gunakan, silahkan ubah kode warna di atas dengan kode warna yang sesuai keinginan anda. Letak nya di bagian </b:skin> di bawah /*navigasi floating resvonsive*/ 

Berikutnya ada beberapa tambahan dari saya mengenai bagaimana cara membuat element baru di template anda, untuk jenis element ini sendiri memiliki beberapa bagian seperti element di atas footer, element, di bawah id main blog bahkan ada yang sampai menambah tiga element baru di atas footer blog.

Seperti di bawah ini saya akan bagikan untuk anda yang menggunakan template yang element di tata laetak blog tersebut masih kurang untuk keperluan tertentu.

Cara Menambah Elemen Baru di bawah header 

Untuk langkah dan penerapanya pun sama dengan cara di atas, hanya jenis ( CSS Dan HTML ) nya saja yang berbeda.

1. Login kembali dan lakukan seperti cara pertama
2. Edit HTML dan jangan lupa Backup kembali
3. Cari kode ]]></b:skin> dan letakan kode di bawah ini tepat diatas kode tersebut

#Under_header{margin:10px 0;padding:1%;width:98%;}

 4. Silahkan anda cari kode yang seperti di bawah ini, bila tidak di temukan, carilah yang sedikit mirip

<div id='header-wrapper'>
<b section class='header' id='header' maxwidget=
<b:widget id='header1'locked='true'title='test(Header)'type='header'/>
<b:section>
</div>

5. Silahkan anda salin kode di bawah ini letaknya pas di bawah kode tersebut

<div id=Under_Header>
<b:section class='header' id='Underheader'preferred='yes'/>
</div>

Terakhir silahkan anda Save Template dan lihat hasilnya, jika tidak juga muncul, maka refres kembali browser anda dan lihat kembali apakah sudah ada perubahan atau belum.

Bagaimana sangat amat mudah bukan ? Mohon maaf di bagian selain Blockuote saya pasang anti Cop, jadi anda salin di ketikan di template anda, saya rasa itu lebih bagus, ya itung-itung belajar dan berkenalan hehehe. Mungkin itu saja yang bisa saya bagikan mengenai bagaimana cara membuat navigasi Floating dan menambah element baru di bawah header blog. Semoga bermanfaat. Terimakasih

Blogging modifikasi

Related Posts