Accordin link tanpa script

link demo

Install code CSS

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

   ]]></b:skin>
   

   setelah ketemu..
4. Copy Code script CSS Accordin link tanpa script dibawah ini, pastekan tepat diatas code
   
   Code:

   ]]></b:skin>
   

   yang telah anda temukan tadi atau bila template blog anda memakai
   
   Code:

   </style>
   

   silahkan pastekan kode CSS Accordin link tanpa script tepat diatas
   
   Code:

   </style>
   

   template anda.

Spoiler

Code:

/*****************************************
Name : accordion link style hover
By : Rivai Silaban | Blog Design
Update :Jumat 02 January 2014
site : www.rivai.org
******************************************/
.accordion-link-atyle-hover {
width: 300px;
margin: 0 auto;
padding: 5px;
}.accordion-link-atyle-hover a{
list-style-type: decimal;
color: #990000;
text-decoration: none;
font-family: Verdana;
font-size: 12px;
margin: 0;transition: .5s ease-out 0s;
}.accordion-link-atyle-hover a:hover{
color: #0000FF;
margin: 0 0 0px 10px;
transition: .5s ease-out 0s;
}.accordion-link-atyle-hover ul li{
margin: 3px 0 3px -20px;
list-style-type: decimal;
}.accordion-link-atyle-hover li a{
list-style-type: decimal;
color: #990000;
text-decoration: none;
font-family: Verdana;
font-size: 12px;
margin: 0;transition: .5s ease-out 0s;
}.accordion-link-atyle-hover li a:hover{
color: #0000FF;
margin: 0 0 0px 10px;
transition: .5s ease-out 0s;}
/*** www.rivai.org CSS accordion link style hover and ***/

Setelah anda selesai memasang CSS Accordin link tanpa script ini seperti yang telah diutarakan diatas , saatnya anda memanggil fungsi codenya untuk di tampilkan di browser dengan code yang ada dibawah ini, untuk pemasangannya itu tergantung kebutuhan anda, anda bisa saja memasangnya di mana saja, selama masih di dalam ruang lingkup template anda.....
code pada spoiler dibawah ini merupakan code strustur penulisan tag htmlnya...

Spoiler

Code:

<div class="accordion-link-style-hover">
<ul>
<li><a href="http://www.rivai.org/" target="_blank" rel="nofollow" title="accordion-link-atyle-hover">accordion link atyle hover 1</a></li>
<li><a href="http://www.rivai.org/" target="_blank" rel="nofollow" title="accordion-link-atyle-hover">accordion link atyle hover 2</a></li>
<li><a href="http://www.rivai.org/" target="_blank" rel="nofollow" title="accordion-link-atyle-hover">accordion link atyle hover 3</a></li>
<li><a href="http://www.rivai.org/" target="_blank" rel="nofollow" title="accordion-link-atyle-hover">accordion link atyle hover 4</a></li>
<li><a href="http://www.rivai.org/" target="_blank" rel="nofollow" title="accordion-link-atyle-hover">accordion link atyle hover 5</a></li>
</ul>
</div>

Edit semua kodenya sesuai dengan kebutuhan anda, bila anda kurang memahami tentang code html sama seperti saya silahkan kunjungi link
sumbernya : http://www.rivai.org/2014/01/accordion-link-style-hover.html
semoga bermanfaat... salam blogger