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 .

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.

Related Posts