Thursday, February 21, 2013

Cara Memodifikasi Tampilan Link di Blogger

memodifikasi tampilan link di blogspot
Tutorial Blogger kembali membuat artikel mengenai Cara Mengubah/Memodifikasi Tampilan link di blogspot. Sering kali kita melihat sebuah url link dengan keragaman yang berbeda. Ada yang berkedip, tebal, bergaris bawah, huruf miring, memiliki 2 atau banyak warna dan sebagainya.

Di bagian menu juga anda akan melihat tampilan link yang berganti warna apabila mouse mengarah dan menyentuh bagian kotak link tersebut. Oleh karena itu untuk mengubah semua tampilan link di blogger, anda harus mengetahui beberapa jenis kode link yang ada pada bagian CSS blog kita.

Beberapa jenis link pada CSS :

1. a : tampilan dasar suatu link
2. a:active: tampilan link ketika di-click ( ketika halaman baru belum terbuka secara sempurna ).
3. a:visited: tampilan link setelah di-click atau ketika halaman link tersebut telah dibuka.
4. a:hover: tampilan link ketika mouse berada di atas link atau menyentuh bagian elemen yang berisi url link.

Keempat jenis aturan link di CSS tersebut dapat anda edit warnanya, tampilannya, besar kecil huruf, dan lainnya. Sedangkan untuk tipe style karakter (text) pada CSS berikut macam-macamnya.

Jenis tampilan style tipe text pada CSS :
1. color: warna link, valuenya berupa warna hexadesimal, RGB, maupun color name.
2. Text decoration: hiasan pada link, berupa underline (garis bawah, ini bawaan secara default), none (tanpa hiasan), overline (garis di atas) dan blink (berkedip)
3. Font-size: ukuran teks, biasanya dalam pixel (px), em, persen (%), dll.
4. Line-height : tinggi garis pada text.
5. Text-align : Letak paragraph yang digunakan atau awal dari baris huruf. ( kanan, kiri, tengah )
6. Text-shadow : adalah warna kerangka / bayangan pada text.
7. Font-weight : Jenis ukuran tipe karakter huruf ( 700 = Bold , 400 = Normal , dll )

Setelah anda mengetahui beberapa property style pada CSS, silahkan lakukan pengeditan CSS di bagian Template blog kalian. Masuk ke Template, pilih Edit HTML, dan centang Expand Widget Template .

Bagian pengaturan tampilan pada CSS berada di antara <b:skin><![CDATA[ dan ]]></b:skin>,sedangkan aturan link berada di bagian awal, biasanya setelah variable dan setelah body {...}
Contoh style link :
a {color: #FF1000; text-decoration: none;}

Pada contoh diatas, kode color melambangkan jenis warna yang akan ditampilkan. Sedangkan text-decoration adalah hiasan pada link tersebut. Jika none berarti link tersebut tidak menggunakan hiasan apapun. Jenis hiasan yang dapat dipakai adalah underline, bold, blink (berkedip) dan lain sebagainya.

Jika ingin mengubah tampilan link secara individual dan berbeda dari aturan default link yang mengikuti aturan template, anda bisa langsung memasukkan perintah CSS text-style ke dalam link yang ingin diberi tampilan berbeda (style="....."), contohnya :
<a  href="http://impoint.blogspot.com/" style="color:#FF1000;text-decoration:blink;font-size:18px">Media Blogger</a>

Dengan menambahkan perintah style, maka jenis link yang menggunakan perintah tersebut akan tampil berbeda dengan pengaturan yang ada pada template CSS anda. Biasanya penggunaan ini dilakukan pada saat bertukar link di blog.

Untuk melakukan modifikasi tampilan blog memang harus menguasai CSS pada bagian template. Tetapi anda akan cepat memahaminya jika sudah terbiasa mengganti jenis-jenis bagian pada CSS tersebut. Semoga artikel mengenai Cara Memodifikasi Tampilan Link di Blogger ini dapat bermanfaat.

No comments:

Post a Comment