Tạo Widgets Recent bài viết theo nhãn 3 cột với bootstrap cực đẹp

LongAnIT 11/19/2018 11:03:00 SA Bình luận
Tạo Recent bài viết theo nhãn 3 cột với bootstrap cực đẹp
Tạo Recent bài viết theo nhãn 3 cột với bootstrap cực đẹp
Trong bài viết này tôi sẽ hướng dẫn cho các bạn cách Tạo Widgets Recent bài viết theo nhãn ngoài trang chủ với 3 cột sử dụng cách gọi thư viện bootstrap.

Để thực hiện bạn vui lòng add thư viện bootstrap vào blogger. Bạn có thể xem bài hướng dẫn cách thêm thư viện bootstrap vào blogger tại đây.

Bước 1:  Tạo Widget với Bootstrap. Thường thì code này sẽ nằm trên cùng và nằm ngay dưới header
Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML

<div class='container'>
 <div class='row'>
<div class='col-xs-12'>
 <b:section class='col-lg-4 col-md-4 col-sm-4  col-xs-12' id='cot1'></b:section>
<b:section class='col-lg-4 col-md-4 col-sm-4  col-xs-12' id='cot1'></b:section>
<b:section class='col-lg-4 col-md-4 col-sm-4  col-xs-12' id='cot1'></b:section>
<b:section class='col-lg-4 col-md-4 col-sm-4  col-xs-12' id='cot1'></b:section>
</div>
</div>
 </div>
Bước 2: Thêm thẻ điều kiện vào chỉ cho phép hiển thị tại trang chủ
<b:if cond='data:blog.url == data:blog.homepageUrl'>  <!-- Nội dung chỉ hiển thị trên trang chủ -->
<div class='container'>
 <div class='row'>
<div class='col-xs-12'>
 <b:section class='col-lg-4 col-md-4 col-sm-4  col-xs-12' id='cot1'></b:section>
<b:section class='col-lg-4 col-md-4 col-sm-4  col-xs-12' id='cot2'></b:section>
<b:section class='col-lg-4 col-md-4 col-sm-4  col-xs-12' id='cot3'></b:section>
</div>
</div>
 </div>
</b:if> 
Bố Cục bài đăng
Cột bài đăng sẽ hiển thị như hình bên dưới sau khi bạn chuyển sang phần Bố Cục
Bước 3: Ngay cột 1 của bố cục bài đăng click vào thêm tiện ích - HTML/Jsvascript


Thêm tiện ích - HTML/Jsvascript cho Widget
 Thêm tiện ích - HTML/Jsvascript cho Widget

Copy đoạn code bên dưới dán vào
<style>
/* Recent posts by labels widget by longanit.com*/
#cot1, #cot2, #cot3, #cot4{background:white;border-bottom: 5px solid #337ab7;margin-bottom:10px;border-radius: 5px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);border-right: 5px solid #f1f1f1}
img.label_thumb{border-radius:100%;float:left;margin-right:10px !important;
height:72px; /* Thumbnail height */width:72px; /* Thumbnail width */border: 1px solid #fff;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
#label_with_thumbs { text-align: justify;float: left;padding: 0;
}
ul#label_with_thumbs li {
padding:8px 0;
min-height:75px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}
#label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}
#label_with_thumbs a:visited {
    text-decoration: none;
    color: black;}
#label_with_thumbs a:link {
    text-decoration: none;
    color: black;}
#label_with_thumbs a { text-transform: none;}
#label_with_thumbs a:hover { text-decoration: underline;}
#label_with_thumbs strong {padding-left:0px; }</style>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>
<script type='text/javascript'>var numposts = 5;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 200;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Ebook?published&alt=json-in-script&callback=labelthumbs"></script>

Bước 4: Cột 2 của bố cục bài đăng click vào thêm tiện ích - HTML/Jsvascript copy đoạn code bên dưới dán vào
<script type="text/javascript" src="/feeds/posts/default/-/Ebook?published&alt=json-in-script&callback=labelthumbs"></script>
Chú ý: Thay nhãn Ebook thành nhãn mà bạn muốn hiển thị. Bạn có thể chỉnh sửa thêm một số tính nằng tại code bên trên như

  • var numposts = 5; ( Số bài viết hiển thị )
  • var showpostthumbnails = true; ( Hiển thị hình ảnh Thumb set False để không hiển thị )
  • var displaymore = false; ( Hiển thị Read more )
  • var displayseparator = true;
  • var showcommentnum = false;  ( Hiển thị comment )
  • var showpostdate = false; ( Hiển thị ngày đăng )
  • var showpostsummary = false;  ( Hiển thị ký tự bài viết )
  • var numchars = 200 (Số ký tự bài đăng mặc định là 200 )



Hướng dẫn tạo khung comment đẹp cho blogger (có phân cấp)

LongAnIT 10/26/2018 10:03:00 SA Bình luận
Tạo khung comment đẹp cho blogger (có phân cấp)

Đây là khung comment phân cấp. Nguyên nhân là do "threaded comment" mặc định của Blogger chỉ được tối đa là 1 cấp mà thôi. Bài viết hướng dẫn các bạn tạo khung comments system đẹp cho blogger. Vui lòng làm theo các bước sau đây

Bước 1: Vào chủ đề - Chỉnh sửa HTML tìm code sau:
<b:include data='post' name='comments'/>

Sau đó thay thế bằng code bên dưới
 <b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
Bước 2: Tìm trong CSS và copy đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>
.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.comments .comments-content .comment:first-child{padding-top:16px}
.comments .comments-content .comment:last-child{border-bottom:0;padding-bottom:0}
.comments .comments-content .comment-body{position:relative}
.comments .comments-content .user{font-style:normal;font-weight:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;opacity:0;overflow:hidden}
.comments .thread-chrome.thread-collapsed{display:none}
.comments .thread-toggle{display:inline-block}
.comments .thread-toggle .thread-arrow{display:inline-block;height:6px;width:7px;overflow:visible;margin:0.3em;padding-right:4px}
.comments .thread-expanded .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.avatar-image-container{background:url(https://lh5.googleusercontent.com/-Wmy6bwNKzbo/T0miLZkuJsI/AAAAAAAAChc/orbwMGHyBxA/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

Bước 3: Save template lại và test, chúc các bạn thành công

Tạo Recent Comments Widget Blogger với Avatar

LongAnIT 10/24/2018 11:47:00 SA Bình luận
Tạo Recent Comments Widget Blogger với Avatar

Bài viết hướng dẫn các bạn tạo Recent comment mới nhất với biểu tượng Avatar bo góc đẹp. Các bạn làm theo hướng dẫn bên dưới nhé

Bước 1: Đăng nhập vào Blogger - Bố cục thêm tiện ích  - HTML & Java Script

Bước 2: Copy đoạn code bên dưới dán vào và sửa nội dung tiêu đề cho phù hợp cũng như thay thế đường link thành đường link của Blog bạn nhé.

<h2>Bình luận mới nhất</h2>
<style>
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:8px 0!important}.idbcomments li .avatarImage{float:left;margin-right:10px;position:relative;overflow:hidden}.idbcomments li img{border-radius:100%;position:relative;overflow:hidden;display:block;width:42px;height:42px}.idbcomments li a{font-weight:700}.idbcomments li span{margin-top:2px;color:#666;display:block;font-size:12px;line-height:1.4}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments by longanit //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")?"http://1.bp.blogspot.com/-7bkcAKdpGXI/UrbyQRqvSKI/AAAAAAAAFmI/oBv_yMeYnMQ/s"+avatarSize+"/blogger.png":-1!=n.indexOf("blogblog.com/img/openid16-rounded.gif")?"http://2.bp.blogspot.com/-VgnInuIUKBU/UrbzyXTYWRI/AAAAAAAAFmU/3f_Vfj3TI6A/s"+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+'"><img class="'+i+'" src="'+n+'" alt="'+o+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'),e+='<a 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=7,showAvatar=!0,avatarSize=42,roundAvatar=!0,characters=40,showMorelink=!1,defaultAvatar="http://1.bp.blogspot.com/-m2JqA8HH-JY/V1Y9Z1SpzpI/AAAAAAAAEEY/jnJ-r_-Ta0UadbOE84Egdea5jfcwPSSvwCLcB/s1600/noimage.png",hideCredits=!0,numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"http://1.bp.blogspot.com/-m2JqA8HH-JY/V1Y9Z1SpzpI/AAAAAAAAEEY/jnJ-r_-Ta0UadbOE84Egdea5jfcwPSSvwCLcB/s1600/noimage.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="https://www.longanit.com/feeds/comments/default?alt=json&amp;callback=idbcomments&amp;max-results=7"></script>

Chú ý:

  1. Thay đổi đường link https://www.longanit.com thành url web của bạn nhé
  2. idbcomments&amp;max-results=7 : Thay đổi số comment hiển thị trên web của bạn

Cách Cố định Widget khi cuộn trang trong blogger

LongAnIT 9/14/2018 02:15:00 CH Bình luận
Floating Sidebar  Widget

Sticky Widget cố định cho Blogger có nghĩa là widget sẽ chạy theo màn hình khi cuộn trang lên xuống.

Với cách cố định Widget này sẽ giúp người truy cập nhanh vào các menu, hoặc bạn cần làm nổi bật một nội dung widget nào đó. Đặc biệt nó rất hay được dùng cho các trang cần cố định banner quảng cáo.

Để thực hiện Code cố định Widget (Sticky widget) khi cuộn trang cho Blogger các bạn chỉ việc copy toàn bộ đoạn code phía dưới đây và chèn vào trước thẻ </body> trong template.

<style> .GICO_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative9 !important;}
</style>
<script>
//<![CDATA[
StickyWidget("ID Widget"); // enter your widget ID here
function StickyWidget(elem) {
    var GCVN_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    GCVN_sticky.parentNode.insertBefore(scrollee, GCVN_sticky);
    var width = GCVN_sticky.offsetWidth;
    var iniClass = GCVN_sticky.className + ' GCVN_sticky';
    window.addEventListener('scroll', GICO_sticking, false);
    function GICO_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            GCVN_sticky.className = iniClass + ' GICO_sticking';
            GCVN_sticky.style.width = width + "px";
        } else {
            GCVN_sticky.className = iniClass;
        }
    }
}
//]]>
</script>
 Chú ý: Bạn thay ID Widget thành ID Widget mà bạn muốn cố định.