Cara Membuat Featured Slider Post di Blogger

Cara Membuat  Featured Slider Post di Blogger  - Tutorial  cara membuat featured post di blogger. sudah banyak orang share tutorial tentang featured post .. dan sedikit yang masih bisa work .. karena hampir semua blog itu hanya copas .. jadi apabila 1 mati javascript semua mati ... nah untuk kesempatan kali ini saya akan membagikan featured post keren dengan bintang yang masih work dan sangan ringan .. untuk memasang nya pun tidak memberatkan loading suatu blogger ..
langsung saja ke tutorialnya

1. Masuk Ke Blogger
2. Template > Edit Html
3. Masukan css di bawah ini tepat diatas kode </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.box-tag a{padding:2px 8px;background-color:#3cbd1b;color:#fff!important;font-size:11px;z-index:999;font-weight:400;margin-bottom:5px;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.2)}.recent-slider .carousel{position:relative;margin:30px 0 25px!important;padding:0;overflow:visible;height:auto;display:block;clear:both}.recent-slider .carousel h2{display:none}.main-carousel{overflow:hidden}.carousel-abdoutech{padding:0!important;position:relative;overflow:hidden;list-style:none}.carousel-thumb{width:100%;height:380px;position:relative;display:block}.carousel-abdoutech .box-image{width:100%;height:100%;position:relative;display:block}.carousel-abdoutech .box-image:after{display:block;position:absolute;bottom:0;width:100%;height:100%;z-index:1;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDj06EPhAxKeU715StGdOKcOq8mEfdHBWmlNQYvIS8cU9U__lsmZsivU_-GfB98QuyE3GNFXeE44uzd9bcG6awZ28NSDsPxxOLaIer2qw2E1fDeZJxPiH5D9yEtj8sz0eo3_0MJdHajStw/s1600/pattern.png) top right rgba(58,78,90,.4)}.carousel-content,.featured .post-panel{transition:all .35s;box-sizing:border-box}.boxes ul li:hover .box-image:after,.bx-first:hover .bf-thumb:after,.carousel-abdoutech:hover .box-image:after{opacity:.2}.carousel-content{position:absolute;bottom:0;background:rgba(0,0,0,.31);width:100%;z-index:2;-moz-transition:all .35s;-webkit-transition:all .35s;-o-transition:all .35s;padding:15px;text-align:right}.main-carousel .owl-dots,.owl-carousel .owl-item:hover .carousel-content{bottom:10px}.carousel-abdoutech .recent-title{margin:10px 0 3px;font-size:18px;font-weight:600}.carousel-abdoutech .recent-title a{color:#fff;display:inline-block;line-height:1.2em;text-shadow:0 .5px .5px rgba(34,34,34,.3)}.carousel-abdoutech .recent-date{color:#ccc}.carousel-tag a{padding:2px 8px;background-color:red;color:#fff!important;font-size:11px;z-index:999;font-weight:400;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.3)}.main-carousel .owl-next,.main-carousel .owl-prev{margin-top:0;font-size:25px;line-height:40px;position:absolute;top:170px;width:47px;height:47px;cursor:pointer;z-index:999}.main-carousel .owl-prev{right:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEcNfiFB1IpOzMksotVvYftUDjvq5dOYtaek_-thA7kGm4kwjkLC8K3CGqc6_j-RV4RYUBsD8TGs62t0QP2l-u4zfsEMuPEuUREu3XLHroWy2sJLPFiYpJjMgt5KbDBEBhwfH-R15Tyuu0/s1600/next.png) 100% 0 no-repeat}.main-carousel:hover .owl-prev{right:0}.main-carousel .owl-next{left:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEcNfiFB1IpOzMksotVvYftUDjvq5dOYtaek_-thA7kGm4kwjkLC8K3CGqc6_j-RV4RYUBsD8TGs62t0QP2l-u4zfsEMuPEuUREu3XLHroWy2sJLPFiYpJjMgt5KbDBEBhwfH-R15Tyuu0/s1600/next.png) no-repeat}.main-carousel:hover .owl-next{left:-1px}.recent-date{color:#bdbdbd;font-size:12px;font-weight:400}.featured-date:before,.recent-date:before{content:'\f017';font-family:fontawesome;margin-left:5px}.owl-carousel .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOut{0{opacity:1}100%{opacity:0}}@keyframes fadeOut{0{opacity:1}100%{opacity:0}}.owl-height{-webkit-transition:height .5s ease-in-out;-moz-transition:height .5s ease-in-out;-ms-transition:height .5s ease-in-out;-o-transition:height .5s ease-in-out;transition:height .5s ease-in-out}.owl-carousel{display:none;width:100%;position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}.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-controls .owl-dot,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loaded{display:block}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel .owl-refresh .owl-item{display:none}.owl-carousel .owl-item{position:relative;min-height:1px;float:right;-webkit-backface-visibility:visible;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-dots,.owl-next,.owl-prev{position:absolute;text-align:center}.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.owl-carousel.owl-text-select-on .owl-item{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.owl-carousel .owl-grab{cursor:move;cursor:-webkit-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:left}.no-js .owl-carousel{display:block}.owl-next,.owl-prev{top:0;color:#1c1c1c;background-color:rgba(255,255,255,.8);font-family:FontAwesome;z-index:1;display:block;cursor:pointer;padding:0;overflow:hidden}.owl-prev{right:0}.owl-next{left:0}.owl-dots{bottom:1px;width:33.33%;right:0;left:0;margin:auto}.star_rating{position:absolute;top:0;left:0;z-index:2;font-size:14px;padding:5px 10px;background:rgba(35,40,45,.6)}li.carousel-abdoutech .star_rating .fa:nth-child(1){color:red}li.carousel-abdoutech .star_rating .fa:nth-child(2){color:#f50}li.carousel-abdoutech .star_rating .fa:nth-child(3){color:#fa0}li.carousel-abdoutech .star_rating .fa:nth-child(4){color:#3cbd1b}li.carousel-abdoutech .star_rating .fa:nth-child(5){color:#127adb}.carousel-abdoutech .box-image:after{display:block;position:absolute;bottom:0;width:100%;height:100%;z-index:1;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDj06EPhAxKeU715StGdOKcOq8mEfdHBWmlNQYvIS8cU9U__lsmZsivU_-GfB98QuyE3GNFXeE44uzd9bcG6awZ28NSDsPxxOLaIer2qw2E1fDeZJxPiH5D9yEtj8sz0eo3_0MJdHajStw/s1600/pattern.png) top right rgba(58,78,90,.4)}.carousel-abdoutech .box-image:after{content:'';opacity:.8;transition:all .35s;right:0;-moz-transition:all .35s;-webkit-transition:all .35s;-o-transition:all .35s}.carousel-abdoutech:hover .box-image:after{opacity:.2}
</style>
<link href='//raw.githack.com/arlinadsign/saflink/master/owl.carousel.css' rel='stylesheet'/>
<script data-cfasync='false' src='//raw.githack.com/arlinadsign/saflink/master/OwlCarousel.js' type='text/javascript'/>
</b:if>

4. Selanjutnya Simpan Kode Di bawah tepat di atas kode </body>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[

var MONTH_FORMAT= ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"];

var NO_IMAGE = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh-F8N6jp0zQfMtqEi54KsKvHpnt02GiKEYLS8neILH0gbnuUgEStKOu2VoUOfWIjwCOVsv1XUrv1YPrmcYvjH0lqA2aIflE9c0lB39KmCvNYXQC7qIel6SzexXmke9hxjt-gKQJSXhEk/s1600-r/nth.png"; 
var CAROUSEL_NUM = 6; 
var node = document.createElement('script'); node.type = 'text/javascript'; node.async = true; node.src = 'https://rawgit.com/abdelalilebbihi/abdou_tech/master/gadget/slider_star1.js'; var runscript = document.getElementsByTagName('script')[0]; runscript.parentNode.insertBefore(node, runscript);
//]]>
</script>
</b:if>

5. Selanjutnya simpan kode di bawah ini bebas mau di mana saja .. tapi saya sarankan dibawah <body>

 <b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='recent-slider' id='recent-slider'>
<div class='container'>
<b:section class='box-sec' id='box-sec' showaddelement='yes'>
  <b:widget id='HTML655' locked='false' title='' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'><![CDATA[<span id="carousel" data-label="Tips Blogger"></span>]]></b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'>
<data:title/></h2>
</b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
<!--b:include name='quickedit'/-->
</b:includable>
  </b:widget>
</b:section>
</div>
</div>
</b:if>

yang saya tandai warna merah itu diganti sesuai dengan ke inginan anda

Apabila Featured Post Tidak Tampil Silahkan Pergi ke Setelan (Setting) > Lainya > Ubah Izinkan Feed Blog  Menjadi Penuh .. Lalu Simpan

• DEMO

Sekian Tutorial Cara Membuat  Featured Slider Post di Blogger  Semoga Bermanfaat

Share Share Tweet Share Share Share

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi Anda membantu Admin untuk lebih giat lagi dalam membagikan template blog yang berkualitas. Terima kasih.