Để tạo tiện ích này ta cũng cần bật tiện ích bài đăng phổ biến sẵn có của blog và để tiện ích mới tạo này ngay trên nó, xem hình minh họa
Code:
<style type="text/css" media="screen">
#PopularPosts1{
height:263px;
}
.item-content {
height:263px;
position:relative;
width:560px;
}
.slider {
height:263px;
margin-left:25px;
width:560px;
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:263px;
}
.item-snippet {
background:transparent url(https://lh4.googleusercontent.com/-6krwMs9hWUY/UXwEYrlFZ7I/AAAAAAAAYw8/Q5whGG9eYl4/s5/darkbg.png) repeat scroll 0 0;
color:#FFFFFF;
padding:5px 5px 10px 5px;
position:absolute;
bottom:0;
text-align:left;
width:560px;
font-size:9px;
font-style:italic;
}
.item-title{
color:#FFFFFF;
font-size:10px;
font-weight:bold;
font-style:normal;
margin-bottom:5px;
}
.item-title a:link,.item-title a:visited{
color:#FFFFFF;
text-decoration:none;
border:none !important;
padding:0 !important;
}
.item-thumbnail img{
padding:0 !important;
}
.item-thumbnail a{
padding:0 !important;
}
.crosscol .widget-content {position:relative;}
.slider ul, .slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
.slider li, #slider2 li{
width:560px;
height:263px;
overflow:hidden;
}
.item-thumbnail img{width:560px;height:263px}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:582px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:0;
position:absolute;
top:100px;
width:30px;
z-index:1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(https://lh3.googleusercontent.com/-FKTP6McIwLI/UXwEYqIE0kI/AAAAAAAAYxA/lTWtBmj5jBQ/s77/prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(https://lh5.googleusercontent.com/-ivj4BnM0eHg/UXwEYo32kUI/AAAAAAAAYxE/IiOHy-CezxQ/s77/next.png) no-repeat 0 0;
}
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
.test{
margin:30px;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(6($){$.1G.1d=6(m){4 n={D:\'1H\',1e:\'1I\',J:\'1J\',1f:\'1K\',1g:7,1h:\'\',1i:\'\',10:7,E:\'1L\',1j:\'1M\',1k:8,K:\'1N\',1l:\'1O\',1m:8,R:8,11:1P,S:8,12:1Q,x:8,L:8,F:\'1R\'};4 m=$.1S(n,m);13.1n(6(){4 f=$(13);4 s=$("9",f).1o;4 w=$("9",f).G();4 h=$("9",f).T();4 g=7;f.G(w);f.T(h);f.y("1T","1U");4 j=s-1;4 t=0;$("o",f).y(\'G\',s*w);3(m.x){$("o",f).14($("o 9:15-1p",f).1q().y("16-U","-"+w+"1V"));$("o",f).1W($("o 9:1X-1p(2)",f).1q());$("o",f).y(\'G\',(s+1)*w)};3(!m.R)$("9",f).y(\'1Y\',\'U\');3(m.1g){4 k=m.1h;3(m.L){k+=\'<1r 5="\'+m.F+\'"></1r>\'}z{3(m.1k)k+=\'<u 5="\'+m.E+\'"><a A=\\"M:N(0);\\">\'+m.1j+\'</a></u>\';k+=\' <u 5="\'+m.D+\'"><a A=\\"M:N(0);\\">\'+m.1e+\'</a></u>\';k+=\' <u 5="\'+m.J+\'"><a A=\\"M:N(0);\\">\'+m.1f+\'</a></u>\';3(m.1m)k+=\' <u 5="\'+m.K+\'"><a A=\\"M:N(0);\\">\'+m.1l+\'</a></u>\'};k+=m.1i;$(f).1Z(k)};3(m.L){1s(4 i=0;i<s;i++){$(1t.20("9")).B(\'5\',m.F+(i+1)).1u(\'<a 1v=\'+i+\' A=\\"M:N(0);\\">\'+(i+1)+\'</a>\').21($("#"+m.F)).O(6(){q($("a",$(13)).B(\'1v\'),7)})}}z{$("a","#"+m.J).O(6(){q("P",7)});$("a","#"+m.D).O(6(){q("1w",7)});$("a","#"+m.E).O(6(){q("1x",7)});$("a","#"+m.K).O(6(){q("15",7)})};6 17(i){i=22(i)+1;$("9","#"+m.F).23("1y");$("9#"+m.F+i).18("1y")};6 19(){3(t>j)t=0;3(t<0)t=j;3(!m.R){$("o",f).y("16-U",(t*w*-1))}z{$("o",f).y("16-U",(t*h*-1))}g=7;3(m.L)17(t)};6 q(a,b){3(g){g=8;4 c=t;24(a){V"P":t=(c>=j)?(m.x?t+1:j):t+1;Q;V"1w":t=(t<=0)?(m.x?t-1:0):t-1;Q;V"1x":t=0;Q;V"15":t=j;Q;25:t=a;Q};4 d=26.27(c-t);4 e=d*m.11;3(!m.R){p=(t*w*-1);$("o",f).q({28:p},{1z:8,1A:e,1B:19})}z{p=(t*h*-1);$("o",f).q({29:p},{1z:8,1A:e,1B:19})};3(!m.x&&m.10){3(t==j){$("a","#"+m.J).H();$("a","#"+m.K).H()}z{$("a","#"+m.J).W();$("a","#"+m.K).W()};3(t==0){$("a","#"+m.D).H();$("a","#"+m.E).H()}z{$("a","#"+m.D).W();$("a","#"+m.E).W()}};3(b)2a(l);3(m.S&&a=="P"&&!b){;l=1C(6(){q("P",8)},d*m.11+m.12)}}};4 l;3(m.S){;l=1C(6(){q("P",8)},m.12)};3(m.L)17(0);3(!m.x&&m.10){$("a","#"+m.D).H();$("a","#"+m.E).H()}})}})(2b);$(1t).2c(6(){$(".X-Y").18(\'1D\');$(".X-Y 9").1n(6(a,b){$(b).B("5","r-5-"+(a+1))});4 s=$(".X-Y 9").1o;$(".X-Y a").B("2d","");1s(4 i=0;i<s;i++){$("#r-5-"+(i+1)+" .C-2e").14(\'<Z 1a="C-1b">\'+$("#r-5-"+(i+1)+" .C-1b").1u()+"</Z>");$("#r-5-"+(i+1)+" .C-1E v").18("v-I");4 c=$("#r-5-"+(i+1)+" .v-I").B("1c");3(c){c=c;$("#r-5-"+(i+1)+" .v-I").B("1c",c.2f("/2g-c/","/2h/"))}z{$("#r-5-"+(i+1)+" .C-2i").14(\'<Z 1a="C-1E"><a A="\'+$("#r-5-"+(i+1)+" .C-1b a").B("A")+\'"><v 1a="v-I" 2j="" 1c="2k://1.2l.2m.2n/2o/2p/2q/2r/2s/2t.2u" 2v="0" T="2w" G="2x"></a></Z>\')}$("#r-5-"+(i+1)+" .v-I").1F(\'G\');$("#r-5-"+(i+1)+" .v-I").1F(\'T\')};$(".1D").1d({S:7,x:7})});',62,158,'|||if|var|id|function|true|false|li|||||||||||||||ul||animate|pop|||span|img||continuous|css|else|href|attr|item|prevId|firstId|numericId|width|hide|thumb|nextId|lastId|numeric|javascript|void|click|next|break|vertical|auto|height|left|case|show|popular|posts|div|controlsFade|speed|pause|this|prepend|last|margin|setCurrent|addClass|adjust|class|title|src|easySlider|prevText|nextText|controlsShow|controlsBefore|controlsAfter|firstText|firstShow|lastText|lastShow|each|length|child|clone|ol|for|document|html|rel|prev|first|current|queue|duration|complete|setTimeout|slider|thumbnail|removeAttr|fn|prevBtn|Previous|nextBtn|Next|firstBtn|First|lastBtn|Last|800|2000|controls|extend|overflow|hidden|px|append|nth|float|after|createElement|appendTo|parseInt|removeClass|switch|default|Math|abs|marginLeft|marginTop|clearTimeout|jQuery|ready|target|snippet|replace|s72|s1600|content|alt|http|bp|blogspot|com|_u4gySN2ZgqE|SosvnavWq0I|AAAAAAAAArk|yL95WlyTqr0|s200|noimage|png|border|200|220'.split('|'),0,{}))
//]]>
</script>
Như vậy là hoàn thành thủ thuậtNguồn:iBlogger Ku