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

0 comments:

Post a Comment