MEMASANG, menampilkan, atau membuat Featured Content Post Image Slider (Carousel) untuk blog tidak disarankan oleh sebagian pakar SEO dan Web Usability.
Pasalnya, selain membuat berat loading blog (karena ada javascript dan gambar), posts slider juga tidak user friendly.
Slider akan membuat "silau" mata pengunjung. Slider juga jarang diklik. Sejumlah studi dan survei tentang slider di web menunjukkan, slider yang diklik pengunjung hanya di bawah 1%. Itu pun yang diklik hanya gambar pertama.
Namun, toko online atau blog foto kayaknya cocok pake Featured Slider, asalkan diatur slide-nya jangan terlalu cepat dan lebih baik di-off-kan otomatis slidenya.
Cara Membuat Featured Post Slider Manual
Tutorial Featured Post Slider Manual sangat banyak bahkan kebanyakan. Salah satunya ada di Windows Reloded. Sebanyak 17+ lainnya ada di Blogspot Tutorials.Yang dimaksud "manual" adalah kita harus memasukkan link gambar, link posting, judul, dan deskirpnya satu per satu di widget Featured Content Slider ini. Ribet bener! Tapi gampang banget pasangnya. Silakan cek cara memasangnya ada di kedua link tadi.
Cara Memaang Featured Post Slider Otomatis
Yang dimaksud otomatis adalah kita gak perlu pasang satu per satu gambar, link, dan judul di widget ini. Gambar plus link dan judul akan muncul otomatis, bisa posting terbaru, bisa juga per label (kategori tertentu).Yang otomatis sudah di-share dari maskolis. Featured post di halaman depan atau ala New Johy Wuss juga sudah. Berikut ini ada dua lagi sebagai tambahan dan alternatif:
Featured Image Slider Otomatis #1
Yang ini dari Help Blogger. Tampilannya keren banget, beda dengan yang biasa. Silakan klik link tersebut untuk detailnya.
Featured Image Slider Otomatis #2
Yang ini dari DTE. Caranya gampang banget.
1. Layout → Add Widget → HTML/JavaScript
2. Copy & Paste kode berikut ini:
<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<style type="text/css">
.slider-rotator {
width:430px;
height:240px;
padding:0 0;
background-color:white;
font:italic normal 13px/1.4 Arial,Sans-serif;
color:white;
border:1px solid black;
}
.slider-rotator .slider-item {
background-color:white;
height:240px; /* Same with `.slider-rotator` height */
padding:0 0;
}
.slider-rotator h4 {margin-top:0;color:#ff6}
.slider-rotator p {margin:2px 0 0}
/* Slider details as caption */
.slider-rotator .detail-wrapper {
position:absolute;
top:auto;
right:0;
bottom:0;
left:0;
background-color:black;
background-color:rgba(0,0,0,.9);
padding:.5em 1em;
z-index:4;
}
.slider-rotator-nav {
text-align: center;
background: #777;
}
</style>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
url: "http://graficom-art.blogspot.com", // Your blog URL
thumbWidth: 430 // Thumbnail width in pixels (same with slideshow width)
});
</script>
<style type="text/css">
.slider-rotator {
width:430px;
height:240px;
padding:0 0;
background-color:white;
font:italic normal 13px/1.4 Arial,Sans-serif;
color:white;
border:1px solid black;
}
.slider-rotator .slider-item {
background-color:white;
height:240px; /* Same with `.slider-rotator` height */
padding:0 0;
}
.slider-rotator h4 {margin-top:0;color:#ff6}
.slider-rotator p {margin:2px 0 0}
/* Slider details as caption */
.slider-rotator .detail-wrapper {
position:absolute;
top:auto;
right:0;
bottom:0;
left:0;
background-color:black;
background-color:rgba(0,0,0,.9);
padding:.5em 1em;
z-index:4;
}
.slider-rotator-nav {
text-align: center;
background: #777;
}
</style>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
url: "http://graficom-art.blogspot.com", // Your blog URL
thumbWidth: 430 // Thumbnail width in pixels (same with slideshow width)
});
</script>
3. Ganti alamat blog warna merah dengan alamat blog Anda.
4. Save!
Itu dia ragam cara membuat Featured Post Image Slider untuk Blog, baik versi manual maupun otomatis.
Sumber : (http://contohblognih.blogspot.com).*
0 komentar:
Posting Komentar