accordion link style hover

Accordion link style hover - cara membuat accordion link style hover ini sangat mudah, accordion link style hover ini tidak memiliki script jadi lebih ringan. Konstruksi penulisan tag code accordion link style hover ini lebih simple dan mudah di pahami. Dengan efect transition accordion link style hover ini memiliki tampilan yang menarik, jadi sangat cocok untuk blogger mania yang menginginkan link pada halaman blognya memakai fungsi accordion. Untuk melihat tampilan accordion link style hover ini silahkan kunjungi link dimo dibawah ini, dekatkan cursor anda pada link yang berada di halaman demo. Bila anda tertarik untuk memasang tehnik accordion link style hover ini silahkan simak tutorial dibawah ini, langsung saja menuju TKP.

Code CSS here..

.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;} 

Code HTML here..

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

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit