Label blogspot accordion style

Kali ini saya akan mencoba share buat agan agan disini tentang pemasangan widget label blogspot dengan style accordion tanpa memakai sistem script melainkan sistem transisi pada CSS3 dimana sistem margin diberikan sentuhan transition per Secondnya dengan jarak yang berbeda dari link devault dengan hovernya. Untuk melihat tampilannya silahkan lihat pada template template yang saya publish sebelumnya silahkan lihat demo dibawah ini.


Link Demo : Demo Lihat bagian widget labelnya..
Link Sumber : Sumber Artikel


Install code css label blogspot accordion
Tutorial kali ini memanfaatkan widget label devault platform Blogspot jadi buat para agan agan yang tidak memakai sistem widget label hal ini tidak berguna , nah buat agan agan yang masih newbie dan masih belajar seperti saya dan yang memang belum memahami fungsi dari label blogspot dan cara memasangnya silahkan kunjungi " Pemahaman dan fungsi label blogspot ", sebelum ketahap selanjutnya

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code
   
   Code:

   ]]></b:skin>
   

4. Copy Code script CSS dibawah ini, pastekan sebelum code
   
   Code:

   ]]></b:skin>
   

   tadi yang agan cari sebelumnya atau bila template blog anda memakai
   
   Code:

   <style>
   

   silahkan pastekan kode CSSnya sebelum code
   
   Code:

   </style>
   

   template anda. Edit code tersebut dan save template anda.

Spoiler

Code:

/**************************
Name : css label blogspot accordion
Update : Rabu 26 February 2014
Design : Rivai Silaban
Site : www.rivai.org
Publish : www.ideblogspot.com
**************************/
#Label1 ul li {margin: 0px;padding: 2px;list-style: none;}
#Label1 ul li a {list-style-type: none;background: url('http://4.bp.blogspot.com/-oXR9nhkPW6M/Uv89Y5m8R0I/AAAAAAAACRI/-MSlp6tYRSo/s1600/arrow-grey.gif ') no-repeat scroll 0px 4px transparent;margin: 0px;padding: 0px 0px 0px 15px;color: rgb(97, 60, 22);}
#Label1 ul li a:hover {margin: 0px 0 0 8px;transition: .5s ease-out 0s;color:#990000;}
.label-count {float: right;padding: 0px 7px;background: #666;color: #fff;border-radius: 5px;}
/* css label blogspot accordion end code */

Silahkan anda edit codenya sesuai dengan kebutuhan anda, tutorial ini hanya mengandalkan sistem fungsi CSS, jadi kita hanya memasang CSSnya saja, bila ada kekurangan pada thread ini mohon dimaklumi, bila ingin bertanya silahkan share melalui fasilitas dibawah ini, untuk informasi lainnya yang anda butuhkan silahkan kunjungi sumber lamannya, terimakasih semoga bermanfaat.. salam blogger...

 

Keren...

ijin praktek langsung...

 

aduh pengen lihat contohnya tapi kok gak bisa dibuka ya