Cara Membuat Navigasi Menu Bar Statis di Footer Blog
February 17, 2015
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.
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>
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/AVvXsEisLJwi5CLQzP5ljJS-4HQo5CiQ5ig2T16SLBuy4E8swXCAP3Fc1vw6SD213PdE0GYoTK0Q7w_Yx6I8g9VDxj6T9TVNbhY1RFckDURzmjH16nSy2S2lkdlCOPup5EllD1zeq8nGu_v87OHx/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;}
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>
// 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>
<td style='padding-left:20px;'><a href='http://facebook.com/cbblogger' title='Follow on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL8qWJTlvQfz4dApd6hnaWhxhgngWocvtRnGYv6OoU7PPbRHOCs8BaabZQC4IHd0rkECquN6b3TFxrhaLnvMg_Ro5UdfePaWG3aeHgJBAYgq13FdRlBCoYcRjaIbggKpzdoS8ERkXz1K03/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/AVvXsEi9SZ19GAER_aXThtiHGTmFWmc5EkUsVo9Ttf-jnVXsgzQX85tMzY-_7_Ci40Du9TsAIn9Fk-QuDsyZiq-nzslpU-18_S5gzUltt4nKqRbiFaEeBRrE2_l3MlUcKhANj51vLryxfptrgvjU/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/AVvXsEiPlW1n9H2NsmR8rUVorMZbiBw0_5pn5oDWz8VOD3Qoe6f-4K3vF7NxSX0DHjkqxHKJ7VaZ_iJaBlGjxvXIIAV0vS5eKc74AE5kEHFMVfQt0bL4Wegohx3sALE676K1L0Ohtz-y7-A8f_xu/s1600/rss-feed-icon2.png'/></a></td>
<div id='custom-toolbar'>
<img border='0' class='close-toolbar' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdMybhRRyT_o2-bN1KT3JRDvomRb-7ixL9XPQBwjj4aiPaatdgDCDFluqW9WgUtYZddEz9bZDtxf20iJ5EqpdXrj5ES6EM4WLtLx0aJCuZ6tbi1g5V5Is_tPz17j6hGOIT-Xzmb4dECat0/s1600/close_button.png' title='Close' width='17'/>
<table border='0' cellpadding='2'>
<tr>
<img border='0' class='close-toolbar' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdMybhRRyT_o2-bN1KT3JRDvomRb-7ixL9XPQBwjj4aiPaatdgDCDFluqW9WgUtYZddEz9bZDtxf20iJ5EqpdXrj5ES6EM4WLtLx0aJCuZ6tbi1g5V5Is_tPz17j6hGOIT-Xzmb4dECat0/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 == "") this.value = "Search here...";' onfocus='if (this.value == "Search here...") this.value = "";' size='28' type='text' value='Search here...'/></form></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("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Cen&hl=en&ie=UTF8"); return false;' rel='nofollow' title='English'><img align='absbottom' alt='English' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWzAS4XkDHwZuV7oMZjPRTC9goyzrwKQ11xSLLzwjRtnFTU8wn9CnnG8cB1hnSKjg5znrS_GzqnJaQld2UVQ4Ktg8FPDVClbYVYW2Rrup4mPG-GdLkDQ9LCWjjP9UXVilnHMYJ7b4S6TdH/s1600/United+Kingdom(Great+Britain).png' width='24'/></a></td>
<td><a class="google_translate" href='Javascript:void(0)' onclick="window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Cde&hl=en&ie=UTF8"); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifpA1oKcLDgE_gDNVTqylq7J1WcXUHuHldiEQmtLbRQmjX3jQ9xLuncIj2TFGGs7wUu9OicuAd-FGuW4jimZfx3jjw319m1z366I7tbldLrMLorpLBzyobdaLgYkwZCLz2M-WkGKLdJHP0/s1600/Germany.png" width="24"/></a></td>
<td><a class="google_translate" href='Javascript:void(0)' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Cfr&hl=en&ie=UTF8"); return false;' rel='nofollow' title='French'><img align='absbottom' alt='French' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO3IbhBYa1QSKEI16ZSY0dGmlw8RZJregqPTKuEbgKYknFx8bl-LjOTw17mKFyQDMtE9TD2oRVKUz7hv_G7MPvNGcIv3KRpIbNDJjd24I5Zk9H1W6iRg8_grmYTHVKuSscu-BduBnXjS3T/s1600/France.png' width='24'/></a></td>
<td><a class="google_translate" href='Javascript:void(0)' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Car&hl=en&ie=UTF8"); return false;' rel='nofollow' title='Arabic'><img align='absbottom' alt='Arabic' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKa3RKq1XMdeqmoR4O3EJyBtqYkyBABdKfho14eGXoLoxchujq1wjjV5P9TbzAHLz7tWbEX-skjkYv2vp6ZzWtqDHfPqiSKbWEKh0CYScxmcVMJ_lTEHrjcZinmr0B6UBoM8V4wvjMGgmh/s1600/Saudi+Arabia.png' width='24'/></a></td>
<td><a class="google_translate" href='Javascript:void(0)' onclick='window.open("http://www.google.com/translate?u="+encodeURIComponent(location.href)+"&langpair=auto%7Czh-cn&hl=en&ie=UTF8"); 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/AVvXsEjgPksw5akw0Zd4jSVdiULslnV7P5RFA3MWfVmK6gX5E-L4JLjAPn9qpa1-ZHmzfLM_EOt46Tc4YRKu_Q2N3omIxzuIkgWhzXMtV7nGg7iWostHiTjAeoxrVsnbqlvHTSnSKcTflJp6hmhl/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).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Diamankan dulu ni om.
ReplyDeletebang, koq kode diatas yg ad pas disave yg muncul ya tulisan kode'a lagi....
ReplyDeletesolusi'a gmn?