Tạo sticky bar đẹp cho blog

Tạo thanh ngang bar cố định cho blogspot

(Thủ thuật blogspot) - Bài này Nguoichiase.com xin chia các bạn tạo một thanh menu điều hướng cố định nằm phía dưới cùng của trang cho Blogger (xem hình trên). Sau đây là các bước thực hiện thủ thuật:  

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu > Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ ]]></b:skin>:

1/* Sticky Bar by nguoichiase.com */
#custom-toolbar {
overflow: auto;
position: fixed;
background: #1B1B1B url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx1D394PEP-kn1twgX28CDrpRXCIY8oFkT753NglvTd-SgSZOh847V5boiXL8MdmXd5Z3FmNn9cl5N2QtCuBmJN2TcAl13-LbCmJe8Vz_GI3mn0uNLGZHkk32Y4H_3E1_l1HYPI3K3PWwI/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: hand;
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;
}

Bước 2: Chèn đoạn code sau vào trước thẻ đóng </head>:

1<script type='text/javascript'>
// Sticky Bar for Blogger (nguoichiase.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>

Bước 3: Chèn đoạn code sau vào trước thẻ đóng </body>:

1<!--Sticky Bar by nguoichiase.com-->
<div id='custom-toolbar'>
<img border='0' class='close-toolbar' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJZNnRQ6JomILzalyZCP0ytMq2nivFfwHwbV6f9Q_-d6Crw_cuT1Tf5uaOvQaAz2Iyl0h8LuSWQwjFWcd0RHUKidf125xRxd_Nlj4Bjmy358a-nnIFm3KQj1wnl2MnziQDfmUVt4Xtvky5/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://www.facebook.com/kj.magician' title='Follow on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLPLqaJubvRZmasi3Hi4BLm8AOrbPh2V9SmXd42mDd6fciMcv4ss6PcBLv0-aUdJg13UpU-E4CAYYjkO9ZTBHSY4QE4SdXfqMG1XFA-H1V7kBvq2F6YJWtwwjUVLrsII8EITCL_9isTocm/s1600/facebook-icon.png'/></a></td>

<td><a href='http://twitter.com/quocdoantrinh' title='Follow on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsPhgXmKCEQHlcnmJqiUdyZBKA9thewzmxp89uPWsswC8m3hliAbSsouGZxHSv6zQO9F5P4akc1NS3M1WoNbrCey9mca5YhXTRcI7mDqQRt-72D3BiEaOZJRFqN8EGdPZ_v4J2GDItR2Av/s1600/twitter-icon.png'/></a></td>

<td><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Subscribe to Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk347sqWLChPqFlgGYY3X9P5oMmYvmeYGuxPNc9kk4Xr2LtXznMC1M10uvdqX6eofDCn6sBlWhhGA9ORi8xvurc0OVQJciHuybx-6SBkK8LfGX3f4O1doOCDbcHtF0bS04sdlVNgzjxCcI/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' 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' 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/AVvXsEh_nQMA8HlIp8OyDt7ho0EmnVTQnDT1QLKDecECC61KpQ75dhq6lAUAXk3nw5VpC6BM8RXjzIiOGkzjnKgXvncNOFX09zQg2j33XURQ0uKt2KyZ-ayLMwHxFlnm8PJaNkbOdVCTwXmsF2cd/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/AVvXsEhqNs4uOOv0sn8Til3jZCzMzAivD6drAedvh42GrR06I31UJ1tXpcPqwkH65q3_5YuMvnHSRAk2TEee4NSo690vJ30dOVfoSlieRj1DrFXIzyXI-7u6-vbq9EENcY3mvI8dyJBzGGbCsmMR/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/AVvXsEiPTafs5qgRnj4Ps9HzlsnPT-d6iFLH7gIdPsfo6vTLtEkxF9jRqAxfw_luR0wsv6ZhhxZkHezM-lz-0EyCz9RIi4L4Zcm-mIxMe2KN8WM1cv6WeezmbAI-c7uUeTbhlYWi1O6qNfgIDyUq/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/AVvXsEg2HweltP7w9UmKrdTOXU0A4cdDvbSJESVNaK-XPxOmp1pMjjsVHOI3UUR5dj52mWCpkL0aivXOJ1_F4j4j9msxN5l3ArXmu-mZxP0xDWy3JZHx5qzJKQKHa9fltKJp6LaQjYwBteKbYgyD/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/AVvXsEjOka5FA3FFNPhDasvBUpfiBytysW0TDSCqE62j9YikOiHJNWVs5S_kHTSbWeLYPdr9aHQJJPmpFIuo76ViNkY23YsplLoVliTTMQP4aDVRUnqJx6QhSpFElup1lbteB4YamSqoJWLg3iyq/s1600/China.png' width='24'/></a></td>

</tr>
</table>
</div>
<!--/Sticky Bar by nguoichiase.com-->

- Chỉnh sửa những chỗ mình đánh dấu thành username Facebook và Twitter của bạn.
- Nếu muốn thêm nội dung thì các bạn chèn đoạn code sau vào trước dòng màu xanh:

1<td>Code nội dung của bạn</td>

Chúc thành công !