#featuredSlider {background:#eee;float:left;margin:0; padding:0 0 10px; width:640px; position:relative;color:#666;border-bottom:1px solid #c3c3c3}
#featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}
#featuredSlider .container {height:226px; margin:0 10px 0 0;overflow:hidden; position:relative;}
.featuredTitle{padding-top:10px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;}
.featuredTitle a{color:#f7441a}
.featuredTitle a:hover{color:#000}
.navigation {position:relative;bottom:23px;float:right;overflow:hidden;}
ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
ul.pagination a { float:left; margin:0 5px; display:inline; }
ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWPyBoiLb9WD95ue8FCFWbq5Jg75bwwZyoloGIvzXaLriyfsxOjuYSNEteaheoTDPftu70HPaBH6ILSehKI9KPui61toNcpkXSlDI9IYdKWUuIapQiDCTf9hHMtDhnb90BMlxfQsEWpbM/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a.activeSlide { background-position:0 -12px }
a.readmore {float:left;border:1px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwrSck_2EFujdzo3l07MxK-8s5TrOyV8HsTYiMokOug5NFaLP-kpxdhMWqUejbyGzkMvDiXipnQISnPNwNImtxSAdgl2mzMbdp13htKZjX6HH-HtK_a0yS-NGOU1ERDVzudYueTsZvxyI/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;
border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
a.readmore:hover {color:#ff0}
Bước 2. Thêm đoạn code dưới lên trên thẻ </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script src='https://sites.google.com/site/seovnpro/jquery.innerfade.js' type='text/javascript'/> <script src='https://sites.google.com/site/seovnpro/cycle.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ84Sif4D6gBMetDppvCNxAXHob6TnHUXxRSzLTFZJqyVMVf99S6y2YImt7qEwJDMKWw_7dv7FSb7s2po7AIcbMQfviQ6y3FTf3h6YJdObli54DXXXUty1scm2tkfbGBrkjtyaBE2YmXI/s1600/no+image.jpg";showRandomImg = true;aBold = true;summaryPost = 150;summaryTitle = 25;numposts = 7;function removeHtmlTag(strx,chop){var s=strx.split("<;");for(var i=0;i<;s.length;i++){if(s[i].indexOf('st'>">;")!=-1){s[i]=s[i].substring(s[i].indexOf(">;")+1,s[i].length)}} s=s.join("");s=s.substring(0,chop-1);return s} function showrecentposts(json){j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()):0;img = new Array();document.write('<;div class="slides">;') if (numposts <;= json.feed.entry.length){maxpost = numposts} else{maxpost=json.feed.entry.length} for (var i = 0;i < maxpost;i++){var entry = json.feed.entry[i];var posttitle = entry.title.$t;var pcm;var posturl;if (i == json.feed.entry.length) break;for (var k = 0;k <; entry.link.length;k++){if (entry.link[k].rel == 'alternate'){posturl = entry.link[k].href;break}} for (var k = 0;k < entry.link.length;k++){if (entry.link[k].rel == 'replies' &;&; entry.link[k].type == 'text/html'){pcm = entry.link[k].title.split(" ")[0];break}} if ("content" in entry){var postcontent = entry.content.$t} else if ("summary" in entry){var postcontent = entry.summary.$t} else var postcontent = "";postdate = entry.published.$t;if(j>imgr.length-1) j=0;img[i] = imgr[j];s = postcontent;a = s.indexOf("<img");b = s.indexOf("src=\"",a);c = s.indexOf("\"",b+5);d = s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>':'';var month = [1,2,3,4,5,6,7,8,9,10,11,12];var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day = postdate.split("-")[2].substring(0,2);var m = postdate.split("-")[1];var y = postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m = month2[u2];break}} var trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="340" height="212" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more »</a></div>';document.write(trtd);j++} document.write('</div>')} //]]> </script>
Lưu ý:
- Nếu website hay blog bạn mà có dòng tương tự như này <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> thì các bạn ko cần phải thêm cái này <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> vào nữa.
Bước 3: Tìm thẻ sau: <div id='content-wrapper'> rồi dán đoạn code dưới đây lên trên thẻ tìn được
(Đây là cách tạo ra 1 widget dạng HTML/Javascript ,và cho phép nó chỉ hiển thị ở trang chủ.Các bạn không nhất thiết phải cho code dưới lên trên <div id='content-wrapper'> mà có thể cho vào vị trí tùy ý mà muốn hiển thị khác nhưng bạn phải có kiến thức chút về HTML, CSS )
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section id='slider' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML96' locked='true' title='Accordion Slider' type='HTML'/>
</b:section>
</b:if>
Lưu ý:
- HTML96 - slider: Cái này bạn đặt tên ko được trùng nhé
- Accordion Slider: Tên của widget sẽ tạo
Bước 4: Nhấn lưu lại
Bước 5: Quay lại Phần tử Trang tìm tới phần Layout(Bố cục) bạn sẽ thấy 1 Wiget mới với tên Accordion Slider bạn bấm vào chỉnh sửa (Edit). Xóa cái tên Accordion Slider đi và dán đoạn code bên dưới vào:
<div id='featuredSlider'> <div class='container'> <script> document.write("<script src=\"/feeds/posts/default/-/tên label cần hiển thị?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");</script> <div class='navigation'> <ul class='pagination'/> <script> $('.slides').cycle({fx:'fade',speed:'slow',timeout:3000,pager:'.pagination'} );</script> </div> </div> <!--end .container--> </div>
Chú ý: Nếu các bạn muốn slide ảnh này chạy theo nhãn thì để phần chữ màu đỏ trên giữ nguyên và thay tên Label bạn muốn hiển thị vào
- Nếu bạn muốn nó chạy bài mới nhất thì thay đoạn chữ màu đỏ thành : /feeds/posts/default?max-results
Hết!
Tổng Hợp
Tags:
Thủ thuật blog