Tombol Share Sosial Media Keren Dengan Font Awesome

Salah satu cara untuk mendongkrak visitor dan backlink adalah dengan share postingan blog kita. Namun, apakah hanya kita saja sebagai pemilik blog  yang mau share? Tentu tidak, visitor kita juga akan share artikel kita jika artikel kita menarik, maka dari itu kita harus memfasilitasi visitor blog kita dengan menyediakan tombol share di blog kita. Dengan membuat tombol share, visitor kita tidak perlu lagi menyalin link postingan kita untuk di bagikan ke social media.

Kebanyakan blogger menggunakan tombol share dengan style gambar. Padahal hal tersebut dapat membuat loading blog kita menjadi berat. Maka dari itu, disini saya akan membagikan tutorial untuk membuat tombol share keren dengan font awesome. Tombol dengan font awesome ini juga sebelumnya sudah saya bagikan pada poatingan saya yang berjudul cara membuat tombol demo dan download keren (ganti dengan link postingan agan). Karena ini berbasis font, maka ini tidak membuat berat loading blog kita. Lantas bagaimana cara membuatnya? Langsung saja simak tutorialnya berikut ini.

Cara membuat tombol share social media dengan font awesome keren :

1. Pertama, masuk dulu ke dashboard blogger anda masing – masing.

2. Jika sudah, masuk ke menu “Template” pada blog anda.

3. Back up terlebih dahulu template anda, untuk berjaga – jaga jika nanti terjadi kesalahan pada saat edit.

4. Jika, sudah pilih “Edit HTML”.

5. Sekarang cari kode ]]></b:skin> atau </style> pada template anda. Untuk mempermudahkan pencarian, gunakan Ctrl + F atau tekan F3. Jika sudah ketemu, letakkan kode berikut ini tepat di atas kode tersebut

.button-share span {font-size:16px}

.button-share a, .button-share a:hover {color:#fff}

.fbx, .twet, .gplus {text-align:center; padding:5px 12px; font-size:12px; border-radius:3px}

.fbx { background-color:#1358BA}

.twet { background-color:#03C7E9}

.gplus { background-color:#FE1635}

.fbx:hover, .twet:hover, .gplus:hover {background-color:#547279; transition:background-color 0.7s ease-out 0s}

6. Lanjut cari kode <data:post.body/> biasanya didalam template anda terdapat lebih dari satu kode ini, letakkan saja kode berikut ini pada kode <data:post.body/> yang kedua.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='button-share'>

<span>Bagikan Artikel:</span>

<a class='fbx' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='icon-facebook icon-large'/> Facebook</a>

<a class='twet' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='icon-twitter icon-large'/> Twitter</a>

<a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='icon-google-plus icon-large'/> Google+</a>

</div>

</b:if>

7. Terakhir cari kode </head> dan masukkan kode berikut ini tepat diatasnya.

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

8. Sekarang tekan “Save” atau “Simpan” untuk menyimpan template anda.

Sekarang coba lihat tombol share anda, pasti keren sekalikan? Nah, itulah tutorial cara membuat tombol share social media keren dengan font awesome. Sekian tutorial kali, semoga ini bermanfaat bagi anda.