Coll Popular Posts

Các bạn có thể xem Demo ngay tại trang blog của mình, đây là tiện ích mới nhất được mình nghiên cứu và làm đẹp. Code cho tiện ích này được mình tham khảo từ template Simplex PhoneMag với một số tinh chỉnh cho phù hợp và gọn nhẹ. So với Cool Popular Posts của Duy Pham style mới này đã có một vài cải tiến đáng giá và dễ sử dụng hơn, có thể kể đến như:

.dxhpopular{position:relative;float:left;height:76px;width:115px;margin:0 7px 10px}
.dxhpopular a{text-decoration:none}
.dxhpopular .ablock{display:block;position:absolute}
.dxhpopular .number{background:rgba(188,29,211,.8);color:#fff;display:block;font-size:13px;position:absolute;left:0;height:14px;width:12px;z-index:3;padding:1px 2px 4px 6px}
.dxhpopular img{height:85px;width:115px;position:absolute;z-index:1}
.dxhpopular .text{background:rgba(0,0,0,.9);color:#fff;float:left;font-size:12px;height:34px;line-height:15px;overflow:hidden;position:absolute;bottom:0;text-decoration:none;vertical-align:middle;width:105px;z-index:3;padding:3px 5px 0}
.dxhpopular:hover > .text{background:rgba(188,29,211,.8)}

Bước 2: Tìm đến thẻ đóng </head> và thêm vào ngay trước nó đoạn mã.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
//<![CDATA[
(function(a){a.tooltipsy=function(c,b){this.options=b;this.$el=a(c);this.title=this.$el.attr("title")||"";this.$el.attr("title","");this.random=parseInt(Math.random()*10000);this.ready=false;this.shown=false;this.width=0;this.height=0;this.delaytimer=null;this.$el.data("tooltipsy",this);this.init()};a.tooltipsy.prototype.init=function(){var b=this;b.settings=a.extend({},b.defaults,b.options);b.settings.delay=parseInt(b.settings.delay);if(typeof b.settings.content==="function"){b.readify()}if(b.settings.showEvent===b.settings.hideEvent&&b.settings.showEvent==="click"){b.$el.toggle(function(c){if(b.settings.showEvent==="click"&&b.$el[0].tagName=="A"){c.preventDefault()}if(b.settings.delay>0){b.delaytimer=window.setTimeout(function(){b.show(c)},b.settings.delay)}else{b.show(c)}},function(c){if(b.settings.showEvent==="click"&&b.$el[0].tagName=="A"){c.preventDefault()}window.clearTimeout(b.delaytimer);b.delaytimer=null;b.hide(c)})}else{b.$el.bind(b.settings.showEvent,function(c){if(b.settings.showEvent==="click"&&b.$el[0].tagName=="A"){c.preventDefault()}if(b.settings.delay>0){b.delaytimer=window.setTimeout(function(){b.show(c)},b.settings.delay)}else{b.show(c)}}).bind(b.settings.hideEvent,function(c){if(b.settings.showEvent==="click"&&b.$el[0].tagName=="A"){c.preventDefault()}window.clearTimeout(b.delaytimer);b.delaytimer=null;b.hide(c)})}};a.tooltipsy.prototype.show=function(f){var d=this;if(d.ready===false){d.readify()}if(d.shown===false){if((function(h){var g=0,e;for(e in h){if(h.hasOwnProperty(e)){g++}}return g})(d.settings.css)>0){d.$tip.css(d.settings.css)}d.width=d.$tipsy.outerWidth();d.height=d.$tipsy.outerHeight()}if(d.settings.alignTo==="cursor"&&f){var c=[f.pageX+d.settings.offset[0],f.pageY+d.settings.offset[1]];if(c[0]+d.width>a(window).width()){var b={top:c[1]+"px",right:c[0]+"px",left:"auto"}}else{var b={top:c[1]+"px",left:c[0]+"px",right:"auto"}}}else{var c=[(function(e){if(d.settings.offset[0]<0){return e.left-Math.abs(d.settings.offset[0])-d.width}else{if(d.settings.offset[0]===0){return e.left-((d.width-d.$el.outerWidth())/2)}else{return e.left+d.$el.outerWidth()+d.settings.offset[0]}}})(d.offset(d.$el[0])),(function(e){if(d.settings.offset[1]<0){return e.top-Math.abs(d.settings.offset[1])-d.height}else{if(d.settings.offset[1]===0){return e.top-((d.height-d.$el.outerHeight())/2)}else{return e.top+d.$el.outerHeight()+d.settings.offset[1]}}})(d.offset(d.$el[0]))]}d.$tipsy.css({top:c[1]+"px",left:c[0]+"px"});d.settings.show(f,d.$tipsy.stop(true,true))};a.tooltipsy.prototype.hide=function(c){var b=this;if(b.ready===false){return}if(c&&c.relatedTarget===b.$tip[0]){b.$tip.bind("mouseleave",function(d){if(d.relatedTarget===b.$el[0]){return}b.settings.hide(d,b.$tipsy.stop(true,true))});return}b.settings.hide(c,b.$tipsy.stop(true,true))};a.tooltipsy.prototype.readify=function(){this.ready=true;this.$tipsy=a('<div id="tooltipsy'+this.random+'" style="position:absolute;z-index:2147483647;display:none">
').appendTo("body");this.$tip=a('<div class="'+this.settings.className+'">
').appendTo(this.$tipsy);this.$tip.data("rootel",this.$el);var c=this.$el;var b=this.$tip;this.$tip.html(this.settings.content!=""?(typeof this.settings.content=="string"?this.settings.content:this.settings.content(c,b)):this.title)};a.tooltipsy.prototype.offset=function(c){var b=ot=0;if(c.offsetParent){do{if(c.tagName!="BODY"){b+=c.offsetLeft-c.scrollLeft;ot+=c.offsetTop-c.scrollTop}}while(c=c.offsetParent)}return{left:b,top:ot}};a.tooltipsy.prototype.destroy=function(){this.$tipsy.remove();a.removeData(this.$el,"tooltipsy")};a.tooltipsy.prototype.defaults={alignTo:"element",offset:[0,-1],content:"",show:function(c,b){b.fadeIn(100)},hide:function(c,b){b.fadeOut(100)},css:{},className:"tooltipsy",delay:100,showEvent:"mouseenter",hideEvent:"mouseleave"};a.fn.tooltipsy=function(b){return this.each(function(){new a.tooltipsy(this,b)})}})(jQuery);
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){$("#PopularPosts1 li.dxhpopular").each(function(e){e=e+1;text='<a class="number">'+e+"</a>";$(this).prepend(text)})})
//]]>
</script>

Lưu ý: Nếu trong template của bạn đã có file jQuery rồi thì không cần thêm nữa.


Bước 3: Trong chế độ Không mở rộng mẫu tiện ích tìm đến đoạn code (Hãy chắc rằng bạn đã thêm tiện ích Bài đăng phổ biến - Popular posts trong template của mình)

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

Và thay thế nó bằng

<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 class='dxhpopular'>
<img expr:src='data:post.thumbnail'/>
<a class='ablock' expr:href='data:post.href'/>
<a class='text table-cell hastip1' expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a>
<div class='clearfix'/>
</li>
</b:loop>
</ul>
<br/>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

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

<script type='text/javascript'>
//<![CDATA[
$(".hastip1").tooltipsy({offset:[0,1],show:function(e,t){t.css({left:parseInt(t[0].style.left.replace(/[a-z]/g,""))-50+"px",opacity:"0.0",display:"block"}).animate({left:parseInt(t[0].style.left.replace(/[a-z]/g,""))+50+"px",opacity:"1.0"},300)},hide:function(e,t){t.slideUp(100)},css:{"max-width":"200px","font-weight":"400","font":"bold 12px Arial","line-height":"18px","padding":"10px","color":"#fff","background":"#000";"box-shadow":"0 0 3px rgba(0,0,0,0.7)"}})
//]]>
</script>

Ok save lại template của bạn. Thủ thuật đã hoàn thành!