Trước Viettin24h giới thiệu cho các bạn khá nhiều Recent post mẫu trình diễn bài viết mới đẹp cho blog với nhiều hiệu ứng khác nhau! Hôm nay Viettin24h tiếp tục mang đến cho các bạn thêm 1 sự lựa chọn : đây là thủ thuật với hiệu ứng trượt đẹp mắt , nó thích hợp với nhiều thể loại Website/blog : tin tức, bán hàng,giải trí....Ảnh minh họa :
Bắt đầu thủ thuật:
1. Đăng nhập Blogger2.Chọn mẫu --> Chỉnh sửa HTML3. Thêm code bên dưới vào trước thẻ ]]></b:skin> :
#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/AVvXsEijF5jIxYqwUrRAD71wo0tKfF_8UBssOHQeiu2P9PC_A_hsQEWJ_WgcX1EMB3T-XhdDwV5XRrq4wTtYgXt0szuOoKOS1O25pBAPb5Z9zjTEHO2-T0QWTpkEuotVOicsSMpdEfWZL4EV02c/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/AVvXsEhTGqRtZO24EkQrYNOsYF9B5ugW4J2mpR20Y79XZRcaGz5T1YpP4oiOYqv_bSYCm6DniPNubH6VBaeYcPbIxwBoSIeUiKIOx52b3lmoYKSSjQNzSC6wS-KyDOnhjOpkAKcF3W2AE3uxGf0/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}Màu xanh : Chiều rộng các bạn điều chỉnh lại cho phù hợp
4. Tiếp theo dán code bên dưới trước thẻ </head> :<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/221222113215/jquery.innerfade.js' type='text/javascript'/>
<script src='http://yourjavascript.com/122111125120/cycle.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhch92AX2o-1oZyM1wHMtcWRayrXs0sRxEHin46mMPqgihTTbjoaFW4rJPCIkMQ7U5hjtLhWFzh4McjcdZe2EF3mN4g26YyUN-AQpEIQfRsi_jEPLatxk_GtYfR4LnWjzjKa92jkhiqN-8/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(">")!=-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>
Màu xanh : chiều dài và chiều rộng của hình ảnh trên thanh trượt
5. Dán code bên dưới sau <div id='main-wrapper'> :
<b:if cond='data:blog.pageType != "item"'>
<div id='featuredSlider'>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/sport?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>
</b:if>
Nếu muốn hiển thị cho nhãn thay /feeds/posts/default?max-results
bằng
/feeds/posts/default/-/your label?max-results
6. Lưu lại và xem kết quả
Chúc các bạn thành công .
Plugin này giúp chúng ta cập nhật từ khóa mới và hot nhất ! Tuy nhiên mỗi 1 blogger nên cân nhắc trước khi dùng . Vì đối với Google sanbox, penalty... không an toàn lắm . Nó có thể là con dao 2 lưỡi cho trang web của bạn.
VANTRI JSC
.jpg)
