selamat datang dan salam kenal.....!!! Imanuel Tjahaya

Kamis, 08 September 2011

mengatur link di blog


pada posting kali saya akan membagi tips untuk mengatur link di blog buat para blogger .ok langsung saja berikut langkah langkahnya;


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 jika anda ingin mengotak-atik berikut 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;
}

 dan lihatlah hasilnya.
sekian, semoga bermanfaat

Related Posts by Categories

0 komentar:

Posting Komentar

Related Posts Plugin for WordPress, Blogger...