Cara Pasang Carousel Sesuai Label

Bismillah. Setelah hampir 2 Jam saya mempelajari Cara Pasang Carousel sesuai label dari Maskolis akhirnya berhasil juga. Atas keberhasilan saya tersebut ingin rasanya saya berbagi dengan teman-teman untuk membuat carousel tersebut. 
Cara Pasang Carousel Sesuai Label

Pemasangan carousel sesuai label ini mempunyai beberapa manfaat diantaranya :
1. Membuat blog kita tampak hidup (agak mirip situs detik.com heheee)
2. Mempermudah navigasi laman

Bagaimanakah cara pasang carousel sesuai label?

  • Login ke blogger dengan akun Anda
  • Masuk ke template Edit HTML
  • Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template
  • letakkan kode berikut ini diatas kode ]]></b:skin>
#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(http://2.bp.blogspot.com/-

i9rfuXWNIjo/T5LAemTP3XI/AAAAAAAAArY/r7FcfxzgZpk/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(http://3.bp.blogspot.com/-

APGScJbAlLM/T5LDZ9LDgkI/AAAAAAAAAr4/vGy7EquPGME/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(http://3.bp.blogspot.com/-

4wNqeM6eRvY/T5LGCrdA9iI/AAAAAAAAAsE/4rjwULz47WU/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(http://1.bp.blogspot.com/-

pSHFy8ff1R0/T5LDZHkHIzI/AAAAAAAAArw/PCfZ762nK3E/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(http://2.bp.blogspot.com/-vSaPjyDhEMI/T5LGB-g1_lI/AAAAAAAAAsA/wyUPBLWY15E/s1600/next.png)

center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(http://3.bp.blogspot.com/-NsKF7TyEX7I/T418sIGTo7I/AAAAAAAAAnc/OdQmhV73piY/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}

Keterangan:
cari kode #carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}, ganti warna biru diatas sesuai lebar template anda. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head>

//imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf(“

Speak Your Mind

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.