Begini Cara Menciptakan Featured Slider Di Blog Sesuai Label

Featured slider ialah sebuah widget untuk menampilkan artikel terbaru dari blog kau sesuai dengan la label dan beranimasi. kekuranganya ialah loading blog menjadi sedikit lebih lama, tapi gak lama-lama amat kok, jadi buat kau yang doyan blognya ngebut ngebut gak rekomended deh pake widget ini.

Berikut ini kelebihan dari Featured Slider:

1. Menampilkan postingan terbaru menurut label.
2. Animasi slider yang halus.
3. Responsive, sudah mendukung di semua ukuran layar.

Kekurangan dari Featured Slider:

1. Sedikit membebani loading blog

Bagi sahabat blogger yang ingin mencoba Featured Slider ini eksklusif aja simak eksklusif caranya.

Cara Memasang Featured Slider Otomatis di Blogger

Pastikan template blog yang di gunakan memakai Jquery library versi ini

 https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js

Jika versi Jquery library di template sahabat memakai versi 2 ke bawah silahkan ubah memakai Jquery library di atas.

Tambahkan arahan ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

 <script type='text/javascript'> //<![CDATA[ function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); //]]> </script>

Lewati langkah di atas kalau di template blog sahabat sudah memakai arahan Fontawesome.

Selanjutnya tambahkan arahan di bawah ini sebelum </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<style id='owl-carousel' type='text/css'> *,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .ct-wrapper{padding:0;position:relative;max-width:970px;width:auto;margin:20px auto} #featured-slider h2.title,#featured_slider .widget h2.title{display:none} #featured_slider{margin:0 0 30px} .slider-wrappper{max-width:970px;margin:0 auto;padding:0} .owl_carouselle.owl-carousel.owl-loaded{margin:0 0 3em} .slider-item{position:relative;height:100%} .slider-item:before{display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:#2d3436;opacity:.4;z-index:1} a.slider-image{height:100%} .thumb.overlay{height:200px} .post-descript{background:#fff;position:absolute;bottom:-30px;left:8%;right:8%;z-index:99;padding:25px;box-shadow:0 3px 10px rgba(0,0,0,0.1);border-radius:6px;text-align:center;transition:all .3s} .slider-item:hover .post-descript{box-shadow:0 2px 10px rgba(0,0,0,0.1)} .slider-wrapp .post-inner{padding:0 40px;margin:auto} .slider-item h2.post-title{font-size:24px;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .slider-item h2.post-title a{color:#000;transition:all .3s} .slider-item h2.post-title a:hover{color:#aaa} .slider-item .post-date{display:inline-block;color:#aaa;font-size:10px;margin:10px auto 0 auto;text-transform:uppercase} .slider-item .post-tag a{display:inline-block;background:#f39c12;color:#fff;padding:3px 10px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s} .slider-item .post-tag a:hover{background:#000;color:#fff} .feat-home .post-tag a,.feat-home a,.feat-home div,.feat-home h2 a{color:#fff} .featured-posts{display:inline-block;width:100%} .feature-item{position:relative;display:inline-block;float:left;width:24.2%;margin:0 10px 0 0} .feature-item:last-child{margin:0} .feature-item .thumb.overlay{height:150px;width:100%;position:static} .feature-item .thumb.overlay a.slider-image{} .feature-item .post-descript{background:#fff;position:static;height:100px;margin:auto;border-radius:0;box-shadow:0 2px 10px rgba(0,0,0,0.1);padding:10px;overflow:hidden;transition:all .3s} .feature-item .post-descript:before{content:&#39;&#39;;position:absolute;bottom:0;left:0;right:0;height:30px;background-image:linear-gradient(to top,#fff,rgba(255,255,255,0));background:linear-gradient(to left,#ffffff 0,#ffffff 100%,rgba(255,255,255,0) 100%);overflow:hidden} .feature-item:hover .post-descript{box-shadow:0 1px 5px rgba(0,0,0,0.1)} .feature-item h2.post-title{font-size:14px;margin:auto;line-height:normal;font-weight:400} .feature-item h2.post-title a{color:#000} .feature-item:hover h2.post-title a{color:#aaa} .feature-item .post-meta{margin:0} .feature-item .post-tag a{display:inline-block;background:#f39c12;color:#fff;padding:2px 8px;font-size:9px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s} .feature-item .post-tag a:hover{background:#000;color:#fff} .feat-home{height:320px;margin:0 0 50px;position:relative} .feat-home:before,.slider-item:before{content:&quot;&quot;;right:0} .feat-home:before{display:block;position:absolute;top:0;width:100%;height:100%;background:#000;opacity:.35;z-index:1} .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:&quot;.&quot;;display:block;clear:both;visibility:hidden;line-height:0;height:0} .owl-carousel .owl-stage-outer{position:relative;-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} .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(https://4.bp.blogspot.com/-9jaG9YO21Qs/W9rimdnu-mI/AAAAAAAACyQ/Tcv3-DtVm9kOlk73vTnBG6x_1a60wchuwCLcBGAs/s1600/play-icon.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:420px;box-shadow:0 20px 10px -15px rgba(0,0,0,0.1)} .owl-prev{left:20px;transform:translate(-50px,0)}.owl-next{right:20px;transform:translate(50px,0)} .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} .owl-nav button.owl-prev,.owl-nav button.owl-next{background:none;border:0} .owl-carousel:hover .owl-prev,.owl-carousel:hover .owl-next{opacity:1;visibility:visible;transform:translate(0,0)} #HTML33 .widget-content{overflow:visible} @keyframes fadeOut{0%{opacity:1}100%{opacity:0}} @media screen and (max-width: 768px){ .feature-item{width:50%;margin:0 auto 15px auto}} @media screen and (max-width: 640px){ .owl-prev,.owl-next{top:18%} .owl-carousel .owl-item{height:auto} .post-descript{padding:15px 10px;left:5%;right:5%} .slider-wrapp .post-inner{padding:0 10px} .slider-item h2.post-title{font-size:16px} .feature-item{display:inline-block;float:none;width:100%;margin:0 auto 15px auto}} @media screen and (min-width:580px){.thumb.overlay{display:block;position:absolute;width:100%}.thumb.overlay{height:100%;top:0;left:0;bottom:0}} </style> 

