Tiện ích bài mới dạng SlideShow 3D Automatic

Tiện ích bài mới dạng SlideShow 3D Automatic đây là tiện ích trình chiếu bài mới dạng SlideShow gồm hình ảnh đại diện của bài viết,tiêu đề,ngày đăng bài và số lượng nhận xét.

Tiện ích này áp dụng cho nhãn và cho toàn blog cùng 2 chế độ tự động hoặc phải kích hoạt nó mới chạy.
Tiện ích bài mới dạng SlideShow 3D Automatic
Xem thử
Xem trên Codepen
DEMO
Để tạo tiện ích này ta vào bố cục chọn thêm 1 tiện ích tại nơi phù hợp rồi dán đoạn code sau vào và lưu lại.
<style type="text/css">
.dg-container {
width:100%;
height:270px;
position:relative;
margin:0 auto;
}

.dg-wrapper {
width:370px;
height:300px;
margin:0 auto;
position:relative;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-perspective:1000px;
-moz-perspective:1000px;
-ms-perspective:1000px;
-o-perspective:1000px;
perspective:1000px;
}

.dg-wrapper a {
width:370px;
height:auto;
display:block;
position:absolute;
left:0;
bottom:0;
text-decoration:none;
-webkit-box-shadow:0 10px 20px rgba(0,0,0,.3);
-moz-box-shadow:0 10px 20px rgba(0,0,0,.3);
box-shadow:0 10px 20px rgba(0,0,0,.3);
}

.dg-wrapper a.dg-transition {
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}

.dg-wrapper a img {
width:100%;
height:300px;
border:none;
outline:none;
background-color:white;
padding:0 0;
margin:0 0;
display:block;
}

.dg-wrapper a div {
font-style:italic;
text-align:center;
line-height:50px;
text-shadow:1px 1px 1px rgba(255,255,255,.5);
color:#000;
font-size:16px;
width:100%;
bottom:-55px;
display:none;
position:absolute;
}

.dg-wrapper a.dg-center div {
display:block;
font:normal normal 16px/1.4 "Times New Roman",Times,Serif;
font-style:italic;
}

.dg-wrapper div a {text-decoration:none}

.dg-container nav {
width:58px;
position:absolute;
z-index:1000;
bottom:40px;
left:50%;
margin-left:-43px;
padding:10px 15px;
}

.dg-container nav span {
text-indent:-9000px;
float:left;
cursor:pointer;
width:24px;
height:25px;
opacity:.8;
background:transparent url('http://4.bp.blogspot.com/-qV9_Htfqexw/T02JMiWMUSI/AAAAAAAACQs/E5yAia_KzCo/s1600/arrows.png') no-repeat top left;
}

.dg-container nav span:hover {opacity:1}

.dg-container nav span.dg-next {
background-position:top right;
margin-left:10px;
}

/* End 3D Gallery */</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[
/* Modernizr 2.0.6 (Custom Build) | MIT & BSD
 * Build: http://www.modernizr.com/download/#-csstransforms-csstransforms3d-csstransitions-iepp-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes-load
 */
;window.Modernizr=function(a,b,c){function C(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+o.join(c+" ")+c).split(" ");return B(d,b)}function B(a,b){for(var d in a)if(k[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function A(a,b){return!!~(""+a).indexOf(b)}function z(a,b){return typeof a===b}function y(a,b){return x(n.join(a+";")+(b||""))}function x(a){k.cssText=a}var d="2.0.6",e={},f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l,m=Object.prototype.toString,n=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),o="Webkit Moz O ms Khtml".split(" "),p={},q={},r={},s=[],t=function(a,c,d,e){var f,h,j,k=b.createElement("div");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:i+(d+1),k.appendChild(j);f=["&shy;","<style>",a,"</style>"].join(""),k.id=i,k.innerHTML+=f,g.appendChild(k),h=c(k,a),k.parentNode.removeChild(k);return!!h},u,v={}.hasOwnProperty,w;!z(v,c)&&!z(v.call,c)?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],c)};var D=function(a,c){var d=a.join(""),f=c.length;t(d,function(a,c){var d=b.styleSheets[b.styleSheets.length-1],g=d.cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText||"",h=a.childNodes,i={};while(f--)i[h[f].id]=h[f];e.csstransforms3d=i.csstransforms3d.offsetLeft===9},f,c)}([,["@media (",n.join("transform-3d),("),i,")","{#csstransforms3d{left:9px;position:absolute}}"].join("")],[,"csstransforms3d"]);p.csstransforms=function(){return!!B(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])},p.csstransforms3d=function(){var a=!!B(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);a&&"webkitPerspective"in g.style&&(a=e.csstransforms3d);return a},p.csstransitions=function(){return C("transitionProperty")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));x(""),j=l=null,a.attachEvent&&function(){var a=b.createElement("div");a.innerHTML="<elem></elem>";return a.childNodes.length!==1}()&&function(a,b){function s(a){var b=-1;while(++b<g)a.createElement(f[b])}a.iepp=a.iepp||{};var d=a.iepp,e=d.html5elements||"abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",f=e.split("|"),g=f.length,h=new RegExp("(^|\\s)("+e+")","gi"),i=new RegExp("<(/*)("+e+")","gi"),j=/^\s*[\{\}]\s*$/,k=new RegExp("(^|[^\\n]*?\\s)("+e+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),l=b.createDocumentFragment(),m=b.documentElement,n=m.firstChild,o=b.createElement("body"),p=b.createElement("style"),q=/print|all/,r;d.getCSS=function(a,b){if(a+""===c)return"";var e=-1,f=a.length,g,h=[];while(++e<f){g=a[e];if(g.disabled)continue;b=g.media||b,q.test(b)&&h.push(d.getCSS(g.imports,b),g.cssText),b="all"}return h.join("")},d.parseCSS=function(a){var b=[],c;while((c=k.exec(a))!=null)b.push(((j.exec(c[1])?"\n":c[1])+c[2]+c[3]).replace(h,"$1.iepp_$2")+c[4]);return b.join("\n")},d.writeHTML=function(){var a=-1;r=r||b.body;while(++a<g){var c=b.getElementsByTagName(f[a]),d=c.length,e=-1;while(++e<d)c[e].className.indexOf("iepp_")<0&&(c[e].className+=" iepp_"+f[a])}l.appendChild(r),m.appendChild(o),o.className=r.className,o.id=r.id,o.innerHTML=r.innerHTML.replace(i,"<$1font")},d._beforePrint=function(){p.styleSheet.cssText=d.parseCSS(d.getCSS(b.styleSheets,"all")),d.writeHTML()},d.restoreHTML=function(){o.innerHTML="",m.removeChild(o),m.appendChild(r)},d._afterPrint=function(){d.restoreHTML(),p.styleSheet.cssText=""},s(b),s(l);d.disablePP||(n.insertBefore(p,n.firstChild),p.media="print",p.className="iepp-printshim",a.attachEvent("onbeforeprint",d._beforePrint),a.attachEvent("onafterprint",d._afterPrint))}(a,b),e._version=d,e._prefixes=n,e._domPrefixes=o,e.testProp=function(a){return B([a])},e.testAllProps=C,e.testStyles=t,g.className=g.className.replace(/\bno-js\b/,"")+(f?" js "+s.join(" "):"");return e}(this,this.document),function(a,b,c){function k(a){return!a||a=="loaded"||a=="complete"}function j(){var a=1,b=-1;while(p.length- ++b)if(p[b].s&&!(a=p[b].r))break;a&&g()}function i(a){var c=b.createElement("script"),d;c.src=a.s,c.onreadystatechange=c.onload=function(){!d&&k(c.readyState)&&(d=1,j(),c.onload=c.onreadystatechange=null)},m(function(){d||(d=1,j())},H.errorTimeout),a.e?c.onload():n.parentNode.insertBefore(c,n)}function h(a){var c=b.createElement("link"),d;c.href=a.s,c.rel="stylesheet",c.type="text/css";if(!a.e&&(w||r)){var e=function(a){m(function(){if(!d)try{a.sheet.cssRules.length?(d=1,j()):e(a)}catch(b){b.code==1e3||b.message=="security"||b.message=="denied"?(d=1,m(function(){j()},0)):e(a)}},0)};e(c)}else c.onload=function(){d||(d=1,m(function(){j()},0))},a.e&&c.onload();m(function(){d||(d=1,j())},H.errorTimeout),!a.e&&n.parentNode.insertBefore(c,n)}function g(){var a=p.shift();q=1,a?a.t?m(function(){a.t=="c"?h(a):i(a)},0):(a(),j()):q=0}function f(a,c,d,e,f,h){function i(){!o&&k(l.readyState)&&(r.r=o=1,!q&&j(),l.onload=l.onreadystatechange=null,m(function(){u.removeChild(l)},0))}var l=b.createElement(a),o=0,r={t:d,s:c,e:h};l.src=l.data=c,!s&&(l.style.display="none"),l.width=l.height="0",a!="object"&&(l.type=d),l.onload=l.onreadystatechange=i,a=="img"?l.onerror=i:a=="script"&&(l.onerror=function(){r.e=r.r=1,g()}),p.splice(e,0,r),u.insertBefore(l,s?null:n),m(function(){o||(u.removeChild(l),r.r=r.e=o=1,j())},H.errorTimeout)}function e(a,b,c){var d=b=="c"?z:y;q=0,b=b||"j",C(a)?f(d,a,b,this.i++,l,c):(p.splice(this.i++,0,a),p.length==1&&g());return this}function d(){var a=H;a.loader={load:e,i:0};return a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=r&&!s,u=s?l:n.parentNode,v=a.opera&&o.call(a.opera)=="[object Opera]",w="webkitAppearance"in l.style,x=w&&"async"in b.createElement("script"),y=r?"object":v||x?"img":"script",z=w?"img":y,A=Array.isArray||function(a){return o.call(a)=="[object Array]"},B=function(a){return Object(a)===a},C=function(a){return typeof a=="string"},D=function(a){return o.call(a)=="[object Function]"},E=[],F={},G,H;H=function(a){function f(a){var b=a.split("!"),c=E.length,d=b.pop(),e=b.length,f={url:d,origUrl:d,prefixes:b},g,h;for(h=0;h<e;h++)g=F[b[h]],g&&(f=g(f));for(h=0;h<c;h++)f=E[h](f);return f}function e(a,b,e,g,h){var i=f(a),j=i.autoCallback;if(!i.bypass){b&&(b=D(b)?b:b[a]||b[g]||b[a.split("/").pop().split("?")[0]]);if(i.instead)return i.instead(a,b,e,g,h);e.load(i.url,i.forceCSS||!i.forceJS&&/css$/.test(i.url)?"c":c,i.noexec),(D(b)||D(j))&&e.load(function(){d(),b&&b(i.origUrl,h,g),j&&j(i.origUrl,h,g)})}}function b(a,b){function c(a){if(C(a))e(a,h,b,0,d);else if(B(a))for(i in a)a.hasOwnProperty(i)&&e(a[i],h,b,i,d)}var d=!!a.test,f=d?a.yep:a.nope,g=a.load||a.both,h=a.callback,i;c(f),c(g),a.complete&&b.load(a.complete)}var g,h,i=this.yepnope.loader;if(C(a))e(a,0,i,0);else if(A(a))for(g=0;g<a.length;g++)h=a[g],C(h)?e(h,0,i,0):A(h)?H(h):B(h)&&b(h,i);else B(a)&&b(a,i)},H.addPrefix=function(a,b){F[a]=b},H.addFilter=function(a){E.push(a)},H.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",G=function(){b.removeEventListener("DOMContentLoaded",G,0),b.readyState="complete"},0)),a.yepnope=d()}(this,this.document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
/**
 * jquery.gallery.js
 * http://www.codrops.com
 *
 * Copyright 2011, Pedro Botelho / Codrops
 * Free to use under the MIT license.
 *
 * Date: Mon Jan 30 2012
 */

(function(a,b){a.Gallery=function(b,c){this.$el=a(c);this._init(b)};a.Gallery.defaults={current:0,autoplay:false,interval:2e3};a.Gallery.prototype={_init:function(b){this.options=a.extend(true,{},a.Gallery.defaults,b);this.support3d=Modernizr.csstransforms3d;this.support2d=Modernizr.csstransforms;this.supportTrans=Modernizr.csstransitions;this.$wrapper=this.$el.find(".dg-wrapper");this.$items=this.$wrapper.children();this.itemsCount=this.$items.length;this.$nav=this.$el.find("nav");this.$navPrev=this.$nav.find(".dg-prev");this.$navNext=this.$nav.find(".dg-next");if(this.itemsCount<3){this.$nav.remove();return false}this.current=this.options.current;this.isAnim=false;this.$items.css({opacity:0,visibility:"hidden"});this._validate();this._layout();this._loadEvents();if(this.options.autoplay){this._startSlideshow()}},_validate:function(){if(this.options.current<0||this.options.current>this.itemsCount-1){this.current=0}},_layout:function(){this._setItems();var a,b,c;if(this.support3d&&this.supportTrans){a={"-webkit-transform":"translateX(-350px) translateZ(-200px) rotateY(45deg)","-moz-transform":"translateX(-350px) translateZ(-200px) rotateY(45deg)","-o-transform":"translateX(-350px) translateZ(-200px) rotateY(45deg)","-ms-transform":"translateX(-350px) translateZ(-200px) rotateY(45deg)",transform:"translateX(-350px) translateZ(-200px) rotateY(45deg)"};b={"-webkit-transform":"translateX(350px) translateZ(-200px) rotateY(-45deg)","-moz-transform":"translateX(350px) translateZ(-200px) rotateY(-45deg)","-o-transform":"translateX(350px) translateZ(-200px) rotateY(-45deg)","-ms-transform":"translateX(350px) translateZ(-200px) rotateY(-45deg)",transform:"translateX(350px) translateZ(-200px) rotateY(-45deg)"};a.opacity=1;a.visibility="visible";b.opacity=1;b.visibility="visible"}else if(this.support2d&&this.supportTrans){a={"-webkit-transform":"translate(-350px) scale(0.8)","-moz-transform":"translate(-350px) scale(0.8)","-o-transform":"translate(-350px) scale(0.8)","-ms-transform":"translate(-350px) scale(0.8)",transform:"translate(-350px) scale(0.8)"};b={"-webkit-transform":"translate(350px) scale(0.8)","-moz-transform":"translate(350px) scale(0.8)","-o-transform":"translate(350px) scale(0.8)","-ms-transform":"translate(350px) scale(0.8)",transform:"translate(350px) scale(0.8)"};c={"z-index":999};a.opacity=1;a.visibility="visible";b.opacity=1;b.visibility="visible"}this.$leftItm.css(a||{});this.$rightItm.css(b||{});this.$currentItm.css(c||{}).css({opacity:1,visibility:"visible"}).addClass("dg-center")},_setItems:function(){this.$items.removeClass("dg-center");this.$currentItm=this.$items.eq(this.current);this.$leftItm=this.current===0?this.$items.eq(this.itemsCount-1):this.$items.eq(this.current-1);this.$rightItm=this.current===this.itemsCount-1?this.$items.eq(0):this.$items.eq(this.current+1);if(!this.support3d&&this.support2d&&this.supportTrans){this.$items.css("z-index",1);this.$currentItm.css("z-index",999)}if(this.itemsCount>3){this.$nextItm=this.$rightItm.index()===this.itemsCount-1?this.$items.eq(0):this.$rightItm.next();this.$nextItm.css(this._getCoordinates("outright"));this.$prevItm=this.$leftItm.index()===0?this.$items.eq(this.itemsCount-1):this.$leftItm.prev();this.$prevItm.css(this._getCoordinates("outleft"))}},_loadEvents:function(){var a=this;this.$navPrev.on("click.gallery",function(b){if(a.options.autoplay){clearTimeout(a.slideshow);a.options.autoplay=false}a._navigate("prev");return false});this.$navNext.on("click.gallery",function(b){if(a.options.autoplay){clearTimeout(a.slideshow);a.options.autoplay=false}a._navigate("next");return false});this.$wrapper.on("webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery",function(b){a.$currentItm.addClass("dg-center");a.$items.removeClass("dg-transition");a.isAnim=false})},_getCoordinates:function(a){if(this.support3d&&this.supportTrans){switch(a){case"outleft":return{"-webkit-transform":"translateX(-450px) translateZ(-300px) rotateY(45deg)","-moz-transform":"translateX(-450px) translateZ(-300px) rotateY(45deg)","-o-transform":"translateX(-450px) translateZ(-300px) rotateY(45deg)","-ms-transform":"translateX(-450px) translateZ(-300px) rotateY(45deg)",transform:"translateX(-450px) translateZ(-300px) rotateY(45deg)",opacity:0,visibility:"hidden"};break;case"outright":return{"-webkit-transform":"translateX(450px) translateZ(-300px) rotateY(-45deg)","-moz-transform":"translateX(450px) translateZ(-300px) rotateY(-45deg)","-o-transform":"translateX(450px) translateZ(-300px) rotateY(-45deg)","-ms-transform":"translateX(450px) translateZ(-300px) rotateY(-45deg)",transform:"translateX(450px) translateZ(-300px) rotateY(-45deg)",opacity:0,visibility:"hidden"};break;case"left":return{"-webkit-transform":"translateX(-350px) translateZ(-200px) rotateY(45deg)","-moz-transform":"translateX(-350px) translateZ(-200px) rotateY(45deg)","-o-transform":"translateX(-350px) translateZ(-200px) rotateY(45deg)","-ms-transform":"translateX(-350px) translateZ(-200px) rotateY(45deg)",transform:"translateX(-350px) translateZ(-200px) rotateY(45deg)",opacity:1,visibility:"visible"};break;case"right":return{"-webkit-transform":"translateX(350px) translateZ(-200px) rotateY(-45deg)","-moz-transform":"translateX(350px) translateZ(-200px) rotateY(-45deg)","-o-transform":"translateX(350px) translateZ(-200px) rotateY(-45deg)","-ms-transform":"translateX(350px) translateZ(-200px) rotateY(-45deg)",transform:"translateX(350px) translateZ(-200px) rotateY(-45deg)",opacity:1,visibility:"visible"};break;case"center":return{"-webkit-transform":"translateX(0px) translateZ(0px) rotateY(0deg)","-moz-transform":"translateX(0px) translateZ(0px) rotateY(0deg)","-o-transform":"translateX(0px) translateZ(0px) rotateY(0deg)","-ms-transform":"translateX(0px) translateZ(0px) rotateY(0deg)",transform:"translateX(0px) translateZ(0px) rotateY(0deg)",opacity:1,visibility:"visible"};break}}else if(this.support2d&&this.supportTrans){switch(a){case"outleft":return{"-webkit-transform":"translate(-450px) scale(0.7)","-moz-transform":"translate(-450px) scale(0.7)","-o-transform":"translate(-450px) scale(0.7)","-ms-transform":"translate(-450px) scale(0.7)",transform:"translate(-450px) scale(0.7)",opacity:0,visibility:"hidden"};break;case"outright":return{"-webkit-transform":"translate(450px) scale(0.7)","-moz-transform":"translate(450px) scale(0.7)","-o-transform":"translate(450px) scale(0.7)","-ms-transform":"translate(450px) scale(0.7)",transform:"translate(450px) scale(0.7)",opacity:0,visibility:"hidden"};break;case"left":return{"-webkit-transform":"translate(-350px) scale(0.8)","-moz-transform":"translate(-350px) scale(0.8)","-o-transform":"translate(-350px) scale(0.8)","-ms-transform":"translate(-350px) scale(0.8)",transform:"translate(-350px) scale(0.8)",opacity:1,visibility:"visible"};break;case"right":return{"-webkit-transform":"translate(350px) scale(0.8)","-moz-transform":"translate(350px) scale(0.8)","-o-transform":"translate(350px) scale(0.8)","-ms-transform":"translate(350px) scale(0.8)",transform:"translate(350px) scale(0.8)",opacity:1,visibility:"visible"};break;case"center":return{"-webkit-transform":"translate(0px) scale(1)","-moz-transform":"translate(0px) scale(1)","-o-transform":"translate(0px) scale(1)","-ms-transform":"translate(0px) scale(1)",transform:"translate(0px) scale(1)",opacity:1,visibility:"visible"};break}}else{switch(a){case"outleft":case"outright":case"left":case"right":return{opacity:0,visibility:"hidden"};break;case"center":return{opacity:1,visibility:"visible"};break}}},_navigate:function(a){if(this.supportTrans&&this.isAnim)return false;this.isAnim=true;switch(a){case"next":this.current=this.$rightItm.index();this.$currentItm.addClass("dg-transition").css(this._getCoordinates("left"));this.$rightItm.addClass("dg-transition").css(this._getCoordinates("center"));if(this.$nextItm){this.$leftItm.addClass("dg-transition").css(this._getCoordinates("outleft"));this.$nextItm.addClass("dg-transition").css(this._getCoordinates("right"))}else{this.$leftItm.addClass("dg-transition").css(this._getCoordinates("right"))}break;case"prev":this.current=this.$leftItm.index();this.$currentItm.addClass("dg-transition").css(this._getCoordinates("right"));this.$leftItm.addClass("dg-transition").css(this._getCoordinates("center"));if(this.$prevItm){this.$rightItm.addClass("dg-transition").css(this._getCoordinates("outright"));this.$prevItm.addClass("dg-transition").css(this._getCoordinates("left"))}else{this.$rightItm.addClass("dg-transition").css(this._getCoordinates("left"))}break}this._setItems();if(!this.supportTrans)this.$currentItm.addClass("dg-center")},_startSlideshow:function(){var a=this;this.slideshow=setTimeout(function(){a._navigate("next");if(a.options.autoplay){a._startSlideshow()}},this.options.interval)},destroy:function(){this.$navPrev.off(".gallery");this.$navNext.off(".gallery");this.$wrapper.off(".gallery")}};var c=function(a){if(this.console){console.error(a)}};a.fn.gallery=function(b){if(typeof b==="string"){var d=Array.prototype.slice.call(arguments,1);this.each(function(){var e=a.data(this,"gallery");if(!e){c("cannot call methods on gallery prior to initialization; "+"attempted to call method '"+b+"'");return}if(!a.isFunction(e[b])||b.charAt(0)==="_"){c("no such method '"+b+"' for gallery instance");return}e[b].apply(e,d)})}else{this.each(function(){var c=a.data(this,"gallery");if(!c){a.data(this,"gallery",new a.Gallery(b,this))}})}return this}})(jQuery)
//]]>
</script>
<script type='text/javascript'>
$(window).bind("load", function() {
$('#dg-container').gallery({autoplay:true});
});
</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 vào
pBlank          = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
text            = "Comments",
numposts_g      = 10,//Số bài cần trình chiếu
home_page       = "URL Blog của bạn";
</script>
<script type='text/javascript'>
//<![CDATA[
function my3DGallery(json) {
 document.write('<section id="dg-container" class="dg-container"><div class="dg-wrapper">');
 for (var i = 0; i < numposts_g; i++) {
  var entry = json.feed.entry[i],
   title = entry.title.$t,
   date = entry.published.$t,
   link, 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;
   }
  }
  img = ('media$thumbnail' in entry) ? entry.media$thumbnail.url : pBlank;
  img = img.replace(/\/s[0-9]+(\-c)?\//, "/s370/");
  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('<a href="' + link + '"' + (slideOpenNewTab ? ' target="_blank"' : '') + '><img src="' + img + '" alt=""><div>' + title + (showPostDate_g ? '<em> - ' + date_a + ' ' + months[parseInt(date_b, 10)-1] + ' ' + date_c + '</em>' : '') + (showComm_g ? '<em> - ' + cm + ' ' + text + '</em>' : '') + '</div></a>');
 }
    document.write('</div><nav><span class="dg-prev">&lt;</span><span class="dg-next">&gt;</span></nav></section>');
}

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=my3DGallery'><\/scr" + "ipt>");
//]]>
</script>
Đặt tiện ích vào chỗ thích hợp và chỉnh sửa kích thước cho phù hợp với blog. Nguồn: www.dte.web.id
Publis: 

2 comments

  1. minh làm đc mà sao cái hình thumbai nó mờ lắm bạn
    1. Có thể do ảnh của bạn quá nhỏ
🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji