Bài đăng phổ biến đẹp - Phần 2

Không để bạn phải chờ đợi lâu mình sẽ tiếp tục chùm bài viết về "Bài đăng phổ biến đẹp".

Vẫn với tiêu chí đơn giản nhưng đẹp (simple - beautiful) hôm nay mình sẽ cùng bạn thực hiện một style mình tham khảo ở maskolis.com với cải tiến đáng kể là thêm tooltip trích dẫn bài viết khi trỏ chuột vào ảnh thumbnail của bài viết.

Demo

Bước 1: Chèn đoạn css sau phía trên ]]></b:skin> trong template:

#PopularPosts1 .widget-content ul li{background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}

#PopularPosts1 .widget-content{padding:5px 4px}

#PopularPosts1 ul{padding:3px 0}

#PopularPosts1 .item-thumbnail img{width:93px;height:110px;padding:4px 4px 0 4px;margin:0}

#PopularPosts1 .item-content{position:relative !important;float:left;margin:0}

#PopularPosts1 .item-title a{font:12px Arial;text-align:center;color:#fff;display:block;padding:0 3px;float:left;width:95px}

#PopularPosts1 .item-title a:hover{background:#000;color:#ccc;}

#PopularPosts1 .item-thumbnail{float:left;margin:3px 8px 7px 8px;-webkit-box-shadow:0 0 3px rgba(0,0,0,.7);-moz-box-shadow:0 0 3px rgba(0,0,0,.7);box-shadow:0 0 3px rgba(0,0,0,.7);overflow: hidden}

#PopularPosts1 .item-title{background:rgba(0,0,0,.6);position:absolute;bottom:7px;right:8px;overflow: hidden}

.tooltipsy{font:bold 12px Arial;padding:10px;max-width:180px;color:#494848;background:#fff;border-top:4px solid #9e0039;-webkit-box-shadow:0 0 3px rgba(0,0,0,0.7);-moz-box-shadow:0 0 3px rgba(0,0,0,0.7);box-shadow:0 0 3px rgba(0,0,0,0.7)}

Bước 2: Thêm đoạn mã sau ngay trên thẻ đóng </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/> 

<script src='http://dxhbook.googlecode.com/files/tooltipsy.min.js' type='text/javascript'/>

Lưu ý: Nếu trong template đã có file jQuery rồi thì không cần thêm nữa tránh gây xung đột.

Bước 3: Bạn tạo một tiện ích Bài đăng phổ biến (nếu trong blog đã có tiện ích Bài đăng phổ biến thì bỏ qua bước này) rồi chỉnh như sau:

Bước 4: Bạn vào phần Chỉnh sửa HTML  (không click Mở rộng Mẫu Tiện ích) tìm đoạn mã sau:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

Lưu ý: "Popular Post" là tên của widget Bài đăng phổ biến sẽ khác nhau tùy thuộc vào blog của bạn.

Thay thế bằng đoạn mã sau:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (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'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-content'>
<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'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a class='hastip1' expr:href='data:post.href' expr:title='data:post.snippet' 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' rel='bookmark'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Bước 5: Tìm kiếm thẻ đóng </body> và thêm vào ngay trước nó đoạn mã sau:

<script type='text/javascript'>

$(&quot;.hastip1&quot;).tooltipsy({offset:[10,0],show:function(b,a){a.css({left:parseInt(a[0].style.left.replace(/[a-z]/g,&quot;&quot;))+50+&quot;px&quot;,opacity:&quot;0.0&quot;,display:&quot;block&quot;}).animate({left:parseInt(a[0].style.left.replace(/[a-z]/g,&quot;&quot;))-50+&quot;px&quot;,opacity:&quot;1.0&quot;},300);},hide:function(b,a){a.slideUp(100);},});

</script>

Saver lại template và tận hưởng!