Cara Memodifikasi Tampilan Link di Blogger/Blogspot
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
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.
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.
info yang menarik sob ,.
salam kenal ya ,.!!
tukeran link yu ,.,.???
oh iya tolong follow balik ya, saya sdah follow blog kmu tuh ,.
makasih,.,.
oke bro, sudah saya follow back... salam kenal juga ya :D
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..☺☺☺☺☺
:) selamat datang di dunia blogging dan blogosphere :D okay, nanti saya berkunjung balik plus follow. Good luck and semangat!
Om, tanya dong, gimana cara menghilangkan link within pada beranda tapi widget itu tetap nampak di page lain nya ? thanx b4
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
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.
ngopi ga apa-apa kan mas.. sumbernya ga dihapus kok.. lagian aku masih belajar bikin blog, hehe.. trims
yg a:active saya belum pernah modifikasi, hehehe
terima kasih infonya :)
sip1! selamat mengutak-atik tampilan link blog :D
follow my blog..
mantap...salam kenal yaaa...
siang mas mo nanya gimana cara bikin file .html
di blogspot saya dah coba tidak bisa terimakasih
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:)
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
ditunggu postingannya gan..
permisi... saya izin copas boleh ya. n bantu saya cara ngeblog yg baik... salam kenal...
blog-ceplasceplos.blogspot.com = http://buka-rahasia.blogspot.com
thanks.. mas
foollowQ ya.,.,., gw dtunggu.,..
Terima kasih sudah diperbolehkan berkunjung..
http://antirentenir.blogspot.com
info yang sangat membantu mas...
terima kasih
salam blogger
Info yang menarik gan. salam
keren juga, makin di baca makin banyak ilmu yang bisa digarap.
infonya bgs....
izin folback blog ane ya??
Terimaksih informasinya Gan,..
Sambud pagi,..
semoga bermanfaat bagi pecinta blogger lainnya,..
salam kenal bro....
Terimasih info dan tutorialnya gan
Silahkan mampir gan ke >> http://delta-23.blogspot.com
good info gan.
salam knal aja from blo69ratis.blogspot.com
Check Blog Sya Ya mAs Bro ' bnyak infp-info blog yang perlu anda ketahui .
CHECK TKP ??? http://putrapatiwara.blogspot.com/
THN'S
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/
Info yg bagus..
mas,, cara masang iklan gmna ??
Follow blog saya ya..
Saya sudah follow blog mas..
http://wanted-link.blogspot.com/
mch aolenk
pi aq banyak terimakasih coz sdh brbgi pngalaman
numpang promosi... hehehehe...
tujuh1.blogspot.com
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
mantapp
GAN TUKERAN LINK YU, LINK AGAN UDAH SAYA PASANG DI BLOG SAYA
THX
makasih banget.
o ya sekalian numpang promosi : kunjungi blog ku ya smartsfull.blogspot.com
mas saya udah nyobak linkwithin.com tp kok tapilannya slalu 5 itm gimana cara mengurangi 3 item atau 4 item
@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.
Tipsnya bgs2, sob. Boleh deh sy ikutan ngambil ilmunya bt mempercantik blog sy. Slm knl & skss deh...
Nice :) Kunjungi balik ya{}
wah bermanfaat sekali untuk newbie seperti saya,terimakasih atas infonya bro,, kunjungan baliknya yha bro >> http://fchords.blogspot.com/
masih blum ngerti gmna nambahin widget ke blog , mohon sarannya :)
NICE Artikel
flwback ya gan.. salam kenal
mantap gan... sangat membantu ane..
sip gan... thx untuk infox
Trimakasi atas info nya mass,,, singgah di blog saya ya mas,,, rahma dani.blogspot.com saya masi pemula mass
Post a Comment