Thư viện

Trải nghiệm

Thứ Hai, tháng 3 11, 2013

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

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.

Chia sẻ:
Popular posts style gallery jquery v2 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 popularpostcool 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).
Popular posts style gallery jquery v2 blogger
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 đó.
Xác định Id để tiến hành thủ thuật Popular posts style gallery jquery v2 blogger
- 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.

3 nhận xét:

  1. anh Nam ơi cho em hỏi làm sao để hiển thị bài liên quan trên trang riêng mà không phải trong bài đăng anh nhỉ?

    Trả lờiXóa
    Trả lời
    1. Em dán code của nó vào widget em muốn hiển thị nha. Thực tế nó chỉ là các tiện ích ramdon post thôi em ak.

      Xóa
  2. anh ơi cho em hỏi chút ạ, sao trang của em tại địa chỉ http://dammephim.blogspot.com/search/label/H%C3%A0nh%20%C4%90%E1%BB%99ng?&max-results=20 lại không tự load được ảnh hiện thị anh ạ, mà thay vào đó là No Thumbnail, nhưng nếu ở trang chủ http://dammephim.blogspot.com/ thì vẫn hiển thị ok, anh giúp em với

    Trả lờiXóa