Beberapa waktu yang lalu, seseorang mengirimi pesan email kepada saya dan bertanya mengenai cara membuat widget slider seperti yang ada di blog saya ini. Saya sudah membalas email tersebut tapi mungkin kotak masuk (inbox) email orang tersebut penuh sehingga gagal terkirim (recipient inbox full). Jadi, postingan kali ini saya buat untuk pengirim email tersebut dan juga untuk anda yang mungkin membutuhkannya.
Mengenai widget Featured Post Slider yang ada di blog ini, sebetulnya dulu saya sudah pernah membagikan tutorialnya. (Baca: Cara Membuat Slide Show Keren Manual di Blog). Hanya saja, tampilannya sedikit saya ubah jadi lebih minimalis tapi tetap terlihat keren. Selain tampilan cantik, kelebihan widget ini yaitu kita bisa memilih sendiri artikel-artikel yang hendak ditampilkan semau kita dengan mengaturnya secara manual.
Jika anda ingin yang tampilannya sudah dimodifikasi seperti yang saya pasang di blog ini, silahkan ikuti langkah-langkah pemasangannya di bawah ini.
Memasang Widget Featured Post Slider Keren di Blog
1. Buka akun blogger anda.
2. Pilih menu layout (tataletak) dan klik tambahkan gadget. Biasanya tempat strategis di atas Blog Post.
3. Pilih html/javascript, kosongkan judul, kemudian copy pastekan kode di bawah ini.
<style>.easyslider-wrapper{width:auto; float:left;position:relative; padding-right:2%; padding-top: 10px} .easyslider{overflow: hidden; position:relative; width:auto; height:350px; background:#eee;border-radius:5px;margin-bottom:10px;} .image_reel{position:absolute; top: 0; left: 0;} .image_reel img {float:left;width:20%; height: 350px;} .paging{background:none; position:absolute; bottom:0px; right:10px; padding:4px 0 2px; z-index: 100; display:none;} .paging a{margin:3px; background: #fff; width:10px; height:10px; border-radius:100%; display: inline-block; border:none; outline:none;} .paging a.active{ background:#15E3FF; border:1px solid #15E3FF;} .paging a:hover{ } .easytitledes{width:70%; display:none; position:absolute; bottom:0px;left:0px; z-index: 101; padding:10px 15px;} .easytitledes a{color:#15E3FF; font:16px 'Open Sans'; text-transform:capitalize; font-weight:bold;text-shadow: 1px 1px 0 #000;} .easytitledes a:hover{color:#29FF00}@media screen and (max-width:800px){.easyslider {margin-top:15px}}@media screen and (max-width:600px){.easyslider {width:100%;margin-bottom:20px}}@media screen and (max-width:500px){.easyslider {width:auto;height:300px;margin:4px;margin-bottom:10px}.image_reel img {height:300px}}</style><div class='easyslider'> <div class='image_reel'> <a href='https://LinkPostingan1.html'><img src='https://1.bp.blogspot.com/Linkgambarpostingan1.jpg'/></a> <a href='https://LinkPostingan2.html'><img src='https://1.bp.blogspot.com/Linkgambarpostingan2.jpg'/></a> <a href='https://LinkPostingan3.html'><img src='https://1.bp.blogspot.com/Linkgambarpostingan3.jpg'/></a> <a href='https://LinkPostingan4.html'><img src='https://1.bp.blogspot.com/Linkgambarpostingan4.jpg'/></a> <a href='https://LinkPostingan5.html'><img src='https://1.bp.blogspot.com/Linkgambarpostingan5.jpg'/></a> </div> <div class='descriptionslider'> <div class='easytitledes'><a href='https://LinkPostingan1.html'>Judul Postingan 1</a></div> <div class='easytitledes'><a href='https://LinkPostingan2.html'>Judul Postingan 2</a></div> <div class='easytitledes'><a href='https://LinkPostingan3.html'>Judul Postingan 3</a></div> <div class='easytitledes'><a href='https://LinkPostingan4.html'>Judul Postingan 4</a></div> <div class='easytitledes'><a href='https://LinkPostingan5.html'>Judul Postingan 5</a></div> </div> <div class='paging'> <a class='' href='#' rel='1'/> <a class='' href='#' rel='2'/> <a class='' href='#' rel='3'/> <a class='' href='#' rel='4'/> <a class='' href='#' rel='5'/> </a></a></a></a></a></div> </div>
Keterangan:
- Warna merah ganti dengan link postingan.
- Warna hijau ganti dengan link gambar postingan.
- Warna biru ganti dengan Judul Postingan.
- Sesuaikan urutannya.
4. Klik Simpan.
5. Buka menu thema dan klik edit html.
Agar widget slider (gambar geser) nya berfungsi, copy javascript di bawah ini dan letakkan di atas kode </body>
<script type='text/javascript'> /*<![CDATA[*/$(document).ready(function() { $(".paging").show(); $(".paging a:first").addClass("active"); var imageWidth = $(".easyslider").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; $(".image_reel").css({'width' : imageReelWidth}); rotate = function(){ var triggerID = $active.attr("rel") - 1; var image_reelPosition = triggerID * imageWidth; $(".paging a").removeClass('active'); $active.addClass('active'); $(".easytitledes").stop(true,true).slideUp('slow'); $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); $(".image_reel").animate({left: -image_reelPosition}, 400 ); }; rotateSwitch = function(){ $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); play = setInterval(function(){ $active = $('.paging a.active').next(); if ( $active.length === 0) { $active = $('.paging a:first'); } rotate(); }, 5000); }; rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() { clearInterval(play); }, function() { rotateSwitch(); }); $(".paging a").click(function() { $active = $(this); clearInterval(play); rotate(); rotateSwitch(); return false; }); }); /*]]>*/</script>
6. Simpan template dan lihat hasilnya.
Kalau masih belum berfungsi, berarti belum terpasang kode Jquery di template blog anda. Silahkan masuk edit html lagi, copy kode di bawah ini dan letakkan di atas kode </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Terakhir, agar widget hanya tampil pada tampilan beranda (home), tambahkan tag kondisional pada html widget yang anda pasang ini. Sisipkan menjadi seperti berikut ini:
<b:widget cond='data:view.isHomepage' id='HTML3' locked='false' title='' type='HTML'>...
Keterangan: kode berwarna merah adalah tag kondisional yang ditambahkan.
Simpan kembali template dan lihat hasilnya. Demikianlah tutorial tentang cara memasang widget Featured Post Slider Keren di Blog. Semoga bermanfaat.