Membuat Slider Gambar Manual

Membuat Slider Gambar Manual

Thursday, February 2, 2012

Lanjutan berikut nya dalam memanipulasi blog...sekarang kita akan membuat gambar slide show yang berjalan secara otomatis atau saya menyebut nya sebagai slider show oke langsung aja ya seperti biasa anda masuk ke akun blogger anda dan cari kolom edit html berikut langkah nya
1.rancangan
2.edit html
3.centang expanda menu
4.tekan ctrl+f
5.cari kode ini ]]> lalu masukan ke dalam kolom ctrl+f yang anda tekan
6.masukan kode berikut persis di atas kode di atas

/* CSS easySlider */ #containerSlider { width:500px; height:200px; margin:0 0px; padding:0; position:relative; }#prevBtn,#nextBtn { display:block; margin:0; overflow:hidden; padding:0; text-indent:-8000px; }#slider ul,#slider li { list-style:none; margin:0; padding:0; text-indent:0; } slider, slider li { overflow:hidden; width:500px; height:300px; margin:0 auto; } #slider { margin-left:0; background:#ccc; border:1px solid #999; } prevBtn, nextBtn { display:block; height:34px; left:-20px; position:absolute; top:38px; width:31px; } nextBtn { left:200px; } prevBtn a, #nextBtn a { background:transparent url() repeat scroll 0 0; display:block; height:34px; width:31px; } nextBtn a { background:url() repeat scroll 0 0; } #slider img { background:; padding:0px; width:500px; height:200px; }

oke bila selesai lebih baik anda tekan dulu prantinjau untuk memastikan skrip anda
tidak bermasalah pada saat ini skrip belum bisa menampilkan efek apa-apa
yang penting tidak ada pesan error saat anda menekan pratinjau...bila sudah aman
atau tidak ada error langsung aja tekan save template dan masuk ketahap selanjut nya

7.masuk ke rancangan ----> pilih elemen halaman --->tekan tambah widget
pilih widget java/skrip dan masukan skrip di bawah ini

<div id="contentSlider">
<div id="slider">
<ul>
<li><a href="http://www.blogger.com/rearrange?blogID=6083011025789782750&amp;action=editWidget&amp;sectionId=main&amp;widgetType=null&amp;widgetId=HTML1#" target="_blank&quot;"><img alt="1" src="http://t0.gstatic.com/images?q=tbn:ANd9GcQAGL4rIELoKvy7xXPsBTTovSQIZXVQCAcbr4DQofb7rY0Tfdxv" /></a></li>
<li><a href="http://www.blogger.com/rearrange?blogID=6083011025789782750&amp;action=editWidget&amp;sectionId=main&amp;widgetType=null&amp;widgetId=HTML1#" target="_blank&quot;"><img alt="2" src="http://t0.gstatic.com/images?q=tbn:ANd9GcQT_KiL5uL2rSUHUbD0EJTvOkh_TqVrAGakL4fGjcVdXnQiBFnX" /></a></li>
<li><a href="http://www.blogger.com/rearrange?blogID=6083011025789782750&amp;action=editWidget&amp;sectionId=main&amp;widgetType=null&amp;widgetId=HTML1#" target="_blank&quot;"><img alt="1" src="http://4.bp.blogspot.com/-FBNPeFGKtu8/Tf2NmSdyxtI/AAAAAAAAAAw/GO8x35dVAsM/s1600/taman-langit-peterpan2.jpg" /></a></li>
<li><a href="http://www.blogger.com/rearrange?blogID=6083011025789782750&amp;action=editWidget&amp;sectionId=main&amp;widgetType=null&amp;widgetId=HTML1#" target="_blank&quot;"><img alt="1" src="http://t1.gstatic.com/images?q=tbn:ANd9GcS-wIK3otjq37yZhI9ju3COEmwRxjiNKpnL8nMLefv57Rrhhv-S" /></a></li>
<li><a href="http://www.blogger.com/rearrange?blogID=6083011025789782750&amp;action=editWidget&amp;sectionId=main&amp;widgetType=null&amp;widgetId=HTML1#" target="_blank&quot;"><img alt="1" src="http://2.bp.blogspot.com/_WQ9DNLgyGBo/TDeonzRlyzI/AAAAAAAAAm4/X6bJIK3tsnA/s1600/134387913_81386991b5.jpg" /></a></li>
<li><a href="http://www.blogger.com/rearrange?blogID=6083011025789782750&amp;action=editWidget&amp;sectionId=main&amp;widgetType=null&amp;widgetId=HTML1#" target="_blank&quot;"><img alt="1" src="http://2.bp.blogspot.com/_WQ9DNLgyGBo/TDeonzRlyzI/AAAAAAAAAm4/X6bJIK3tsnA/s1600/134387913_81386991b5.jpg" /></a></li>
</ul>
</div>
</div>


ingat untuk membaca lagi skrip di atas ganti url yang ada di tag src="...." dengan gambar yang anda inginkan dan di beberapa skrip agar skrip nya mengarah ke web/blog anda
dan terakhir simpan widget dan lihat hasil nya untuk merubah posisi nya anda bisa pindah kan kolom widget tadi di tempat yang anda suka usaha kan agar posisi nya tepat dan enak di lihat
sekian trik dari saya untuk saya...hahahaha...dan lanjut ke trik selanjut nya byee