Cara Memodifikasi Tampilan Link di Blogger/Blogspot

modifikasi CSS link
Tips-tricks Blogger kembali lagi membahas tentang mengedit tampilan link di template Blogger/Blogspot. Kali ini diupayakan secara lengkap dan esensial agar nanti sobat dapat mengutak-atik bagian tampilan link secara mandiri.

Bagian CSS yang memberi aturan pada link ada 4 jenis:
1. a : tampilan dasar suatu link
2. a:hover: tampilan link ketika mouse berada di atas link (mouse hovering)
3. a:visited: tampilan link setelah di-click atau ketika halaman link tersebut telah dibuka.
 4. a:active: tampilan link ketika di-click ( ketika halaman baru belum terbuka secara sempurna)

Sedangkan style text CSS memiliki beberapa jenis:
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. dan masih banyak lagi jenis text-style yang lainnya, sobat nantinya silahkan mempelajari sendiri cara-cara memodifikasi tampilan teks dengan CSS.

Nah, setelah mengetahui beberapa properti style CSS pada link, untuk mengubah tampilan default link pada blog, silahkan lihat pada template Blogger/Blogspot sobat (lihat melalui edit HTML), kemudian cari aturan CSS yang mengatur link, yaitu a, a hover, .... dan seterusnya.

Clue: aturan CSS terletak di antara <b:skin><![CDATA[ dan ]]></b:skin>, aturan link berada di bagian awal, biasanya setelah variable dan setelah body {...}

Contoh aturannya seperti ini (namun tidak sama persis tergantung aturan CSS teks-nya):
a {color: #1C4991; text-decoration: none;}
a:hover {color: #f2984c; text-decoration: underline;}
a:visited {color: 1C4991; text-decoration:none;}
Pada bagian berwarna biru itulah sobat bisa memodifikasi tampilan link, baik tampilan awal link (a), ketika mouse di-hover di atas link (a:hover), dan ketika link telah di klik/dikunjungi (a:visited). Ingat, tampilan dasar link selalu bergaris bawah, maka untuk menghilangkan garis bawah (underline) link pada tampilan link dasar maupun ketika di-hover, harus ditambahkan text-decoration: none. Sedangkan untuk warna, sobat bisa pula mengganti value warna di link di tempate sobat dengan mengganti kode di belakang color: dengan kode warna lain yang diinginkan. Untuk mengetahui kode-kode warna, gunakan Hex Color Code Chart Generator.

Jika ingin menambahkan aturan link lain yang belum ada di template sobat, misalnya belum ada a:hover, maka tinggal ditambahkan saja, dengan catatan urutannya harus seperti ini:
1. a {aturan css text styling}
2. a:hover {aturan css text styling}
3. a:visited {aturan css text styling}
4. a:active {aturan css text styling}
Keempatnya harus memiliki unrutan seperti itu, jadi tidak boleh terbalik-balik, kecuali jika salah satunya tidak ada, boleh langsung melompat ke aturan link lain.

Jika ingin mengubah tampilan link secara individual dan berbeda dari aturan default link yang mengikuti aturan template, sobat bisa langsung memasukkan perintah CSS text-style ke dalam link yang ingin diberi tampilan berbeda (style="....."), misalnya:
<a  href="http://buka rahasia.blogspot .com" style="color:#FF9900;text-decoration:blink;font-size:24px">tips-tricks blogger</a>
Maka hasilnya akan seperti ini:


(Note: Penggunaan text decoration berjenis blink di atas hanyalah untuk contoh, perhatikan benar-benar penggunaan text decoration seperti ini karena dapat membuat mata lelah dan sakit. Ga percaya? Silahkan dilihat terus link di atas dalam waktu 2 atau 3 menit. Hehe... Padu padankan warna, ukuran, serta urgensi/kepentingan penggunaannya sehingga benar-benar pas dan tidak berlebihan).

Nah, sekarang jika sobat ingin mengutak-atik tampilan link blog silahkan dicoba dengan memperhatikan aturan-aturan CSS dan cara di atas. Yang penting, utak-atik, coba terus, belajar dan belajar! Good luck!

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Memodifikasi Tampilan Link di Blogger/Blogspot
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 47 Comment(s):

New Trik Tips Komputer said...

info yang menarik sob ,.

salam kenal ya ,.!!
tukeran link yu ,.,.???
oh iya tolong follow balik ya, saya sdah follow blog kmu tuh ,.
makasih,.,.

Unknown said...

oke bro, sudah saya follow back... salam kenal juga ya :D

Nine Mouse said...

postingan mas bagus2 dan bikin saya trmotivasi untuk jadi bloger yang baik maklum bloger baru.. pokok ya 5 snyum dh buat mas ☺☺☺☺☺ hehehe.. ku jg udh follow mas kalau ga kbratan kunjungi blogku ya tuk penilianya.. kalau bisa follow balik.. hahah ngelunjak.. ninemouse.blogspot.com..☺☺☺☺☺

Unknown said...

:) selamat datang di dunia blogging dan blogosphere :D okay, nanti saya berkunjung balik plus follow. Good luck and semangat!

Dedy A S R T said...

Om, tanya dong, gimana cara menghilangkan link within pada beranda tapi widget itu tetap nampak di page lain nya ? thanx b4

Unknown said...

lihat panduannya di post tentang link within pada cara ke dua (lihat bagian tutorial yang di bawah):
Cara Membuat Related Post LinkWithin (Thumbnails)
dan lanjutkan memasukkan script dengan cara di posting ini (pilih cara kedua juga):
2 Cara Menampilkan Widget/Script Hanya di Post Body

Dedy A S R T said...

yups, berhasil ! thanx banget2x Om, emang canggih dah modifikasi link nya, gak pake pikir 2 kali langsung aja saya follow blog nya, boleh dong minta follow balik, hehe. Blog saya masih cupu soalnya Om.

Alfajar Kuala Kapuas said...

ngopi ga apa-apa kan mas.. sumbernya ga dihapus kok.. lagian aku masih belajar bikin blog, hehe.. trims

Ladida said...

yg a:active saya belum pernah modifikasi, hehehe
terima kasih infonya :)

