Tiện ích bài mới dạng SlideShow automatic Kiểu 4

Đây là dạng trình chiếu bài mới dạng slideshow tự động lấy bài trên toàn blog hoặc theo nhãn riêng biệt với hình đại diện,tiêu đè bài viết cùng số lượng nhận xét.
Về cơ bản nó cũng giống các dạng trình chiếu trước chẳng qua chỉ thay đổi mẫu mã(bình mới rượu cũ) cho bắt mắt mà thôi.

Xem thử nhé:

Để thực hiện tiện ích này cần qua 3 bước
1- Thêm CSS
2- Thêm javascript
3- Thêm HTML(tiện ích)
Nhưng để khỏi phải can thiệp vào templte và khi ko thích thì dễ dàng bỏ đi và thay kiểu khác nên ta gộp tất cả vào thành 3 in 1.Chỉ còn là thêm 1 tiện ích
Vậy ta tiến hành thêm tiện ích nhé và bố trí tiện ích này ở vị trí sao cho phù hợp với blog
Chép code sau vô phần thêm tiện ích và lưu lại là ok

<style type="text/css">
/*
* Visit:http://dautoblognz.blogspot.com
*/
#tinycarousel {
width:532px; /* Lebar Slideshow */
height:1%;
overflow:hidden;
font:normal 10px/12px Arial,Sans-Serif;
color:#666;
margin:30px auto;
}

#tinycarousel .viewport {
height:336px;
overflow:hidden;
position:relative;
background-color:#eee;
border:1px solid #ccc;
}

#tinycarousel ul.overview {
list-style:none !important;
position:absolute;
padding:0 0 !important;
margin:0 0 !important;
width:240px;
left:0;
top:0;
}

#tinycarousel ul.overview li {
list-style:none !important;
float:left;
margin:5px 0 5px 5px !important;
padding:0 0 !important;
height:auto !important;
width:168px; /* Lebar satu unit slide */
background-color:white;
color:#666;
border:1px solid #ccc;
}

#tinycarousel .inner {
margin:10px;
height:260px;
overflow:hidden;
}

#tinycarousel img {
width:auto;
height:170px;
border:none;
outline:none;
padding:0 0;
margin:0 0;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}

#tinycarousel h6 {
border-top:1px solid #ddd;
font:normal bold 11px/12px Verdana,Tahoma,Arial,Sans-Serif;
color:#39f;
margin:9px 0 5px;
padding:10px 0 0;
background:none;
overflow:hidden;
}

#tinycarousel h6 a {
color:inherit;
text-decoration:none;
border:none;
}

#tinycarousel p {
margin:0 0;
padding:0 0;
overflow:hidden;
}

#tinycarousel em {
font-style:normal;
color:#aaa;
background-color:#333;
background-image:-webkit-linear-gradient(top,#555,#333);
background-image:-moz-linear-gradient(top,#555,#333);
background-image:-ms-linear-gradient(top,#555,#333);
background-image:-o-linear-gradient(top,#555,#333);
background-image:linear-gradient(top,#555,#333);
display:block;
padding:5px 10px;
margin:0 0;
}

#tinyarrow {
display:block;
background-color:white;
border:1px solid #ccc;
padding:5px;
margin:2px 0 0;
overflow:hidden;
}

#tinyarrow .buttons {
background-color:#666;
border:none;
outline:none;
display:block;
padding:2px 5px;
overflow:hidden;
position:relative;
float:left;
margin:0 1px;
color:white;
text-decoration:none;
font-weight:bold;
}

#tinyarrow .disable {display:none}

#tinyarrow .buttons:active {
background-color:#900;
position:relative;
top:1px;
}

#tinyarrow span {
float:right;
font:normal bold 11px/12px Tahoma,Verdana,Arial,Sans-Serif;
margin:2px 5px 0 0;
}

/*
* Orientasi Vertikal
* CSS diatur secara manual pada versi aslinya
* tapi di sini semuanya sudah cukup teratur
*/
#tinycarousel.vertical {width:242px}
#tinycarousel.vertical ul.overview li {
float:none;
display:block;
width:228px;
margin:5px auto 10px !important;
}

#tinycarousel.vertical img {
width:100%;
height:auto;
}</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#tinycarousel').tinycarousel({
start       : 1,
display     : 1,
axis        : 'x',
interval    : true,//ko thích tự động thì để false
intervaltime: 3000,
animation   : true,
duration    : 1000,
callback    : null
}); 
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(4($){$.y=$.y||{};$.y.T={3:{l:1,A:1,R:\'x\',E:b,u:8,J:8,13:1m,1l:8,14:b,H:1k,M:1j}};$.p.1n=4(3){7 3=$.1o({},$.y.T.3,3);6.1s(4(){$(6).q(\'r\',1i U($(6),3))});i 6};$.p.1q=4(){$(6).q(\'r\').l()};$.p.1p=4(){$(6).q(\'r\').D()};$.p.1g=4(W){$(6).q(\'r\').f(W-1,b)};4 U(e,3){7 c=6;7 s=$(\'.1c:n\',e);7 B=$(\'.1f:n\',e);7 h=B.1e();7 v=$(\'.1d:n\',e);7 w=$(\'.1r:n\',e);7 C=$(\'.u:n\',e);7 m,d,5,o,z,t=b,g=3.R==\'x\';4 18(){m=g?$(h[0]).O(b):$(h[0]).X(b);7 S=k.Q(((g?s.O():s.X())/(m*3.A))-1);d=k.V(1,k.Q(h.j/3.A)-S);5=k.1J(d,k.V(1,3.l))-2;B.1L(g?\'1F\':\'1E\',(m*h.j));s.1y().Z(g?\'\':\'1x\');c.f(1);Y();i c};4 Y(){9(3.E&&w.j>0&&v.j>0){w.F(4(){c.f(-1);i 8});v.F(4(){c.f(1);i 8})}9(3.J){e.1v(c.D,c.l)}9(3.u&&C.j>0){$(\'a\',C).F(17)}};4 12(){9(3.E){w.N(\'P\',!(5>0));v.N(\'P\',!(5+1<d))}9(3.u){7 I=$(\'.10\',C);I.1I(\'16\');$(I[5]).Z(\'16\')}};4 17(1C){9($(6).1D(\'10\')){c.f(1A(6.1z),b)}i 8};4 K(){9(3.J&&!z){11(o);o=1w(4(){5=5+1==d?-1:5;t=5+1==d?8:5==0?b:t;c.f(t?1:-1)},3.13)}};6.D=4(){11(o);z=b};6.l=4(){z=8;K()};6.f=4(L,15){5=15?L:5+=L;9(5>-1&&5<d){7 G={};G[g?\'1K\':\'1G\']=-(5*(m*3.A));B.D().1H(G,{1u:8,H:3.14?3.H:0,1h:"1b",1a:4(){9(19 3.M==\'4\')3.M.1t(6,h[5],5)}});12();K()}};i 18()}})(1B);',62,110,'|||options|function|iCurrent|this|var|false|if||true|oSelf|iSteps|root|move|bAxis|oPages|return|length|Math|start|iPageSize|first|oTimer|fn|data|tcl|oViewport|bForward|pager|oBtnNext|oBtnPrev||tiny|bPause|display|oContent|oPager|stop|controls|click|oPosition|duration|oNumbers|interval|setTimer|iDirection|callback|toggleClass|outerWidth|disable|ceil|axis|iLeftover|carousel|Carousel|max|iNum|outerHeight|setEvents|addClass|pagenum|clearTimeout|setButtons|intervaltime|animation|bPublic|active|setPager|initialize|typeof|complete|swing|viewport|next|children|overview|tinycarousel_move|easing|new|null|1000|rewind|3000|tinycarousel|extend|tinycarousel_stop|tinycarousel_start|prev|each|call|queue|hover|setTimeout|vertical|parent|rel|parseInt|jQuery|oEvent|hasClass|height|width|top|animate|removeClass|min|left|css'.split('|'),0,{}))
//]]>
</script>
<script type="text/javascript">
var showPostDate_g  = true,
showComm_g      = true,
slideOpenNewTab = true,
idMode          = true,
slidebyLabels   = false,//Theo nhãn thì đổi false thành true
slideLabelName  = "Tên nhãn",//Theo nhãn thì ghi tên nhãn
pBlank          = "http://goo.gl/pVMDVq?gdriveurl",
text            = "Nhận xét",
numposts_g      = 10,
numchars_g      = 100,
showText        = "Với",
postText        = "Bài viết",
tinyprevNav     = "&lt;",
tinynextNav     = "&gt;",
home_page       = "URL Blog của bạn";
</script>
<script type='text/javascript'>
//<![CDATA[
function tinyCarouselGallery(json) {
 document.write('<div id="tinycarousel"><div class="viewport"><ul class="overview">');
 for (var i = 0; i < numposts_g; i++) {
  var entry = json.feed.entry[i],
   title = entry.title.$t,
   date = entry.published.$t,
   link, summ, months, cm, img;
  if (i == entry.length) break;
  for (var j = 0, jen = entry.link.length; j < jen; j++) {
   if (entry.link[j].rel == 'alternate') {
    link = entry.link[j].href;
    break;
   }
  }
  for (var k = 0, ken = entry.link.length; k < ken; k++) {
   if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
    cm = entry.link[k].title.split(' ')[0];
    break;
   }
  }
  summ = ("summary" in entry) ? entry.summary.$t.replace(/<(.*)?>/g, "") : "";
  summ = (summ.length > numchars_g) ? summ.substring(0, numchars_g) + '&hellip;' : summ;
  img = ('media$thumbnail' in entry) ? entry.media$thumbnail.url : pBlank;
  img = img.replace(/\/s[0-9]+(\-c)?\//, "/s230-c/");
  months = (idMode) ? ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'] : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  var date_a = date.split('-')[2].substring(0, 2),
   date_b = date.split('-')[1],
   date_c = date.split('-')[0];
  document.write('<li><div class="inner"><a href="' + link + '"' + (slideOpenNewTab ? ' target="_blank"' : '') + '><img src="' + img + '" alt="' + title + '" class="recent-thumb"></a><h6><a href="' + link + '"' + (slideOpenNewTab ? ' target="_blank"' : '') + '>' + title + '</a></h6><p>' + summ + '</p></div>' + (showPostDate_g ? '<em>' + date_a + ' ' + months[parseInt(date_b, 10)-1] + ' ' + date_c + '</em>' : '') + (showComm_g ? '<em>' + cm + ' ' + text + '</em>' : '') + '</li>');
 }
    document.write('</ul></div><div id="tinyarrow"><a class="buttons prev" href="#">' + tinyprevNav + '</a><a class="buttons next" href="#">' + tinynextNav + '</a><span>' + showText + ' ' + numposts_g + ' ' + postText + '</span></div></div>');
}

document.write("<scr" + "ipt type='text/javascript' src='" + home_page.replace(/\/$/,"") + "/feeds/posts/summary/" + (slidebyLabels ? '-/' + slideLabelName : '') + "?max-results=" + numposts_g + "&orderby=published&alt=json-in-script&callback=tinyCarouselGallery'><\/scr" + "ipt>");
//]]>
</script>

Nguồn: www.dte.web.id

Thủ thuật blogspot

Tiện ích bài mới dạng SlideShow automatic Kiểu 4

Post a Comment

Tạo tiện ích điều hướng breadcrumbs cho blogspot

Cài đặt mật khẩu cho các bài viết riêng lẻ trên blogspot/blogger mới nhất

Cải thiện và tăng tốc độ tải trang cho blogspot-Optimal speed for blogspot/website

Code meta seo onpage đầy đủ gọn nhẹ mới nhất

Spotlight Blogger Template Download

Thủ thuật blogspot®