Bài đăng phổ biến theo chiều ngang có hiệu ứng Slider cho Blog

Để tiếp tục mang đến cho các bạn thêm 1 sự lựa chọn, hôm nay Viettin24h giới thiệu thêm một thủ thuật tạo Popular post (Bài đăng phổ biến) rất đẹp mắt ! Tiện ích này theo chiều ngang và đặc biệt có hiệu ứng Slider .

Ảnh minh họa :

Bắt đầu thủ thuật : 

Đọc thêm »

Bài đăng phổ biến với hiệu ứng 3D Cube

Gần đây Viettin24h.com giới thiệu đến các bạn khá nhiều cách tùy biến bài đăng phổ biến . Thủ thuật hôm nay mình giới thiệu đến các bạn rất đẹp và lạ mắt! Với hiệu ứng 3D Cube làm cho tiện ích nhìn rất bắt mắt . 

Ảnh minh họa : 

Demo

Bắt đầu thủ thuật :

1.Đăng nhập Blogger

Đọc thêm »

Bài đăng phổ biến theo chiều ngang với hiệu ứng trượt khi rê chuột

Bài đăng phổ biến có rất nhiều cách để trình diễn nó . Thủ thuật hôm nay Viettin24h dùng Plugin jquery rất dễ thao tác nhưng lại có tính thẩm mỹ rất cao ! 
Các bạn có thể tham khảo thêm các bài viết : tại đây
Ảnh minh họa :

Bắt đầu thủ thuật : 
1. Đăng nhập Blogger
2. Chon bố cục --> Thêm tiện ích " Bài đăng phổ biến "( nếu chưa có)
3. Thêm tiện ích HTML/Javascript và Dán code bên dưới vào tiện ích vừa tạo :

<style>
.popular-posts {
  margin: 0px 0 30px 0;
  padding: 0 0 0px 0;
  position: relative;
  width: 900px;
  height: 363px;
  overflow: hidden;
  
}
.popular-posts  {
 /* recommended styles for kwicks ul container */
 list-style: none;
 position: relative;
 margin: 0;
 padding: 0;
}
.popular-posts  li{
 /* these are required, but the values are up to you (must be pixel) */
 width: 185px;
 height: 363px;
 /*do not change these */
 display: block;
 overflow: hidden;
 padding: 0px;  /* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.fadeout {
  display: block;
  position: absolute;
  right: 0px;
  width: 300px;
  height: 365px;
  z-index: 4;
  background: url(overlay.png) repeat-y scroll top right;
}
.popular-posts  li {
 /* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
 margin-right: -4px; /*Set to same as spacing option. */
 float: left;
}
.popular-posts .item-title {
  background: #182424   !important;
  color: #fff;
  opacity: 0.77;
  filter:alpha(opacity=77);
  position: absolute;
  padding: 10px;
  top: 60px;
}

.popular-posts .item-title a:visited{
  color: #fff;
  font-size:16px;
  text-transform:uppercase;

}

.popular-posts  .item-snippet{
  background: #182424;
  color: #fff;
  opacity: 0.77;
  filter:alpha(opacity=77);
  position: absolute;
  padding: 10px;
  top: 215px;
  height:127px;
  
}
.popular-posts  img {
  margin: 0  !important;
  padding:0  !important;
  width:600px;
  height:363px;
}

.popular-posts  li a {
  margin: 0  !important;
  padding:0  !important;
  background-color:#182424 !important;
 
}
.popular-posts  .item-title a {
 opacity: 0.77;
  filter:alpha(opacity=77);
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://accordion-template.googlecode.com/svn/trunk/jquerykwick.js"></script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
$(document).ready(function() {
                    $('.popular-posts ul').kwicks({
     max : 600,
                    min : 300,
     spacing : -4,
                    duration: 200
      });
});
/*]]>*/
</script>

4. Sắp xếp tiện ích vừa tạo và Popular post như hình dưới :

5.Lưu lại và xem kết quả

Chúc các bạn thành công .

Tùy biến Popular post đẹp mắt cho Blogger

Popular post luôn không thể thiếu cho một Blog ! Với hiệu ứng rất đẹp mắt khi di chuyển thủ thuật Popular post hôm nay Viettin24h.com muốn chia sẻ đến các bạn  có thể như 1 recent post trang trí rất thuận tiện cho người xem !

Ảnh minh họa:

Bắt dầu thủ thuật :
1. Đăng nhập Blogger
2. Chọn bố cục--> thêm tiện ích HTML/ Javascript
3.Dán code bên dưới vào wiget vừa tạo:
Đọc thêm »

Tạo hiệu ứng trượt đẹp bài đăng phổ biến cho Blogger

Bài đăng phổ biến là một tiện ích rất quan trọng cho một trang web ! Nó giúp người đọc có thể biết được những bài viết được quan tâm và xem nhiều để tiện theo dõi! Hôm nay Viettin24h.com mang đến các bạn thủ thuật tùy biến Popular post ( Bài đăng phổ biến) với hiệu ứng trượt rất đẹp mắt 

Ảnh minh họa :

Bắt đầu thủ thuật:
Đọc thêm »

Tùy biến bài đăng phổ biến cho Blog

Thủ thuật này sẽ thay đổi một chút về giao diện của tiện ích Popular post . Tuy rất đơn giản nhưng cũng khá bắt mắt cho người đọc
 Ảnh minh họa:

Các bước thực hiện:1. Đăng nhập Blogger
2. Chọn bố cục-->Thêm tiện ích HTML/ Javascript và dán code bên dưới vào :

<style type="text/css" media="screen"> #PopularPosts1 { overflow:hidden; margin-top:5px; padding:0px 0px; height:400px; } #PopularPosts1 ul { width:220px; overflow:hidden; list-style-type: none; padding: 0px 0px; margin:0px 0px; } #PopularPosts1 li { width:208px; padding: 5px 5px; margin:0px 0px 5px 0px; list-style-type:none; float:none; height:80px; overflow: hidden; background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x; border:1px solid #ddd; } #PopularPosts1 li .item-title { color:#A5A9AB; font-size:1em; margin-bottom:0.5em; } #PopularPosts1 li .item-title a { text-decoration:none; color:#4B545B; font-size:11px; height:18px; overflow:hidden; margin:0px 0px; padding:0px 0px 2px 0px; } #PopularPosts1 li img { float:left; margin-right:5px; background:#EFEFEF; border:0; } #PopularPosts1 li .item-snippet { overflow:hidden; font-family:Tahoma,Arial,verdana, sans-serif; font-size:10px; color:#262B2F; padding:0px 0px; margin:0px 0px; } #PopularPosts1 .item-snippet a, #PopularPosts1 .item-snippet a:visited { color:#3E4548; text-decoration: none; } #PopularPosts1 .spyWrapper { height: 100%; overflow: hidden; position: relative; } #PopularPosts1 { -webkit-border-radius: 5px; -moz-border-radius: 5px; } .tags span, .tags a { -webkit-border-radius: 8px; -moz-border-radius: 8px; } a img { border: 0; } --> </style>   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> $(function () { $('.popular-posts ul').simpleSpy(); }); </script> <script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

3.Đặt tiện ích vừa tạo lên trên "Popular posts"
minh họa :




4. Lưu lại và xem kết quả

Làm đẹp tiện ích Popular Posts (hiệu ứng tooltip)

Như các bạn đã biết, tiện ích này có 3 chế độ hiển thị khác nhau. Và trong 3 chế độ này đa phần mọi người thường dùng cách hiển thị ảnh thumnnail và tiêu đề vì cách này nhìn tương đối nhất. Với cách hiển thị đầy đủ (gồm : tiêu đề, ảnh thumbnail và trích dẫn), thì cách này thường chiếm nhiều không gian của blog, do đó mà ít người dùng. Hôm nay mình sẽ áp dụng hiệu ứng tooltips cho tiện ích này, để có thể hiển thị đầy đủ nhất nôi dung của tiện ích này mà không tốn nhiều không gian của blog

Với áp dụng này, phần trích dẫn của tiện ích sẽ hiển thị khi ta rê chuột vào tiêu đề của bài viết. Việc làm này cũng ko ảnh hưởng nhiều đến việc load tiện ích, do tooltips cũng khá nhẹ, vì thế các bạn có thể an tâm về tốc độ load.

Ở đây mình sẽ hướng dẫn 2 cách hiển thị với tooltips.

Cách 1 : Hiển thị tiêu đề và ảnh thumnail, phần trích dẫn sẽ hiển thị khi rê chuột vào tiêu đề.
Cách 2 : Chỉ hiển thị tiêu đề, khi rê chuột sẽ hiển thị ảnh thumbnail và trích dẫn
Sau đây là hướng dẫn:
1. Đầu tiên để thực hiện được thủ thuật này, blog bạn phải có tiện ích popular posts.
- Các bạn thực hiện các bước chuẩn bị như hình bên dưới.

2. Chèn code javascript và CSS cho tooltips:
- Các bạn vào phần chỉnh sửa HTML và chèn đoạn code này vào trước thẻ </head>

<style type='text/css'>
/* Bắt đầu CSS ToolTip */
#dhtmltooltip{
border-right: #555 1px solid;
padding-right: 4px;
border-top: #555 1px solid;
padding-left: 4px;
font-size: 10pt;
z-index: 100;
filter: alpha(opacity=90);
-moz-opacity: .90;
-khtml-opacity: .90;
opacity: .90;
left: -300px;
visibility: hidden;
padding-bottom: 4px;
border-left: #555 1px solid;
padding-top: 4px;
border-bottom: #555 1px solid;
font-family: Arial;
position: absolute;
background: #ffffe0;
width: 250px;
}
#dhtmlpointer{
z-index: 101;
left: -300px;
visibility: hidden;
position: absolute;
}
/* Kết thúc CSS của Tooltip */
</style>
<script language='javascript' src='http://namkna-tratt.googlecode.com/files/tooltip.js'/>

