Cara Membuat Slider Carousel Otomatis di Blog dengan Mudah

Posted by :
Tampilan halaman depan sebuah blog yang menarik, ditambah navigasi yang simple dan jelas akan membuat blog kamu lebih SEO friendly. Selain itu penambahan sebuah slider pada halaman pertama blog untuk memudahkan visitor mencari postingan yang dikategorikan. Dan kali ini admin akan berbagi tutorialnya cara membuat Slider Carousel di halaman depan blog.


Cara Membuat Slider Carousel Otomatis di Blog dengan Mudah

Carousel adalah sebuah slider yang ada di Bootstrap atau kita biasa dengan menyebut slider saja. Carousel merupakan slider yang responsive serta fleksibel, karena dalam slider ini memungkinkan semua elemen seperti, gambar, video, tulisan dan iframe dimasukan kedalam slider tersebut. pada kesempatan ini juga admin akan berbagi tutorial memasang slider carousel yang bisa kamu terapkan di template kamu.

Kita bisa dengan mudah membuatnya dengan mengikuti langkah langkah berikut. Lakukan dengan teliti ya. Slider yang kita akan buat kali ini adalah Owl Slider.

Jika penasaran untuk slidernya bisa dengan melihat demonya disini!

1. Buka Blogger
2. Pada dashboard buka menu "Tema" lalu klik "Edit HTML". Setelah itu salin dan terapkan kode CSS berikut tepat diatas kode </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style id='owl-carousel' type='text/css'>
/* Owl Carousel */
.owl-carousel{padding:0}
#main-slider{margin-bottom:10px;padding:0 0 0}
.owl-next{position:absolute;left:0;top:-180px}
.owl-prev{position:absolute;right:0;top:-180px}
.owl-carousel .owl-wrapper:after{content:&#39;&#39;;display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel{display:none;position:relative;width:100%;}
.owl-carousel .owl-wrapper{display:none;position:relative}
.owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%}
.owl-carousel .owl-wrapper-outer.autoHeight{transition:height 500ms ease-in-out}
.owl-carousel .owl-item{float:left}
.owl-controls .owl-buttons div,.owl-controls .owl-page{cursor:pointer}
.owl-controls{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.grabbing{cursor:pointer;}
.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-theme .owl-controls{text-align:center;position:absolute;bottom:0;right:0;left:0;z-index:80;width:100%;margin:auto}
.owl-theme .owl-controls .owl-buttons div{background:rgba(51,51,51,.9);color:#fff;display:inline-block;margin:5px 0;padding:5px 10px;font-size:32px}
.owl-theme .owl-controls.clickable .owl-buttons div:hover{background:#f64c3b;color:#fff;}
.owl-theme .owl-controls .owl-page{display:inline-block;zoom:1}
.owl-theme .owl-controls .owl-page span{display:block;width:12px;height:12px;margin:5px 3px;opacity:.95;border-radius:20px;background:#fff;)
.owl-theme .owl-controls .owl-page.active span{opacity:1;border:3px solid rgba(0,0,0,.6);}
.owl-theme .owl-controls.clickable .owl-page:hover span{opacity:1}
.owl-theme .owl-controls .owl-page span.owl-numbers{height:auto;width:auto;color:#FFF;padding:2px 10px;font-size:12px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px}
.owl-theme .owl-controls{right:0;left:0;bottom:-20px;text-align:center;z-index:90;width:100%;max-width:1200px;margin:auto;position:absolute}
.owl-theme .owl-controls .owl-page span {width:13px;height:13px;}
.owl-theme .owl-controls .owl-page.active span {border:0;background:#f64c3b;}
.owl-theme .owl-controls .owl-page span{background:#fff;}
.owl-theme .owl-controls .owl-page span {background:#fff;}
</style>
</b:if>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Slider Home */
figure.slider-item {position:relative;}
figcaption.slide-cap{position:absolute;display:inline-block;left:0;right:0;top:0;bottom:0;padding:20px 0;margin:auto;width:100%;height:100%;background:rgba(0,0,0,.3);text-align:center;z-index:20}
img.lazyOwl {height:300px;width:100%;opacity:0;}
.image-content {position:relative;overflow:hidden;}
.posts-description{position:relative;z-index:100;display:table;vertical-align:middle;width:100%}
.posts-description p {margin:20px;}
.posts-description p a{background:rgba(0,0,0,.2);color:#fff;padding:8px 12px;font-size:11px;letter-spacing:.5px;text-transform:uppercase;border:1px solid #fafafa;transition:all .3s}
.posts-description p a:hover{background:#f64c3b;}
.posts-description h2{margin-top:12%;margin-bottom:15px;text-align:center;letter-spacing:.5px}
.posts-description h2 a {color:#fff;}
.posts-description h2 a:hover {text-decoration:underline}
.slider-back{background-size:cover;background-position:50%;background-repeat:no-repeat;width:100%;height:100%;top:0;position:absolute;-webkit-backface-visibility:hidden;-webkit-filter:grayscale(0);filter:grayscale(0);transition:all 0.6s;}
.slider-back:hover{-webkit-filter:grayscale(100%);filter:grayscale(100%);}
</style>
</b:if>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
/*<![CDATA[*/
// Featured Slider
cat1 = 'NAMA-LABEL-KATEGORI'; 
imgr = new Array();
imgr[0] = "http://4.bp.blogspot.com/-tinWKTDJ8Ak/VU47yzz0f3I/AAAAAAAAKCM/yX9sXfgdgec/s1600/no-image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150; 
summaryTitle = 50; 
numposts1 = 50
var _0x996e=["\x6C\x65\x6E\x67\x74\x68","\x72\x61\x6E\x64\x6F\x6D","\x66\x6C\x6F\x6F\x72","\x65\x6E\x74\x72\x79","\x66\x65\x65\x64","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6F\x77\x6C\x2D\x74\x68\x65\x6D\x65\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x64\x69\x73\x70\x6C\x61\x79\x3A\x6E\x6F\x6E\x65\x3B\x22\x3E","\x77\x72\x69\x74\x65","\x24\x74","\x74\x69\x74\x6C\x65","\x74\x65\x72\x6D","\x63\x61\x74\x65\x67\x6F\x72\x79","\x6C\x69\x6E\x6B","\x61\x6C\x74\x65\x72\x6E\x61\x74\x65","\x72\x65\x6C","\x68\x72\x65\x66","\x63\x6F\x6E\x74\x65\x6E\x74","\x73\x75\x6D\x6D\x61\x72\x79","","\x3C\x69\x6D\x67","\x69\x6E\x64\x65\x78\x4F\x66","\x73\x72\x63\x3D\x22","\x22","\x73\x75\x62\x73\x74\x72","\x3C\x66\x69\x67\x75\x72\x65\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x6C\x69\x64\x65\x72\x2D\x69\x74\x65\x6D\x22\x3E\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x69\x6D\x61\x67\x65\x2D\x63\x6F\x6E\x74\x65\x6E\x74\x22\x3E\x3C\x69\x6D\x67\x20\x77\x69\x64\x74\x68\x3D\x22\x32\x35\x30\x22\x20\x68\x65\x69\x67\x68\x74\x3D\x22\x33\x30\x30\x22\x20\x63\x6C\x61\x73\x73\x3D\x22\x6C\x61\x7A\x79\x4F\x77\x6C\x22\x20\x73\x72\x63\x3D\x22","\x73\x33\x30\x30","\x72\x65\x70\x6C\x61\x63\x65","\x22\x20\x61\x6C\x74\x3D\x22\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x64\x69\x73\x70\x6C\x61\x79\x3A\x20\x62\x6C\x6F\x63\x6B\x3B\x22\x3E\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x6C\x69\x64\x65\x72\x2D\x62\x61\x63\x6B\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64\x2D\x69\x6D\x61\x67\x65\x3A\x75\x72\x6C\x28","\x29\x3B\x22\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x66\x69\x67\x63\x61\x70\x74\x69\x6F\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x6C\x69\x64\x65\x2D\x63\x61\x70\x22\x3E\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x70\x6F\x73\x74\x73\x2D\x64\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x22\x3E\x3C\x68\x32\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E","\x3C\x2F\x61\x3E\x3C\x2F\x68\x32\x3E\x3C\x70\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x2F\x73\x65\x61\x72\x63\x68\x2F\x6C\x61\x62\x65\x6C\x73\x2F","\x3F\x6D\x61\x78\x2D\x72\x65\x73\x75\x6C\x74\x73\x3D\x35\x22\x20\x72\x65\x6C\x3D\x22\x74\x61\x67\x22\x3E","\x3C\x2F\x61\x3E\x3C\x2F\x70\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x2F\x66\x69\x67\x63\x61\x70\x74\x69\x6F\x6E\x3E\x3C\x2F\x66\x69\x67\x75\x72\x65\x3E","\x3C\x2F\x64\x69\x76\x3E"];function showrecentposts1(_0xae5cx2){j=showRandomImg?Math[_0x996e[2]]((imgr[_0x996e[0]]+1)*Math[_0x996e[1]]()):0,img= new Array,maxpost=numposts1<=_0xae5cx2[_0x996e[4]][_0x996e[3]][_0x996e[0]]?numposts1:_0xae5cx2[_0x996e[4]][_0x996e[3]][_0x996e[0]],document[_0x996e[6]](_0x996e[5]);for(var _0xae5cx3=0;_0xae5cx3<maxpost;_0xae5cx3++){var _0xae5cx4,_0xae5cx5=_0xae5cx2[_0x996e[4]][_0x996e[3]][_0xae5cx3],_0xae5cx6=_0xae5cx5[_0x996e[8]][_0x996e[7]],_0xae5cx7=_0xae5cx5[_0x996e[10]][0][_0x996e[9]];if(_0xae5cx3==_0xae5cx2[_0x996e[4]][_0x996e[3]][_0x996e[0]]){break };for(var _0xae5cx8=0;_0xae5cx8<_0xae5cx5[_0x996e[11]][_0x996e[0]];_0xae5cx8++){if(_0x996e[12]==_0xae5cx5[_0x996e[11]][_0xae5cx8][_0x996e[13]]){_0xae5cx4=_0xae5cx5[_0x996e[11]][_0xae5cx8][_0x996e[14]];break ;}};if(_0x996e[15] in _0xae5cx5){var _0xae5cx9=_0xae5cx5[_0x996e[15]][_0x996e[7]]}else {if(_0x996e[16] in _0xae5cx5){var _0xae5cx9=_0xae5cx5[_0x996e[16]][_0x996e[7]]}else {var _0xae5cx9=_0x996e[17]}};j>imgr[_0x996e[0]]-1&&(j=0),img[_0xae5cx3]=imgr[j],s=_0xae5cx9,a=s[_0x996e[19]](_0x996e[18]),b=s[_0x996e[19]](_0x996e[20],a),c=s[_0x996e[19]](_0x996e[21],b+5),d=s[_0x996e[22]](b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&_0x996e[17]!=d&&(img[_0xae5cx3]=d);var _0xae5cxa=_0x996e[23]+img[_0xae5cx3][_0x996e[25]](/s\B\d{2,4}/,_0x996e[24])+_0x996e[26]+img[_0xae5cx3]+_0x996e[27]+_0xae5cx4+_0x996e[28]+_0xae5cx6+_0x996e[29]+_0xae5cx7+_0x996e[30]+_0xae5cx7+_0x996e[31];document[_0x996e[6]](_0xae5cxa),j++;};document[_0x996e[6]](_0x996e[32]);}
/*]]>*/
</script>
</b:if>

3. Ubah dahulu NAMA-LABEL-KATEGORI dengan Label yang kamu ingin tampilkan di slider, dan atur juga numposts = 50 dengan jumlah postingan yang kamu inginkan. Setelah itu salin dan tempelkan kode javascript berikut di atas kode </body>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='https://cdn.rawgit.com/Arlina-Design/frame/master/owl-carouselfix.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// Owl carouselle
jQuery(document).ready(function(e) {e(".owl-theme").owlCarousel({items:1,responsive:true,lazyLoad:false,autoPlay:true,stopOnHover:true,pagination:false,navigation:true,navigationText: ["<i class='fa fa-angle-right'></i>","<i class='fa fa-angle-left'></i>"]});})
//]]>
</script>
</b:if>

4. Langkah selanjutnya adalah dengan mencari (CTRL+F) kode berikut </header> , lalu salin kode di bawah ini dan letakan tepat dibawahnya.

<!-- Slider -->
<div class='carouselle3 slider' id='main-slider'>
<script>document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+cat1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);</script>
</div>

5. Setelah semua selesai simpan template.

Baca Juga :
Cara Memasang Meta Tag Keyword

Itulah tutorial cara membuat Slider Carousel jenis Owl Slider. Jika ada kesalahan atau ketidak sesuaian hasil kemungkinan itu karena bawaan templatenya. Silahkan berkomentar jika ada yang hendak ditanyakan kepada Admin. Kunjungi SHARE TUTOR GAN!! untuk artikel menarik seputar tutorial yang bisa kamu temukan disini. Atau kamu juga bisa berlangganan artikel via Email dengan cara mensubmitnya dibawah.
TAGS: