Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

jQuery Headline Fitur Post Slider di Blog

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:

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(http://1.bp.blogspot.com/-fH1rGWYTkbU/Tf6MbKOD9JI/AAAAAAAAEbc/Wz-cdPzr2Ik/s1600/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a{
background:url(http://1.bp.blogspot.com/-5zuaXipw548/Tf6MahaUqII/AAAAAAAAEbY/rToQ90dXLU8/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="http://4.bp.blogspot.com/-KKbxCb4jQOo/UVco62bZKzI/AAAAAAAAD8o/M9Lfe3kuURI/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="http://4.bp.blogspot.com/-YykU3H4DtXg/USckPtBBkII/AAAAAAAAC4Q/P6vexx_xMzM/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="http://1.bp.blogspot.com/-mVZ400235IQ/URZcwm6rlcI/AAAAAAAACnU/RxZOaW6qiwY/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="http://4.bp.blogspot.com/-6-Dg93s2vpc/TeOAlSCdhkI/AAAAAAAAEL0/mznIqK7yRag/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="http://3.bp.blogspot.com/-2-yGGI2Nrmw/UWCAzSc12vI/AAAAAAAAEBI/RKEUU3bZfzM/s320/3d-flip.jpg" width="550px" height="111px" /></a></li>

</ul>
</div>

Berlangganan artikel via email

21 Response to "jQuery Headline Fitur Post Slider di Blog"

wah keren kali sobat, tehnik mempercantik blog, tapi bisa nggak plus gambar cewek yang didemo di tampilin di blog aku? hehehehe

Balas

slider ini cocok utk blog berisi gambar2 yah? makin bagus kalau pakai slider.
di tempatku error slidernya...hehehhe. susah banget balikin ke normal lag

Balas
avatar
Anonymous

mantapp ini , mau mencoba nya gan , tapi apa sesuai dengan template blog nya gan ? mngkin ada beberapa template yg gak cocok mas .

Balas
avatar
Anonymous

mngkin gak cocok sama template kali mba . .

Balas

mantep sob, makasih tipsnya

Balas

cocok ndak ya mas...buat template saya :)

Balas

dulu pernah masang slider malah jadi eror ga nampil, izin copas kodenya ya mas, mw nyoba pasang slider lagi, terima kasih tutorialnya mas

Balas

Cocok mas budi apalagi layarnya lebar, pasti keren

Balas

Mantap sekali hasilnya sobat, tutorial yang sangat penting dan menyenangkan untuk seni blogwalking ini perlu disave dulu sobat.
hanya yg payah kalau buka EDIT HTML terus ini yg susah sobat..hehe, bisa^ penuh copasan edit html saya nih..

Tapi sangat bagus dan perlu untuk dicoba.
saya save dulu sobat

terima kasih banyak sudah memberi tutorial yg banyak manfaatnya

Balas

Wah keren juga ya tampilannya, menarik untuk disimak, makasih gan udah share... sukses selalu :)

Balas

kalau yang beginian saya tidak terlalu paham kawan..jadi izinkan saya untuk duduk manis saja ya, mencoba menyimak dan memahami :-)

Balas

Wea...alagh....bang hari...ngerendah nih :)

Balas

Sip...mas nunggu waktu luang nanti sy coba...di tambah sekrng tampilan edit html blogger udah make tampilan baru...ya mas :)

Balas

Dari dulu saya ingin mempelajari tentang post slider ini. Ternyata caranya sangat gampang.

Balas

wah makin keren blog jadinya , kalo make widget ini ya sob. Cuma agak berat load gak sob?

Balas

keren sob tutornya ...
sangat mantap kalau masangnya sambil ngopi hehe

Balas

memang paling enak kalau ngopi ya mas Ruly..hehe

Balas

wih... mantapp... tuh... gan.... hehehe

Balas

tambah mantep saja nih, tutornya

Balas
avatar
Anonymous

artikel yang bermanfaat gan,,good job

Balas

bibit salak

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "jQuery Headline Fitur Post Slider di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode