Keberadaan widget membantu sebuah blog tampil lebih lengkap. Widget Pada Blogspot berguna untuk pengunjung maupun blogger sendiri. Sebab beberapa widget membantu pengunjung bisa lebih mengeksplor isi blog dan blogger yang lebih bisa memperlihatkan isi blog kepada pengunjung.
/* CSS Slider Carousel */
.slider-wrapper{margin:auto auto 15px auto}
.ct-wrapper{margin:auto}
.owl-carousel{margin:auto}
#featured-slider{margin:0 -5px;overflow:hidden}
#featured-slider2{max-width:970px;margin:0 -5px}
#featured-slider h2.title,#featured-slider2 h2.title{display:none}
#featured_slider{margin:0 0 30px}
#featured_slider .widget h2.title{display:none}
.slider-item{position:relative;height:100%}
.slider-item:before{position:absolute;content:'';left:0;right:0;top:0;bottom:0;margin:auto;background-color:rgba(0,0,0,.75);opacity:0.65;transition:opacity .4s linear;z-index:1}
.thumb.overlay{display:block;width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0}
a.slider-image{height:100%}
.post-decsription{position:absolute;top:35%;right:0;left:0;text-align:center;z-index:10}
.slider-wrap .post-inner{display:inline-block;padding:7px 40px}
.slider-wrap .post-tag a{display:inline-block;color:#fff;padding:5px 8px;font-size:12px}
.slider-item h2.post-title a{color:#fff}
.slider-item .post-tag{float:none}
.slider-item .post-date{color:#fff;font-size:12px;margin:5px 0 0 0}
.slider-item .rd_mre_btn{margin:30px auto 0}
.slider-item .rd_mre_btn a{background:#fff;color:#0e0e0e;border:1px solid #eee;display:inline-block;line-height:40px;padding:0 20px}
.owl_carouselle2{margin:auto;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0) scale(1.0,1.0);transform:translateZ(0);}
.owl_carouselle2.owl-carousel .owl-item{height:200px}
.owl_carouselle2 .slider-item h2.post-title{font-size:16px}
.owl_carouselle2 .slider-item{margin:0 5px;overflow:hidden}
.owl_carouselle2 .post-decsription{top:20%}
<style id='owl-carousel' type='text/css'>
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}
.owl-carousel{display:none;width:100%;z-index:1}
.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}
.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}
.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}
.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}
.owl-carousel .owl-item img{display:block;width:100%}
.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}
.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}
.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-loading{opacity:0;display:block}
.owl-carousel.owl-hidden{opacity:0}
.owl-carousel.owl-refresh .owl-item{visibility:hidden}
.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-grab{cursor:move;cursor:grab}
.owl-carousel.owl-rtl{direction:rtl}
.owl-carousel.owl-rtl .owl-item{float:right}
.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}
.owl-carousel .owl-animated-in{z-index:0}
.owl-carousel .owl-animated-out{z-index:1}
.owl-carousel .fadeOut{animation-name:fadeOut}
@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}
.owl-height{transition:height .5s ease-in-out}
.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}
.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}
.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}
.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}
.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}
.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}
.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}
.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}
.owl-theme .owl-nav{margin-top:10px}
.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}
.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}
.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}
.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}
.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}
.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}
.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
.owl-carousel .owl-item{height:580px}
@media screen and (max-width: 786px){
.owl-carousel .owl-item { height: 380px; }}
.owl-prev{left:20px}
.owl-next{right:20px}
.owl-prev,.owl-next{color:#fff;font-size:36px;height:65px;line-height:65px;padding:0 14px;position:absolute;top:42%;visibility:hidden;opacity:0;transition:all .3s ease-in-out}
.owl-carousel:hover .owl-prev,.owl-carousel:hover .owl-next{opacity:1;visibility:visible}
</style>
Salin Kode
JQuery berikut, letakkan diatas kode
</head>
<script type='text/javascript'>
//<![CDATA[
// Posts labels here
cat1 = 'Blogger';
imgr = new Array,
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin06YRPmvhypg-OU08oeLTGf8MFdMh92LHD-YMaHQoNxcz4oa046f0YHv-BysgnsFrruHs_NJPnYjKbSrBGyTYu6E_Euhboj5UeifPCje_2BJ5EuIRx1Nqh9Wl0XMwzdAF7ceUJb3op9c/s1600/picture_not_available.png",
showRandomImg = true;
aBold = true;
summaryPost = 150;
summaryTitle = 50;
postnum4 = 9,
function removeHtmlTag(e, t) {for (var a = e.split("<"), i = 0; i < a.length; i++) - 1 != a[i].indexOf(">") && (a[i] = a[i].substring(a[i].indexOf(">") + 1, a[i].length));return a = a.join(""), a = a.substring(0, t - 1)}
function postarea4(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,postnum4<=e.feed.entry.length?maxpost=postnum4:maxpost=e.feed.entry.length,document.write('<div class="owl_carouselle owl-carousel">');for(var t=0;t<maxpost;t++){for(var r,i,l=e.feed.entry[t],n=l.title.$t,o="",c=0;c<e.feed.entry[t].category.length;c++)o=o+'<a href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>",i='<a href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>";if(t==e.feed.entry.length)break;for(var m=0;m<l.link.length;m++)if("alternate"==l.link[m].rel){r=l.link[m].href;break}for(m=0;m<l.link.length;m++)if("replies"==l.link[m].rel&&"text/html"==l.link[m].type){l.link[m].title.split(" ")[0];break}if("content"in l)var f=l.content.$t;else if("summary"in l)f=l.summary.$t;else f="";postdate=l.published.$t,j>imgr.length-1&&(j=0),img[t]="",s=f,a=s.indexOf("<img"),b=s.indexOf('src="',a),k=s.indexOf('"',b+5),d=s.substr(b+5,k-b-5),-1!=a&&-1!=b&&-1!=k&&""!=d&&(img[t]=0==t?'<img min-width="620" min-height="240" class="odd-img" src="'+d+'"/>':'<img class="alignright" min-height="100" src="'+d+'" width="150"/>');for(var g=[1,2,3,4,5,6,7,8,9,10,11,12],p=["January","February","March","April","May","June","July","August","September","October","November","December"],h=postdate.split("-")[2].substring(0,2),u=postdate.split("-")[1],v=postdate.split("-")[0],y=0;y<g.length;y++)if(parseInt(u)==g[y]){u=p[y];break}var k=e.feed.entry[t].content.$t,w=(y=$("<div>").html(k)).find("img:first").attr("src"),x=e.feed.entry[t].media$thumbnail.url;-1!=x.indexOf("img.youtube.com")&&(x=e.feed.entry[t].media$thumbnail.url.replace("default","hqdefault")),x=x.replace("/s72-c/","/s1600/");k="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguHAoaiDvu6wEaIgwwF0jhE1I7jQjIj6d_XVJj1BvfZwEeKByNTMOPnSgI8AwC3FSb6AFx_5GxwaGsFMDNUcwhS9EKu4jLJturseaZaLhKun6p1_FcD2rsNgxHBq4L7fL5ohM_O1VP5H0/s1600/image-not-found-4a963b95bf081c3ea02923dceaeb3f8085e1a654fc54840aac61a57a60903fef.png";if(void 0===w)if(e.feed.entry[t].media$thumbnail)var A='<a href="'+r+'" class="slider-image" style="background:url('+x+') no-repeat center center;background-size: cover;width: 100%;height: 520px;display:block;image-rendering: -webkit-optimize-contrast;"/>';else A='<a href="'+r+'" class="noimg slider-image" style="background:url('+k+') no-repeat center center; display:block;"/>';else A='<a href="'+r+'" class="slider-image" style="background:url('+x+') no-repeat center center;background-size: cover; display:block;"/>';var z='<div class="slider-item"><div class="slider-wrap"><div class="thumb overlay">'+A+'</div><div class="post-decsription"><div class="post-inner"><div class="post-meta"><div class="post-tag">'+i+'</div></div><h2 class="post-title"><a href="'+r+'">'+n+'</a></h2><div class="post-date">On '+(h+" "+u+" "+v)+'</div><div class="post-read-more rd_mre_btn"><a href="'+r+'">View Post</a></div></div></div></div><div class="clear"></div></div>';document.write(z),j++}document.write("</div>")}function postarea5(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,postnum4<=e.feed.entry.length?maxpost=postnum4:maxpost=e.feed.entry.length,document.write('<div class="ct-wrapper"><div class="owl_carouselle2 owl-carousel">');for(var t=0;t<maxpost;t++){for(var r,i,l=e.feed.entry[t],n=l.title.$t,o="",c=0;c<e.feed.entry[t].category.length;c++)o=o+'<a href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>",i='<a href="/search/label/'+e.feed.entry[t].category[c].term+'?max-results=6">'+e.feed.entry[t].category[c].term+"</a>";if(t==e.feed.entry.length)break;for(var m=0;m<l.link.length;m++)if("alternate"==l.link[m].rel){r=l.link[m].href;break}for(m=0;m<l.link.length;m++)if("replies"==l.link[m].rel&&"text/html"==l.link[m].type){l.link[m].title.split(" ")[0];break}if("content"in l)var f=l.content.$t;else if("summary"in l)f=l.summary.$t;else f="";postdate=l.published.$t,j>imgr.length-1&&(j=0),img[t]="",s=f,a=s.indexOf("<img"),b=s.indexOf('src="',a),k=s.indexOf('"',b+5),d=s.substr(b+5,k-b-5),-1!=a&&-1!=b&&-1!=k&&""!=d&&(img[t]=0==t?'<img min-width="620" min-height="240" class="odd-img" src="'+d+'"/>':'<img class="alignright" min-height="100" src="'+d+'" width="150"/>');for(var g=[1,2,3,4,5,6,7,8,9,10,11,12],p=["January","February","March","April","May","June","July","August","September","October","November","December"],h=postdate.split("-")[2].substring(0,2),u=postdate.split("-")[1],v=postdate.split("-")[0],y=0;y<g.length;y++)if(parseInt(u)==g[y]){u=p[y];break}var k=e.feed.entry[t].content.$t,w=(y=$("<div>").html(k)).find("img:first").attr("src"),x=e.feed.entry[t].media$thumbnail.url;-1!=x.indexOf("img.youtube.com")&&(x=e.feed.entry[t].media$thumbnail.url.replace("default","hqdefault")),x=x.replace("/s72-c/","/s1600/");k="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguHAoaiDvu6wEaIgwwF0jhE1I7jQjIj6d_XVJj1BvfZwEeKByNTMOPnSgI8AwC3FSb6AFx_5GxwaGsFMDNUcwhS9EKu4jLJturseaZaLhKun6p1_FcD2rsNgxHBq4L7fL5ohM_O1VP5H0/s1600/image-not-found-4a963b95bf081c3ea02923dceaeb3f8085e1a654fc54840aac61a57a60903fef.png";if(void 0===w)if(e.feed.entry[t].media$thumbnail)var A='<a href="'+r+'" class="slider-image" style="background:url('+x+') no-repeat center center;background-size: cover;width: 100%;height: 520px;display:block;image-rendering: -webkit-optimize-contrast;"/>';else A='<a href="'+r+'" class="noimg slider-image" style="background:url('+k+') no-repeat center center; display:block;"/>';else A='<a href="'+r+'" class="slider-image" style="background:url('+x+') no-repeat center center;background-size: cover; display:block;"/>';var z='<div class="slider-item"><div class="slider-wrap"><div class="thumb overlay">'+A+'</div><div class="post-decsription"><div class="post-inner"><div class="post-meta"><div class="post-tag">'+i+'</div></div><h2 class="post-title"><a href="'+r+'">'+n+'</a></h2><div class="post-date">On '+(h+" "+u+" "+v)+'</div></div></div></div><div class="clear"></div></div>';document.write(z),j++}document.write("</div></div>")}
//]]>
</script>
<script type='text/javascript'>
var url_breaking = "/";
var jumlah_post = 10;
var marquee_speed = "6";
var close_button = false;
var info_text = true;
</script>
Salin Kode
JavaScript berikut, letakkan diatas kode
</body>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$(".back-totop").addClass('arlniain'):$(".back-totop").removeClass('arlniain')}),$(".back-totop").click(function(){return $("html,body").animate({scrollTop:0},600),!1})});
$(function(){if($("#header-sticky").length){var o=$("#header-sticky"),i=$("#header-sticky").offset().top,t=$("#header-sticky").height();$(window).scroll(function(){var n=$("#footer").offset().top-t-20,a=$(window).scrollTop();if(i<a?o.css({position:"fixed",top:0}):o.css("position","static"),n<a){var e=n-a;o.css({top:e})}})}});
// Featured
$(document).ready(function(){$(".owl_carouselle").owlCarousel({stagePadding:200,margin:10,autoplay:!0,loop:!0,nav:!0,navText:["<i class='fa fa-long-arrow-left'></i>","<i class='fa fa-long-arrow-right'></i>"],smartSpeed:1200,responsiveClass:!0,responsive:{0:{items:1,nav:!0,stagePadding:0},600:{items:1,nav:!1,stagePadding:0},1e3:{items:1,nav:!0,stagePadding:200}}}),$(".owl_carouselle2").owlCarousel({autoplay:!0,loop:!0,nav:!0,navText:["<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>"],smartSpeed:1200,responsiveClass:!0,responsive:{0:{items:1,nav:!0},600:{items:2,nav:!1},1e3:{items:3,nav:!0}}})});
//]]>
</script>
<script src='https://cdn.rawgit.com/Indzign/InSEO/1e2340e7/featurecarousel.js' type='text/javascript'/>
Letakkan HTML berikut atas kode
<div id='main-wrapper'> ;
<b:if cond='data:view.isHomepage'>
<style type='text/css'>.post, #blog-pager {display:none;}</style>
<div class='slider-wrapper'>
<b:section class='featured-slider' id='featured-slider' maxwidgets='2' showaddelement='no'>
<b:widget id='HTML81' locked='false' title='Blogger' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>Blogger</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'>
<data:title/>
</h2>
</b:if>
<div class='widget-content'>
<div class='widget-inner'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+postnum4+"&orderby=published&alt=json-in-script&callback=postarea5\"><\/script>");
</script>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>
Semoga bermanfaat Wassalam.