Các bạn có thể tải File Js về TẠI DÂY sau đó Upload lên Google code riêng để sử dụng lâu dài. 
3. Như vậy đã chuẩn bị xong. bây giờ sẽ là hướng dẫn thực hiện thủ thuật.

A. Cách 1 : hiển thị ảnh thumnail và tiêu để, phần trích dẫn sẽ hiển thị khi rê chuột.

- Vào bố cục, vào chỉnh sửa code HTML, nhấp chọn mở rộng mẫu tiện ích.
- Chèn đoạn code CSS của thủ thuật vào trước dòng ]]></b:skin>

/* CSS Most View with ToolTip */
.popular-posts {display:none;}
#fdmostview {
margin:0px;
padding: 0px 5px 5px 5px; 
}
#fdmostview ul {margin:0!important;}
#fdmostview li.lipopu {min-height:54px;border-bottom:1px dashed #F7AA4F;padding:5px 0 5px 0;}
#fdmostview li.lipopu img {float:left;border:1px solid #ccc;padding:1px;margin-right:4px;width:50px;}
#fdmostview ul li {list-style:none;}
/* END Most View with ToolTip */

- Tiếp tục tìm đến code của tiện ích Popular Posts. trong phần mở rộng tiện ích mẫucode của nó sẽ trông như bên dưới :

<b:widget id='PopularPosts1' locked='false' title='Most View' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><data:title/></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
...
...
...
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

- và các bạn thêm code của thủ thuật vào đoạn code vừa tìm được như đoạn code màu xanhbên dưới :

<b:widget id='PopularPosts1' locked='false' title='Most View' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><data:title/></b:if>
<div class='widget-content popular-posts'>

<script type='text/javascript'>
var p=0;
var sumpopu = new Array();
var titlepopu = new Array();
var urlpopu = new Array();
var thumbpopu = new Array();
</script>

<ul>
<b:loop values='data:posts' var='post'>

<b:if cond='data:post.thumbnail'>
<script type='text/javascript'>
p++;
sumpopu[p]='<data:post.snippet/>';
titlepopu[p]='<data:post.title/>';
urlpopu[p]='<data:post.href/>';
thumbpopu[p]='<data:post.thumbnail/>';
</script>
<b:else/>
<script type='text/javascript'>
p++;
sumpopu[p]='<data:post.snippet/>';
titlepopu[p]='<data:post.title/>';
urlpopu[p]='<data:post.href/>';
thumbpopu[p]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD8e2ktLDLlxY7S9PlPA53sfr9eNZlt5Y-7KDSSjd8H58EMRDEvT3-ObXyXacym5upDfhc1Zj-Nlty1nhaJQvfECYB3eAl15aFGms8DYA_L-UQf1tkgjnHwTYnGh18TFELgz4BB5isEgeL/';
</script>
</b:if>

<li>
...
...
...
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>


<div id='fdmostview'>
<ul>
<script type='text/javascript'>
//<![CDATA[ 
for (k=1;k<p+1;k++) {
document.write("<li class='lipopu'><img src='"+thumbpopu[k]+"' 
/><a href='"+urlpopu[k]+"' onmouseout='hidetip();' 
onmouseover='showtip('"+sumpopu[k]+"')'>"+titlepopu[k]+"</a></li>");
}
//]]>
</script>
</ul>
</div>

</b:includable>
</b:widget>

- Cuối cùng save template lại.

B. Cách 2 : chỉ hiện thị tiêu đề bài viết, ảnh thumbnail và trích dẫn sẽ hiện thị khi rê chuột vào tiêu đề.

- Vào bố cục, vào chỉnh sửa code HTML, nhấp chọn mở rộng mẫu tiện ích.
- Chèn đoạn code CSS của thủ thuật vào trước dòng ]]></b:skin>

/* CSS Most View with ToolTip */
.popular-posts {display:none;}
#fdmostview {
margin:0px;
padding: 0px 5px 5px 5px; 
}
#fdmostview ul {margin:0!important;}
#fdmostview li.lipopu2 {border-bottom:1px dashed #F7AA4F;padding:5px 0 5px 0;}
#fdmostview ul li {list-style:none;}
img.imgpopu2 {float:left;border:1px solid #ccc;padding:1px;margin-right:4px;width:60px;}
/* END Most View with ToolTip */

- tương tự như cách 1, thêm đoạn code màu xanh bên dưới :

<b:widget id='PopularPosts1' locked='false' title='Most View' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><data:title/></b:if>
<div class='widget-content popular-posts'>

<script type='text/javascript'>
var p=0;
var sumpopu2 = new Array();
var titlepopu = new Array();
var urlpopu = new Array();
</script>

<ul>
<b:loop values='data:posts' var='post'>

<b:if cond='data:post.thumbnail'>
<script type='text/javascript'>
p++;
sumpopu2[p]='&lt;img class="imgpopu2" src="<data:post.thumbnail/>" /&gt;<data:post.snippet/>';
titlepopu[p]='<data:post.title/>';
urlpopu[p]='<data:post.href/>';
</script>
<b:else/>
<script type='text/javascript'>
p++;
sumpopu2[p]='&lt;img class="imgpopu2" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD8e2ktLDLlxY7S9PlPA53sfr9eNZlt5Y-7KDSSjd8H58EMRDEvT3-ObXyXacym5upDfhc1Zj-Nlty1nhaJQvfECYB3eAl15aFGms8DYA_L-UQf1tkgjnHwTYnGh18TFELgz4BB5isEgeL/"
 /&gt;<data:post.snippet/>';
titlepopu[p]='<data:post.title/>';
urlpopu[p]='<data:post.href/>';
</script>
</b:if>

<li>
...
...
...
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>


<div id='fdmostview'>
<ul>
<script type='text/javascript'>
//<![CDATA[ 
for (k=1;k<p+1;k++) {
document.write("<li class='lipopu2'><img 
src='http://data.fandung.com/img/icon_popular.png' /><a 
href='"+urlpopu[k]+"' onmouseout='hidetip();' 
onmouseover='showtip('"+sumpopu2[k]+"')'>"+titlepopu[k]+"</a></li>");
}
//]]>
</script>
</ul>
</div>

</b:includable>
</b:widget>

- Save template lại. 

Hiển thị bài đăng phổ biến dạng ảnh chuyển động

Chắc mọi người đều không xa lạ với hiệu ứng trình diễn ảnh chuyển động sử dụng jQuery. Hôm nay mình sẽ hướng dẫn áp dụng hiệu ứng này vào widget PopularPosts để trình diễn những bài đăng phổ biến dạng kiểu slider, widget PopularPosts này nằm ở phía trên của bài đăng.


Xem ảnh minh họa.

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   2- Vào thiết kế (Mẫu)

   3- Chọn Chỉnh sửa HTML.

   4-Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#gallery{-moz-box-shadow:0 2px 7px #555;-webkit-box-shadow:0 2px 7px #555;box-shadow:0px 2px 7px #555;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;position:relative;margin:0 35px 20px;width:540px;height:126px;background:#F4F4F4}
#gallery .belt{position:absolute;top:0;left:0}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35X8e9rF8Yx9gkGr5q4FUJJZstliP-flyFKV6nNhqO42tElMD0XOtX-RDHcRLZeosqcYRVk7XszufGxhFYxMh5WU4DULJRbxUcbspbI3l4RgdeZsmAF5YomjrFfVsd0a7FS0nwHiq3_o4/h120/bg-slider-namkna-blogspot-com.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

   5- Thêm đoạn mã dưới đây vào trước thẻ </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='http://dl.dropbox.com/u/66256041/Popular-Posts/namkna-blogspot-com/auto-slider.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje8LBD9Zg6X2DuCa2YqrT_lSZgaqqsi-cS66E6l9I3QUGeiLpRXgGSkwJV0mCiXRh2UETRNuehc6GQDEqCj7J5CA5rGgfmpA_e8VqypFya3kxcJeC5tpBd2DNqrr4kyRS0cNR6GhTOyYj9/s500/cooltext987481804.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje8LBD9Zg6X2DuCa2YqrT_lSZgaqqsi-cS66E6l9I3QUGeiLpRXgGSkwJV0mCiXRh2UETRNuehc6GQDEqCj7J5CA5rGgfmpA_e8VqypFya3kxcJeC5tpBd2DNqrr4kyRS0cNR6GhTOyYj9/s500/cooltext987481804.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

   6- Tìm thẻ

<b:section class='main' id='main' showaddelement='yes'/>

hoặc

<b:section class='main' id='main' showaddelement='no'/>

và thêm vào sau nó đoạn mã dưới đây:

<b:widget id='PopularPosts2' locked='false' title='' type='PopularPosts'>
 <b:includable id='main'>
  <div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <b:if cond='data:showThumbnails == &quot;false&quot;'>
       <b:if cond='data:showSnippets == &quot;false&quot;'>
        <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje8LBD9Zg6X2DuCa2YqrT_lSZgaqqsi-cS66E6l9I3QUGeiLpRXgGSkwJV0mCiXRh2UETRNuehc6GQDEqCj7J5CA5rGgfmpA_e8VqypFya3kxcJeC5tpBd2DNqrr4kyRS0cNR6GhTOyYj9/s500/cooltext987481804.png'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div>
 </b:includable>
</b:widget>

   7- Chuyển qua tab Phần tử trang và chọn chỉnh sửa widget PopularPost2 vừa tạo ở Bước 3. Phần Hiển thị chọn hình ảnh thu nhỏ và Hiển thị tối đa 10 bài đăng.

   8- Bấm Lưu Mẫu   và xem thành quả.

Một lần nữa mình phải nhắc lại là để ảnh bài đăng xuất hiện trên widget PopularPosts thì phải có ít nhất 1 ảnh được upload thông qua công cụ Chèn hình ảnh của Blogger, hoặc lấy địa chỉ ảnh từ Picasa và địa chỉ ảnh phải có s1600, s800...

Đây là 1 trong số hiếm hoi những thủ thuật về Blogger mà mình chủ động "đầu tư" thêm vào CSS, thông thường phần này mình để các bạn tự thiết kế theo ý thích.

Chúc thành công!

Popular Posts dạng ảnh xoay tròn từ CSS3 cho blogger

Thêm 1 style mới cho tiện ích bài đăng phổ biến, ưu điểm của style này là giúp tiết kiệm không gian, và không sử dụng javascript mà dùng các lệnh CSS3 để làm đẹp nên rất nhẹ. tạo hiệu ứng ảnh chuyển động xoay tròn khi bạn chỉ chuột vào ảnh

Các bạn hãy xem Demo để thấy rõ hơn.


Ảnh minh họa:

☼ Bước 1: Thêm Tiện ích Bài đăng phổ biến (Add widget Popular posts):

1- Đăng nhập vào Blog

2- Vào Bố cục (Template)

3- Chọn Thêm Tiện ích (Add Widget)

4. Bấm chọn mục bài đăng phổ Biến (Popularposst) sau đó lưu lại (nếu trong blog đã có tiện ích Popular Posts thì bỏ qua bước này):

5. Bấm vào chỉnh sửa (Edit) tiện ích Bài Đăng Phổ Biến (Popularposst) bạn vừa tạo để xác địnhId của tiện tích popular post và cài đặt các thông số.

- Trong trường hợp này thì id của tiện ích bài đăng phổ biến là popularposst1.
6-  Lưu lại thiết lập.

☼ Bước 2: Tùy biến Tiện ích Bài đăng phổ biến (Add widget Popular posts):

1- Bạn Vào Mẫu (Template)
2- Chỉnh Sửa HTML (không cần mở rộng tiện ích mẫu).
3- Chèn đoạn CSS bên dưới vào trước thẻ ]]></b:skin>

