Monday, May 14, 2012

Mengatur Link DI Blog

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


atau Silahkan atur sendiri sesuai keinginan dan imajinasi anda

ARTKEL TERKAIT



No comments: