Cara Membuat Tombol Share Sosmed di Blogspot | ristofa.com

Baca Juga

Cara Membuat Tombol Share Sosmed di Blogspot - Bagi para blogger atau pun peselancar dunia maya pasti tidak asing dengan Sosmed. Dan untuk para blogger, pasti ingin mengenalkan atau pun mempopulerkan situs web nya ke semua orang. Salah satunya ya dengan membagikan situs nya di Sosmed.

Namun kadang di template blogger bawaan tidak ada tombol berbagi (share) ke sosmed. Untuk kalian yang mungkin ingin memasang tombol share sosmed atau pun mengganti tombol share yang sudah ada. Kali ini saya akan membuat tutorial Cara Membuat Tombol Share Sosmed pada blogspot. 

Karena share button berguna untuk memudahkan pengunjung yang ingin berbagi artikel yang bermanfaat ke jaringan sosial media mereka. Seperti Facebook, Twitter, Google plus, dan Linkedin.

Yuk langsung saja...

Buka edit template pada blogger dan cari kode berikut... 

<data:post.body/>

Kode diatas biasanya ada 2,,, untuk mobile dan untuk dekstop. Carilah kode yang kedua, yaitu yang ada di bawah  <b:includable id='post' var='post'>.

Setelah ketemu kode <data:post.body/> yang kedua, copy kode HTML berikut ini. Lalu pastekan di bawah kode <data:post.body/>..

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

<div class='share-ristofa'>

<div class='share-ristofa-fb'>

<a class='share-ristofa1-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>

<a class='share-ristofa1-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> </a>

</div>

<div class='share-ristofa-twitter'>

<a class='share-ristofa1-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>

<a class='share-ristofa1-twitter-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'></a>

</div>

<div class='share-ristofa1'>

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

<a class='share-ristofa1-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'></a>

</div>

<div class='share-ristofa1'>

<a class='share-ristofa1-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/>

<a class='share-ristofa1-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'></a>

</div>

</div>

</b:if>

Lalu copy kode CSS berikut dan pastekan sebelum kode ]]></b:skin>.

/* Share Sosmed Ristofa */

.share-ristofa{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}

.share-ristofa-fb,.tombol-berbagi{float:left;width:21%;height:inherit}

.share-ristofa-twitter,.share-ristofa1,.share-ristofa1-lk{float:left;width:21%;height:inherit;border-left:solid 1px #dadada}

.share-ristofa1-fb,.share-ristofa1-twitter,.share-ristofa1-gp,.share-ristofa1-lin,.share-ristofa1-pi{float:left;display:block;background:url('http://2.bp.blogspot.com/-FYy1a99SDXE/VXuCSz_hYjI/AAAAAAAACbg/8dz4LkDIHYY/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}

.share-ristofa1-fb-label{color:#2d609b}

.share-ristofa1-fb-label,.share-ristofa1-twitter-label,.share-ristofa1-gp-label,.share-ristofa1-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px}

.share-ristofa1-twitter{background-position:0 -43px}

.share-ristofa1-twitter-label{color:#00c3f3}

.share-ristofa1-gp{background-position:0 -86px}

.share-ristofa1-gp-label{color:#f00}

.share-ristofa1-lin{background-position:0 -129px}

.share-ristofa a{color:#999;transition:all .3s;}

.share-ristofa a:hover{color:#7cb0ed}

@media only screen and (max-width:640px){

.share-ristofa1,.share-ristofa-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}

.share-ristofa1,.share-ristofa-tw,.share-ristofa1-lk{float:left;width:48%;padding:0;border-left:0}}

Selesai. Simpan template. Lalu coba cek di salah satu postingan apakah tombol share sosmed sudah muncul di postingan Anda. Mudah bukan, Cara Membuat Tombol Share Sosmed di Blogspot.

Jika berhasil silakan share postingan ini ke sosmed Anda. Terima Kasih.

Praktekan juga cara membuat menu navigasi dropdown ala ristofa.com.