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.
Salin Kode CSS berikut diatas kode ]]></b:skin> atau </style>
/* 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.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede.
| Table Header 1 | Table Header 2 | Table Header 3 |
|---|---|---|
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
EmoticonEmoticon