Cara Membuat Feature Post Slider X2 Di Blogger

Hei sobat Blogger, Pada kesempatan kali ini saya akan berbagi sebuah Tutorial Cara Membuat Feature Post Slider Di Blogger tentunya dari Owl Carousel. Widget ini sangat berguna untuk menampilkan postingan terbaru hanya berdasarkan label yang ditentukan dengan animasi slider yang cukup smooth dan juga sudah support untuk tampilan responsive.
Cara Memasang Featured Post Slider Keren di Blogger
https://theme.id/

Mungkin Widget ini kurang cocok bagi kamu yang memiliki pengujung besar karena dari segi kecepatan maupun load suatu halaman homepage akan berkurang atau terbagi oleh Widget ini, dan itu akan membebani loading pada blog. Jika kamu hanya mementingkan kecepatan sangat tidak dianjurkan untuk memasang widget ini, Namun bagi kamu yang tidak terlalu mementingkan hal tersebut dan kebetulan hanya memikirkan tampilan bukan kecepatan sangat dianjurkan menggunakan widget keren satu ini. Mari kita simak Cara Memasang Featured Post Slider X2 di Blogger di bawah ini.

Cara Memasang Featured Post Slider di Blogger

"Jika kamu memiliki jquery library versi kebawah silakan hapus dan ganti versi keatas."

1. Silakan login dan buka dashbord blogger.

2. Pilih TEMA > EDIT HTML

3. Untuk mempermudah pencarian gunakan CTRL+F

4. Silakan cari kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

5. Silakan copy Jquery Library dibawah, Lalu pastekan tepat diatas </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>

6. Jika Jquery Sudah terpasang, Masih di langkah No.4

7. Silakan copy code LoadCSS dibawah, Dan pastekan tepat diatas. </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>

8. Jika LoadCSS Sudah terpasang, Kita harus membuat Agar lebih Responsive dan smooth.

9. Silakan copy code Owl-Carousel dibawah, Letakan tepat diatas </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
<b:if cond="data:blog.url == data:blog.homepageUrl">
<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;opacity:.7;z-index:1;background-image:linear-gradient(to bottom,transparent,rgb(0, 0, 0));transition:opacity 0.25s ease;}
a.slider-image{height:100%}
.thumb.overlay{height:200px}
@media screen and (max-width: 800px){
  .thumb.overlay{height:280px;}
}
.post-descript{position:absolute;bottom:20px;left:-5%;right:8%;z-index:99;padding:25px;border-radius:6px;transition:all .3s}
.slider-item:hover .post-descript{}
.slider-wrapp .post-inner{padding:0 40px;margin:auto}
.slider-item h2.post-title{font-size:24px;margin:0;padding:0;}
@media screen and (max-width: 480px){
  .slider-item h2.post-title a{
  font-size:16px!important;
  }
}

.slider-item h2.post-title a{color:#fff;transition:all .3s;font-size:24px;}
.slider-item h2.post-title a:hover{color:#fff}
.slider-item .post-date{display:inline-block;color:#ddd;font-size:10px;margin:10px auto 0 auto;text-transform:uppercase}
.slider-item .post-tag a{display:inline-block;background:#1292a0;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);overflow:hidden;border-radius:8px;}
.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;margin:3px;width:60px;padding:3px;background:#e2e2e2;border:none;border-radius:7px;outline:none;}button.owl-dot.active{background:#1a73e8;padding:3px;border:none;border-radius:7px;outline:none;}

@media screen and (max-width: 480px){
  .owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{

  }
  .owl-dots{
  bottom:0px!important;
  }
}

.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:#1a73e8;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;outline:none;}
.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:-2%;right:5%;bottom:10%;}
.slider-wrapp .post-inner{padding:0 10px}
.slider-item h2.post-title{font-size:16px;padding:0;display:flex;}
.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}}
.content-wrapper{overflow:hidden;max-width:1000px;margin:0 auto;margin-top:60px;margin-bottom:-85px;}

.owl-dots{
  position:absolute;
  bottom:0;
  width:100%;
  margin:0 auto;
  padding:20px 0 15px 0;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  flex-direction:row;
  text-align:center;

}

@media screen and (max-width: 480px){
  .slider-wrappper{
  padding:15px;
  }
  .content-wrapper{margin-top: 35px;}
}

@media screen and (max-width: 800px){
  .content-wrapper{margin-top: 35px;}
  .slider-wrappper{
  padding:15px;
  }
}
.owl-dots .owl-dot{
  width:50px;
}
</style>
</b:if>

10. Jika code Owl sudah terpasang, Agar Owl ini berjalan dengan lancar kita membutuhkan JS atau Javascript, Silakan copy JS dibawah letakan tepat diatas </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; atau juga bisa diatas code </body> maupun dibawah <body>
<script src='https://cdn.statically.io/gh/Aslori/file/master/OwlCarousel2.js' type='text/javascript'/>
11. Langkah Terakhir silakan SIMPAN Lalu pergi ke fitur TATA LETAK

12. Lalu Tambahkan Gadget > HTML/Javascript > PASTEKAN CODE PEMANGGIL DISINI
"Agar Feature Post Bekerja kita membutuhkan pemanggil Javascript."

13. Silakan copy code dibawah, Lalu pastekan tepat di kolom HTML/Javascript perhatikan Step No.12 
<script>
document.write("<script src=\"/feeds/posts/default/-/Blogger?max-results="+postnum5+"&orderby=published&alt=json-in-script&callback=postarea4\"><\/script>");
</script>
"PERHATIKAN, Code yang saya mark atau warnai, Itu adalah pemanggil Label, Silakan ubah sesuai Nama Label kalian"

14. Silakan SIMPAN Lalu lihat hasilnya.

PENUTUP

Demikian artikel mengenai Cara Membuat Feature Post Slider X2 Di Blogger, Jika kalian kurang mengerti atau gagal silakan komentar atau Contact untuk di bantu mengatasi permasalahan yang kalian hadapi, cukup sekian dan Terima Kasih.

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Memasang dan Menggunakan Google Font di Blog

Gambar
Halo sobat, Apakah saat ini kamu Bingung untuk memilih font yang bagus untuk blog kamu? Kenapa tidak mencoba menggunakan Google Font Saja? Berikut adalah tutorial singkat Cara Memasang Google Fonts di Blogger Menggunakan font yang baik dan relevan adalah salah satu cara untuk membuat tulisan kamu lebih nyaman untuk dibaca oleh pengunjung. Menggunakan font default seperti biasa yang kamu gunakan pada MS Word seperti Arial atau Times New Roman tentu saja tidak ada salahnya tetap di gunakan, Tapi perlu kamu ketahui masih banyak alternatif di luar sana yang bisa membuat tulisan pada blog akan terlihat jauh lebih baik dan lebih Profesional, Salah satunya adalah font Google Fonts . Apa itu Google Fonts? Google Fonts adalah layanan gratis dari Google yang di mana kamu dapat memilih berbagai jenis font dan dapat kamu gunakan secara cuma-cuma alias gratis. Pada Blogger sendiri sudah ada beberapa font yang dapat langsung kamu gunakan, namun pilihannya sangat terbata...
Baca selengkapnya

Cara Membuat Tanda Centang atau Ceklis di Judul Blog

Gambar
Hallo teman-teman, Kali ini saya akan membagikan Tutorial Cara Menambahkan Tanda Ceklis pada Judul Postingan Tanda Ceklis pada judul postingan ini pernah trending karena membuat judul artikel kita nampak unik. Bagaimana tertarik ingin membuat tanda tersebut?,Yuk disimak Cara Membuat Tanda Ceklis pada Judul Postingan di blog Kamu harus tahu maksud dari tanda ceklis (√) Adalah tanda universal untuk menggambarkan konsep setuju, iya, selesai, atau tanda terverifikasi. Tanda tersebut pun tidak hanya sebatas digunakan pada program office saja, Tetapi juga digunakan banyak aplikasi lain seperti WhatsApp, Facebook, Instagram, Dan YouTube. Lalu bagaimana Cara Membuat Tanda Centang atau Ceklis Pada Judul Postingan? Mari disimak cara berikut ini. Cara Membuat Tanda Ceklis Pada Judul Postingan (Manual) Untuk menambahkan tanda ceklis pada judul postingan, kita bisa mengcopy atau menggunakan perintah keyboard shortcut. Misalnya pada postingan ini, Saya memberikan tanda ceklis (√) Hanya dengan men...
Baca selengkapnya

Cara Membuat Tombol Widget Chat Whatsapp Langsung di Blogger

Gambar
Halo sobat pada kesempatan kali ini saya akan berbagi sebuah tutorial Cara Membuat Widget Chat Whatsapp di Blogger , Fitur ini digunakan pada Tema Fletro. Kalian bisa terapkan di berbagai tema lainnya, Tombol ini juga sangat berguna loh untuk pengunjung blog sobat, Dari segi ingin bertanya atau membeli atau menyewa jasa secara autodidak langsung otomatis ke pemilik blog tersebut. Widget ini sangat direkomendasikan untuk dipasang pada blog seputar menjual suatu produk atau jasa, Jadi lebih memudahkan para konsumen atau client untuk menghubungi sobat segera, Untuk bertanya-tanya seputar tentang stock produk atau jasa yang sobat publishkan. Jadi Sangat bermanfaat sekali jika sobat memiliki blog seputar Jasa atau Jual produk, Oke langsung aja menuju langkah-langkah Membuat beserta Pemasangannya. Cara Membuat Tombol Whatsapp di Blogger 1. Silakan buka dashboard Blogger terlebih dahulu. 2. Pilih TEMA > Edit HTML 3. Untuk mempermudah pencarian gunakan CTRL+F 4. Lalu cari kode ]]><...
Baca selengkapnya