2:54 AM
gitogbu
Thursday, May 23, 2013
cara buat slide
Login ke blogger
Pilih Template » Edit HTML dan jangan sampai terlewatkan untuk mencentang "expand template widget"
Untuk mengantisipasi adanya kesalahan dalam pemasangan image slider ini, saya sarankan untuk membackup template terlebih dahulu
Copy kode di bawah ini dan pastekan tepat di atas tag ]]>
#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/AVvXsEh48twYr88C25JZugLI6DeBLNIRKqQ7rUpsuXUxip1L5DIBQ0mZXvmdZ1c-II17OVF-iDyEVg5wjhKi1NYLCuVse4M0Dr-AfFzC9fmYSltUSKaXGu0UqSRn2ztUno5LFUqrqLHEvm4gvg-C/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/AVvXsEjvTYIIQG-XOq9vQqqykegx4U5CkIZJA1arx41VxqUMEWm72KPK5GdF6lSrqcr2uSJusXk6g_hj3EIt9TmF4tuiEqUi1y3NUxlmjh19SD3eJnr_mz0heWvqtbMhgR83CU0P_Fx0N7bGYpwV/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}
Keterangan :
Warna Merah Pertama : merupakan tinggi dan panjang widget image slider
Warna Merah Kedua : background img slider
Warna Merah Ketiga : warna tanggal img slider
Warna Merah Keempat : merupakan background dari image dan judul slider
Langkah selanjutnya, copy kode di bawah ini dan pastekan tepat di atas tag
Keterangan :
Script yang saya tandai dengan warna merah di atas adalah script JQuery version 1.7.2. Jika pada dalam template sobat sudah terdapat JQuery versi yang lebih di atasnya, maka JQuery 1.7.2 tidak usah sobat masukkan ke dalam template dan warna biru merupakan tinggi dan lebar foto yang akan ditampilkan
Selanjutnya, copy code berikut ini dan pastekan tepat di atas tag
Terakhir, simpan template sobat dan lihat hasilnya.
