Cara Membuat Toolbar Sticky Di Bawah Blog. Sahabat Histutor, pada dasarnya banyak sekali metode yang bisa kita gunakan untuk dapat membuat tampilan blog milik kita menjadi lebih baik, salah satunya menambahkan sebuah toolbar yang letaknya di bawah blog atau sticky di bagian footer, pada kesempatan yang sangat singkat ini karena saya ada jadwal piket malam, maka sebelum berangkat kerja, saya akan membagikan sebuah tutorial Cara Membuat Toolbar Sticky Dibawah Blog.
 |
| Cara Membuat Toolbar Sticky Di Bawah Blog |
Toolbar ini dapat sobat modifikasi sesuai keinginan sobat , mulai dari warna, link sosial media, sampai pada letak posisinya. ingat sebelum memualai ada baiknya backup dulu template sobat, agar jika terjadi kesalahan maka sobat dapat mengembalikannya seperti semula lagi.
Langsung saja simak langkah-langkahnya dibawah ini.
1. Login ke akun blogger anda2. Click On Template » Edit HTML
3. Gunakan Ctrl+F untuk menemukan kode
]]></b:skin> atau </style> 4. Setelah ketemu letakan kode
CSS script diatas kode ]]></b:skin> atau </style> #custom-toolbar{overflow:hidden;position:fixed;background:#1B1B1B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbY7hBrK3LZyUhxilLMNWwz6cwBKVm9DC5wnxBpQQqh048-2KyzP-F3c1dOmdR7hco6Iv1SFVua1gmYl6mAxsvhEczOjxfcK5cjEjBpXmsFqte3siFkWIyH44WlwkTHMtpS0Lc_cEpeHeP/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:0;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:.9;opacity:.9;border:0}5. Tambahkan
Javascript dibawah ini sebelum kode </head> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<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>6. Letakan kode
HTML dibawah ini sebelum kode </body><div id='custom-toolbar'>
<img border='0' class='close-toolbar' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYImi3g93Zq4YbPY-HEtMOMhMb1xnxNbBpVnnIAoEQAKy-Ke4Te_UuxMK8ayHJ1IikyovB_Q3TneK_JvvMzokF5izdshU6WYwV4Y6C43IcFid8MDrBF95mkQs8tm3jZP9yqkrDK8N-e-Px/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:20px;'><a href='http://facebook.com/' title='Follow on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijRwBb6k9V4mzIIOO1blitWY0VifUXTydokZouv-E4p9etn6YnLSGLrSxTn0zeiNOteMTO50j3bBCVwDWWqN2r24DsrP8GJOHQ-K6yPCpWkr557rl94RBwCW5bhyRutWe3kr4G5KN3RYLd/s1600/facebook-icon.png'/></a></td>
<td><a href='http://twitter.com/' target='_blank' title='Follow on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVu5oev3_bwFufmbmp-KnqeEDHfvAOhT_WRusNA2QvxhDm2ogFrniyKXuULwP-6JppGqs9koTooHguVk2IUKpjZbGlWEM6WlpWCFBeTGzKquVMtywm1n2AELB4HnXvyCP3_Aot-_3b8Shx/s1600/twitter-icon.png'/></a></td>
<td><a href='http://feeds.feedburner.com/' target='_blank' title='Subscribe to Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG0ZjBAGMbAViwxHYYlpImpaivpZtgeGS85kBt8c857qEQdS30B109_00nS61l0WqbUbqS6VwpQKUTuSvU3hijdzrHpkJHhtxjjE7e3W-7g1RI_80yIjLPLkX-61ltsMZBMkkC5k5-b3NV/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' name='fb_share' target='_blank' 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/AVvXsEjmzzFK2jhBKPIMTVy3xYiIdYXAoCL0-kOCxcLEgWvH1oTvuFasFqoFdy8q8jYiw4R-G3O9D7veVr03hPnzV11Vy2E6xZBzUPXG0DSS6hLjn02eiOeVhjK_Whyphenhyphenj9jUbMmrppKVaUPQQ9J7v/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 align='absbottom' alt='German' border='0' height='24' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7pJUwKmLh83vMp44Q5ySKAl2XrOZQnSw5rOedidyj7ChojaJtQ9lZXAhqT3xQLXkjVK_NHJElUf_9EQaMV7ijZ1U7icd13XSXh1Ltr01rQsjZzRX1I1thQWgmCl1y4r23_mQuTKA1k3mG/s1600/Germany.png' title='German' 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/AVvXsEirSvvWApRaEPxVWw79-yMuCWT0qZ_SU6rBumC23rqmQki7jhqjGXIyv8rIkVjMbwHfB059U4t0_ApGAAGB-HIdZLYDFor8XPRwvaTOo-wlquiiGamlnskIvgOLrtOQawKyfpXxioF3ZAel/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/AVvXsEi_71eDXZwXlKV11tWrTkxKurqp5NPWSzFZb01CtBBY4QZ4BOAW0M946bR8wjAsL1UhN6AofSlMr7KtwDaLb2ULAJLbSULJhVeN0PECzHHk6gT_v_BEtF87AsnouN4FHYd_1mikhbGh4mhO/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/AVvXsEijb7u2Ef36BmiaWZZsG7UOzV_Y4PzGQPZPGhj_Zxpv2D9jboPIF13s2nwYCPZdUrUg4NZ95vWE7NDRdGj6m63LMYB9rGt8u8edkQGpXlCKjfMWSahcDkPhMRP40TCMuhrvn-f5lrjtQECs/s1600/China.png' width='24'/></a></td>
</tr>
</table>
</div>
Simpan Template Sobat dan lihat hasilnya.
Silahkan tinggalkan komentar jika anda menemui kedala dalam pemasangan Toolbar Sticky Di Bawah Blog ini, mari kita bahas bersama!
Demikian sedikit penjelasan tentang Cara Membuat Toolbar Sticky Di Bawah Blog, jika ada kesalahan dalam penulisan saya mohon maaf dan semoga bermanfaat. Saya akan sangat senang dan berterimakasih jika sobat berkenan untuk berkomentar di blog ini.
0 Comments: