Cara Membuat Slider Carousel Image Otomatis di Blogger
Apa sih itu namanya slider carousel image otomatis? seperti apa sih contoh tampilan slider image ini? mungkin ini menjadi pertanyaan kamu saat baru mengenal yang namanya dunia coding untuk kebutuhan mendesign sebuah tema web.
Carousel image ini bisa kamu temui atau dapatkan di berbagai macam tampilan website contohnya seperti tema NP Black Blogger ini, tapi dalam halaman ini, kami hanya akan membahas untuk membuat slider carousel image ini kusus untuk platrom blogspot.
Fungsi dari wigdet slider image ini juga adalah untuk menampilkan artikel terbaru berdasarkan label yang sudah kamu tentukan. dan yang membuat wigdet slider image ini keren adalah tampilannya yang responsive disemua layar dan efek slow gulirnya.
Tapi perlu kamu ketahui, jika kamu sangat menjunjung tinggi akan kecepatan halaman blog, maka sangat disarankan untuk tidak menggunakan wigdet ini, sebab wigdet ini lumayan memakan ke bagian loading halaman blog.
Cara Membuat Slider Otomatis di Blog
 |
| Images by w3schools |
Langkah pertama adalah menyalin atau menganti kode jQuery didalam template blogger kamu. silahkan kamu salin kode dibawah ini dan letakan dibagian kode
</head><script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>Jika template kamu belum memasang icon FontAwesome, maka silahkan pasang dulu kodenya dibawah ini.
<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>
NOTE: Jika sudah terpasang icon FontAwesome di template kamu, tidak perlu dilakukan lagi untuk memasang kode FontAwesome diatas.Langkah berikutnya adalah memasang kode CSS nya dulu, untuk mempercantik tampilan. Salin dulu kode CSS dibawah ini.
/* Featured */
.slider-wrapper{margin: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:20px 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:280px}
.owl_carouselle2 .slider-item h2.post-title{font-size:20px}
.owl_carouselle2 .slider-item{margin:0 5px;overflow:hidden}
.owl_carouselle2 .post-decsription{top:20%}
.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}
Buka Blogger > Tema > Edit HTML > CTRL+F cari kode ]]></b:skin> dan letakan diatas.
Salin lagi kode Javascript dibawah ini.
<script src='https://raw.githack.com/rianseo/plugin-blogger-/master/js-featured.js' type='text/javascript'></script>Letakan kode JavaScript di atas, dibagian kode </head>
Salin lagi kode JavaScript dibawah ini dan letakan di atas bagian kode atas
</body>
<script type='text/javascript'>
//<![CDATA[
// Featured
$(document).ready(function(){$(".owl_carouselle").owlCarousel({stagePadding:200,margin:10,autoplay:!0,loop:!0,nav:!0,navText:[],smartSpeed:1500,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:[],smartSpeed:1500,responsiveClass:!0,responsive:{0:{items:2,nav:!0},600:{items:2,nav:!1},1e3:{items:4,nav:!0}}})});
//]]>
</script>
<script src='https://raw.githack.com/rianseo/plugin-blogger-/master/carousel-slider.js' type='text/javascript'></script>
Lalu tinggal menyalin kode HTML nya sebagai pemanggil kode Wigdet, salin lagi kode dibawah ini dan letakan dibagian kode dibawah <div id='wrapper'>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchLabel'><b:else/>
<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 != ""'>
<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="+postnum5+"&orderby=published&alt=json-in-script&callback=postarea4\"><\/script>");
</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 != ""'>
<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>
</b:if>
<div class='clear'/>
Tinggal kamu atur bagian label tag yang sesuai dengan kategori artikel kamu, Caranya bisa melalui pengaturan menu Wigdet.
Apabila wigdet tidak muncul, bisa ubah pengaturan feed menjadi penuh, caranya Setting > Lainnya > Izin Feed Blog > Penuh.
Sampai tahap ini, kami rasa kamu sudah berhasil memasang slider carousel image di blogger dengan mudah.
Penutup
Apabila ada yang tidak kamu pahami atau mengerti, jangan ragu untuk memberikan komentar pertanyaan diblog kami.
Posting Komentar untuk "Cara Membuat Slider Carousel Image Otomatis di Blogger"
Kami memiliki kebijakan dalam berkomentar di Blog ini :
— Dilarang promosi suatu barang
— Dilarang jika memasang link aktif di komentar
— Dilarang keras melakukan promosi iklan
— Dilarang menulis komentar yang berisi sara, bully atau cemuhan
NB :Komentar yang melanggar tidak akan ditampilkan
Kebijakan komentar yang bisa Anda temukan selengkapnya disini
Dukungan :
Jika menyukai dengan artikel blog kami, silahkan Ikuti blog ini