Gara-gara cari Template SEO friendly, Blog jadi terabaikan....
Pada kesempatan kali ini saya akan share cara membuat menu melayang di sudut blog, seperti yang ada di sudut kanan bawah blog saya
ini. Menu ini juga dapat kamu edit sesuai kebutuhan, mau dibuat seperti
daftar menu, daftar kategori, atau bahkan daftar link-link keluar yang
berguna, dan juga dilengkapi dengan tombol navigasi ke atas dan kebawah.
Tampilannya seperti ini :
Bagi teman-teman yang ingin membuatnya, sangat mudah silahkan 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='/'>Menu 1 </a>
<ul>
<li class='dir'><a href='/'>Submenu 1.1</a>
<ul>
<li><a href=' link yang dituju '>Sub-submenu 1.1.1</a></li>
<li><a href=' link yang dituju '>Sub-submenu 1.1.2</a></li>
</ul>
</li>
<li><a href=' link yang dituju '>Submenu 1.2</a></li>
<li><a href=' link yang dituju '>Submenu 1.3</a></li>
</ul>
</li>
<li class='dir'><a href='/'>Menu 2</a>
<ul>
<li class='dir'><a href='/'>Submenu 2.1</a>
<ul>
<li><a href=' link yang dituju '>Sub-submenu 2.1.1</a></li>
<li><a href=' link yang dituju '>Sub-submenu 2.1.2</a></li>
</ul>
</li>
<li><a href=' link yang dituju '>Submenu 2.2</a></li>
<li><a href=' link yang dituju '>Submenu 2.3</a></li>
</ul>
</li>
<!-- Your menus end -->
</ul></div>
<script type='text/javascript'>
var zfpm_colorTheme = 'dark'
var zfpm_shareBox = 'no';
</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 -->
<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='/'>Menu 1 </a>
<ul>
<li class='dir'><a href='/'>Submenu 1.1</a>
<ul>
<li><a href=' link yang dituju '>Sub-submenu 1.1.1</a></li>
<li><a href=' link yang dituju '>Sub-submenu 1.1.2</a></li>
</ul>
</li>
<li><a href=' link yang dituju '>Submenu 1.2</a></li>
<li><a href=' link yang dituju '>Submenu 1.3</a></li>
</ul>
</li>
<li class='dir'><a href='/'>Menu 2</a>
<ul>
<li class='dir'><a href='/'>Submenu 2.1</a>
<ul>
<li><a href=' link yang dituju '>Sub-submenu 2.1.1</a></li>
<li><a href=' link yang dituju '>Sub-submenu 2.1.2</a></li>
</ul>
</li>
<li><a href=' link yang dituju '>Submenu 2.2</a></li>
<li><a href=' link yang dituju '>Submenu 2.3</a></li>
</ul>
</li>
<!-- Your menus end -->
</ul></div>
<script type='text/javascript'>
var zfpm_colorTheme = 'dark'
var zfpm_shareBox = 'no';
</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 -->
*NOTE: Kamu bisa mengedit berapa banyak submenunya, sesuai kebutuhan blog kamu.
4. Untuk kode yang warna merah, itu kamu harus memasukkan link yang dituju, sedangkan kode warna hijau, kamu dapat mengatur warna menu (dark atau light) dan apakah tombol sosial sharenya mau ditampilkan atau tidak (yes atau no).
5.
Pratinjau terlebih dahulu, kalau tidak ada error, silahkan klik Simpan
Template, dan menu keren di blog anda sudah jadi.
Artikel Terkait:
Share it to your friends..!
 |
2 Comments
