Featured Post Image Slider untuk Blog - Manual dan Otomatis

Cara Membuat atau Memasang Featured Posts Image (Content Slider Carousel) untuk di Halaman Depan Blog Blogspot.

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.

CB sudah share soal featured content slider ini: Featured Content Slider di Homepage Blog Tidak Bagus buat SEO. 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.

Btw... posting ini "sekadar" menyimpan dokumentasi. Soalnya, suka adaaaaa aja klien Layanan Premium CB yang "keukeuh" ingin memasangnya, meski sudah dikasih tau.

1. Cara Membuat Featured Post Slider Manual

TutorialFeatured 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.

Yang ini dariSpice Up Your Blog. Tampilannya lebar, cocok untuk "etalse" produk/jasa Anda. (Lihat Demo).

Cara Pasangnya:
1. Klik Template >Customize > Advanced > Add CSS
2. Copas kode berikut ini

.fp-slider {
background: none repeat scroll 0 0 #FFFFFF;
height: 329px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 850px;
}
.fp-slides-container {
}
.fp-slides, .fp-thumbnail, .fp-prev-next, .fp-nav {
width: 850px; /*Set The Width Of Slider Here*/
}
.fp-slides, .fp-thumbnail {
height: 280px; /*Set The Height Of Images Here*/
overflow: hidden;
padding-top: 0;
position: relative;
}
.fp-title {
color: #FFFFFF;
font: bold 18px Arial,Helvetica,Sans-serif;
margin: 0;
padding: 0 0 2px;
text-shadow: 0 1px 0 #000000;
}
.fp-title a, .fp-title a:hover {
color: #FFFFFF;
text-decoration: none;
}
.fp-content {
background: none repeat scroll 0 0 #111111;
bottom: 0;
left: 0;
opacity: 0.7;
overflow: hidden;
padding: 10px 15px 5px;
position: absolute;
right: 0;
}
.fp-content p {
color: #FFFFFF;
line-height: 18px;
margin: 0;
padding: 0;
text-shadow: 0 1px 0 #000000;
}
.fp-more, .fp-more:hover {
color: #FFFFFF;
font-weight: bold;
}
.fp-nav {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibi7686oF3X2o1e8nC7xGn5encRuzkBCHwS4iftUozs4NjBmfL3lumZ-f5PyH5KYztZg2J_AAJJQvB46k4NIWSruSvZjakt9uGYVjXAhWx8fH5JYodoQfec5nh1eIarwTsg_k4rMrsYQAc/s1600/h2.png") repeat-x scroll 0 0 transparent;
height: 12px;
padding: 10px 0;
text-align: center;
}
.fp-pager a {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY78uXluXMaSnrcFwb_zx5Z5DuIFaBGd_2bRPSNh7mw8GXCi_arMEtybyIOtRCtWVJSPD3TAMuxiHPKwhpzcvTdET04wf2yLParx4GO2QBJjT27tM-mzt2var0Lf8dljnjbIYjZGzx7aXp/s1600/featured-pager.png");
background-position: 0 0;
cursor: pointer;
display: inline-block;
float: none;
height: 12px;
line-height: 1;
margin: 0 4px 0 0;
opacity: 0.7;
overflow: hidden;
padding: 0;
text-indent: -999px;
width: 12px;
}
.fp-pager a:hover, .fp-pager a.activeSlide {
background-position: 0 -112px;
opacity: 1;
text-decoration: none;
}
.fp-prev-next-wrap {
position: relative;
z-index: 200;
}
.fp-prev-next {
bottom: 130px;
height: 37px;
left: 0;
position: absolute;
right: 0;
}
.fp-prev {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIec-Nw-tQKX-dYCw3xvRucP5v3ajDvldhjfqQ9yYWG1FDp1ZSaidPdpU522vYcHUZPsSmHSlHyFmsnDIH5-7QbFENjqpG30e2XZeybj9aMi-z-plwe6k8sMnngAmdIa3v-eyAfybmex0g/s1600/featured-prev.png") no-repeat scroll left top transparent;
float: left;
height: 37px;
margin-left: 14px;
margin-top: -180px;
opacity: 0.6;
width: 37px;
}
.fp-prev:hover {
opacity: 0.8;
}
.fp-next {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLErUJGq1-C9mP27VvchX2HqfN-MXWs-9-m9V8iLpgVBuGhd9bHrKzJUb8UnVOrv2Up1L8JbS4jsuH7ZMRxeGZTbKTBSYIrdnh-bao_yqvyGiBZ5riMd_Qjf889I_94eatMdQD1mykLdnG/s1600/featured-next.png") no-repeat scroll right top transparent;
float: right;
height: 37px;
margin-right: 14px;
margin-top: -180px;
opacity: 0.6;
width: 36px;
}
.fp-next:hover {
opacity: 0.8;
}

3. Klik "Apply to Blog"

4. Klik "Back to Blogger"

5. Klik " Template" > "Edit HTML

6. Temukan (Ctrl+F) kode
7. Copas kode berikut inidi ataskode

3. Save Template!
4. Layout > Add a Gadget > pilih HTML/Javascript
5. Copas kode berikut ini:

6. Ganti alamat blognya dan save! Beres........!

Featured Image SliderOtomatis#2

Yang ini dari DTE. Demonya bisa dilihat di halaman depan Cara CB.
Cara memasangnya gampang banget:

1. Layout ? Add Widget ? HTML/JavaScript
2. Copy & Paste kode berikut ini:

3. Ganti alamat blog warna merah dengan alamat blog Anda.
4. Save!

Memasang Automatic Featured Posts Slider Widget di Sidebar Blog

Ada juga kode untuk memasang featured image slider di sideba blog. Cara pasangnya juga mudah banget:

1. Layout > Add a Gadget > pilh HTML/Javascript
2. Judul isi dengan, misalnya, Featured Posts atau "Post Gallery", bebas lah!
3. Copas kode berikut ini:

>>> Gantihttp://contohblognih.blogspot.comdengan alamat blog Anda!

4. Save!

Itu dia ragam cara membuat Featured Post Image Slider untuk Blog, baik versi manual maupun otomatis. Sekali lagi, NOT RECOMMENDED untuk blog pribadi atau yang fokus ke loading blog yang cepat. (http://contohblognih.blogspot.com).*

reff : http://www.contohblog.com/2015/06/featured-post-image-slider-untuk-blog.html

Related video : Featured Post Image Slider untuk Blog - Manual dan Otomatis