Cara Membuat Featured Post Content Slider Image ~ Kumpulan Tips & Triks Seputar Internet

Cara Membuat Featured Post Content Slider Image di Halaman Depan Blog yang SEO & User Friendly.

SEBELUMNYA CB pernah share tentangFeatured Content Slider di Homepage Blog Tidak Bagus buat SEO. Di sana disebutkan, hasilsurvei soal gambar slider / carousel image di sejumlah blog/website di halaman depan (homepage) ternyata buruk buat SEO dan jelek pula kegunaannya (tidak user friendly), hanya bikin silau mata! Yang ngeklik juga cuma 1%, kecil bingit!

Namun, jika masih merasa butuh menampilkan Featured Post Content Slider Image/Gambar di Home, maka pastikan dua hal ini:

Slider tidak otomatis bergerak (automatic slides)! Matikan fungsi otomatis gerakannya!
Pastikan judul postingnya menggunakan Heading Tag H2 atau H3. Jika menggunakan H1, silakan ganti.

Kedua hal itulah sumber masalah Featured Post Content Slider Image yang menjadikannya tidak seo dan user friendly.

FUNGSI FEATURED POST/IMAGE SLIDER

Featured Post Content Slider Image/Gambar sering digunakan oleh situs web/blog toko online, blog jasa/produk, dan situs berita. Toko Online atau web bisnis biasnaya menampilkan produk/jasa. Situs berita menampilkan Headline News.

Posting berikut ini sekadar "menyimpan" tips desain blog tentang cara Membuat Featured Post Content Slider Image yang di-share Maskolisbaik Versi 1 maupun Versi 2. Jika ingin menampilkan satu posting saja di Featured Post di halaman depantanpa slider, silakan cekCara Membuat Featured Post Tanpa Slider ala New Johny Wuss.

CB share di sini dua jenis Featured Post Content Slider Image sebagaimana tampak dalam ilustrasi gambarnya.

Cara Membuat Featured Post Content Slider Image

VERSI 1 - Thumbnail di Bawah Gambar Utama

Cara Membuatnya:

1. Template > Edit HTML

2. Copas kode berikut ini di atas kode ]]>

#featuredContent{float:left;width:407px;margin-right:10px;display:inline}
#featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIIX0zRZopPOPW8lcVbmaBz8sxTJKZQ_HOq3FlVGcAAaBg4y_2v9h1uPy5mP_ci-swmKdqqreDVIRtjK0sJgYbxkjF1b5FGorlsgJmvVZ_uY5QhUiDEUFgjM3HgRIP61ush8ZmYQSUx3ja/s1600/transparant.png)}
#featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
#featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
#paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
#paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
#paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
#paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
#paginate-featured-slider a img{border-top:4px solid #f0f0f0}
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}

.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
word-wrap: break-word; overflow: hidden;}
.slide {color: #666666;line-height: 1.3em;}
.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.slide li {margin:0;padding-top:0;
padding-right:0;padding-bottom:.25em;
padding-left:0px;text-indent:0px;line-height:1.3em;}

.slide .widget {margin:0px 0px 6px 0px;}

Angka berwarna merah adalah ukuran Panjang dan Lebar Slider. Silahkan sesuaikan dengan "kondisi" template Anda. Demikian pula angka berwarna merah di kode no. 3 di bawah ini.

3. Copas kode berikut inidi atas kode

style="font-family: inherit;"> var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];

for(var u2=0;u2
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '

75" height="50" class="alignnone" src="'+img[i]+'"/>

';
document.write(trtd);

j++;
}

}

//]]>

4. Copas kode berikut ini di bawah kode

atau yang sejenisnya.

5. Save Template!

6. Klik "Layout" dan akan tampak Widget Baru di atas "Blog Posts" seperti tampak dalam gambar di bawah ini. Jika tidak ada, cobra "Refresh Page" (Tekan F5).

6. Klik "Edit" dan Copas kode berikut ini ke dalam "Content".

