, ,

Trik Sederhana Menambahkan Icon External Links di Blogspot menggunakan CSS

20 November 2009 Leave a Comment

external link for blogspot
Beberapa hari yang lalu saya sempat bertamu ke salah satu blog sahabat, ada sesuatu yang menarik perhatian saya, yaitu setiap external link dari postingan di blog beliau ditandai dengan icon seperti ini external links icon.

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('http://3.bp.blogspot.com/_1vjSO0eb5Tc/SwQURGQojPI/AAAAAAAAA84/lXO6hitsao0/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.

Related Posts

36 comments »

  • Nova Imoet said:  

    sebenarnya fungsinya untuk apa sih..
    untuk memperjelas aj ato gimana??
    mohon informasinya...
    terimakasih..

  • a2i3s™ said:  

    @Nova, dikatakan untuk memperjelas pun bisa, namun menurut saya lebih kepada mempercantik tampilan/design link, jadi kesannya gimanaaa.. gitu.. hehehe :D

  • JR said:  

    wakh keren buanget nih bang.....coba untuk mempelajarinya

  • a2i3s™ said:  

    @JR, hhehe... silahkan kang Harry :D

  • gajah_pesing said:  

    ikodan nyoba ah... biar lebih pintar

  • a2i3s™ said:  

    @gajah_pesing, silagan om gajah, ntar bagi2 yak :D

  • choen said:  

    kayaknya enakan yang pure CSS yah, lebih simpel. sip thanks yah. terus berkreasi bro.

  • a2i3s™ said:  

    @choen, Thanks bro. iya, lebih simple dan ringan, hanya terbatasnya ga bisa otomatis muncul :D

  • Ocim said:  

    mantap tutorialnya, saya abca2 dulu

  • a2i3s™ said:  

    @Ocim, silahkan di-abca2 dulu ;))

  • kips said:  

    Iraha-iraha hoyong oge nyobian, waktos ayeuna mah geuningan koneksi teh lep-lepan wae :-D

  • a2i3s™ said:  

    @kips, dicobi atuh kang, hehehe... pamugi koneksina enggal damang atuh :D

  • Quinie said:  

    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

  • boogle said:  

    tutorial yg sangat menarik untuk di coba

  • a2i3s™ said:  

    @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?* :))

  • gajah_pesing said:  

    ditunggu postingan selanjutnya

  • andi said:  

    terima kasih infonya,
    salam,

  • ajengkol said:  

    Wah kalau yang begini aku roming total hehehe

    tetep semangat yah

  • v said:  

    wah keren sob .. ntar ane coba ah

  • niQue said:  

    mba ajeng, sama kok, tenang ada temennya yang roaming xixixi ....

  • technosurvivor said:  

    sayangnya q k0nsen yang di wp. . ada sieh yg di blogspot, kapan2 qc0ba dah. .

  • dhodie said:  

    Dicoba nggak ya? Dicoba nggak ya? Rrrrr dicoba deh :-P

  • romie said:  

    wah, dicoba deh. biar bagus2in halamanku. trims ya :)

    salam,

    romie
    www.engineeringtown.com

  • Aco said:  

    Wah cakep nih mas rizky...terus nemukan hal-hal baru di blogspot ya..kita tunggu
    Tengkyu...moga smakin jago :D

  • Dentist Oxnard said:  

    Thank you for sharing this information.

  • Remba The Immaculate said:  

    Walah kiraiin apaan..!?

  • andri said:  

    di wp bisa ngga ziz?

  • a2i3s said:  

    @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 :((

  • kips said:  

    Teu acan nyobian masih teu acan damang :-D Teu acan aya postingan nu engalna nya.

  • Dangsulaeman said:  

    sudah nyoba n berhasil. tp sy lepas lg krn gak terlalu perlu sih. btw idenya sgt cemerlang bro. trims

  • suwung said:  

    sayang diriku gaptek bos bos

  • rosy said:  

    wow! thanks for another great blog post!
    Customized application development

  • technosurvivor said:  

    di wp jga bisa??
    okelakalobegitu. .

  • NanLimo Bertuah said:  

    kalau untuk buat link kedalam ada ga Mas??? please share.. :D

  • info twelve said:  

    trimakasih infonya....

  • Awas facebook !!! said:  

    bisa otomatis gk?

  • Leave your response!

    Be nice, Keep it clean, Stay on topic, No spam. Thanks.

    Previous Page Arrow Left Arrow next page arrow right arrow Back to home home icon button