#PopularPosts1{max-width:300px}
#PopularPosts1 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0}
#PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-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);}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

- Trong đó là popularposst1 id của tiện ích bài đăng phổ biến bạn vừa tạo.

4- Tìm đoạn sau:

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

- Thay thế nó bằng đoạn 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 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 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>

5- Lưu lại mẫu và kiểm tra kết quả.

- Hãy kết hợp bài viết "ẩn bài viết bất kỳ trong tiện ích Popular Posts" Để tiện ích chuyên nghiệp hơn.

Chúc thành công!

Hiển thị đoạn trích dẫn dạng title cho bài đăng phổ biến

PopularPosts là 1 widget được Blogger đưa vào dùng thử nghiệm gần đây và được nhiều người đón nhận, đây là widget cho biết những bài đăng phổ biến được nhiều người đọc. Ngoài 3 dạng thống kê: 7 ngày qua, 30 ngày qua và mọi lúc nó có 4 kiểu hiển thị là: chỉ mình tiêu đề bài đăng, tiêu đề bài đăng và đoạn trích dẫn, tiêu đề bài đăng và hình ảnh, tiêu đề bài đăng kèm đoạn trích dẫn và hình ảnh. Thủ thuật sau đây sẽ hiển thị PopularPosts với tiêu đề bài đăng và hình ảnh, còn đoạn trích dẫn sẽ hiển thị khi đưa chuột vào tiêu đề.

Đọc thêm »