Download Software dan Games Full Version Gratis Terbaru 2014

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
google

Catatan:
Jika anda menemui tutorial lama, maka perhatikan bahwa untuk masuk ke Edit HTML template tidak lagi melalui halaman "design/rancangan", melainkan dari dashboard > template > klik edit HTML. Masih bingung mencari dan edit kode di Edit HTML Blogger baru? Simak tips trik berikut:
1. Cara Mencari Kode di HTML Editor Blog
2. Fitur di HTML Editor Baru
3. Tips Edit HTML Blogger (artikel lama)
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 48 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,.,.

Ahmad Khoirul Azmee 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..☺☺☺☺☺

Ahmad Khoirul Azmee 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

Ahmad Khoirul Azmee 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 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 :)

Ahmad Khoirul Azmee said...

sip1! selamat mengutak-atik tampilan link blog :D

eyfa scuzzy 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

Libas Habis 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:)

Ahmad Khoirul Azmee 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 Nurdiansyah 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....

Delta9 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

Tifan Dwi Avianto said...

Maaf ka Azmee, kalo cara buat link seperti hidup atau jika cursor diletakan di link, warna link semakin menebal perlahan gimana ya?
CONTOH: space iklan dibawah gambar header yang jika cursor diletakan warna akan menebal menjadi oranye.
mohon tanggapannya :)

Regards, Blogger pemula

Putra patiwara said...

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

Abang tips 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 | VS ™ 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

Ridwan Wibisono said...

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

DUNIA BISNIS 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

tips bloging said...

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

fetri rosdiana said...

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

Locker 911 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 said...

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

dhilaa said...

Nice :) Kunjungi balik ya{}

Cah Gembloengz said...

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

sayed khazinul said...

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

Amir Hamzah said...

NICE Artikel

flwback ya gan.. salam kenal

Bagyo Arter said...

mantap gan... sangat membantu ane..

Y_Gen S1B Berkarya said...

sip gan... thx untuk infox

rahma dani 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

Join Our Team!

© 2013 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap