jQuery Headline Fitur Post Slider di Blog

jQuery Headline Fitur Post Slider di Blog – merupakan sebuah slider yang terletak di atas elemen posting blog yang berguna untuk menampilkan gambar yang mewakili konten halaman posting. Headline Fitur Post Slider ini sebenarnya tidak harus di atas elemen posting, tetapi juga bisa dipasang pada sidebar blog dengan merubah lebar atau tinggi yang di inginkan sesuai dengan kebutuhan blog masing-masing. Hampir mirip dengan jQuery Widget Recent Post Automatic Slider, namun bedanya dengan jQuery Headline Fitur Post Slider di Blog ini adalah tidak menampilkan deskripsi konten posting dan hanya berupa gambar yang memanjang dan tidak memakan banyak ruang apabila dipasang kedalam blog. Ukurannya pun dapat dengan mudah disesuaikan, sehingga apabila ukuran yang sudah saya terapkan secara default pada kode css yang ada di kolom bawah dapat diganti dan diatur kembali sesuai dengan keinginan. Supaya dapat menerapkan kedalam blog, maka berikut adalah tutorial cara memasang jQuery Headline Fitur Post Slider di Blog untuk menampilkan headline diatas postingan secara otomatis:

Demo

1. Login ke akun blogger.
2. Klik Template > Edit HTML.
3. Cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.
4. Taruh kode berikut ini tepat diatas kode ]]></b:skin>

#slider{}#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{
width:550px;
height:111px;
overflow:hidden;
}
#prevBtn, #nextBtn{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:15px;
}
#nextBtn{
left:550px;
}
#prevBtn a, #nextBtn a{
display:block;
width:30px;
height:77px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5NFz9m4CFG4AhB5F5aoVh_1fVBHx8J1N-jmsQikdadW98_tOY8oa4sTXu6uCuY-TtO46L6RGWgtdRnyJMBj4DjbSxXMjA8pGhamdVpUgQitN6KPS7lwrfAJY1lMl-H8Hb8rkghkPuK70/s1600/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJRDDjNqJxmrL5AqZgNEOru-IMAcelTvvjJziAc9EA_gOVyRIso4xFC2xl1rDKjDYtvBQebGuXlUQPk3IhqFT8Auh4P0u1y4EsCQbbOCpTDENBB6bZW1LudW2xGqemq59FPeneDwHgqdE/s1600/btn_next.gif) no-repeat 0 0;
}

5. Selanjutnya cari kode </head> lalu taruh kode berikut ini tepat di atasnya.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='http://faceblog-evolutions.googlecode.com/files/easySlider1.7.js-blogger.js'/>
<script>
$(document).ready(function(){
$(&quot;#slider&quot;).easySlider({
auto: true,
continuous: true
});
});
</script>

6.  Simpan Template.

Sekarang tinggal untuk menampilkannya adalah dengan memasukkan kedalam HTML/Javascript . Caranya adalah dengan klik Tata Letak > Tambah Widget > HTML/Javascript kemudian copy kode berikut ini lalu paste kedalam kolom HTML/Javascript lalu Save.

<div id="slider"> <ul>

<li><a href="URL Halaman Posting 1"><img src="URL Gambar 1" width="550px" height="111px" /></a></li>

<li><a href="URL Halaman Posting 2"><img src="URL Gambar 2" width="550px" height="111px" /></a></li>

<li><a href="URL Halaman Posting 3"><img src="URL Gambar 3" width="550px" height="111px" /></a></li>

<li><a href="URL Halaman Posting 4"><img src="URL Gambar 4" width="550px" height="111px" /></a></li>

<li><a href="URL Halaman Posting 5"><img src="URL Gambar 5" width="550px" height="111px" /></a></li>

</ul>
</div>

Keterangan:
Silahkan ganti tulisan berwarna merah dengan URL Halaman posting / link alamat konten.
Silahkan ganti tulisan berwarna biru dengan URL Gambar yang akan ditampilkan pada slider.

Sebagai contoh yang ada dihalaman demo kodenya seperti pada dibawah ini:

<div id="slider"> <ul>

<li><a href="http://mas-andes.blogspot.com/2013/03/jquery-widget-recent-post-automatic.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOkRgN5qpVWg6FSbif76UM6aDnud_DU7S8KjUO4RO7qjl4uh9dL34njV9TH2f3x3DlcKSmMsuBws6YJpgyXsfIMqFvbY2shO0OCr_QmXlswX9IOLuASQogqJUfprrwhyaEQwYIWnfFS70/s320/slider.gif" width="550px" height="111px" /></a></li>

<li><a href="http://mas-andes.blogspot.com/2013/02/jquery-gambar-efek-lightbox-pada-blog.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiivcUwsXkhJxKb48V93IQJ3huiKMjkbq-k3Y3JG6KOiFhiM0ghSQsiB0xiSzHCCosQM9bz4AGL0KLh44xFWqCN1XUhfCfci7tsnodEuDTpzqm0VlF31_-UyrHqIVN5JbTs2iDxmPvZw68/s320/elisha_cuthbert_face_wallpaper-2013-05.jpg" width="550px" height="111px"/></a></li>

<li><a href="http://mas-andes.blogspot.com/2013/02/jquery-image-efek-kubus-berputar.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6YFRohgl3HyMx3UGzZXm8YN_q5bSM9FbzAiqlVIRFmXHORfFO-dcKrxjMhTdBc3hOkHjWtsLxVcUEFakIsx6kB_IskfR0RbjWgi9D3OhnlwKPonUahnaz8g_ayoWBfeEYEnc-cNC9dOo/s320/Untitled-1z.jpg" width="550px" height="111px" /></a></li>

<li><a href="http://mas-andes.blogspot.com/2012/12/memasang-jquery-efek-zoom-bisa-gambar.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6MZ_shWzHt1-s1-gD49aVPSSDQK-hBJ6-XndTzqkIarYHj9S0vzOBxYpLd3EPYwkDUYHzR1xAibJxx2zDtpoTYAn7vv2cMmczlGe_pRRgKSug8d3WMTfLS7RS7cPZBL0Mif602qY4fVs/s1600/large-zoom-example.jpg" width="550px" height="111px" /></a></li>

<li><a href="http://mas-andes.blogspot.com/2013/04/efek-gambar-3d-flip-dengan-css.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbOf7QQmvhRP4X-k3589_EXlHr4XSekelhRD4obWsth7pkJKghBSpCC0sAZ87JxAYE2xJGEu34V_8B7Elrp-kxPlqbzv_ZuIuDa8jkg0qREoCczxBsW0FPHvloz5tfRHpFleuIXm-CS1Q/s320/3d-flip.jpg" width="550px" height="111px" /></a></li>

</ul>
</div>