Footer bar trong Blogger: thêm những điều nổi bật

Thêm 1 thủ thuật blogspot nữa mà mình muốn chia sẻ với các bạn và chắc chắn rằng nó sẽ rất hữu ích cho người dùng blogger. Đó là cách tạo Footer bar cho blog, với Footer bar này bạn có thể sử dụng để tạo những điểm nhấn và cần chú ý tới. Rất nổi bật
Demo tại Blog: Công ty SEO Web uy tín

Hướng dẫn Footer bar trong Blogger: thêm những điều nổi bật

Bước 1: Vào bảng điều khiển Blogger -> Mẫu (template) -> Chỉnh sửa HTML (Edit HTML)
Bước 2: Ctrl + F và tìm tới ]]></b:skin> và dán code dưới đây ngay trên nó
#custom-toolbar {
overflow: auto;
position: fixed;
background: #1B1B1B url("http://1.bp.blogspot.com/-0XYBiDXh7Vo/Uupp-CQrhJI/AAAAAAAAF_8/qKBKfmooBVQ/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 3: Tìm tới </head> và dán code dưới đây ngay trên nó
 <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>
Bước 4: Tìm tới </body> và dán code dưới đây ngay trên nó
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:true};</script>
<script src='http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-507bc3ce589fe973' type='text/javascript'/>
 <div id='custom-toolbar'>
<img border='0' class='close-toolbar' onClick='closeTopAds();return false;' src='http://1.bp.blogspot.com/-eGh5FWRNbHo/Uvf_Q2nYXLI/AAAAAAAAGDs/8Q2pMCs2OsU/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='https://www.facebook.com/congtySEOPhongVu' title='Follow on Facebook'><img src='http://4.bp.blogspot.com/-qF-13gWPCho/Uvftq1v5ApI/AAAAAAAAGCo/hoFWKPCSUro/s1600/facebook-icon.png'/></a></td>
<td><a href='http://twitter.com/phongvu18nd' title='Follow on Twitter'><img src='http://4.bp.blogspot.com/-OSxpeBNLK4A/UvfuiIkU5RI/AAAAAAAAGC4/Cq4TdM5fmhs/s1600/twitter-icon.png'/></a></td>
<td><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Subscribe to Feed'><img src='http://1.bp.blogspot.com/-wRI1rmbhV0M/Uvfvq5ZBMjI/AAAAAAAAGDU/6BSlAgac3sw/s1600/rss-feed-icon2.png'/></a></td>


<td style='padding-left:40px; padding-top: 5px;'><a class='addthis_button_facebook_like' fb:like:layout='button_count'/></td>
<td style='padding-left:40px; padding-top: 5px;'><a class='addthis_button_tweet'/></td>
<td style='padding-left:40px; padding-top: 5px;'><a class='addthis_button_google_plusone' g:plusone:size='medium'/></td>
<!-- <td style='padding-left:40px; padding-top: 5px;'><a class='addthis_button_pinterest_pinit'/> </td>
<td style='padding-left:40px; padding-top: 5px;'><a class='addthis_counter addthis_pill_style'/> </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='http://1.bp.blogspot.com/-sXhoGx5s2dg/T5xOeRCOuYI/AAAAAAAAARo/ldYJIGQldwQ/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="http://1.bp.blogspot.com/-nX0ktPsJQTA/T5xOMiiOGQI/AAAAAAAAARY/VXhAPARvh9E/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='http://2.bp.blogspot.com/-aklFaq6pPeQ/T5xOV1mPbcI/AAAAAAAAARg/CcBmt1ptN88/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='http://3.bp.blogspot.com/-cx9e66I48yM/T5xM9L7uzoI/AAAAAAAAAQY/ftpOVX9YZEE/s1600/Saudi+Arabia.png' width='24'/></a></td>

</tr>
</table>
</div>
Trong đó 2 giá trị bôi xanh là những giá trị của bạn.
Bạn cũng có thể thêm những nội dung khác lên Footer bar bằng cách sử dụng thêm thẻ
<td>Nội dung của bạn ở đây</td>
Chúc các bạn vui vẻ !
Footer bar trong Blogger: thêm những điều nổi bật

Footer bar trong Blogger: thêm những điều nổi bật

Nếu bạn thấy hay thì hãy để khích lệ tinh thần chia sẻ của tác giả BV "Footer bar trong Blogger: thêm những điều nổi bật"

No comments:

Copyright © 2014 Thanh niên Bình Định - Supported by: IT Việt