Cara membuat teks link dan tombol share media sosial di postingan blogspot

Bagaimana membuat tombol share atau link berbagi postingan ke medai sosial?

Blogger.com-Share blog Anda melalui media sosial adalah cara yang bagus untuk meningkatkan jumlah pembaca dan lalu lintas Anda, jadi penting untuk mempermudah berbagi posting blog Anda. Tutorial ini akan menunjukkan kepada Anda cara menambahkan tautan dan ikon bagi tautan secara manual ke blog Anda di Blogspot. Ini biasanya jauh lebih bersih dan lebih mudah untuk dikustomisasi daripada opsi yang ditawarkan setiap situs jejaring sosial. Saya juga telah mencantumkan beberapa  widget yang akan secara otomatis menambahkan tombol share postingan

Menambahkan teks link share media sosial di bawah postingan blog

Untuk tutorial ini, kami akan menambahkan tautan berbagi ke bagian footer, tetapi Anda dapat menambahkannya di mana saja dalam postingan jika Anda mau.

Temukan kode berikut di Tema > Edit HTML. Jika Anda kesulitan menemukan kode di editor HTML, periksa kedua postingan ini - Cara mencari kode di Blogger editor HTML

<div class='post-footer-line post-footer-line-1'>

Akan ada dua dari kode ini yang akan anda temukana, temukan yang kedua dengan menggunakan sistem penomoran di sebelah kiri editor. Di bawah kode kedua <div class='post-footer-line post-footer-line-1'> paste kode link share dibawah ini.

SHARE TO FACEBOOK – BLOGGER

<a class='xosocial' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'>Share via Facebook</a>

SHARE TO TWITTER – BLOGGER

<a class='xosocial' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Tweet This'>Share to Twitter</a>

SHARE TO PINTEREST – BLOGGER

<a class='xosocial' href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'>Share to Pinterest</a>

SHARE VIA EMAIL – BLOGGER

<a class='xosocial' expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.url'>Share Via Email</a>

SHARE TO GOOGLE PLUS – BLOGGER

<a class='xosocial' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Share This On Google'>Share on Google Plus</a>

ADD TO DIGG – BLOGGER

<a class='xosocial' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='nofollow' target='_blank' title='Digg This'>Share to Digg</a>

ADD TO STUMBLEUPON – BLOGGER

<a class='xosocial' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Stumble this'>Share to StumbleUpon</a>

Menambahkan link share dalam bentuk widget

 <a class='a2a_dd xosocial' href='http://www.addtoany.com/share_save'>Share this post</a>
<script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/>
<br/><a class='a2a_dd xosocial' href='http://www.addtoany.com/share_save'>Share this post</a><p class='a2a_linkname_escape' style='display:none'><data:post.title/></p><script type='text/javascript'>var a2a_config = a2a_config || {};a2a_config.linkname_escape=1;a2a_config.linkurl="<data:post.url/>";</script><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'></script>

MENAMBAH GAMBAR / IKON BUKAN LINK TEKS SHARE MEDIA SOSIAL

Ganti teks sebelum </a> dengan tag gambar berikut. Tambahkan URL Gambar Langsung Anda dan deskripsi tautan atau gambar.

<img src="DIRECT IMAGE URL" alt="DESCRIPTION OF LINK" border="0" />

MEMBUAT RATA TENGAH SHARE LINKS & FOOTER LINE DI BLOGSPOT

Jika Anda ingin ikon muncul di tengah posting, tambahkan salah satu kode berikut di atas ]]> </b:skin> ke Tema > Edit HTML. Yang Anda gunakan akan bergantung pada baris footer apa yang Anda tambahkan juga. Untuk menyejajarkan tautan berbagi ke satu sisi pos Anda, cukup ubah pusat untuk kiri atau kanan.

.post-footer-line.post-footer-line-1 { text-align: center; }
.post-footer-line.post-footer-line-2 { text-align: center; }
.post-footer-line.post-footer-line-3 { text-align: center; }

RATA TENGAH HANYA LINK SHARE

Untuk membuat rata tengah  hanya tautan berbagi tambahkan <div id="sharebtns> sebelum kode share dan tambahkan kode penutup </div> setelahnya.

<div id = "sharebtns"> kode share media sosial disini </ div>

Kemudian tambahkan hal-hal berikut di atas ]]></b:skin> ke Tema > Edit HTML. Untuk menyejajarkan tautan berbagi ke satu sisi pots Anda, cukup ubah center dibawah ini menjadi left atau right.

#sharebtns {text-align: center; }