Dan arahan di bawah ini

 <style id='owl-carousel' type='text/css'> *,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .ct-wrapper{padding:0;position:relative;max-width:970px;width:auto;margin:20px auto} #featured-slider h2.title,#featured_slider .widget h2.title{display:none} #featured_slider{margin:0 0 30px} .slider-wrappper{max-width:970px;margin:0 auto;padding:0} .owl_carouselle.owl-carousel.owl-loaded{margin:0 0 3em} .slider-item{position:relative;height:100%} .slider-item:before{display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:#2d3436;opacity:.4;z-index:1} a.slider-image{height:100%} .thumb.overlay{height:200px} .post-descript{background:#fff;position:absolute;bottom:-30px;left:8%;right:8%;z-index:99;padding:25px;box-shadow:0 3px 10px rgba(0,0,0,0.1);border-radius:6px;text-align:center;transition:all .3s} .slider-item:hover .post-descript{box-shadow:0 2px 10px rgba(0,0,0,0.1)} .slider-wrapp .post-inner{padding:0 40px;margin:auto} .slider-item h2.post-title{font-size:24px;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .slider-item h2.post-title a{color:#000;transition:all .3s} .slider-item h2.post-title a:hover{color:#aaa} .slider-item .post-date{display:inline-block;color:#aaa;font-size:10px;margin:10px auto 0 auto;text-transform:uppercase} .slider-item .post-tag a{display:inline-block;background:#f39c12;color:#fff;padding:3px 10px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s} .slider-item .post-tag a:hover{background:#000;color:#fff} .feat-home .post-tag a,.feat-home a,.feat-home div,.feat-home h2 a{color:#fff} .featured-posts{display:inline-block;width:100%} .feature-item{position:relative;display:inline-block;float:left;width:24.2%;margin:0 10px 0 0} .feature-item:last-child{margin:0} .feature-item .thumb.overlay{height:150px;width:100%;position:static} .feature-item .thumb.overlay a.slider-image{} .feature-item .post-descript{background:#fff;position:static;height:100px;margin:auto;border-radius:0;box-shadow:0 2px 10px rgba(0,0,0,0.1);padding:10px;overflow:hidden;transition:all .3s} .feature-item .post-descript:before{content:&#39;&#39;;position:absolute;bottom:0;left:0;right:0;height:30px;background-image:linear-gradient(to top,#fff,rgba(255,255,255,0));background:linear-gradient(to left,#ffffff 0,#ffffff 100%,rgba(255,255,255,0) 100%);overflow:hidden} .feature-item:hover .post-descript{box-shadow:0 1px 5px rgba(0,0,0,0.1)} .feature-item h2.post-title{font-size:14px;margin:auto;line-height:normal;font-weight:400} .feature-item h2.post-title a{color:#000} .feature-item:hover h2.post-title a{color:#aaa} .feature-item .post-meta{margin:0} .feature-item .post-tag a{display:inline-block;background:#f39c12;color:#fff;padding:2px 8px;font-size:9px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s} .feature-item .post-tag a:hover{background:#000;color:#fff} .feat-home{height:320px;margin:0 0 50px;position:relative} .feat-home:before,.slider-item:before{content:&quot;&quot;;right:0} .feat-home:before{display:block;position:absolute;top:0;width:100%;height:100%;background:#000;opacity:.35;z-index:1} .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:&quot;.&quot;;display:block;clear:both;visibility:hidden;line-height:0;height:0} .owl-carousel .owl-stage-outer{position:relative;-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} .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(https://4.bp.blogspot.com/-9jaG9YO21Qs/W9rimdnu-mI/AAAAAAAACyQ/Tcv3-DtVm9kOlk73vTnBG6x_1a60wchuwCLcBGAs/s1600/play-icon.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:420px;box-shadow:0 20px 10px -15px rgba(0,0,0,0.1)} .owl-prev{left:20px;transform:translate(-50px,0)}.owl-next{right:20px;transform:translate(50px,0)} .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} .owl-nav button.owl-prev,.owl-nav button.owl-next{background:none;border:0} .owl-carousel:hover .owl-prev,.owl-carousel:hover .owl-next{opacity:1;visibility:visible;transform:translate(0,0)} #HTML33 .widget-content{overflow:visible} @keyframes fadeOut{0%{opacity:1}100%{opacity:0}} @media screen and (max-width: 768px){ .feature-item{width:50%;margin:0 auto 15px auto}} @media screen and (max-width: 640px){ .owl-prev,.owl-next{top:18%} .owl-carousel .owl-item{height:auto} .post-descript{padding:15px 10px;left:5%;right:5%} .slider-wrapp .post-inner{padding:0 10px} .slider-item h2.post-title{font-size:16px} .feature-item{display:inline-block;float:none;width:100%;margin:0 auto 15px auto}} @media screen and (min-width:580px){.thumb.overlay{display:block;position:absolute;width:100%}.thumb.overlay{height:100%;top:0;left:0;bottom:0}} </style>

Berikut nya tambahkan arahan di bawah ini di antara tag <body> dan </body>

<div class='slider-wrappper'> <b:section class='featured-slider' id='featured-slider' maxwidgets='2' showaddelement='no'>   <b:widget id='HTML32' locked='true' title='Slider' type='HTML' version='1'>     <b:widget-settings>       <b:widget-setting name='content'>Featured</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'>                           <div class='widget-inner'>                             <script>                               document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+postnum5+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=postarea4\&quot;&gt;&lt;\/script&gt;&quot;);                             </script>                           </div>                         </div>         </b:includable>   </b:widget>   <b:widget id='HTML33' locked='true' title='Featured Post' type='HTML' version='1'>     <b:widget-settings>       <b:widget-setting name='content'>Fashion</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'>                           <div class='widget-inner'>                             <script>                               document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+postnum4+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=postarea5\&quot;&gt;&lt;\/script&gt;&quot;);                             </script>                           </div>                         </div>         </b:includable>   </b:widget> </b:section> </div> 

Jika Featured Slider hanya ingin di tampilkan di halaman index bungkus arahan di atas dengan arahan ini

 <b:if cond='data:view.isMultipleItems'> <div class='slider-wrappper'> <b:section class='featured-slider' id='featured-slider' maxwidgets='2' showaddelement='no'>   <b:widget id='HTML32' locked='true' title='Slider' type='HTML' version='1'>      ------   </b:widget>   <b:widget id='HTML33' locked='true' title='Featured Post' type='HTML' version='1'>      ------   </b:widget> </b:section> </div> </b:if>

Setelah simpulan klik tombol Simpan jika ada peringatan abaikan saja. Selanjutnya pergi ke sajian Tata letak klik edit pada widget dengan judul Slider dan Featured Post > ubah nama label dengan nama label yang ingin di tampilkan dan Selesai.

Bagi sahabat blogger yang ingin melihat tampilan nya ibarat apa silakan Result di sini

Source arahan : Arlina Design
Sumber https://abomuthemes.blogspot.com/

Bagikan Artikel ini