Popular posts dạng ảnh có số đếm từ jquery v2 cho blogger

Bài viết này sẽ hướng dẫn các bạn tùy chỉnh tiện ích Popular posts dạng ảnh gallery với hiệu ứng từ Jquery cho blogspot. Thủ thuật này thích hợp với các blog chuyên về ảnh, blog bán hàng hay blog về phim,... Được mình source từ template Simplex PhoneMag. Đây là một dạng cải tiến từ vestion 1 mà mình đã giới thiệu trước đây.

VIEW DEMO

☼ Các tính năng mới trong bản Popular posts dạng gallery jquery vestion 2 này là gì?

» Tự động đánh số thứ tự cho bài đăng (tương tự như 2 tiện ích count popularpost và cool popularpost).

» Chỉnh sửa và tùy biến dễ dàng.

» Thêm hiệu ứng tooltips cho phần mô tả của mỗi bài đăng.

» Thiết kế rất gọn gàng và bắt mắt, phug hợp với nhiều chủ đề như: ảnh, phim, bán hàng, du lịch,...

☼ Bước 1: Thêm tiện ích Popular posts vào blog của bạn.

- Nếu blog của bạn đã có tiện ích Popolar posts thì bắt đầu thực hiện từ mục 1.5 nha.

1.1- Đăng nhập vào blog

1.2- Vào bố cục (Layout)

1.3- Chọn thêm tiện ích (Add widget) => Chọn Bài đăng phổ biến (Popular post).

1.4- Lưu tiện ích lại.

1.5- Bấm chỉnh sửa tiện ích Bài đăng phổ biến (Popular post) và xác địn ID của tiện ích đó.

- Trong ví dụ này là Popularposst1 Hãy nhớ nó để thực hiện trong bước tiếp theo nha.

☼ Bước 2: Tùy chỉnh tiện ích Popular post.

2.1- Đăng nhập vào blog

2.2- Chọn mẫu (template)

2.3- Chọn chỉnh sửa HTML (Edit HTML). [Không cần mở rộng tiện ích mẫu nha].

2.4- Dán mã dưới đây trước thẻ ]]></b:skin> :

.namknapopular{position:relative;float:left;height:76px;width:115px;margin:0 7px 10px}
.namknapopular a{text-decoration:none}
.namknapopular .ablock{display:block;position:absolute}
.namknapopular .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}
.namknapopular img{height:85px;width:115px;position:absolute;z-index:1}
.namknapopular .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}
.namknapopular :hover > .text{background:rgba(188,29,211,.8)}

2.5- Thêm đoạn mã bên dưới vào trước thẻ </head>.

<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.namknapopular").each(function(e){e=e+1;text='<a class="number">'+e+"</a>";$(this).prepend(text)})})
//]]>
</script>

- Nếu blog của bạn đã có file Jquery rồi thì xóa đoạn màu xanh đi nha.

2.6- Tìm đến đoạn code của tiện ích popular posts đã thêm ở bước 1  (Hãy tìm với id Popularposst1 mà bạn đã tìm được trong mục 1.5). Đoạn code có dạng như bên dưới:

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

- Thay thế đoạn code vừa tìm được bằng đoạn code bên dưới:

<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='namknapopular'>
<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>

2.7- Thêm đoạn code bên dưới vào trước thẻ </body>.

<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>

2.8- Lưu mẫu lại và xem kết quả nha.