Cara Membuat Navigasi Bar Mengambang

Navigasi Bar berfungsi untuk memberi petunjuk untuk pengunjung. Navigasi Bar ini mempunyai Fitur yang banyak. Seperti Tombol Posting Lama maupun Baru, Tombol Muat Ulang, Tombol Beranda, dan Tombol kembali Keatas. untuk itu saya akan memberi tahu cara untuk membuat Navigasi Bar. Navigar Bar ini Juga mempunyai kelebihan yaitu Navigasi yang mengambang sehingga tidak memakan banyak tempat. untuk membuatnya silahkan anda ikuti cara berikut ini:

• Silahkan Login Ke Blogger Anda.
• Setelah itu, Klik Menu Template --> Klik Tombol Edit HTML untuk mengedit kode HTML template anda.
• Centang Expand Template Widget, Lalu, Cari Kode ]]></b:skin> dengan Menekan CTRL+F atau dengan Menekan F3.
• Masukan Kode Berikut ini Diatas kode ]]></b:skin> :

#float-menu{position:fixed;top:20%;left:0;border-top:1px solid #CCC;border-right:1px solid #CCC;border-bottom:1px solid #CCC;background:#EEE} #float-menu ul{padding:0} #float-menu li{margin:5px;list-style-type:none} #float-menu li,#float-menu li a{width:24px;height:24px} #float-menu li a{float:left} #float-menu #menu-right,#float-menu #menu-left,#float-menu li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqdzTdQlYEdoomlKlzPfAB1UacfzlRNSIaELT99MIrF0l5pSL7Hlb4rbFBVYyifXn1Se0AXRXbxFmHWcGayTaygHVCfwRgP4swxjj4SXe8NWTM9TXhqFKJzNKoCZCcYIIgYJEFUPunYPlU/s1600/float+menu.png)} #float-menu #menu-right a{background-position:0 -120px} #float-menu #menu-right a:hover,#float-menu #menu-right{background-position:-24px -120px} #float-menu #menu-left a{background-position:0 -24px} #float-menu #menu-left a:hover,#float-menu #menu-left{background-position:-24px -24px} #float-menu #menu-random a{background-position:0 -48px} #float-menu #menu-random a:hover{background-position:-24px -48px} #float-menu #menu-home a{background-position:0 -72px} #float-menu #menu-home a:hover{background-position:-24px -72px} #float-menu #menu-top a{background-position:0 -96px} #float-menu #menu-top a:hover{background-position:-24px -96px}

• Setelah itu, Cari Kode <b:includable id='main' var='top'> dengan Menekan CTRL+F atau dengan Menekan F3.
• Masukan Kode Berikut ini dibawah kode <b:includable id='main' var='top'> :

<div id='float-menu'> <ul> <li id='menu-right'> <b:if cond='data:olderPageUrl'> <b:if cond='data:olderPageUrl != data:blog.url'> <a expr:href='data:olderPageUrl' rel='prev' expr:title='data:olderPageTitle'></a> </b:if> </b:if> </li> <li id='menu-left'> <b:if cond='data:newerPageUrl'> <b:if cond='data:newerPageUrl != data:blog.url'> <a expr:href='data:newerPageUrl' rel='next' expr:title='data:newerPageTitle'></a> </b:if> </b:if> </li> <li id='menu-random'> <script type='text/javaScript'>//<![CDATA[ var rdp_current=0;total_posts=0;function totalposts(json){total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){rdp_current=1+Math.round(Math.random()*(total_posts-1))}; //]]></script> <script type='text/javaScript'>//<![CDATA[ function rdp(json){var dw='';entry=json.feed.entry[0];for(var i=0;i<entry.link.length;i++){if(entry.link[i].rel=='alternate'){rdp_posturl=entry.link[i].href}};dw+='<a href="'+rdp_posturl+'" title="Reload" rel="nofollow"></a>';document.getElementById('menu-random').innerHTML=dw;};getvalue();document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current+'&max-results=1&callback=rdp\"><\/script>'); //]]></script> </li> <li id='menu-home'> <a expr:href='data:blog.homepageUrl' title='Home'/> </li> <li id='menu-top'> <a href='#' title='Back to top' rel="nofollow"/> </li> </ul> </div>

• Setelah itu, Klik Tombol Pratinjau untuk meninjau Kesalahan, Jika tidak ada kesalahan, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses.

Your-BelajarBLOG.