Di antara kita pasti ada yang bertnya tanya tentang gambar yang bergerak atau bergeser dengan sendri nua di website atau diblog kita nah ini yang ingin saya bahas dalam ke sempatan kali ini.
Gambar adalah sallahsatu daya tarik untuk blog atau website anda jika tidak ada gambar dalam sebuah halaman home fage atau di postingan saya rasa tidak terlihat bagus maka dari itu para penulis blog rata rata membuat gamanar di postingan atau di home fage mereka.
Namun alangkah baik jika gambar tersebut bisa bergeser dengan sendiri nya biasa para penulis blog menginkan gambar slide ini letak nya di halaman fage dan di isi dengan otomatis gambatlr postinganblog kita.
Atau bisa juga di buat dengan label dari blog kota tergatung kita saja untuk menyetel nya mau yang mana.
Jadi intinya setiap postongan yang di buat akan muncul di slide yang kita buat maksud nya gambar postingan itu akan muncul dengan sendiri nya di halaman fage.
Nah kita akan bahas tutorial tentang membuat gambar slide tersebut tahap demi tahap yuk langsung saja kita coba.
Sebenarnya fitur ini tersedia dalam versi otomatis (berfungsi seperti recent posts) dan manual untuk memunculkan daftar artikel yang ditampilkan. Namun saya sendiri memilih menggunakan versi manual sehingga kita bisa memilih daftar artikel yang ingin ditampilkan sesuka hati kita. Dengan begitu, kita dapat menampilkan artikel-artikel tertentu seperti postingan unggulan atau pun membuatnya seperti random artikel agar muncul pada fitur slide show tersebut.
Jika anda ingin mengganti daftar postingan sewaktu-waktu, caranya juga cukup mudah yakni dengan mengeditnya pada menu tata letak tanpa masuk edit html. Bagaimana cara membuatnya? Berikut tutorialnya.
Jika anda ingin mengganti daftar postingan sewaktu-waktu, caranya juga cukup mudah yakni dengan mengeditnya pada menu tata letak tanpa masuk edit html. Bagaimana cara membuatnya? Berikut tutorialnya.
1. Buka akun blogger anda
2. Pilih menu thema dan klik edit html
3. Cari kode ]]></b:skin> atau </style> dan letakkan kode berikut ini di atasnya
.easyslider-wrapper { width: auto; float: left; position: relative; padding-right: 2%; padding-top: 10px; } .easyslider { overflow: hidden; position: relative; width: 100%; height: 350px; background: #eee; } .image_reel { position: absolute; top: 0; left: 0; } .image_reel img { float: left; width: 20%; height: 350px; } .paging { background: none; position: absolute; bottom: 15px; right: 20px; padding:4px 0 2px; z-index: 100; display: none; } .paging a { margin: 3px; background: #fff; width: 10px; height:10px; 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: 20px; left: 20px; z-index: 101; background: #000A3F; background: rgba(2, 0, 51, 0.6); padding: 10px 15px; } .easytitledes a { color: #15E3FF; font: 14px sans-serif; text-transform: uppercase; font-weight: bold; } .easytitledes a:hover { color:#29FF00 } .easytitledes p { color: #fff; font: 12px Arial; }
4. Selanjutnya cari kode </head> dan letakkan kode Jquery berikut ini di atasnya
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
5. Berikutnya letakkan juga kode javascript berikut ini masih di atas kode </head>
<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' : imageRee|width}); 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(); }, 8000); }; 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. Silahkan simpan template anda kembali.
7. Langkah berikutnya yaitu tinggal memasang kode untuk memunculkan fitur tersebut.
Sebenarnya bisa saja memasang kode tersebut langsung ke dalam menu edit html yakni setelah kode <div class="main-wrapper"> atau <div id="main-wrapper">, namun saya sendiri memilih memasangnya lewat tambahkan gadget pada menu layout (tata letak) di dashboar blogger.
Dengan cara ini, kita jadi lebih mudah dalam mengedit tampilan postingan yang hendak dimunculkan di slide show tanpa harus masuk edit html. Agar lebih maksimal, slider ini bisa anda letakkan di atas Blog Post. Untuk itu, buka menu layout dan lihat di bagian atas elemen Blog Post.
Dengan cara ini, kita jadi lebih mudah dalam mengedit tampilan postingan yang hendak dimunculkan di slide show tanpa harus masuk edit html. Agar lebih maksimal, slider ini bisa anda letakkan di atas Blog Post. Untuk itu, buka menu layout dan lihat di bagian atas elemen Blog Post.
Jika tersedia fitur tambahkan widget, silahkan tambahkan di sana. Namun jika tidak tersedia, anda bisa menambahkannya lebih dulu dengan kembali masuk edit html, cari kode untuk Blog Post, dan ubah di atasnya pada isi kode showaddelement menjadi yes. Lihat contoh berikut ini:
 |
| Pastikan menjadi "yes" |
Dengan diubah menjadi yes, maka di atas Blog Post pada layout akan menjadi muncul fitur tambahkan widget. Silahkan pilih html/javascript dan masukkan kode berikut ini untuk memasang slidernya.
<div class='easyslider'> <div class='image_reel'> <a href="#"><img src="...image1.jpg" /></a> <a href="#"><img src="...image2.jpg" /></a> <a href="#"><img src="...image3.jpg" /></a> <a href="#"><img src="...image4.jpg" /></a> <a href="#"><img src="...image5.jpg" /></a> </div> <div class='descriptionslider'> <div class="easytitledes"><a href='...post-link1.html'>Post-Title 1</a><p>Description / Caption 1</p></div> <div class="easytitledes"><a href='...post-link2.html'>Post-Title 2</a><p>Description / Caption 2</p></div> <div class="easytitledes"><a href='...post-link3.html'>Post-Title 3</a><p>Description / Caption 3</p></div> <div class="easytitledes"><a href='...post-link4.html'>Post-Title 4</a><p>Description / Caption 4</p></div> <div class="easytitledes"><a href='...post-link5.html'>Post-Title 5</a><p>Description / Caption 5</p></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'/> </div> </div>
Keterangan:
*Tulisan berwarna merah untuk link postingan, silahkan isikan link postingan-postingan pilihan anda.
*Tulisan berwarna hijau untuk link gambar, silahkan sesuaikan dengan postingan-postingan pilihan anda tadi.
*Tulisan berwarna biru untuk Judul Artikel. Silahkan sesuaikan.
*Tulisan berwarna orange untuk deskripsi artikel. Silahkan sesuaikan.
8. Jika sudah ditambahkan semuanya, silahkan simpan dan anda bisa lihat hasilnya.
Anda bisa merubah settingan-setingan di atas sewaktu-waktu secara berkala hanya dengan masuk pada menu tataletak tanpa harus edit html.
Mungkin sampai sini dulu tutorial yang saya tulis ini semoga tutorial cara buat gambar alide di blog atau website anda berjalan dengan baik. Terima kasih......
