[Blogger] Hướng dẫn tạo Footer cực đẹp cho Blogspot


Demo

Thêm Code này vào nơi bạn muốn hiển thị:
<div id='lower'>
<!-- Start Widget --><style> .tim-kiem-blogger {;z-index: 999;width: 650px;overflow: hidden;position: relative;margin: 0 auto;display: block;} .tim-kiem-blogger input[type=&quot;text&quot;] {;z-index: 999;background: rgba(0, 0, 0, 0.1);position: relative;display: inline;width: 100%;margin: 0;border: 2px solid rgba(0,0,0,.1) !important;padding: 15px 15px 15px 15px;font: 20px &#39;Roboto&#39;, san serif;color: #fff;} span.font30 {;z-index: 999;font-size: 30px;}span.font20 {;z-index: 999;font-size: 20px;} .tim-kiem-blogger input[type=&quot;submit&quot;] {z-index: 999;position: absolute;right: 3px;background: #069999;border-radius: 4px;top: 6px;padding: 12px 25px;border: 0;color: #fff;font-size: 19px;font-weight: 300;} .tim-kiem-blogger input[type=&quot;submit&quot;]:hover {background: #009EFF;} </style> <style> #intro_hh{position:relative;display:table;width:100%;height:30vh;margin:0!important;padding:0!important;z-index:999;background:url(https://i.imgur.com/gIqnMEE.jpg) no-repeat center center!important;background-size:cover!important} #intro_hh:before{content: &#39;&#39;; opacity: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: linear-gradient(transparent)} #intro_hh:after{content:&#39;&#39;;z-index:0;position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(transparent,rgba(51, 51, 51, 0.15) 0%,rgba(12,23,36,0.4))} h1{text-align:center;margin:0;padding:0;font:500 32px Roboto;color:#fff} .count{margin:0;padding:0;font:500 32px Roboto;color:#ffd969} </style> <div id='intro_hh'> <br/><br/> <h1>Có <strong> <script type='text/javascript'>/*<![CDATA[*/function postCount(a){document.write(" ");var b=a.feed.openSearch$totalResults.$t;document.write("<span class='count'>"+b+"</span>");document.write("</span>")};/*]]>*/</script> <script src='/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=postCount' type='text/javascript'/> </strong> bài viết và <strong> <script type='text/javascript'>/*<![CDATA[*/function numberOfComments(a){document.write(" ");var b=a.feed.openSearch$totalResults.$t;document.write("<span class='count'>"+b+"</span>");document.write("</span>")};/*]]>*/</script> <script src='/feeds/comments/default?alt=json-in-script&amp;max-results=0&amp;callback=numberOfComments' type='text/javascript'/> </strong> bình luận trên Blog</h1> <br/> <div class='tim-kiem-blogger'> <form action='/search/' id='searchform' method='get'> <input id='s' name='q' placeholder='Nhập từ khóa và cào phím enter để tìm kiếm...' type='text'/> <input id='searchsubmit' type='submit' value='TÌM!'/> </form> <br/> </div> </div><!-- End Widget -->
<div class='cssload-loader' id='loader'><myloader>
<div aria-busy='true' aria-label='Loading, please wait.' role='progressbar'/>
</myloader></div>
<style>
#header-page{position:relative;background:linear-gradient(30deg,rgb(27, 57, 99) 20%,rgb(179, 41, 46) 87%);background-size:cover;background-position:center center;color:white;margin-bottom:10px}
#header-page .container{position:relative;}
.container{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px;}
.container:before,.container:after{content:&quot; &quot;;display:table;}
.container:after{clear:both;}
.col-lg-4,.col-lg-8,.col-md-10{position:relative;min-height:1px;padding-left:15px;padding-right:15px;}
.col-lg-4{width:30%!important;float:left}
.col-lg-8,.col-md-10{width:64%;float:right;}
#header-page .header-hook{padding-top:55px;}
#header-page .header-hook .header-hook-box p{margin-bottom:0;}
#header-page .header-hook .header-hook-box hr{width:168px;border-top:solid 4px #1d8090;margin:15px 0;}
#header-page .header-category{margin-left:-10px;margin-right:-10px;}
#header-page .header-category .header-category-box{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap;}
#header-page .header-category .header-category-box .category{width:170px;height:100px;margin-bottom:20px;text-align:center;padding:10px;position:relative;z-index:1;cursor:pointer;background-color:rgba(0,0,0,0.1);}
#header-page .header-category .header-category-box .category{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:0.5s;transition-duration:0.5s;}
#header-page .header-category .header-category-box .category:before{content:&quot;&quot;;position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#2098D1;-webkit-transform:scaleY(0);transform:scaleY(0);-webkit-transform-origin:50% 0;transform-origin:50% 0;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:0.5s;transition-duration:0.5s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
#header-page .header-category .header-category-box .category:hover,
#header-page .header-category .header-category-box .category:focus,
#header-page .header-category .header-category-box .category:active{color:white;}
#header-page .header-category .header-category-box .category:hover:before,
#header-page .header-category .header-category-box .category:focus:before,
#header-page .header-category .header-category-box .category:active:before{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition-timing-function:cubic-bezier(0.52,1.64,0.37,0.66);transition-timing-function:cubic-bezier(0.52,1.64,0.37,0.66);}
#header-page .header-category .header-category-box .category .symbol{font-size:40px;margin:0;}
#header-page .header-category .header-category-box .category h4{font-size:14px;font-weight:400;margin:0;}
#header-page .header-category .header-category-box .category a{color:white;}
#header-page .header-category .header-category-box .category a:hove{color:white;text-decoration:none;}
.color-1,.header-category .category:nth-child(1)::before{background-color:#44C0D9!important;}
.color-2,.header-category .category:nth-child(2)::before{background-color:#E7428E!important;}
.color-3,.header-category .category:nth-child(3)::before{background-color:#FF7903!important;}
.color-4,.header-category .category:nth-child(4)::before{background-color:#8958E9!important;}
.color-5,.header-category .category:nth-child(5)::before{background-color:#4C9E3B!important;}
.color-6,.header-category .category:nth-child(6)::before{background-color:#FFB10F!important;}
.color-7,.header-category .category:nth-child(7)::before{background-color:#F24733!important;}
.color-8,.header-category .category:nth-child(8)::before{background-color:#17B99F!important;}
@media only screen and (min-width:1200px){#header-page{padding-top:75px;padding-bottom:75px;}}
@media only screen and (max-width:1199px){#header-page{padding-top:20px;padding-bottom:30px;}}
@media only screen and (min-width:1470px){#header-page .header-category .header-category-box .category{width:210px;height:110px;}}
@media only screen and (max-width:350px){#header-page .header-category .header-category-box .category{width:140px;height:85px;}#header-page .header-category .header-category-box .category .symbol{font-size:30px;}}
@media (max-width:1199px){.hidden-xs{display:none!important;}.col-lg-8,.col-md-10{width:100%;float:none;padding:0}}
@media (max-width:404px){#header-page,.col-lg-8,.col-md-10{display:none;}}
</style>
<div id='lower-wrapper'> 
<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar1' preferred='yes'/> 
</div> 
<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar2' preferred='yes'/> 
</div> 
<div id='lowerbar-wrapper'> 
<b:section class='lowerbar' id='lowerbar3' preferred='yes'/> 
</div>   
<div style='clear: both;'/> 
</div>
<div class='footer-wrapper'>
<div class='copyright-lower-right'/>
</div>
</div>
<!-- end footer -->

Sau đó chuyển sang phần Bố Cục > Thêm tiện ích > HTML/JavaScript
  
Về Star Lượng IT:  
<center><img src="https://scontent.fdad3-2.fna.fbcdn.net/v/t1.0-9/19884205_453028261740094_5322532753251520600_n.jpg?oh=6128d0ab2224832106291b6e258c4956&oe=5A97846F" alt="Admin Star Lượng IT" title="Admin Star Lượng IT" width="250" height="250" border="0" /><br/>---------------------------------<br/>
<div class="about-adh">
<span><b><a href="http://starluongit.blogspot.com/">Star Lượng IT</a> Nơi Chia Sẻ Thủ Thuật<br /> Blogger, Facebook, Sub Effect, PSD...</b></span><br />
<span><b>Phát Triển Bởi: <span style="color: red; font-size: large;"><a href="http://facebook.com/nhokdz123">Trần Văn Lượng</a></span></b></span><br />
<span><i class="fa fa-facebook-square" style="font-size: 18px;"></i><b> Facebook.Com/NhokDz123 </b></span><br />
</div></center>

Bình Luận Mới:
<style>
.comment-info2 .right a {font: 500 12px Roboto,sans-serif; text-transform: uppercase; background: #2a2a2a; padding: 3px 15px; box-sizing: border-box; display: block; border-radius: 100px;}
.comment-info2 .right a:hover {opacity: .8;background:#fff;color:#2a2a2a}
.comment-info2 {clear: both; width: 100%; float: left; margin: 0 0 15px; }
.comment-info2 .left {background: #dedede; padding: 3px 15px; border-radius: 100px; display: block; text-transform: uppercase; font: 400 12px Roboto;}
ul.idbcomments{list-style:none;margin:0;padding:0}.idbcomments li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:0!important;word-break:break-all;padding:0 0 7px!important}.idbcomments li .avatarImage{float:left;margin-right:12px;position:relative;overflow:hidden}.idbcomments li img{border-radius:100%;position:relative;overflow:hidden;display:block;width:45px;height:45px}.idbcomments li a{font-weight:700}.idbcomments li span{color: #a5a3a3; display: block; background: #242629; padding: 10px; border-radius: 100px}
.idbcomments li span:hover{background:rgba(0,0,0,.2)}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments
function idbcomments(a) {
    var e;
    e = '<ul class="idbcomments">';
    for (var t = 0; numComments > t; t++) {
        var r, o, n, i;
        if (t == a.feed.entry.length) break;
        e += "<li>";
        for (var d = a.feed.entry[t], s = 0; s < d.link.length; s++) "alternate" == d.link[s].rel && (r = d.link[s].href);
        for (var l = 0; l < d.author.length; l++) o = d.author[l].name.$t, n = d.author[l].gd$image.src;
        n = -1 != n.indexOf("/s1600/") ? n.replace("/s1600/", "/s" + avatarSize + "-c/") : -1 != n.indexOf("/s220/") ? n.replace("/s220/", "/s" + avatarSize + "-c/") : -1 != n.indexOf("/s512-c/") && 0 != n.indexOf("http:") ? "http:" + n.replace("/s512-c/", "/s" + avatarSize + "-c/") : -1 != n.indexOf("blogblog.com/img/b16-rounded.gif") ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVEYUu-0VbomypDJCngRnmGQTD5JXE93DIkDSaCZKdFwZSxNTW889-z0Pxs6aX_n8WYoTvZSTSNSmhlFbChTIhxLAlWcxwkNNZThAvYI9csnufjtgWhfFeciOHMj5_vDcvze9unHSH8LXJ/" + avatarSize + "/blogger.png" : -1 != n.indexOf("blogblog.com/img/openid16-rounded.gif") ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3u1xamX_Q9xzPaSf3Lf7pmYN5BkFY0irGIMv1OW0FQ5mLqgx5aLTCrhvVyPScNMfqysGRYsI9dsOQsSUvMNNKXrqLrFUZKlWIWNNMar40W7YOJKUwbH7r_ahG-Xl7ReW8De3l_1bPl51D/" + avatarSize + "/openid.png" : -1 != n.indexOf("blogblog.com/img/blank.gif") ? -1 != defaultAvatar.indexOf("gravatar.com") ? defaultAvatar + "&s=" + avatarSize : defaultAvatar : n, 1 == showAvatar && (i = 1 == roundAvatar ? "avatarRound" : "", e += '<div class="avatarImage ' + i + '"><a title="Truy cập đến bình luận đó" href="' + r + '"><img class="' + i + '" src="' + n + '" alt="' + o + '" width="' + avatarSize + '" height="' + avatarSize + '"/></a></div>'), e += '<a style="display:none" href="' + r + '">' + o + "</a>";
        var A = d.content.$t,
            v = A.replace(/(<([^>]+)>)/gi, "");
        "" != v && v.length > characters ? (v = v.substring(0, characters), v += "&hellip;", 1 == showMorelink && (v += '<a href="' + r + '">' + moreLinktext + "</a>")) : v = v, e += "<span>" + v + "</span>", e += "</li>"
    }
    e += "</ul>";
    var c = "";
    0 == hideCredits && (c = "display:block;"), e += "", document.write(e)
}
var numComments = 4,
    showAvatar = !0,
    avatarSize = 42,
    roundAvatar = !0,
    characters = 30,
    showMorelink = !1,
    defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbyRICNWXzFNKiGgfKldwKo2Ed0f0xYxzVdFN5g4ks-MY1t7EnhJQK8I2R1zBDHK7B_0m-mw6Vf3TiFJmIERBB3XVRP24z4hzzWVoCyYpXyzRGqtk7fCTijnQ7Z9hmx04qvxOnxoKGQ3BQ/s35/Logo-Bac-Si-Windows.png",
    hideCredits = !0,
    numComments = numComments || 5,
    avatarSize = avatarSize || 60,
    characters = characters || 25,
    defaultAvatar = defaultAvatar || "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbyRICNWXzFNKiGgfKldwKo2Ed0f0xYxzVdFN5g4ks-MY1t7EnhJQK8I2R1zBDHK7B_0m-mw6Vf3TiFJmIERBB3XVRP24z4hzzWVoCyYpXyzRGqtk7fCTijnQ7Z9hmx04qvxOnxoKGQ3BQ/s35/Logo-Bac-Si-Windows.png",
    moreLinktext = moreLinktext || " More &raquo;",
    showAvatar = "undefined" == typeof showAvatar ? !0 : showAvatar,
    showMorelink = "undefined" == typeof showMorelink ? !1 : showMorelink,
    roundAvatar = "undefined" == typeof roundAvatar ? !0 : roundAvatar,
    hideCredits = "undefined" == typeof hideCredits ? !1 : roundAvatar;
//]]>
</script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=idbcomments"></script>
<div class='comment-info2'>
</div>
<script type="text/javascript">
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
</script>
<div style="text-align: right;">
<b><a href="http://starluongit.blogspot.com/p/comments.html">Xem Thêm...</a></b></div>
<center>------------------------------------------------------------------</center>
<style>
#l-k_b-b::-webkit-scrollbar{width:5px}
#l-k_b-b::-webkit-scrollbar-thumb{background:#484848;border-radius:100px}
#l-k_b-b::-webkit-scrollbar-thumb:active{background:#777}
#l-k_b-b{padding:0;margin:0;list-style:none}
.l-k_b-b{margin:0;padding:0}
.l-k_b-b li{margin:0;padding:0;line-height:normal;display:block;float:left;text-align:center;width:50%}
.l-k_b-b a{text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; margin: 0 5px 5px 0; padding: 5px 10px;font-size:16px;font-weight:400;-webkit-transition: .3s;border-radius: 100px; -moz-transition: .3s; -o-transition: .3s; color: #fdfdfd!important; border: 1px solid #fdfdfd}
.l-k_b-b a:hover{color:#f90!important;border:1px solid;text-decoration:none!important}
.l-k_b-b a:hover:before{content:'\f1d9';font-family:FontAwesome;margin-right:5px}
</style>
<div id='l-k_b-b'>
<div class='l-k_b-b'>
<li><a href='#' target='_blank' title='Đặt liên kết'><i class="fa fa-plus-circle" aria-hidden="true"></i> Thêm liên kết</a></li>
<li><a href='#' target='_blank' title='Đặt liên kết'><i class="fa fa-plus-circle" aria-hidden="true"></i> Thêm liên kết</a></li>
<li><a href='https://www.thanhphongit.tk/index.html' target='_blank' title='Lê Thanh Phong'>Star Phong Blog</a></li>
<li><a href='http://www.proshow.pro/' target='_blank' title='Proshow.Pro'>Proshow.Pro</a></li>
<li><a href='https://minhtiennblog.blogspot.com/' target='_blank' title='Minh Tiến IT'> Minh Tiến IT</a></li>
<li><a href='#' target='_blank' title='Đặt liên kết'><i class="fa fa-plus-circle" aria-hidden="true"></i> Thêm liên kết</a></li>
</div></div>
<marquee behavior="alternate" style="font-family: roboto;color: #3498DB;text-transform:uppercase;font-size:14px;font-weight:500;"><marquee width="250">* Chúng tôi sẽ tự động hủy liên kết giữa các Blog không có sự tương tác!</marquee></marquee>

Về Tác Giả:
<center><img src="https://scontent.fdad3-2.fna.fbcdn.net/v/t1.0-9/25994830_523653441344242_5781561725136814878_n.jpg?oh=e12e2ad66982a5a79b3347b308dc2671&oe=5AC52890" alt="Admin Star Lượng IT" title="Admin Star Lượng IT" width="250" height="250" border="0" /><br/>---------------------------------<br/><div class="about-adh"><span><i class="fa fa-map-marker"></i><b> EaH'leo - ĐắkLắk - Việt Nam</b></span><br /><span><i class="fa fa-globe" style="font-size: 18px;"></i><b> StarLuongIT.Blogspot.Com</b></span><br /><span><i class="fa fa-envelope-o" style="font-size: 18px;"></i><b> TranLuong098@gmail.com</b></span><br /><span><i class="fa fa-facebook-square" style="font-size: 18px;"></i><b> Facebook.Com/NhokDz123 </b></span><br /></div></center>
 Chúc các bạn thành công.

Không có nhận xét nào