Tampilkan postingan dengan label Membuat slider image pada blog. Tampilkan semua postingan
Tampilkan postingan dengan label Membuat slider image pada blog. Tampilkan semua postingan

Jumat, 22 Maret 2013

Membuat Slider Post di bawah Header

Slider post berperan menampilkan postingan yang diterbitkan dalam bentuk thumbnail dan link yang aktif. Letaknya di bawah header disertai dengan fasilitas slider yang bisa digeser guna meminimaliskan tampilan blog. Sebelumnya lihat dulu DEMO.  Berikut langkah-langkahnya:

1) Login blogger
2) Pilih Template > Edit Html
3) Centang Expand template widget
4) Copy kode di bawah dan pastekan di atas tag ]]></b:skin>
#carousel{width:960px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#000;margin-bottom:8px}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM9t7xpbwJJlcFhaIf1y6eRhjybR1hTeAkvSJTRcIYj5zfSThzz1LDyG5YrsUYtNWNY-BU5SDNKKvXNuD10MJ0ewvlqN9i-R7zNKMbIBd8t1FTFp8YnGrcm1cuHU-jcThsG0YqX04vP8tq/s1600/previous.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBc5w58H0J1dWb1cFKaZ3J8cnokWYNJa8mN-BWCcMF625EVqdfvR6jc9FnKwor7wnMgLIO5Rl3TqtP66-mmbVCm3cKIRvVDfGj_mLeNhhaa2OU66ozZjVmc75lmX8w0DUEZVQIOXkoxxcB/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#04B404;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 5px 2px;padding:6px}
#carousel ul li a.slider_title{color:#fff;display:block;margin-top:0;padding-top:0}
Catatan: 
Warna merah bisa kamu ganti ukuran widget image slider
Warna Orange bisa kamu ganti background image slider
Warna hijau bisa kamu ganti warna tanggal image slider
Warna kuning bisa kamu ganti background widget image slider