Featured Posts Widget chuyển động với Css và jQuery.

Hôm nay mình sẽ giới thiệu với các bạn tiện ích Featured Posts chuyển động xoay vòng sử dụng với Css và jQuery. Với tiện ích này chắc chắn rằng các bài đăng của bạn sẽ thu hút các độc giả hơn đấy. Hãy cùng thực hiện nào các bạn.

DEMO

Các bước thực hiện như sau :

Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTML

Bước 2: Bấm CTR+F tìm đoạn mã sau :

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

Bạn thay no thành yes sẽ thành :

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

Bước 3: Tạo 1 tiện ích HTML mới đặt trước Bài đăng trên Blog như hình sau :

Vào chỉnh sửa  Tiện ích HTML/JavaScript  vừa tạo dán đoạn code sau đây vào  :

<style scoped="" type="text/css">#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}#slides ul{width:630px;height:250px}#slides li{width:49.9%;height:100%;position:absolute;display:none}#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}#slides li:nth-child(1){left:0;top:0}#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}#slides a{display:block;width:100%;height:100%;overflow:hidden}#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhihAjt3_2u0W2IwTDwFGBP3HKkD_VzXCAwGB8xypNJyAWiiKvi9IAcoEX7cgO85VTBQO2VrNU7Hfw2PbmpUQUY7Ib3ygj7QZla_SWLqY-Mnhu8NN1jW-KejnCDE6x-F4zhjKTZhG-OsdCk/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Georgia,Times,"Times New Roman";left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}#buttons{margin:5px 0 0}#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}@media only screen and (max-width:600px){#slides ul{height:600px}#slides li:nth-child(1){width:100%;height:49.8%}#slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}#slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}#slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}}</style><div id="featuredpost"></div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><script type='text/javascript'>//<![CDATA[function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"#featuredpost",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx">prev</a><a href="#" id="nextx">next</a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate() {$('#nextx').click();}//]]></script><script type='text/javascript'>//<![CDATA[$(document).ready(function () {FeaturedPost({blogURL:"http://chinhtrucblog.blogspot.com",//URL Blog của bạnMaxPost:8,//Số bài trình chiếuidcontaint:"#featuredpost",ImageSize:300,interval:5000,//Tốc độ dịch chuyểnautoplay:true,//Tự độngtagName:false});});//]]></script>

Thay thế http://chinhtrucblog.blogspot.com thành địa chỉ blog của bạn

Nếu Blog bạn đã có Jquery rồi thì xóa đoạn code này đi để tránh xung đột

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

Bước 4: Cũng trong Tiện ích HTML/JavaScript  vừa tạo bạn làm theo hình sau để xác định ID HTML của tiện ích sẽ có dạng như sau HTMLxx.Trong bài viết này thì ID của mình là HTML1.

Xác định ID của bạn sau đó vào  Mẫu > Chỉnh sửa HTML(mỏ rộng tiện ích) > Tìm kiếm HTML1 (ID Của bạn HTMLxx)

-Thêm <b:if cond='data:blog.url == data:blog.homepageUrl'>  vào sau 

<b:widget id='HTML1' locked='false' title='' type='HTML'>

<b:includable id='main'> 
-Và </b:if> vào sau <b:include name='quickedit'/>

Sau khi thêm vào sẽ có dạng như sau :

<b:widget id='HTML1' locked='false' title='' type='HTML'>
 <b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'><data:content/> </div>
<b:include name='quickedit'/>
</b:if>
</b:includable> </b:widget>

- Trong đó những dòng tô đậm màu vàng là những code được thêm vào.

- HTML1 là ID tiện ích mà bạn đã tìm

- Như vậy là thủ thuật đã xong. Lưu templete lại.

Mkr

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

Tweet

Related Posts

• Tạo nút Back to Top với hiệu ứng từ jQueryHôm nay xin giới thiệu với các bạn tiện ích Back to Top Button khá đẹp, sử dụng hiệu ứng trượt từ jQuery, và đặc biệt l
• Thêm comments facebook song song với comments bloggerTheo yêu cầu của bạn DINH VAN Tu mình sẽ hướng dẫn bạn cách thêm "comment facebook song song với comments blogger vào b
• Tích hợp AncPlay Media Player cho BlogspotMấy hôm nay có nhiều bạn hỏi mình về cách post phim ,video nhiều tập cho blogspot,chiều rảnh nên ngồi viết bài này hướn
• Tạo hộp thoại thông báo với CSSNhư các bạn đã biết, trong một bài viết dài, ngoài nội dung chính của bài viết. Ta còn thường phải đưa những thông tin
• Ẩn Widget ở những trang tùy chọn BlogspotĐây là 1 thủ thuật dùng để ẩn Widget ở những trang bài viết tùy chọn, thủ thuật này cũng không phức
• Chèn ứng dụng Scroll to Top vào BloggerĐây là ứng dụng căn bản mà hầu hết các web hay blog chuyên nghiệp đều có để di chuyển lên đầu trang , tuy nhiên để tạo

Featured Posts Widget chuyển động với Css và jQuery.

4/ 5

Oleh Đỗ Trực

Đỗ Trực Pada 08:18 9 Komentar