Tiện ích này cần được đặt dưới phần Header và trên phần content-wrapper vì thế chúng ta cần tạo thêm một phần crosscol-wrapper nằm giữa 2 thành phần nói trên. Về việc tạo riêng crosscol-wrapper cho blogspot, bạn có thể đọc thêm ở bài viết này. Ở đây mình đã tích hợp gắn tiện ích Popular Posts vào phần crosscol-wrapper này rồi.
Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Chọn Expand Widget Templates.
Tìm dòng <div id='content-wrapper'> và đặt trước nó với đoạn code bên dưới.
<div id='crosscol-wrapper'>Bước 2. Đặt đoạn code CSS bên dưới vào trước dòng ]]></b:skin>.<b:section class='crosscol' id='crosscol' preferred='yes'><b:widget id='PopularPosts200' locked='false' title='' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<!-- Horizontally Styled Popular Posts widget by www.thuthuatblogger.info -->
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a>
</div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'><div class='item-thumbnail'><b:if cond='data:post.thumbnail'><a expr:href='data:post.href' target='_blank'><img alt='' border='0' expr:src='data:post.thumbnail'/></a><b:else/><a expr:href='data:post.href' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiccUbf670WtzcbROEk03KXSGig85V16LckuHY2tyUKVPcmzrykHu-_mbIwHY9_jqlXfpLmOOvT1JZQWOg8udRGVALVoZEg3yVvnz4xiMLtmMwTlVuVg7ZmDq8F2gSNuT1lITBWLa0asGs/'/></a></b:if></div><div class='item-title'><a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a></div></div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget></b:section></div>
<div style='clear: both;'/>
#crosscol-wrapper{margin: 0 auto; padding:0}Lưu Template là xong. Sau đó có thể vào Page Elements chỉnh sửa tiện ích để chọn bài phổ biến theo tuần, theo tháng hoặc toàn thời gian. Riêng về CSS nói trên, mình để ngỏ để các bạn tùy ý tùy biến sao cho phù hợp với giao diện blogspot của bạn. Nếu gặp vấn đề gì (đối với newbie) xin vui lòng lưu lại thông tin ở phần Comments để mình sắp xếp giải đáp.
#PopularPosts200{width: 100%; margin: 0px auto; padding: 5px 0px}
#PopularPosts200 h2{display:none}
#PopularPosts200 .widget-content{float:left;margin:0; padding:0}
#PopularPosts200 .widget-content ul {margin: 0 auto;padding:0;width: 100%; list-style:none}
#PopularPosts200 .widget-content ul li {margin:0 6px 10px 6px;width: 175px;padding:10px;height: 100px; overflow:hidden;list-style:none; float:left; border: 1px solid #DDD;}
#PopularPosts200 .item-content{font-size: 14px; text-align:left; padding: 5px 10px}
#PopularPosts200 img{margin:0;padding:0; background: #fff; float:left;width:65px;height:65px;border: 1px solid #DDD}
#PopularPosts200 .item-title{line-height:1.3em}
{ 0 nhận xét... read them below or add one }
Đăng nhận xét