Cara buat Slide Menu horisontal dibawah posting

Menu horisontal ini terletak dibawah posting. Selain lebih fungsional karena letaknya dibawah posting, dilihat dari tampilannya menu horisontal ini memang sangat menarik. Sehingga tampilan web atau blog kita menjadi lebih bervariatif. Selain kelebihan diatas menu horisontal ini saya lengkapi dengan efek slide yang menggunakan fitur transition, agar tampil lebih dinamis.
Slide Menu horisontal ini saya buat dengan menggunakan kode CSS dan beberapa kode HTML tanpa menggunakan kode javascript ataupun jQuery, sehingga menu ini akan bekerja lebih ringan.

LIHAT DEMO

OK... bila anda berminat memasang tombol ini, silahkan anda bisa ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode dibawah ini dan paste sebelum kode </head>:

<style type='text/css'>/*widget by noer cara buat web gratis.com*/ ul#menu-slide-cbwg { margin-left: 15px; padding: 0px; right: 10px; list-style: none; z-index:999999; } ul#menu-slide-cbwg li { width: 103px; display:inline; float:left; } ul#menu-slide-cbwg li a { display: block; float:left; width: 100px; height: 25px; background-color:#eee; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #aaa; text-decoration:none; text-align:center; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } ul#menu-slide-cbwg li a:hover{ background-color:#4152A7; border:1px solid #bbb; padding-top: 80px; } ul#menu-slide-cbwg li a span{ background-color:#4152A7; border-top:1px solid #fff; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); display: block; width: 100px; height: 25px; font-size:14px; font-weight:bold; color:#fff; } ul#menu-slide-cbwg li a span:hover{ font-size:14px; color:#4152A7; background-color:#eee; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } </style>

8. Copy kode dibawah ini dan paste setelah kode diatas :

<style type='text/css'>

ul#menu-slide-cbwg .item-1 a:hover
{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFhGCCu15x76WJKtf6rW6iYl9puMngUobAiroIq_Ysve7S19-8F_fwcJt0uxZ5QMZ3uNFO1Ut47Q-GeSEtsykYhj_uGJY213VqLrl0JcvpIL4Mk2e3INu15-YFl6jsbCZUfEBAYcfJ50Zq/s104/home.png);}

ul#menu-slide-cbwg .item-2 a:hover
{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJeRO4GhI2dZ0eWMXzj9Uc-nbFJSd80OPTvIckQJ78xzW1YSRSby6VPdKf3GbYPk1cMA8NWbwNANuJCrpFLAKIEtIYYi48BijHtq0UepH_NTidoR2BuTS4bwXY9yrdQU9S82Yl3YyAjcVs/s104/id_card.png);}

ul#menu-slide-cbwg .nitem-3 a:hover
{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYfR4Nh4cEFzF-d7umLtkABg7vZM8BhPcY3CuFboKYeW3zc7XWT_iXRhwlkaK1WajvNqxHc2-6HmJMO1ZDIr-wdIU2Q4IQ8U5fj40xJHDs9-uvCl4uydKI780QRv0pIb21gxHPMIWi0SEC/s104/promotion_new.png);}

ul#menu-slide-cbwg .item-4 a:hover
{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiukKG3MBPoIg00e_DP2CyXi94fH3ijq9MNoIWo3qRc2JZtax7UyPbMufLo28iy0fWz_MUGtuaV8DwyB9rmEFTfG3XeJPVrSxnvAYFxJuMUGolZ-dMFFCnBMYsWVog0gS_k0ZV5QS9RUNXK/s104/rss.png);}

ul#menu-slide-cbwg .item-5 a:hover
{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpAD5YvwmvLmeoUMR2R3G7VY2HPwm6uQxLZuBKgm7zH37OrXAl8HSKAOCo2eL18v5AjqR3zTEquePYx08o25Re7Mu_Tvl2rjldMyk7EbjnyVes5ca1nFQ4VTgtCUTT7-ItD73rnLtOXTCF/s104/mail.png);}

</style>

Catatan :

• Teks merah adalah ULR Icon yang ada pada setiap menu. Silahkan anda bisa ganti ULR dan Iconnya sesuai dengan menu yang anda buat.
• Sebagai refrensi, anda bisa dapatkan macam - macam bentuk icon di http://dryicons.com/free-icons/
• Anda bisa menambah dan mengurangi jumlah item menu, sesuai kebutuhan anda, tapi disesuaikan dengan lebar area yang ada.

9. Langkah selanjutnya cari kode di bawah ini atau yang mirip dengan kode ini :

<data:post.body/>

10. Copy kode dibawah ini dan paste setelah kode <data:post.body/>:

<ul id="menu-slide-cbwg">
 <li class="item-1">
<a href="ULR HALAMAN/ARTIKEL"><span>MENU-1</span></a>
</li>

 <li class="item-2">
<a href="ULR HALAMAN/ARTIKEL"><span>MENU-2</span></a>
</li>

 <li class="item-3">
<a href="ULR HALAMAN/ARTIKEL"><span>MENU-3</span></a>
</li>

 <li class="item-4">
<a href="ULR HALAMAN/ARTIKEL"><span>MENU-4</span></a>
</li>

 <li class="item-5">
<a href="ULR HALAMAN/ARTIKEL"><span>MENU-5</span></a>
</li>

</ul>

Catatan :

• Bila sudah menggunakan fasilitas "read more" letakkan kode <data:post.body/> setelah kode yang kedua.
• Teks warna BIRU pada kode ini harus sama dengan teks warna BIRU yang ada pada kode diatas

11.SIMPAN TEMPLATE.

Oh iya.... menu ini juga bisa diletakkan dimana saja seperti tab menu dibawah header.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.