Monday, August 27, 2012

Tutorial : Exchange Box Hover (like me)

Hye , dah lama tak buat tuto ni .. akhirnye kembali lagi ye hihi .. Ohhh terlalu banyak sangat reQ . Tapi atin pilih yang senang dulu ah .. ni ad orang reQ . Adoi lupa dah sapa orang tu hihi .. ramai pulak ke yang minat exchange link hover atin ni >< . Ramai juga tapi lupa siapa yang reQ .. Atin xde masa time tu hihi ok la .. jom tengok step bawah ni ..

Example :


Blogskin

 Dashboard > Template > Edit HTML
 Tekan Ctrl + f serentak ,  cari code ni  </style>
 Copy code kat bawah ni
a.linkies {
font-size: 11px;
font-family: Trebuchet Ms;
display:inline-block;
text-align:center;
width: 70px;
color: #fff;
background: #FFE4E4;
padding:3px;
margin:2px;
text-decoration: none;
-webkit-transition-duration:1200ms;
}
a.linkies:hover          {
display:inline-block;
text-align:center;
width: 70px;
color: #000;
background:#fff;
-webkit-transition-duration:1200ms;
}
a.linkie          {
font-size: 11px;
font-family: Trebuchet Ms;
display:inline-block;
text-align:center;
width: 70px;
color: #fff;
background: #ffd2db;
padding:3px;
margin:2px;
text-decoration: none;
-webkit-transition-duration:1200ms;
}
a.linkie:hover          {
display:inline-block;
text-align:center;
width: 70px;
color: #000;
background:#fff;
text-decoration: none;
-webkit-transition-duration:1200ms;
}

 Paste di atas code </style>

 Next, Copy code bawah ni pula 
<a class="linkies"  href="http://blogspot.com/">Next</a>
<a class="linkie"  href="http://blogspot.com/">Next</a>

 Paste dekat bahagian yang korang suka
 Preview & save



.............................................................................................................................................................


Design

 Dashboard > Design > add gadget > Html gadget
 Copy semua code bawah ni
<style type="text/css">
a.linkies {
font-size: 11px;
font-family: Trebuchet Ms;
display:inline-block;
text-align:center;
width: 70px;
color: #fff;
background: #FFE4E4;
padding:3px;
margin:2px;
text-decoration: none;
-webkit-transition-duration:1200ms;
}
a.linkies:hover          {
display:inline-block;
text-align:center;
width: 70px;
color: #000;
background:#fff;
-webkit-transition-duration:1200ms;
}
a.linkie          {
font-size: 11px;
font-family: Trebuchet Ms;
display:inline-block;
text-align:center;
width: 70px;
color: #fff;
background: #ffd2db;
padding:3px;
margin:2px;
text-decoration: none;
-webkit-transition-duration:1200ms;
}
a.linkie:hover          {
display:inline-block;
text-align:center;
width: 70px;
color: #000;
background:#fff;
text-decoration: none;
-webkit-transition-duration:1200ms;
}
</style>

<a class="linkies"  href="http://blogspot.com/">Next</a>
<a class="linkie"  href="http://blogspot.com/">Next</a>


 Paste dalam Html 
 Preview & save  

merah : code warna box
oren : link blog exchange link
biru : nama orang yg nk exchange link


Note : Kalau nak tambah exchange box , korang cuma copy code :
           <a class="linkies"  href="http://blogspot.com/">Next</a>
           <a class="linkie"  href="http://blogspot.com/">Next</a>







2 comments:

Mirza Afiqah said...

Tutorial berguna! Tq kakk

Junkyo Hikari said...

follow this tuto.. thanks okie ^_^