Cara Memasang Tombol Menu Di Footer Versi New

randomposts

H allow sob, Baru-baru nih  PalmaHutabarat baru Saja posting tentang tutorial blog. Kali ini  PalmaHutabarat   akan sedikit berbagi tentang...

Social Media Profile Widget Keren Metro UI

Menu Hover Black Lava Hover Cool Style

Button Hover CSS3 Blink Cool

Hover Style CSS Buttons for Your Blogger Blog

Hallow sob, Baru-baru nih PalmaHutabarat baru Saja posting tentang tutorial blog. Kali ini  PalmaHutabarat  akan sedikit berbagi tentang Cara Memasang Widget Footer Keren Melayang pada blog. Di samping terlihat keren, sobat juga bisa menambahkan menu serta sub kategory pada footer tersebut. Nah, buat sobat yang penasaran dengan hasilnya, berikut screenshootnya.

Tampilannya nanti akan seperti ini :  Oke Sobat.

Bagi teman-teman yang ingin membuatnya, sangat mudah silahakan ikuti langkah berikut:

1. Buka blogger.com - Rancangan - Edit HTML.

2. Centang Expand Template Widget.

3. Copy paste kode berikut tepat diatas kode </body>

<!-- zFPmenu START -->
<div id="zfpm_div" style="display: none;">
<div id="zfpm_upperBox">
<!-- Place ads, text message, or anything here. -->
</div>
<ul id="zfpm_ul"><!-- Your menus start -->
<li class="dir"><a href="http://www.blogger.com/">Menu 1 </a>
<ul>
<li class="dir"><a href="http://www.blogger.com/">Submenu 1.1</a>
<ul>
<li><a href="http://www.blogger.com/link%20yang%20dituju">Sub-submenu 1.1.1</a></li>
<li><a href="http://www.blogger.com/link%20yang%20dituju">Sub-submenu 1.1.2</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/link%20yang%20dituju">Submenu 1.2</a></li>
<li><a href="http://www.blogger.com/link%20yang%20dituju">Submenu 1.3</a></li>
</ul>
</li>
<li class="dir"><a href="http://www.blogger.com/">Menu 2</a>
<ul>
<li class="dir"><a href="http://www.blogger.com/">Submenu 2.1</a>
<ul>
<li><a href="http://www.blogger.com/link%20yang%20dituju">Sub-submenu 2.1.1</a></li>
<li><a href="http://www.blogger.com/link%20yang%20dituju">Sub-submenu 2.1.2</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/link%20yang%20dituju">Submenu 2.2</a></li>
<li><a href="http://www.blogger.com/link%20yang%20dituju">Submenu 2.3</a></li>
</ul>
</li>
<!-- Your menus end --> </ul>
</div>
<script type="text/javascript">
var zfpm_colorTheme = &#39;dark&#39;
var zfpm_shareBox = &#39;no&#39;;
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
<script src='http://zfpmenu.googlecode.com/svn/trunk/js/zfpmenu.js' type='text/javascript'/>
<!-- zFPmenu END </script>

Sobat bisa mengedit berapa banyak submenunya, sesuai kebutuhan blog kalian. 

Attention :

Jika Sobat Pingin Lebih Banyak Menu Tinggal Tambah Kok Ke Dalam CSS/ JQuery Nya Yg Diatas

Oke Sobat BLOGGER ngerti kan.

Untuk kode yang warna merah, itu sobat harus memasukkan link yang dituju, sedangkan kode warna hijau, sobat dapat mengatur warna menu (dark atau light) dan apakah tombol social sharenya mau ditampilkan atau tidak (yes atau no).

Pratinjau terlebih dahulu, kalau tidak ada error, silahkan klik Simpan Template, dan menu keren di blog kalian sudah jadi.
Selamat Mencoba, sob..