Cara Menciptakan Featured Image Slider Di Halaman Depan Blogger
SLIDER tidak dianjurkan untuk ditampilkan di blog atau website. Namun, nyatanya berbagai tips menciptakan image slider, dan banyak pula blogger yang memasangnya.
Slider Image yang bergerak itu memang menciptakan tampilan blog jadi indah, namun memusingkan mata pengunjung. Lagi pula, berdasarkan survei, hanya kurang dari 1% pengunjung yang klik slider image.
"Homepage Sliders: Bad For SEO, Bad For Usability," kata SEL sesudah mengadakan survei soal slider di sejumlah blog/website. Slider Halaman Depan buruk buat SEO, buruk pula kegunaannya.
Slider mungkin menyebabkan blog jadi atraktif (menarik). Beberapa desainer blog masih menganggapnya "tampak keren" (looks cool). Namun, masih kata SEL, penggunaan slider atau carousel bukan saja tidak elok 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:1. Klik Layout > Add a Gadget
2. Pilih HTML/Javascript
3. Judul Kosongkan
4. Copy & Paste isyarat 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0zu03XnEpSDpAwPcRmer5lF7GaAkZyUzGWI4q5kTUlsEW7bEIs-mPJLt5JMFJ1ZY5-Tj3HvJZeY2eVK12FHVrqprN21flCeQPCs3ymFznicIGbToX6fzYxpK8vaNgJ2RvrT56oz4A0i8a/s550/sample1.jpg" title="Cara Membuat Featured Image Slider di Halaman Depan Blogger" /> </a>A boat with beautiful sunset.</li>
<li> <a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTKfeNWYDuZgtmEJrHq_tQay1lHWBoOhtsq7z9UIMJhwHMfgFTDRmbT1Z4bNvMJ8JS4KwBbOEI0AZgN9qGby5GfbsgO4RU0tHlv9Ssq554ViLkQTqDuYyO9Ue40aGOc5Nsjd5F5UW-pVCp/s550/sample2.jpg" title="Cara Membuat Featured Image Slider di Halaman Depan Blogger" /> </a> </li>
<li> <a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMZKvuGc3IiraKUiMuii8zW51Dpvfs6KcjU3RPUAPOviAytE8IGOLO_zZ4qwODlUXaeQD5XSsR3FqqTD3Ru03WuNhwwc9cQR3A4PU_v_hJn1qmbT0035hfl3ixfQTckfII-fqSHQUjzgaZ/s550/sample3.jpg" title="Cara Membuat Featured Image Slider di Halaman Depan Blogger" /> </a>Tree in field with blue sky.</li>
<li> <a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiStbGYMtc83Wd1aRCqVUqmlFnzse2IXZ4WbufHK8aP-XaaZzsSBVaSY7-5OffjeXzfKIWmDMoq0cnF4Tp4i_0qyqsto_To5FLJ2salRjDBHUBtQCAhVRxey6ctEIt3pi9WpWjP2a9vlua8/s550/sample4.jpg" title="Cara Membuat Featured Image Slider di Halaman Depan Blogger" /> </a>Amaizing sunrise moment</li>
<li> <a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBoHiYuOLD5NSQr9RsgEkxNRkgjBrAWyya_mAFuuFvmBLNDbgFueyadiYU0zH-aAUs_VJXMV4V5_tlDl_xbtXnLx1IC28R10QoLB41sqkc47QsAlU6WT6PVdyv77IPY9RzMxwdBieVK96y/s550/sample5.jpg" title="Cara Membuat Featured Image Slider di Halaman Depan Blogger" /> </a> </li>
<li> <a href="#"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz15S7Q2_Yy1j9XyKkTLz4TNJB1NSe_-mHbz-M-eUcEQUtqg2qkuN-nwpNdkYjn9ncmAhu7PYtgQz1ApN7-Z3E9jKI4fCv-BEJlWhJn1xY45I5SnrqNv8hQRyUy8NFvVxhUcl3lZA6l5OM/s550/sample6.jpg" title="Cara Membuat Featured Image Slider di Halaman Depan Blogger" /> </a> </li>
</ul>
</div>
<div class="jslider_thumbs"><div>
<a href="#" title="Cara Membuat Featured Image Slider di Halaman Depan Blogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYEbEEBrHBHMql0Czpd8Pz_p1MhyphenhypheniqhmOg4_kpoIRGvaCZqmpEBYXrD1sifex1IXn7sHnKQ2dXqnB9LHgo5zWp52NtNIzo4DZvebnnucCnpf1K2ajB-o_yJNRyHVR7InVKNLox1wvtNHZY/s85/sample1.jpg" /></a>
<a href="#" title="Cara Membuat Featured Image Slider di Halaman Depan Blogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDeDCsB0fwmkrYaTkGrqWbUEmRM6sy7Lg_nKSyG6r_OzbDgVqkOIPVmSgpsM1PzoMnbjK9nVivhgghVlUqw31JldZ0XFLV4WxjjMKCDv5QXJ35vF_l6_nq6EbatXPZuNSDQeYzautZYc9m/s85/sample2.jpg" /></a>
<a href="#" title="Cara Membuat Featured Image Slider di Halaman Depan Blogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9lII35U45S-rgf4RUuwr8-nAT80Q_q_KRHSzAlvIfnBBFkPpVDqPiptcFCAR_8S3PEhJzhF4hWMz-wHvb9pWuP80WNzmYA9TQ2_txD0MUTfVvb6UtgeouEZt5SErzCuhpC1lUsiahSzvX/s85/sample3.jpg" /></a>
<a href="#" title="Cara Membuat Featured Image Slider di Halaman Depan Blogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgklKWy7mveR2kPkqSEefjH3rYV5VfSfTMAslBZnqlAGHdTj6tdvqWauPZ1U-XtmmZLZmloqD1qD_ztFsGSrUzALHZHDVMsfzIo4HAD8zv0phLOdOsuvjfeWpGZskJJ5w5XfuqtA_HtrlVV/s85/sample4.jpg" /></a>
<a href="#" title="Cara Membuat Featured Image Slider di Halaman Depan Blogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7lk3Vo9PTYn-SW8pWP5NSZ49stpTv-XaJ0GSIpBUxVHFiwqc1uIPU-1x3c5b-7WWqprbhZ91tMwENLTnp-Sm7w35pSyzhwoQlJvb1hKuYk0YxYXxomnoEPYAylqpk3K8bTvPVg9OeqSlX/s85/sample5.jpg" /></a>
<a href="#" title="Cara Membuat Featured Image Slider di Halaman Depan Blogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgti8bafrzBW1wvkkBSt_JNTP-f0wdWEnSv3aE1D1XPvU_dd3aE8YWZVDQRbjVOcY4BDCtA3IwXIfzyGBYzUFcG0U2c9iOfuv1pzEHptKSPL6a1UwfjUpKyLX0qZOpvBEWIAl_faLcrpmsu/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.*
Sumber Sumber https://www.baticmedia.com/