Unknown said...

sip1! selamat mengutak-atik tampilan link blog :D

Anonymous said...

follow my blog..

jack said...

mantap...salam kenal yaaa...

88MT12 said...

siang mas mo nanya gimana cara bikin file .html
di blogspot saya dah coba tidak bisa terimakasih

Unknown said...

mas.. salam kenal dari saya nih..
hehe..
saya mau sekalian nanya nih mas.
gimana kalau ketika di hover trus bisa muncul listnya yah..
misalkan linknya itu "lain-lain" nah pada saat mouse di atasnya muncul list lagi..
mohon pencerahannya yah mas.. kalau ada di postnya minta linknya yah.. thank's sebelumnya:)

Unknown said...

Bisa. dengan menggunakan CSS atau digabungkan juga dengan javascript. Insya Allah dalam waktu dekat akan saya buat postingnya untuk blog blogger.
Yup salam kenal juga ya :D

w4hyou said...

ditunggu postingannya gan..

Lathif said...

permisi... saya izin copas boleh ya. n bantu saya cara ngeblog yg baik... salam kenal...
blog-ceplasceplos.blogspot.com = http://buka-rahasia.blogspot.com

blog-full-version.blogspot.com said...

thanks.. mas

intan_mamen said...

foollowQ ya.,.,., gw dtunggu.,..

Farah said...

Terima kasih sudah diperbolehkan berkunjung..
http://antirentenir.blogspot.com

berita-terbarumu said...

info yang sangat membantu mas...
terima kasih
salam blogger

Ary_Putra said...

Info yang menarik gan. salam

Cara Aqiqah said...

keren juga, makin di baca makin banyak ilmu yang bisa digarap.

Moozyedogawa said...

infonya bgs....
izin folback blog ane ya??

Suka Menulis said...

Terimaksih informasinya Gan,..
Sambud pagi,..
semoga bermanfaat bagi pecinta blogger lainnya,..

$10 GRATIS AMBIL DISINI said...

salam kenal bro....

Anonymous said...

Terimasih info dan tutorialnya gan
Silahkan mampir gan ke >> http://delta-23.blogspot.com

bang_sawan said...

good info gan.
salam knal aja from blo69ratis.blogspot.com

Unknown said...

Check Blog Sya Ya mAs Bro ' bnyak infp-info blog yang perlu anda ketahui .
CHECK TKP ??? http://putrapatiwara.blogspot.com/
THN'S

Goodbox said...

yang saya mas link nya jika di arahkan ke mouse linknya menghilang ,, tapi bisa di klik caranya agar bisa ada garis bawahnya sama hurup link nya ada lagi ,,, bagai mana mas ,,
alamat blog aku ini mas
http://abangdaka.blogspot.com/

™ Dika | WLc said...

Info yg bagus..

mas,, cara masang iklan gmna ??

Follow blog saya ya..

Saya sudah follow blog mas..

http://wanted-link.blogspot.com/

ARUL said...

mch aolenk
pi aq banyak terimakasih coz sdh brbgi pngalaman

Unknown said...

numpang promosi... hehehehe...
tujuh1.blogspot.com

Unknown said...

salam kenal bang .kalau ingin buat link yang kayak di blog abang caranya gimana , soalnya bagus bangeth , aku mohon berikan rahasianya bang ..
mohon bang bimbingannnya..
terema kasih

Dyanseller said...

mantapp

Unknown said...

GAN TUKERAN LINK YU, LINK AGAN UDAH SAYA PASANG DI BLOG SAYA
THX

Fetri said...

makasih banget.
o ya sekalian numpang promosi : kunjungi blog ku ya smartsfull.blogspot.com

Unknown said...

mas saya udah nyobak linkwithin.com tp kok tapilannya slalu 5 itm gimana cara mengurangi 3 item atau 4 item

tips bloging said...

@locker 911 ;
cara pengaturannya ada di awal agan mengisi form seperti EMAIL, BLOG LINK, PLATFORM, WIDHT. nah untuk pengaturan item yang ingin ditampilkan ada pada widht. dan jatah tampilannya hanya 3-5.

Solichin Toip Musik said...

Tipsnya bgs2, sob. Boleh deh sy ikutan ngambil ilmunya bt mempercantik blog sy. Slm knl & skss deh...

dilu said...

Nice :) Kunjungi balik ya{}

Unknown said...

wah bermanfaat sekali untuk newbie seperti saya,terimakasih atas infonya bro,, kunjungan baliknya yha bro >> http://fchords.blogspot.com/

Said Khazinul Arkan said...

masih blum ngerti gmna nambahin widget ke blog , mohon sarannya :)

mineralamir said...

NICE Artikel

flwback ya gan.. salam kenal

Unknown said...

mantap gan... sangat membantu ane..

3vinty_01_Skoliosis Berkarya said...

sip gan... thx untuk infox

Unknown said...

Trimakasi atas info nya mass,,, singgah di blog saya ya mas,,, rahma dani.blogspot.com saya masi pemula mass

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap