Cara Memasang Featured Slider Images Simple dan Elegan di Blogspot
Ada banyak pertanyaan yang sering saya temukan dipesan Facebook tentang bagaimana sih mas bikin slider images yang keren di blogspot?
Jawabannya ada 2, pertama slider images ini bisa kita pasang dan diatur secara otomatis untuk tampilan post yang akan tampil.
Baca juga: Cara Memasang Slider Images Otomatis di Blogspot
Dan yang kedua, featured images post yang kita atur secara manual untuk bagian tampilan postnya, yang artinya hanya post atau gambar yang sudah kita tentukan untuk tampil dihalaman depan saja.
Lebih dari itu, mari langsung kita menuju langkahnya untuk tutorial pemasangan.
Tips Memasang Featured Slider Images di Blogger
Seperti langkah sebelumnya, kalian harus menyalin kode CSS yang ada dikotak bawah ini.
/* SLIDER */
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 1100px; - ATUR LEBAR SESUAI TEMPLATE ANDA
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
Letakan kode CSS diatas, tepat dibagian kode
</style>
atau ]]></b:skin>
Lalu salin lagi kode HTML dibawah ini.
<b:if cond='data:blog.homepageUrl == data:blog.url'> <!-- Slider Images --> <div class='slideshow-container'> <div class='mySlides fade'> <div class='numbertext'/> <img src='https://ecs7.tokopedia.net/img/cache/1242/attachment/2019/5/23/28201197/28201197_06e91fcb-46d1-4f75-9a48-b1ea253d2694.png' style='width:100%;border-radius:20px'/> <div class='text'>Contoh Tawaran</div> </div> <div class='mySlides fade'> <div class='numbertext'/> <img src='https://ecs7.tokopedia.net/img/cache/1242/attachment/2019/5/27/26950746/26950746_829906fe-1129-45a8-800d-3364f7dea735.png' style='width:100%;border-radius:20px'/> <div class='text'>Contoh Iklan</div> </div> <div class='mySlides fade'> <div class='numbertext'/> <img src='https://ecs7.tokopedia.net/img/cache/1242/attachment/2019/5/27/28201197/28201197_1c1d30dc-c26b-4fc5-8bcb-59654acb91ef.jpg' style='width:100%;border-radius:20px'/> <div class='text'>Contoh Produk</div> </div> <a class='prev' onclick='plusSlides(-1)'>❮</a> <a class='next' onclick='plusSlides(1)'>❯</a> </div> <div style='text-align:center'> <span class='dot' onclick='currentSlide(1)'/> <span class='dot' onclick='currentSlide(2)'/> <span class='dot' onclick='currentSlide(3)'/> </div> <!-- End --> </b:if>Penjelasan:
- Tanda warna merah = adalah link gambar yang akan ditampilkan, kamu bisa gunakan gambar sesuai dengan keinginan kamu.
- Tanda warna biru = isi tulisan yang akan kamu tampilkan, bisa kamu gunakan tulisan sebuah penawaran dengan teknik copywriting.
Letakan kode HTML diatas, antara kode template <div id='wrapper'> / <div class='wrapper'>. Pokoknya cari saja kode yang mirip-mirip seperti itu didalam file template blogger kamu.
![]() |
images by boshjn.id |
Masih dalam mode edit HTML, salin lagi kode JavaScript dibawah ini untuk menyempurnakan tampilannya.
<script> //<![CDATA[ // Slider var slideIndex = 1; showSlides(slideIndex); // Next/previous controls function plusSlides(n) { showSlides(slideIndex += n); } // Thumbnail image controls function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; } //]]> </script>
Lalu letakan kode JavaScript tersebut tepat dibagian atas kode </body> atau bisa juga </head>
Baca juga: Cara Membuat Featured Slider Image Blogspot Mirip Tema Newspaper WordPress
Untuk melihat hasilnya, coba klik " Pritinjau " dibagian edit HTML. Apakah sudah benar atau belum.
Contoh Halaman
Apabila tidak ada yang eror, lanjutkan dengan mengklik " SIMPAN / SAVE "
Jika ada pertanyaan lainnya tentang terjadinya eror atau tampilannya tidak bekerja pada template kamu, jangan ragu untuk menulis komentarnya di blog ini.
![]() |
images by boshjn.id |
Baca juga: Cara Membuat Featured Slider Image Blogspot Mirip Tema Newspaper WordPress
Untuk melihat hasilnya, coba klik " Pritinjau " dibagian edit HTML. Apakah sudah benar atau belum.
Apabila tidak ada yang eror, lanjutkan dengan mengklik " SIMPAN / SAVE "
Penutup
Sampai pada langkah ini, saya rasa kamu sudah berhasil memasang featured image slider yang simple dan elegan diblogspot.Jika ada pertanyaan lainnya tentang terjadinya eror atau tampilannya tidak bekerja pada template kamu, jangan ragu untuk menulis komentarnya di blog ini.
Posting Komentar untuk "Cara Memasang Featured Slider Images Simple dan Elegan di Blogspot"
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