Footer tổng hợp những thứ bạn cần cho 1 Website Blogspot

Tweet

Đây là 1 Footer mình đã tích hợp khá nhiều chức năng, sử dụng HTML và CSS, JS. có thể coi đây là 1 Footer hoàn chỉnh cho 1 Web/log. Hy vọng nó sẽ giúp bạn tiết kiệm thời gian thay vì ngồi làn code từng cái một, nghe rất là mệt đúng không nào?




- Bản này mình đã tích hợp các chức năng như sau:

• + Danh mục thông tin liên hệ
• + Thống kê những comment mới nhất cho toàn Blogspot
• + Các button liên kết tới các mạng xã hội Facebook, G+, Zing me, Youtube
• + Thống kế lượng truy cập toàn Website, Ai đang online, Tổng số bài viết
• + Button lên đầu trang không sử dụng Javascrip nên không ảnh hưởng tới template
• + Các logo hình ảnh liên kết tới các đối tác của bạn

- Tiến hành thực hiện thủ thuật nhé

- Trước tiên bạn chèn đoạn code sau trên </body>

<div class='thaiaiti-chantrang'><div class='block event-info pkg' id='event_info'><div class='right'> <span class='ghim'/> <div class='new-sponsor'><h3 class='title'><span class='cycle-icon'/>Thông tin</h3><ul class='new-sponsor-list'><li class='pkg'><a href='http://www.thaiaiti.com/p/tac-gia.html' target='_blank'><span>Về Admin</span></a></li><li class='pkg'><a href='http://www.thaiaiti.com/p/tac-gia.html' target='_blank'><span>Giới thiệu</span></a></li><li class='pkg'><a href='http://www.thaiaiti.com/p/quang-cao-tai-thaisaiticom.html' target='_blank'><span>Quảng cáo</span></a></li><li class='pkg'><a href='http://www.thaiaiti.com/p/mua-hang.html' target='_blank'><span>Đặt hàng</span></a></li><li class='pkg'><a href='http://www.thaiaiti.com/2013/07/tuyen-cong-tac-vien.html' target='_blank'><span>Góc CTV</span></a></li></ul></div><div class='home-faq'><div class='title'><span class='cycle-icon'/><a href='#'><strong>Ý kiến bạn đọc</strong></a> <span>|</span> <a href='http://www.thaiaiti.com/2013/07/tuyen-cong-tac-vien.html'>Đăng ký cộng tác viên</a></div><ul class='home-faq-list'><div class='pmthaiaiti'><div style='overflow:hidden;text-align:left;float: left;margin-top:12px;'><style type='text/css'> ul.w2b_recent_comments{list-style:none;margin:0;padding:0;width: 305px;} .w2b_recent_comments a {color:#333;font: bold 13px arial;} .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;} .w2b_recent_comments li .avatarImage{background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;} .w2b_recent_comments li span{color: #333;display: block;font-size:12px;font-family: arial;font-style: italic;line-height: 1.4;height: 16px;overflow: hidden;}</style><script type='text/javascript'>//<![CDATA[ // Recent Comments Settings var numComments = 3, showAvatar = true, avatarSize = 30, roundAvatar = true, characters = 50, defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyUVMpvbD-PtXiESoLEzNDdt7ZcRjx7FV0BU36W8xrpYdWam3xgyyuj8OFuNZgGleuxAje9S5qK1n5UPonKG8l9MylxGgdhvOhJY9FO-K2YuUOrQcCCqQfZk-wEaM5ZHaRw1Bm-_T5CZzK/s298/Untitled-2%2520copy.JPG", hideCredits = true;//]]></script><script type='text/javascript'>//<![CDATA[/** * * --==Options==-- * var numComments = 500, * showAvatar = true, * avatarSize = 60, * roundAvatar = true, * showMorelink = false, * moreLinktext = "More &raquo;" * characters = 40, * defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", * hideCredits = false; * */eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('7 D=D||5,9=9||19,A=A||1a,m=m||"h://W.S.g/16/?d=18",E=E||" 1p &1f;",v=(p v===\'o\')?j:v,z=(p z===\'o\')?Z:z,n=(p n===\'o\')?j:n,M=(p M===\'o\')?Z:n;1l 12(L){7 b;b=\'<Y C="12">\';H(7 i=0;i<D;i++){7 x,y,2,k;4(i==L.14.8.q)1g;b+="<X>";7 8=L.14.8[i];H(7 l=0;l<8.I.q;l++){4(8.I[l].1j==\'1o\'){x=8.I[l].w}}H(7 a=0;a<8.K.q;a++){y=8.K[a].1i.$t;2=8.K[a].1h$1k.N}4(2.f("/O/")!=-1){2=2.u("/O/","/s"+9+"-c/")}e 4(2.f("/T/")!=-1){2=2.u("/T/","/s"+9+"-c/")}e 4(2.f("/U-c/")!=-1&&2.f("h:")!=0){2="h:"+2.u("/U-c/","/s"+9+"-c/")}e 4(2.f("G.g/B/1n-P.J")!=-1){2="h://3.13.Q.g/-1m-1e/17/1c/1b/s"+9+"/15.R"}e 4(2.f("G.g/B/1d-P.J")!=-1){2="h://3.13.Q.g/-1R/1U/1P/1K/s"+9+"/1J.R"}e 4(2.f("G.g/B/1M.J")!=-1){4(m.f("S.g")!=-1){2=m+"&s="+9}e{2=m}}e{2=2}4(v==j){4(n==j){k="1O"}e{k=""}b+="<V C=\\"1T "+k+"\\"><B C=\\""+k+"\\" N=\\""+2+"\\" 1H=\\""+y+"\\" 1w=\\""+9+"\\" 1I=\\""+9+"\\"/></V>"}b+="<a w=\\""+x+"\\">"+y+"</a>";7 11=8.1v.$t;7 6=11.u(/(<([^>]+)>)/1u,"");4(6!=""&&6.q>A){6=6.1r(0,A);6+="&1s;";4(z==j){6+="<a w=\\""+x+"\\">"+E+"</a>"}}e{6=6}b+="<r>"+6+"</r>";b+="</X>"}b+=\'</Y>\';7 F="";4(M==j){F="10:1F;"}b+="<r 1G=\\"1E-1D:1A;10:1B;1C-1S:1z;"+F+"\\">1y 1t<a w=\\"h://W.1x.1L/\\">1Q</a></r>";1N.1q(b)}',62,119,'||authorAvatar||if||commBody|var|entry|avatarSize||commentsHtml|||else|indexOf|com|http||true|avatarClass||defaultAvatar|roundAvatar|undefined|typeof|length|span|||replace|showAvatar|href|commentlink|authorName|showMorelink|characters|img|class|numComments|moreLinktext|hideCSS|blogblog|for|link|gif|author|w2b|hideCredits|src|s1600|rounded|blogspot|png|gravatar|s220|s512|div|www|li|ul|false|display|commHTML|w2b_recent_comments|bp|feed|w2b_blogger_logo|avatar|TxMKLVzQ5BI|mm|60|40|QYau8ov2blE|AAAAAAAABYY|openid16|1X32ZM|raquo|break|gd|name|rel|image|function|AaI8|b16|alternate|More|write|substring|hellip|by|ig|content|width|way2blogging|Widget|right|10px|block|text|size|font|none|style|alt|height|w2b_openid_logo|8iasY0xpLzc|org|blank|document|avatarRound|AAAAAAAABYc|Way2Blogging|9lSeVyNRKx0|align|avatarImage|TxMKMIqMNuI'.split('|'),0,{}))//]]></script><script src='http://www.thaiaiti.com/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=200' type='text/javascript'/></div></div>
</ul></div><div id='lienketmangxahoiall'><div class='event-imp-info'><h3>Hỗ trợ khách hàng</h3></div><div class='event-imp-info'><h3>Trên mạng xã hội</h3><url class='iconlienketmangxahoi'><a href='https://www.facebook.com/hohoangthai' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrXzTrigjUpOg0l7nxhBs4QQWiMG3l9znelQrlbq5qQV5trNlN1HM0wTqcy4oie1uBKtEW6CNFsYsO7ToUkmR9gbOUJAHMVhyphenhyphenYM-dWAG30c1sJuUnYffhUQ2tbEAX698m1IcG2oLYTuJ4y/s0/fb.JPG'/></a><a href='https://plus.google.com/u/0/112598885967567994975' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEL2qu6c8kNqtDBcCB_3ShJtxZSIJ_ony-Mn6cRzVfNiz2UA1oAq1fBZ3ruAsHYlWhVnK-wXEgCD2WgowxwyXf_TIjho7CoLxMP0leT7OHjCI3wsszTcRWHhqQdkjd5xN1DbpuVhZ9UdJg/s0/g%253D.JPG'/></a><a href='http://me.zing.vn/h/hohoangthai.hubt' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNYYZK7e-qzTwVkdEYUYngaX5n6DN37UgdLmjkVBSxnscjwv8QhKK6GZxawYfSGGFsLb25_qYauUXfB-cDSJ9-HEAQCJ-hrxHJPrwCJT6Tvv0LcsGz2QjeMQYLh-RfAlf51AdDrP8exmZx/s0/zingme.JPG'/></a><a href='http://www.youtube.com/user/hohoangthai' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJqL0qf3aeJ-ye95Lja2AS2aje9RKgvMZSndzCBasvNAvjq0jRKWY8cbuwV5be9k_PxI6oCcdL4tVQegqphF-1MJox7u2C5nQiqxZb4v1z6cwzc1ryKTRNhqbPULceotyTc8lT4QO-e2PY/s0/youtube.JPG'/></a></url></div></div><div id='thongkewebsite'><div class='event-imp-info'><h3>Thống kê Webiste</h3><b:section id='thongketongsoluotxem' showaddelement='yes'> <b:widget id='Stats1' locked='false' title='Tổng số lượt xem trang' type='Stats'> <b:includable id='main'> <div class='widget-content'><h1>Lượt truy cập</h1> <!-- Content is going to be visible when data will be fetched from server. --> <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'> <!-- Counter and image will be injected later via AJAX call. --> <b:if cond='data:showSparkline'> <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' width='75'/> </b:if> <b:if cond='data:showGraphicalCounter'> <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/> <b:else/> <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/> </b:if> <b:include name='quickedit'/> </div> </div></b:includable> </b:widget></b:section><br/><div id='thongkebainhanxet'>Website có<a><script style='text/javascript'>function numcomments(json) { document.write(&#39;&#39; + json.feed.openSearch$totalResults.$t + &#39;&#39;); }</script><script src='http://www.thaiaiti.com/feeds/posts/default?alt=json-in-script&amp;callback=numcomments'/></a>bài viết<br/>Hiện có<a><script style='text/javascript'>function numcomments(json) { document.write(&#39;&#39; + json.feed.openSearch$totalResults.$t + &#39;&#39;); }</script><script src='http://www.thaiaiti.com/feeds/comments/default?alt=json-in-script&amp;callback=numcomments'/></a>nhận xét<br/>Đang có<b><script id='_wauv9h'>var _wau = _wau || []; _wau.push([&quot;small&quot;, &quot;9i62tu324nk2&quot;, &quot;v9h&quot;]);(function() {var s=document.createElement(&quot;script&quot;); s.async=true;s.src=&quot;http://widgets.amung.us/small.js&quot;;document.getElementsByTagName(&quot;head&quot;)[0].appendChild(s);})();</script></b></div></div></div></div></div><div class='creditpic'><div class='banquyen'><div style='float:right;text-align:right;margin-top:20px;'><div class='logothanhtoan'><a class='chonhinhthuctt' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTWuq7tLAlE-JC2lbTpIEj0qGEMbmcVltfJp2DqgC8wijgYSuVIHQ9o6XlrLZ2lWv-mghMOgyih4lWCGNoY3ApeBGJnYwrXmanCYrNeinQBMrBt0iYfnFX86zGEhrYzaZU8CZW0h5GBt6c/s141/choncachthuc.JPG'/></a><a href='http://www.thaiaiti.com/p/mua-hang.html'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP5Uu2p5Iu0JXjluXrUrMS6yVjSaYOXty3KgdJW4CMKmbImpNdu2TFw1uLsznTjCIXCVK2PLTamxtcZtn3A36M5Gqv0JFyanMAfMH_4SP_qv_nJdEfUXd1qF-Ogbdic8z51kxryiJHyY7z/s141/Untitled-1%2520copy.JPG'/></a><a href='http://www.thaiaiti.com/p/mua-hang.html'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeNXkMNoctIiVuscHMeBW_J-A7bkDfr57wrZGYlt4IviKx9t3ztUifycB3FJSvPmBaisk8OcKcF73MkqEZSMMoDe1wo35pEvJ4JZXONzGRJY7ClkoIut0ZvOTCLOkGSCc0MuIClQfVxwmT/s162/vt.JPG'/></a></div><url class='buttonup'><a href='/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZgZvGCgiJJ05VxSAwAPMdPhZ0kWbGTdAcRbAHHzqgOJMKJSxLOnuEB3xNuVwqs1TF1KT8awF5tk_7QlZ01arG8MbXlOmN8DnhyphenhyphenL4XqiKIqP7XH402t5zjBCKD9soQdW9GjagR8h5iqgdT/s128/up-icon.png' style='width: 40px;height: 40px;overflow: hidden;float: left;' title='Lên đầu trang'/></a></url></div></div></div></div>

- Chèn tiếp đoạn CSS sau trên ]]></b:skin>

.thaiaiti-chantrang{
width: 960px;
margin: 0 auto;
overflow: hidden;
margin-bottom: 20px;

}
.event-info{overflow: hidden;height: 185px;padding-top: 10px;width:950px;margin: 0 auto;}
.event-info .left{width:205px; margin:5px 10px 0 10px;float:right;margin-top:-5px;}
.event-info .right{float: left;margin-left: 10px;width:938px;background:#fff; border:1px solid #e3e3e3; position:relative; padding:12px 0;border-radius: 5px;height: 150px;margin-bottom: 10px;}
.event-info-title{font-family:serif;font-size:22px; color:#5a5a5a; margin-bottom:10px;text-align: center;}
.event-info .left p{font:12px arial;font-style: italic;color:#666; line-height:16px; margin-bottom:10px;float: left;width: 215px;margin-top:-10px;}
.baby-png{display:block; margin:auto;}
.reg-btn{background:#ec008d;height:20px;margin-left: 15px;line-height: 28px !important;font: bold 14px arial !important;color: #fff !important;display: inline-block;padding: 4px 10px 0 5px;}
.reg-btn .double-arrow-icon{margin-left:5px;}
.reg-btn:hover{color:#FC0;}
.double-arrow-icon{display:inline-block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcNWyZVDn9cLkKAC0ztLYP_Rq9dUUwW0stQ_wulOZ4QELuuAd_sZKEEx8zwL60ghwoZEX1VTGUzHhgi7j0wOQYJ5kGwQWn263HqCh3fNHkM7368j-5CuBv-d6Z4DKojckzEPLuvupSUNub/s0/global.png) no-repeat -170px -362px; width:7px; height:7px;}
.new-sponsor{width:110px; float:left; margin:0 10px 0 25px;overflow: hidden;}
.new-sponsor-list {float: left;margin-left: 17px;}
.new-sponsor-list li{margin-bottom:5px;}
.new-sponsor-list li img{float:left; border:1px solid #e3e3e3;-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px; margin-right:5px;}
.new-sponsor-list li a span{line-height:normal; color:#333;}
.new-sponsor-list li a:hover span{text-decoration:underline;}
.new-sponsor .title{margin-bottom:10px;font: bold 14px arial;}
.cycle-icon{display:inline-block; margin:0 3px 0 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcNWyZVDn9cLkKAC0ztLYP_Rq9dUUwW0stQ_wulOZ4QELuuAd_sZKEEx8zwL60ghwoZEX1VTGUzHhgi7j0wOQYJ5kGwQWn263HqCh3fNHkM7368j-5CuBv-d6Z4DKojckzEPLuvupSUNub/s0/global.png) no-repeat -70px -122px; width:9px; height:9px; }
.home-faq{width:300px; float:left; margin-right:16px;overflow: hidden;}
.event-imp-info{width:244px; float:left;overflow: hidden;margin-bottom: 15px;}
.iconlienketmangxahoi img {padding-right: 5px;float: left;width: 30px;height: 30px;overflow: hidden;opacity: 0.5;}
.iconlienketmangxahoi img:hover {opacity: 100;}
.ghim{display:block; position:absolute; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcNWyZVDn9cLkKAC0ztLYP_Rq9dUUwW0stQ_wulOZ4QELuuAd_sZKEEx8zwL60ghwoZEX1VTGUzHhgi7j0wOQYJ5kGwQWn263HqCh3fNHkM7368j-5CuBv-d6Z4DKojckzEPLuvupSUNub/s0/global.png) no-repeat 0 -257px; width:47px; height:61px; top:-10px; left:-10px;}
.arrow-icon{display:inline-block;margin-right:3px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcNWyZVDn9cLkKAC0ztLYP_Rq9dUUwW0stQ_wulOZ4QELuuAd_sZKEEx8zwL60ghwoZEX1VTGUzHhgi7j0wOQYJ5kGwQWn263HqCh3fNHkM7368j-5CuBv-d6Z4DKojckzEPLuvupSUNub/s0/global.png) no-repeat -89px -124px; width:4px; height:5px;}
.home-faq-list li a{padding-left:10px; color:#FE026C; line-height:17px;}
.home-faq-list li a:hover{text-decoration:underline;}
.home-faq-list li:last-child{border:0 none;}
.home-faq .title a{color:#a0a0a0}
.home-faq .title span{color:#d0d0d0;}
.home-faq .title a strong{color:#434343;}
.home-faq .title a:hover, .home-faq .title a:hover strong{color:#ef3978;}
.event-imp-info h3 {margin-bottom: 15px;font: bold 14px arial;}
.event-imp-info h3 a{display:block; padding:6px 15px; border:1px dashed #bebebe; color:#FE026C; font-size:16px; line-height:24px;border-radius: 3px;}
.event-imp-info h3 a:hover{color:#ef3978; background:#fff5f8}
.event-imp-info h3 a span{float:left; margin-right:5px;}
.thele-icon{display:inline-block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcNWyZVDn9cLkKAC0ztLYP_Rq9dUUwW0stQ_wulOZ4QELuuAd_sZKEEx8zwL60ghwoZEX1VTGUzHhgi7j0wOQYJ5kGwQWn263HqCh3fNHkM7368j-5CuBv-d6Z4DKojckzEPLuvupSUNub/s0/global.png) no-repeat -66px -255px; width:29px; height:27px;}
.faq-icon{display:inline-block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcNWyZVDn9cLkKAC0ztLYP_Rq9dUUwW0stQ_wulOZ4QELuuAd_sZKEEx8zwL60ghwoZEX1VTGUzHhgi7j0wOQYJ5kGwQWn263HqCh3fNHkM7368j-5CuBv-d6Z4DKojckzEPLuvupSUNub/s0/global.png) no-repeat -103px -256px; width:29px; height:27px;}
.prize-icon{display:inline-block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcNWyZVDn9cLkKAC0ztLYP_Rq9dUUwW0stQ_wulOZ4QELuuAd_sZKEEx8zwL60ghwoZEX1VTGUzHhgi7j0wOQYJ5kGwQWn263HqCh3fNHkM7368j-5CuBv-d6Z4DKojckzEPLuvupSUNub/s0/global.png) no-repeat -139px -255px; width:29px; height:26px;}
#lienketmangxahoiall {float: left;width: 245px;overflow: hidden;}
#thongkewebsite {float: right;width: 230px;overflow: hidden;}
#thongkebainhanxet a {font: bold 20px arial;color: #FE026C;padding-right: 5px;padding-left: 5px;}
#thongkebainhanxet {float: left;padding-top: 5px;}
#thongketongsoluotxem {float: left;width:230px;overflow: hidden;}
#Stats1_totalCount {color: #FE026C;float: left;margin-top: -6px;}
#thongketongsoluotxem h1 {float: left;font: 12px arial;margin-top:5px;margin-right: 5px;}
#thongkebainhanxet b {padding-left: 5px;}
.creditpic {margin: 0 auto;width:100%;}
.credit{width:960px;line-height:1.6em;text-align:center;font-family:Arial;font-size:12px;overflow:hidden;clear:both;margin:0 auto;color: #000;margin-top: 15px;}
.credit a:link,.credit a:visited{text-decoration:none;color:#024670;}
.banquyen {width:950px;margin: 0 auto;overflow: hidden;}
.logothanhtoan {float: left;margin-right: 20px;}
.logothanhtoan img {float: left;width: 115px !Important;height: 40px !important;overflow: hidden;margin-left: 5px;border: 1px solid #ccc;border-radius: 5px;opacity: 0.8;}
.logothanhtoan img:hover {opacity: 100;}
.buttonup {float: right;}
- Ok, ThaiAiTi chúc bạn thành công!