Tutorial : Colorful Website Link

Tumblr_md110izptv1qf4k86o1_500_large

Assalamualaikum and annyeonghaseyo. Hari tu ada yang request tutor ni. Tapi time tu tieqa agak busy nak update blog. So, memandangkan hari ni ada masa utk update, tieqa buat tutor ni. Tutor ni utk template classic sahaja. Kalau template biasa pon boleh jugak.

| EXAMPLE |

1. Dashboard > Template
2. Press Ctrl + f serentak dan cari code </style>
3. Copy code dekat bawah ni


a.linkies {
font-size: 11px;
font-family: Trebuchet Ms;
display:inline-block;
text-align:center;
width: 70px;  
color: #fff; 
background:#D2E3FF;
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.linkies1 {
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.linkies1:hover{
display:inline-block;
text-align:center;
width: 70px;
color: #000; 
background:#fff;
-webkit-transition-duration:1200ms;
}

a.linkies2{
font-size: 11px;
font-family: Trebuchet Ms;
display:inline-block;
text-align:center;
width: 70px;  
color: #fff; 
background:#F1D2FF;
padding:3px; 
margin:2px;
text-decoration: none; 
-webkit-transition-duration:1200ms;
}

a.linkies2:hover{
display:inline-block;
text-align:center;
width: 70px;
color: #000; 
background:#fff;
-webkit-transition-duration:1200ms;
}

a.linkies3 {
font-size: 11px;
font-family: Trebuchet Ms;
display:inline-block;
text-align:center;
width: 70px;  
color: #fff; 
background:#AEF7B5;
padding:3px; 
margin:2px;
text-decoration: none; 
-webkit-transition-duration:1200ms;
}

a.linkies3:hover{
display:inline-block;
text-align:center;
width: 70px;
color: #000; 
background:#fff;
-webkit-transition-duration:1200ms;
}

a.linkies4 {
font-size: 11px;
font-family: Trebuchet Ms;
display:inline-block;
text-align:center;
width: 70px;  
color: #fff; 
background:#FFEADC;
padding:3px; 
margin:2px;
text-decoration: none; 
-webkit-transition-duration:1200ms;
}

a.linkies4:hover{
display:inline-block;
text-align:center;
width: 70px;
color: #000; 
background:#fff;
-webkit-transition-duration:1200ms;
}

4. Paste di atas code tadi
5. Kemudian copy code ni pulak
<center><a class="linkies" href="LINK"/>WEB</a>
<a class="linkies1" href="LINK"/>WEB</a>
<a class="linkies2" href="LINK">WEB</a>
<a class="linkies3" href="LINK"/">WEB</a>
<a class="linkies4" href="LINK"/">WEB</a>
</center><br>
6. Paste dekat bahagian yg korg nak letak link tu
7. Preview & save.

Pink : warna background
Biru : link website
Oren : nama website

5 comment [s]:

Siti Hajar Sms said...

Akak, nak letak code kedua dekat mana?

atiqahjaidin said...

@Siti Hajar Sms : Letak je dekat mana2. tak kisah :)

Lysaaaa said...

mana nak dapat link tu ? :/

Allah's. said...

kak tiqah , camne nak buat colourful cam akak ? kita punya satu kaler je .

Barniyah Ammara said...

Saya guna. tq~ ^^