Trik Sederhana Menambahkan Icon External Links di Blogspot menggunakan CSS
20 November 2009
Leave a Comment
. Selidik punya selidik ternyata beliau menggunakan sebuah plugin yang akan secara otomatis menambahkan icon tersebut pada setiap external link dalam postingannya. Hmmm... berhubung blog saia ini ber-engine Blogspot yang tak bisa dipasangi plugin seperti itu *wordpress plugin*, tergelitiklah untuk iseng-iseng bereksperimen dengan CSS dan ternyata dengan memanfaatkan CSS kita juga bisa menambahkan icon external link seperti itu di blogspot. Pengen tau bagaimana caranya menambahkan external links di blogcepot? hayu atuh kita bahas bareng-bareng.
Yang pertama kita butuhkan tentu saja sebuah icon external link, anda bisa googling mencari icon yang dikehendaki, contoh seperti yang saya pakai adalah icon external link miliknya WikiPedia.
Setelah icon external linknya didapat, silahkan masuk ke editor template, dan masukkan kode CSS berikut sebelum kode ]]></b:skin>:
.post a.exlink {
background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSGzg-yCr3ZcVT3W97d47bbOYDJPmcuRxOkUMgPiW1y19LhfrDzQXLtcl3Voyo8CeqL3eA5z7k58GiWvLBRx6p7mN0XtUSBIswvpmBCewiqp4QzU96kYmO2IeiWi98TR76_UfdolWid3UQ/s320/external.png') no-repeat center right;
border:0;
padding-right:13px;
margin:0px;
}Beres deh, sekarang silahkan simpan perubahannya dengan menekan tombol Save Template.
Bagaimana cara penggunaannya?
Cara pakainya sangat mudah, kita tinggal menambahkan class exlink pada setiap link yang ingin kita pasangi icon external link, contoh penerapannya seperti berikut ini.<a href="http://a2i3s-c0ol.blogspot.com/" class="exlink">Contoh Link</a>
Hasilnya akan seperti ini: Contoh Link
Untuk memasang icon external link seperti ini bisa juga dengan memakai jQuery seperti yang telah dipaparkan Choen di sini, dan untuk pengguna WordPress bisa menggunakan plugin external link yang bisa langsung diunduh di sini.
Simpel sekali bukan? Selamat mencoba, mudah-mudahan bermanfaat.
sebenarnya fungsinya untuk apa sih..
untuk memperjelas aj ato gimana??
mohon informasinya...
terimakasih..
@Nova, dikatakan untuk memperjelas pun bisa, namun menurut saya lebih kepada mempercantik tampilan/design link, jadi kesannya gimanaaa.. gitu.. hehehe :D
wakh keren buanget nih bang.....coba untuk mempelajarinya
@JR, hhehe... silahkan kang Harry :D
ikodan nyoba ah... biar lebih pintar
@gajah_pesing, silagan om gajah, ntar bagi2 yak :D
kayaknya enakan yang pure CSS yah, lebih simpel. sip thanks yah. terus berkreasi bro.
@choen, Thanks bro. iya, lebih simple dan ringan, hanya terbatasnya ga bisa otomatis muncul :D
mantap tutorialnya, saya abca2 dulu
@Ocim, silahkan di-abca2 dulu ;))
Iraha-iraha hoyong oge nyobian, waktos ayeuna mah geuningan koneksi teh lep-lepan wae :-D
@kips, dicobi atuh kang, hehehe... pamugi koneksina enggal damang atuh :D
mas rizkyy.. i'm coming. sorrryyy deh jarang maen kemarih. gimana sakit giginya? udah sembuh kan?
hohohoh... icon ntu ya? yayayaya...
btw, blogspot blom bisa komen nested kaya wordpress ya? kalo udah nemu caranya kabar2i eike yaaa
tutorial yg sangat menarik untuk di coba
@Quinie, AlhamdulILLAH, udah sembuh ko sakit giginya :D
utk nested comment atau threaded comments alternatifnya bisa juga menggunakan JS-KIT atau InstantDebate.
@Boogle, Ah jadi malu nih, hehehe... *duh emot blushingna kamana nya?* :))
ditunggu postingan selanjutnya
terima kasih infonya,
salam,
Wah kalau yang begini aku roming total hehehe
tetep semangat yah
wah keren sob .. ntar ane coba ah
mba ajeng, sama kok, tenang ada temennya yang roaming xixixi ....
sayangnya q k0nsen yang di wp. . ada sieh yg di blogspot, kapan2 qc0ba dah. .
Dicoba nggak ya? Dicoba nggak ya? Rrrrr dicoba deh :-P
wah, dicoba deh. biar bagus2in halamanku. trims ya :)
salam,
romie
www.engineeringtown.com
Wah cakep nih mas rizky...terus nemukan hal-hal baru di blogspot ya..kita tunggu
Tengkyu...moga smakin jago :D
Thank you for sharing this information.
Walah kiraiin apaan..!?
di wp bisa ngga ziz?
@gajah_pesing, masih menyibuk di darat om :(
@andi, salam juga, terima kasih kunjungannya :)
@ajengkol, hehehe... :D iya, makasih mba
@v, thanks, silahkan dicoba
@technosurvivor, di wp juga bisa ko bos
@dhodie, coba lah dod, :-/
@romie, silahkan bos :) thanks kunjungannya.
@Aco, hehe... iseng2 berhadiah Daeng, thanks ya ;)
@Dentist Oxnard you're welcome, thanks for visit. :)
@Remba The Immaculate , lha emang apa? :D hehehe...
@andri, di wp-pun bisa ndri, cuma ya itu, manual punya, kalo kita pake pluginnya kan udah langsung otomatis muncul tuh iconnya :((
Teu acan nyobian masih teu acan damang :-D Teu acan aya postingan nu engalna nya.
sudah nyoba n berhasil. tp sy lepas lg krn gak terlalu perlu sih. btw idenya sgt cemerlang bro. trims
sayang diriku gaptek bos bos
di wp jga bisa??
okelakalobegitu. .
kalau untuk buat link kedalam ada ga Mas??? please share.. :D
trimakasih infonya....
bisa otomatis gk?