Halo Sobat semua, lama Oto Website tidak share Tutorial, Software , Info dan Sebagainya di karenakan Admin terlalu sibuk di dunia nyata.
Untuk pertemuan kali ini kita akan membahas tentang tutorial blogger yang bertemakan Tambahkan icons External link di Postingan Blogger. Mungkin Anda sedikit kebingungan dengan judul kali ini? atau mungkin saja tidak? Ya bagi Anda para blogger atau Admin dari sebuah blog/website pasti sangat mengenal dan memahami External Link atau bahasa Indonesianya di sebut dengan Link Eksternal. Bagi Anda yang tidak mengetahui External Link maka sungguh terlalu.

Bagi Anda yang masih awam atau baru di dunia blogger, sebenarnya jika Anda membuat sebuah artikel pada postingan Anda, sebenarnya lagi Anda telah membuat Link Ekstenal dan mungkin Anda tidak mengetahuinya karna Anda tidak tahu namanya?namun bagi Anda yang masih awam akan saya jelaskan sedikit tentang External Link/Link Eksternal!

Apa itu External Link?

Link external adalah hyperlink yang menunjuk pada (target) setiap domain selain domain link yang ada di (sumber).

Dalam istilah awam, jika link pada website lain untuk Anda, ini dianggap link external karna menuju ke situs Anda. Demikian pula sebaliknya, jika Anda link ke website lain, hal ini juga dianggap sebagai link external.

Dengan kata lain di tutorial ini kita akan mengubah Link Eksternal standar blogger menjadi lebih cantik dengan Icons di sudut sebelah kiri, Untuk lebih jelasnya adalah seperti demo berikut ini (Lihat Icon Link di sudut kiri)


Icons External Link


Click Aja ...!!!

Sukses Bersama Clixsense

PTC Terpecaya dan Terbukti Membayar

PTC Indonesia Dengan Bayaran Tertinggi

Berikut ini adalah cara Tambahkan Icons External Link di Postingan Blogger


Original CSS




.post-body a {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) center right no-repeat;
background: url(//bits.wikimedia.org/static-1.20wmf8/skins/vector/images/external-link-ltr-icon.png?2012-07-23T14:50:00Z) center right no-repeat!ie;
padding-right: 13px;
}
.separator a{ background:none;}



Manual CSS (Saya sarankan)



Letakkan di atas tag ]]</b:skin>


a.external OW{
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) center right no-repeat;
background: url(//bits.wikimedia.org/static-1.20wmf8/skins/vector/images/external-link-ltr-icon.png?2012-07-23T14:50:00Z) center right no-repeat!ie;
padding-right: 13px;
}



Standar Pemanggil  Manual CSS



Pada saat membuat atau mengedit artikel letakkan kode berikut untuk memanggil:

<a class="external OW" href="http://LINK TUJUAN">NAMA LINK</a>

Perhatikan tag yang di blok di atas, ganti tag tersebut dengan Link dan Judul Anda sendiri!


Dari Meja Editor!
Saya rasa cukup sekian untuk kali ini, Saya harap Anda menyukai Artikel kali ini, jika ada pertanyaan tentang artikel di atas silahkan lemparkan pertanyaan Anda di kotak komentar Saya akan berusaha secepat mungkin untuk membalas dan membantu Anda.

Poskan Komentar Blogger Disqus

  1. Makasih banyak ilmunya, gan!
    Ternyata bisa ditambahin icon juga, ya... :-d

    Salam kenal dan kalau sempat mampir balik :)

    BalasHapus
  2. @Abdul RohmanThanks gan atas kunjungan perdananya!

    BalasHapus
  3. <a class="external OW" href="http://LINK TUJUAN">NAMA LINK</a>

    Boleh kita rubah gak class nya. dan apa pengaruh nya

    BalasHapus
  4. kalo saya mau ganti gambar logo nya gimana
    http://3.bp.blogspot.com/-t86l4XvC9z8/UTJIbJEoLTI/AAAAAAAAGjA/JhzELXsjHHg/s1600/External-links-icon-blogger.png

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top