Catatan:
1. Ganti Label dengan nama label posting yang akan ditampilkan diFeatured Post Content Slider Image.
2. Jika ingin menampilkan Posting Terbaru otomatis muncul di sana, maka HAPUS kode /-/Label sehingga menjadi begini: ....feeds/posts/default?max-results ...

7. Save!!!
Featured Post Content Slider Image mestinya sudah muncul.

Cara Membuat Featured Post Content Slider Image

VERSI 2 - Thumbnail Image di Samping Gambar Utama

CARA MEMBUAT
Tahapan Membuatnya kurang lebih sama dengan cara di atas, cuma beda kode dikit.

1.Template > Edit HTML
2. Copas kode berikut ini di atas kode ]]>

#featured{width:640px;height:250px;position:relative;margin:0;padding:0}
#featured ul.ui-tabs-nav{position:absolute;top:0;right:0;list-style:none;width:240px;height:250px;margin:0;padding:0}
#featured ul.ui-tabs-nav li{position:relative;line-height:1.3em;padding:0}
#featured ul.ui-tabs-nav li span{font:bold 12px Arial;line-height:1.3em;color:#000;margin:0;padding:0}
#featured .ui-tabs-panel{width:400px;height:250px;background:#ddd;position:relative;overflow:hidden}
#featured .ui-tabs-panel img{width:400px;height:250px}
#featured .ui-tabs-hide{display:none}
#featured li.ui-tabs-nav-item a{display:block;width:215px;height:57px;color:#000;overflow:hidden;background:#ddd;border-left:10px solid #999;line-height:1.4em;outline:none;margin:0 0 2px;padding:2px 10px 2px 5px}
#featured li.ui-tabs-nav-item a:hover{border-left:10px solid #555;background:#ccc}
#featured li.ui-tabs-selected{position:absolute}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{background:#aaa;display:block;border-left:10px solid #444}
#featured ul.ui-tabs-nav li img{width:75px;height:48px;float:left;background:#333;border:none;margin:4px 7px 4px 0;padding:0}
#featured .ui-tabs-panel .info{position:absolute;top:179px;left:0;height:71px;width:400px;background:#000;opacity:0.80;filter:alpha(opacity=80)}
#featured .info a{text-decoration:none;color:#eee}
#featured .info a:hover{color:#FE9A2E;text-decoration:underline}
#featured .info h2{font-size:15px;font-family:Arial, serif;color:#fff;overflow:hidden;margin:0;padding:5px}
#featured .info p{font-family:Arial;font-size:11px;line-height:15px;color:#f0f0f0;margin:0 5px}

.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
word-wrap: break-word; overflow: hidden;}
.slide {color: #666666;line-height: 1.3em;}
.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.slide li {margin:0;padding-top:0;
padding-right:0;padding-bottom:.25em;
padding-left:0px;text-indent:0px;line-height:1.3em;}
.slide .widget {margin:0px 0px 6px 0px;}

3. Copas kode berikut di atas kode

4. Cari kode

atau yang sejenusnya. Copad kode berikut ini di bawahnya.

5. Save Template!

6. Klik "Layout". Akan Widget Baru di atas element "Blog Posts" seperti gambar di bawah ini. Jika belum muncul, Refresh dengan menekan tombol F5.

7. Saatnya memasang posting yang akan ditampilkan. Klik "Edit" dan Copas kode berikut ini di kolom "Content". Kolom judul biarkan kosong!

Catatan:
1. GantiLabeldengan nama label posting yang akan ditampilkan diFeatured Post Content Slider Image.
2. Jika ingin menampilkan Posting Terbaru otomatis muncul di sana, maka HAPUS kode/-/Labelsehingga menjadi begini: ....feeds/posts/default?max-results...

Demikian Cara Membuat Featured Post Content Slider Image / Slide Gambar Posting di halaman depan blog. Good Luck & Happy Blogging!

reff : http://www.contohblog.com/2015/01/membuat-featured-post-content-slider-image-gambar-blog.html