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

Nhằm tiếp nối và làm phong phú thêm cho chùm bài viết giới thiệu về các thủ thuật được mình sưu tầm và tinh chỉnh đẹp mắt hơn đến bạn đọc. Hôm nay mình se cùng các bạn đến với một tiện ích rất quen thuộc đó chình là Bài đăng phổ biến - Popular post. Phần một này sẽ dành giới thiệu về thủ thuật tạo Bài đăng phổ biến đẹp mắt mình đã học hỏi được từ noct-land.blogspot.com

Một số tinh chỉnh của mình:

- Bỏ đi hiệu ứng xoay 350 độ và thay vào đó là hiệu ứng phóng to ảnh thumbnail khi di chuột đến.

- Thêm vào tooltip cho tiêu đề bài đăng nhằm tạo thêm tính thẩm mỹ.

Demo

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

#PopularPosts1 ul{list-style:none;margin:2px 0 0 4px;padding-top:5px;}
#PopularPosts1 dd{float:left;border-bottom:none;margin:4px 4px 4px 7px;background:none;display:block;padding:0}
#PopularPosts1 img{background:#fff;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transition:all 0.2s ease;padding:3px;-webkit-box-shadow:0 0 5px rgba(0,0,0,.7);-moz-box-shadow:0 0 5px rgba(0,0,0,.7);box-shadow:0 0 5px rgba(0,0,0,.7)}
#PopularPosts1 img:hover{-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}
.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'>
<dd>
<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-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 -->
<b:if cond='data:post.thumbnail'>
<a class='hastip1' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='60px' width='60px'/></a>
<b:else/>
<a class='hastip1' expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' height='60px' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' width='60px'/></a>
</b:if>
</b:if>
</b:if>
</dd>
</b:loop>
</ul>
<div class='clear'/>
<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!