Mengatur Link DI Blog

Nahhh jika dulu Anas udah membuat tutorial tentang cara membuat warna link warna-warni tapi sekarang Anas akan membagi sedikit ilmu saya kepada saudara-saudaraku sekalian yang ingin mengubah link pada blog kalian... dalam perbincangan kali ini Anas akan membahas tentang warna font link, warna link jika pointer diarahkan, warna link yang sudah dikunjungi dan lain-lain
langsung saja tanpa basa-basi lagi karena sudah cape' basa-basinya :D


Masuk menu Layout kemudian masuk ke Edit HTML kemudian cari Code CSS seperti dibawah ini


a:link {
color:#346ba4;
text-decoration:underline;
}
a:visited {
color:#800000;
text-decoration:underline;
}
a:hover {
color:#56b9ff;
text-decoration:underline;
}

Nah jik anda ingin mengotak-atik akan saya terangkan dibawah ini..


a:link { <<<-- Link aktif
color:#346ba4; <<<---- Ini adalah warna Link aktif yang belum tersentuh apapun text-decoration:underline;
}
a:visited { <<-- Link jika sudah dibuka/diklik
color:#800000; <<<--- Ini adalah warna Link jika URLnya sudah pernah dikunjungi text-decoration:underline;
}
a:hover { <<--Link jika pointer berada pada Link
color:#56b9ff; <<<--- Ini adalah ini adalah warna jika Pointer diarahkan pada Link text-decoration:underline;
}

Ganti tulisan yang berwarna merah dengan code warna yang anda sukai, Untuk code warna anda bisa cari di DISINI.
Tulisan yang tercetak biru diatas menandakan Link bergaris bawah anda bisa merubah menjadi tidak bergaris bawah dengan mengganti tulian underline menjadi none

Jika anda ingin mengatur Link Postingan anda berbeda dengan yang lain tambahkan Code CSS dibawah ini

#main .post-body a:link{
color:#346ba4;
text-decoration:underline;
}
#main .post-body a:visited{
color:#800000;
text-decoration:underline;
}
#main .post-body a:hover{
color:#56b9ff;
text-decoration:none;
}

Rubahlah sesuai keinginan kamu seperti cara diatas tadi

Jika gambar anda juga terinfeksi link dan anda juga ingin merubah tampilan jika pointer diarahkan pada gambar tambahkan Code Css dibawah ini

a img{ border-width:0}
.post-body img{ margin:5px; border:1px solid #444}

Jika Anda Ingin mengatur Link main wrapper/Link dibawah postingan dan juga diatas yang biasanya memberikan informasi Label, Komentar, Author dan lain-lain tambahkan Code Css Dibawah ini


#main-wrapper a:link{
color:#c13a10;
text-decoration:none;
}
#main-wrapper a:visited{
color:#800000;
text-decoration:none;
}
#main-wrapper a:hover{
color:#800000;
text-decoration:underline;
}

Jadi Tampilan Css Jika Lengkap seperti Dibawah ini

a:link {
color:#346ba4;
text-decoration:none;
}
a:visited {
color:#800000;
text-decoration:none;
}
a:hover {
color:#56b9ff;
text-decoration:underline;
}
#main .post-body a:link{
color:#346ba4;
text-decoration:underline;
}
#main .post-body a:visited{
color:#800000;
text-decoration:underline;
}
#main .post-body a:hover{
color:#56b9ff;
text-decoration:none;
}
a img{ border-width:0}
.post-body img{ margin:5px; border:1px solid #444
}
#main-wrapper a:link{
color:#c13a10;
text-decoration:none;
}
#main-wrapper a:visited{
color:#800000;
text-decoration:none;
}
#main-wrapper a:hover{
color:#800000;
text-decoration:underline;
}

Dahhh Silahkan Atur sendiri sesuai keinginan dan imajinasi anda

Posted in: Tutorial Blog