Membuat Slider Carousel Otomatis Berdasarkan Label - Pada postingan sebelum nya ane udah share sebuah artikel Rivew Kontes seo dengan tema "Cyberbola.com Say No To Racism Piala Eropa 2012". yang bertujuan untuk memeriahkan Piala Eropa 2012 yang saat sekrang ini sedang berlngsung. Nah pada kesempatan kali ini walaupun ane udah ngantuk se ngantuk ngantuk nya. wkwkw. Ane coba share Nich Tutorial Blog Yaitu Cara Membuat Slider Carousel Otomatis Berdasarkan Label. Dalam rangka untuk mempercantik blog sobat Jm bsa ambil dan pelajari Tutorial Memasang Slider Carousel Otomatis Berdasarkan Label.Berikut langkah-langkahnya:
- Login ke Blog sobat
- Edit HTML, kemudian centang expand widget templates
- Jangan Lupa di backup dulu template sobat, biar aman
- Cari Kode ]]>, Letakkan kode dibawah ini diatas kode ]]> :
#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block} #carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzW6A_n3RhVd4QFE5B7CgzsG0nTfH-1rfp5D_9MKO7RR_uPQJNODDFwsMvB9Zxfo9DdLU6-0voMPUMR94yrroK9ddupO-yrNAZ6ze2jgvLcae1Nmihl2EXwavjBsI8pT2ZmWapiABcrC4/s1600/scroller-bg.png) repeat center} #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZlNEddHbhSIbvVSbXcsmG6k_A2Ukhbvwgs2fFv7zIjbFA9AzEkgYnJOHujpK7b_U71GJgfNWPQrGcYwuQAzmWT4TtXQ_xKCn1nE6GmCAWnnHj5Y1l9u93rn_RMymAVu_zGc6tYuvlCV4/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc} #carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgksu1MUDXl0-0f-s51ZPucL7T4njKGweaTwDb9gF3ynHdFghXgypek8MxOHWsdCtK_AHL0eI43hkgkjvq1bk_ZD4M5M4vx81F4t-JGLiW5yluSlmf0813WQtoodBWP2FcOTbuZkgif4wg/s1600/prev.png) center} #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf83RMcKT_pJqC2Y92Ee2tb5vqOtv-9moSe1sBU7URLjB8xITA1_vM2mzM-BvWvViw9IQ6CZh8dw7pPRCqgXS1pLC_qlTkDQZ8IERFbGx1Thy0lyNdwLd38DFUPwn8SmM5VfKc6eYfBOQ/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc} #carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwrsSBZ5HwunnsyrY9yPM5zyXIwfRNzNLp7qoNI7HnJvBdT484W6lG4_JnD59Msw6PbB4tv6Z40EBizY5ZIwlkf55kBP2pdVOG2PUQMKkAYkFHWOI1yu83YW_Bj9w6S3pWwGEyexZ5b3M/s1600/next.png) center} #carousel ul{width:100000px;position:relative;margin-top:10px} #carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkEjD5R0FnBE-FOEiqpsh1CL667m_wLbwqlXQP4mwszNA3_FHnlX4zkKvItMwef8W6FjQjT2pFHDovyock9gPn-bSvJLlHIwUDUiGIufOQjA463yOWaPwKcsrzXnvi84JcD7WiJBL3bLo/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;} #carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;} #carousel ul li a.slider_title{color:#222;display:block;margin-top:5px} #carousel ul li a.slider_title:hover{color:#cd1713} #carousel a img{display:block;background:#fff;margin-top:0}
Ket : Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template sobat.
- Untuk langkah selanjutnya cari Kode setelah itu tempel kan kode di bawah ini tepat tepat dia atas nya
- Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode , kemudian letakkan kode berikut ini diatasnya :