Cara Membuat Navigasi Menu Bar Statis di Footer Blog

SEBENARNYA menu bar gak pas disebut navigasi menu. Bahasa Inggrisnya "Floating Sticky Footer Bar", setidaknya menurut Help Blogger yang membagikan tips desain mempercantik blog ini.

Contoh atau demonya bisa Anda lihat di CB Blogger Lab. Lihat bagian bawah, bagian Footer. Kayaknya bisa juga dipasang di atas blog, seperti dalam tips Membuat Toolbar di Atas Header Blog.

Footer bar statis ini, selain mempercantik blog, juga menambah menu navigasi dan elemen lain yang ingin kita tonjolkan di halaman depan. Kelebihannya, static footer menu bar ini bisa dihilangkan oleh pengguna jika meras tertanggu, dengan satu klik saja.

Cara Membuat Navigasi Menu Bar Statis di Footer (Sticky Footer Bar)

1. Seperti biasa, awali dengan klik "Template" > "Edit HTML".
2. Copy & paste kode berikut ini di atas kode ]]></b:skin>

#custom-toolbar {overflow: auto;position: fixed;

background: #1B1B1B url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVoNtl8ZH__w60BJ6U2lf3rsRkJQkWcLKiRNzbVhD9FIwUwBA19_4N8DniVwGO1bObcnrzIPcFeAUQcb3WA8JEiSElTR53dwAoZg5L_w2zCBr5uit4sJ-Z7k-ud18ex2_-cge0czxaJHIn/s1600/pagelist.png") repeat-x scroll 0 bottom;
font: bold 13px/17px "Helvetica Neue",Helvetica,Arial,Geneva,sans-serif;
height: 33px;margin: 0 auto;width: 100%;bottom:0px;right:0;}

.close-toolbar {float: right;margin-top:6px;padding-right: 10px;cursor: pointer;}
.search-text {color: #D1D1D1;text-align: center;border-radius: 10px;}

.google_translate:hover img {filter:alpha(opacity=0.90);-moz-opacity: 0.90;opacity: 0.90;border:0;}

3. Copy & paste kode berikut ini di atas kode </head>

<script type='text/javascript'>
// Custom Toolbar for Blogger (helplogger.blogspot.com)
//<![CDATA[
var toolbar_blogger = new Array();
var toolbar_clear = new Array();
function toolbarFloat(toolb) {
toolbar_blogger[toolbar_blogger.length] = this;
var ftrpointer = eval(toolbar_blogger.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.toolbsrc = document.all? document.all[toolb] : document.getElementById(toolb);
this.toolbsrc.height = this.toolbsrc.offsetHeight;
this.toolbheight = this.cmode.clientHeight;
this.toolboffset = toolbGetOffsetY(toolbar_blogger[toolbpointer]);
var toolbbar = 'toolbar_clear['+toolbpointer+'] = setInterval("toolbarFloatInit(toolbar_blogger['+toolbpointer+'])",1);';
toolbbar = toolbbar;
eval(toolbbar);
}

function toolbGetOffsetY(toolb) {
var toolbTotOffset = parseInt(toolb.mtasrc.offsetTop);
var parentOffset = toolb.toolbsrc.offsetParent;
while ( parentOffset != null ) {
toolbTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}

return toolbTotOffset;
}

function toolbarFloatInit(toolb) {
toolb.pagetop = toolb.cmode.scrollTop;
toolb.toolbsrc.style.top = toolb.pagetop - toolb.mtaoffset + "px";
}

function closeTopAds() {
document.getElementById("custom-toolbar").style.visibility = "hidden";
}
//]]>
</script>

4. Terakhir, Copy & paste kode berikut ini di atas kode </body>

<div id='custom-toolbar'>
<img border='0' class='close-toolbar' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4NoB8I9XHHSdBhKkZc3sKpSKPDqcs2tQB1nhjSGIBZ_v77O5YFxZoQAhccY5n1fgJEBxVd7WB266LzUosai-s1gCT4wUtJ21FTk1s9RlddZ8i2rbBrnfBVIH4fVG1Dzm9qUwfXHUwTUBe/s1600/close_button.png' title='Close' width='17'/>
<table border='0' cellpadding='2'>
<tr>

<td style='padding-left:30px; padding-right:50px;'><form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>

<input class='search-text' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Search here...&quot;;' onfocus='if (this.value == &quot;Search here...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Search here...'/></form></td>

<td style='padding-left:20px;'><a href='http://facebook.com/cbblogger' title='Follow on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbJOKYUXMb20LaXKxCXCqS2yMPiCfp3BIjeo3yuWyFnUA-ke7_F3dA1U528skWgg1tIo64LisZs72viFhxsZGzC3LENl4uMOpBXJ296Td9Ar8J6RVN_KHAad9nqW0i9FSyeX72b4QHeCSu/s1600/facebook-icon.png'/></a></td>

<td><a href='http://twitter.com/contohblog' target='_blank' title='Follow on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGZ3bIGkBX29evv7z6YlaFKOgced5TtLK6wS9bnoHfWPHtm77YLNTgnhBER9UKycwYRCtf3Ad0EV35r3oAoOXNTpBHNxGd-vUQ_qe8iCPgO6FMMH2UcWECkzPXobV8xyPGve7VawgaIcYy/s1600/twitter-icon.png'/></a></td>

<td><a href='http://feeds.feedburner.com/contohblognih' target='_blank' title='Subscribe to Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuOqYLgYxneh_syjHjUq5ltRGq034p_7xB91HkC5WA5zuvbiwZ-tDpWMzmXx4c1IL1OINgWxN19_5OKeSSYmylWbZSbLAA370ntcDJOKh46HLf7M4lv1-xQ02xny0izYI8KoUKpbB6ufWG/s1600/rss-feed-icon2.png'/></a></td>

<td style='padding-left:40px; padding-top: 5px;'><a class='twitter-share-button' data-count='horizontal' data-lang='en' href='http://twitter.com/share' target='_blank' title='Publish on Twitter'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>

<td><a href='http://www.facebook.com/sharer.php' target='_blank' name='fb_share' title='Publish on Facebook' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td>

<td style='padding-left:60px;'><a class="google_translate" href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cen&amp;hl=en&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='English'><img align='absbottom' alt='English' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMMkn8KGK17sYXh1ULIijphTubM6fYJzzJGZLQfHHeU70XJNI9F6RRtapGMxl5HvBsjEAiDeLh-9TCnbnui9powywnTcE9PLTRNLtg7sXbvSRpploPjIz1moDL5Kyxxmmqk3h1tcETZOt3/s1600/United+Kingdom(Great+Britain).png' width='24'/></a></td>

<td><a class="google_translate" href='Javascript:void(0)' onclick="window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cde&amp;hl=en&amp;ie=UTF8&quot;); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs0Ns9oMhi0YGETY6ut1sUQoyCuHDfhZW3_3Z4fgsBUuXipdWyrtJdzFnmTQceFBnCG4OkH9KXI1PidL4V06mbkB32D65jziAWC52mCT6S2mhPgi5xqFOdjGS2ynyixsiTXMkQ3_-hS30y/s1600/Germany.png" width="24"/></a></td>

<td><a class="google_translate" href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Cfr&amp;hl=en&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='French'><img align='absbottom' alt='French' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh66v2_12-uGsYMLkm3W4vtLaL02NhFSmFxioWEm62QZ_D8xL74dncVELsGT1DizcLKTdsDl0tuM60BLw3brOaoqIctGwGi1AyKoh6aTJQCgC_O6VLAFQNyIfp3R7W_XXMqdlppC8-5y0AE/s1600/France.png' width='24'/></a></td>

<td><a class="google_translate" href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Car&amp;hl=en&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='Arabic'><img align='absbottom' alt='Arabic' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhU5NP86Qtf9zO-ZWsXsLAvNsNxld_v4mBZcTVfwFtqt7flbVQwoLwFNfzENARhdFEuqMqYsEMt-94KRo4tvFlQGJPx7zDoftK5DxTaHoO-wlt4PjrxjdpzSK76Q6n4JicnGwQG_Uajiol/s1600/Saudi+Arabia.png' width='24'/></a></td>

<td><a class="google_translate" href='Javascript:void(0)' onclick='window.open(&quot;http://www.google.com/translate?u=&quot;+encodeURIComponent(location.href)+&quot;&amp;langpair=auto%7Czh-cn&amp;hl=en&amp;ie=UTF8&quot;); return false;' rel='nofollow' title='Chinese Simplified'><img align='absbottom' alt='Chinese Simplified' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVlBknXcn-g18Q6pqkoDgmSnWjrAkHPYKUw3JRu4E1VJ0GK8JysrJ_K_6y27rsi8FK6Ao-d3vCY5RcEkyz7SrBkEVcSy47UVrweG0LQA8W1ns5Zn08FvBYAE1DKlQnW_DK4k2xVQ_cZ6Ne/s1600/China.png' width='24'/></a></td>

</tr>

</table>

</div>

Jika mau menghilangkan menu atau link, hapus saja kode antara <td> ... </td>.  

Demikian juga jika mau menambah menu atau link baru, tinggal tambah dengan diapit kode <td> dan kode penutup </td>.

Demikian Cara Membuat Navigasi Menu Bar Statis di Footer Blog. Boleh dicoba. (http://contohblognih.blogspot.com).*

Sumber

Tweet

Jangan sampai ketinggalan postingan-postingan terbaik dari SEO Sederhana Fast. Berlangganan melalui email sekarang juga:

Atau sobat juga bisa follow SEO Sederhana Fast dengan mengklik tombol di bawah ini:

Artikel keren lainnya:

Ditulis oleh akbar pada tanggal Senin, 16 Februari 2015