Membuat Slide Menu horisontal dibawah posting

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>:

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://lh3.googleusercontent.com/-8Ig-Nhj-zsU/TiHQPIkd_KI/AAAAAAAAA4I/KxPQ5iZgBXA/s104/home.png);}

ul#menu-slide-cbwg .item-2 a:hover
{ background-image: url(https://lh6.googleusercontent.com/-nuD-DiQQIq4/TiHQPhqCfCI/AAAAAAAAA4M/oDSH5xMZdc4/s104/id_card.png);}

ul#menu-slide-cbwg .nitem-3 a:hover
{ background-image: url(https://lh5.googleusercontent.com/-eZ55yl4Z_fQ/TiHQQX_WQuI/AAAAAAAAA4U/D4GjeJ2FLLg/s104/promotion_new.png);}

ul#menu-slide-cbwg .item-4 a:hover
{ background-image: url(https://lh6.googleusercontent.com/-seiG7u6dYL4/TiHQQmB6LEI/AAAAAAAAA4Y/9razNbNcvWc/s104/rss.png);}

ul#menu-slide-cbwg .item-5 a:hover
{ background-image: url(https://lh6.googleusercontent.com/-kAEzDRvNYlY/TiHQP2rBcRI/AAAAAAAAA4Q/GBw4l-UElWQ/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 warnaBIRU 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....

Sumber : Tutorial Blogger

Related Post:

Tips Blogspot

• Cara Memasang Tombol Share Facebook, Twitter dan Google+ Di Bawah Judul Artikel
• Cara Mudah Pasang YM Di Blog
• Cara Pasang Rich Snippet Di Blogspot Dengan Mudah
• Membuat Bounce & Share - Widget Social Bookmarking Blogger
• Mengganti Tulisan Older Post dan Newer Post Dengan Judul Arrtikel
• How to Install Related Posts Widget related links at the side column (OK)
• Cara Menambah Gadget diatas Header
• Hidden Chatbox
• Widget artikel terkait / Related post dgn Scroll
• Code Color
• Edit Lebar Posting Pada Template
• Cara Memasang Button Share Artikel Di Blog
• Top 15 Most Popular Social Bookmarking Websites | August 2012
• Cara Update Blog Ke Webrank Stats
• 5 Tools For Tracking Your Digital PR Campaigns
• Membuat Widget Like Facebook Melayang
• membuat scroll pada artikel terkait / related post
• New WordPress plugin: Tag Pages
• Cara Membuat Artikel Terkait Dengan Gambar
• CARA MENGUKUR KECEPATAN BLOG
• Membuat 3 Kolom Footer
• Kode Warna ( Color Code )
• Membuat Back To Top Button (100% OK)
• Effect Scroll Text pada artikel tertentu

Widget by [ Iptek-4u ]

Posted in: Tips Blogspot