Tambahkan Icons External Link di Postingan Blogger

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.