Cara Membuat Featured Image Slider di Halaman Depan Blogger.
SLIDER tidak dianjurkan untuk ditampilkan di blog atau website. Namun, nyatanya banyak sekali tips membuat image slider, dan banyak pula blogger yang memasangnya.
Slider Image yang bergerak itu memang membuat tampilan blog jadi indah, namun memusingkan mata pengunjung. Lagi pula, menurut survei, hanya kurang dari 1% pengunjung yang klik slider image.
“Homepage Sliders: Bad For SEO, Bad For Usability,” kata SEL setelah mengadakan survei soal slider di sejumlah blog/website. Slider Halaman Depan buruk buat SEO, jelek pula kegunaannya.
Slider mungkin menjadikan blog jadi atraktif (menarik). Beberapa desainer blog masih menganggapnya “tampak keren” (looks cool). Namun, masih kata SEL, penggunaan slider atau carousel bukan saja tidak bagus buat SEO, tapi juga “hampir tak ada pengunjung blog yang mengkliknya” (di bawah 1%).
Kekurangan lainnya, slider image memberatkan loading blog.
Slider image biasanya dipasang di blog atau web instansi/perusahaan dan toko online untuk menonjolkan posting unggulan.
Cara Membuat Featured Image Slider di Halaman Depan Blogger
Berikut ini salah satu tips menampilkan image slider di blogger. Sebelumnya, perhatikan kualitas foto yang akan ditampilkan. Anda bisa dapatkan gambar bagus dan berkualitas di Custom Photo Tiles.
1. Klik Layout > Add a Gadget
2. Pilih HTML/Javascript
3. Judul Kosongkan
4. Copy & Paste kode di bawah ini:
<style type=”text/css”>
.slider-box { background: none repeat scroll 0 0 #FAFAFA; border-radius: 5px 5px 5px 5px; box-shadow: 0 0 3px #333333; margin: 0 auto; width: 675px; overflow: hidden; }
#slider-wrapper { margin: 0 auto; padding: 10px; }
#jslider-container { border: 2px solid #FFFFFF; max-width: 550px; position: relative; text-align: left; z-index: 90; }
</style>
<link href=”http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css” rel=”stylesheet” type=”text/css”>
<script type=”text/javascript” src=”https://code.jquery.com/jquery-1.12.0.min.js”></script>
<div class=”slider-box”>
<div id=”slider-wrapper”>
<div id=”jslider-container”>
<div class=”jslider_images”>
<ul>
<li> <a href=”#”> <img src=”http://1.bp.blogspot.com/-8PTU1PEcmLI/Uc2n85UpHUI/AAAAAAAAB4k/j6NY9ZqIyRY/s550/sample1.jpg” title=”Sunset” /> </a>A boat with beautiful sunset.</li>
<li> <a href=”#”> <img src=”http://2.bp.blogspot.com/–GmwV2nAsUQ/Uc2oEd7wNBI/AAAAAAAAB40/ETmQqqlBgvk/s550/sample2.jpg” title=”Rainbow” /> </a> </li>
<li> <a href=”#”> <img src=”http://1.bp.blogspot.com/-6g4P9qoMRmI/Uc2oOy08cOI/AAAAAAAAB48/XZ09I9967yU/s550/sample3.jpg” title=”True Nature” /> </a>Tree in field with blue sky.</li>
<li> <a href=”#”> <img src=”http://4.bp.blogspot.com/-gHD47bEFHb8/Uc2oBkNydjI/AAAAAAAAB4s/pT6e5eMXCCc/s550/sample4.jpg” title=”Sunrise” /> </a>Amaizing sunrise moment</li>
<li> <a href=”#”> <img src=”http://4.bp.blogspot.com/-_Fl22hwvf4g/Uc2oRuUPfOI/AAAAAAAAB5M/-paJ0C3ecTw/s550/sample5.jpg” title=”CAR in HDR Nature” /> </a> </li>
<li> <a href=”#”> <img src=”http://3.bp.blogspot.com/-cOF07FfXZ0I/Uc2oQ5cFN2I/AAAAAAAAB5E/RTzFpK-6oMM/s550/sample6.jpg” title=”Sunshine” /> </a> </li>
</ul>
</div>
<div class=”jslider_thumbs”><div>
<a href=”#” title=”Sunset”><img src=”http://1.bp.blogspot.com/-EV9QJIgCZVs/Uc2sZ302fAI/AAAAAAAAB5c/aw2ncIBTWPI/s85/sample1.jpg” /></a>
<a href=”#” title=”Rainbow”><img src=”http://4.bp.blogspot.com/-ScQ2WF7eUb4/Uc2saKrS2_I/AAAAAAAAB5g/QacTeCtKU-c/s85/sample2.jpg” /></a>
<a href=”#” title=”True Nature”><img src=”http://1.bp.blogspot.com/-zQzvkfDsyzg/Uc2sbpceU3I/AAAAAAAAB5s/PN7wNSrydbM/s85/sample3.jpg” /></a>
<a href=”#” title=”Sunrise”><img src=”http://3.bp.blogspot.com/-R4gOTYCU9dQ/Uc2sbxFqTqI/AAAAAAAAB50/ESHZD7VlnXY/s85/sample4.jpg” /></a>
<a href=”#” title=”CAR in HDR Nature”><img src=”http://1.bp.blogspot.com/-b5dbnH0-dMg/Uc2scRDvV4I/AAAAAAAAB54/4P9RYqtJdDM/s85/sample5.jpg” /></a>
<a href=”#” title=”Sunshine”><img src=”http://3.bp.blogspot.com/-L8rLW2XCv7I/Uc2sdkpcx8I/AAAAAAAAB6E/uRfT9gYb5rM/s85/sample6.jpg” /></a>
</div> </div> </div> </div> </div>
<script type=”text/javascript” src=”http://dimpost.googlecode.com/files/wow-slider.js”></script>
NOTE:
Ganti url image dengan link image Anda sendiri!
5. Save!
Demikian Cara Membuat Featured Image Slider di Halaman Depan Blogger.*