Cara Membuat/Memasang Share Button Sederhana (Template Evo Magz) Di Blogspot

Bagi kalian yang suka dengan kesederhanaan mungkin bisa mencoba memasang share button in untuk digunakan di blog anda. Share button ini sangat simple dan sederhana. Kesederhanaan tersebut bisa dilihat dari tampilannya. Tombol berbagi ini hanya memuat 4 media sosial yaitu facebook,twitter,google plus,dan linkedln.

Share button ini juga dipakai di template evo magz yang original jadi mungkin bagi anda yang hanya memiliki evo magz clone dan ingin memasang share button yang sama seperti aslinya bisa ikuti langkah dibawah. 

Share button ini tidak ada fitur counter namun jika anda ingin membuat share button dengan fitur counter bisa baca artikel berikut Cara Memasang Sosial Share Button Dengan Counter . Bagaimana tertarik untuk memasang share button sederhana?  Berikut langkahnya :

Cara Memasang Share Button Di Blog

Langkah 1

Silakan anda buka blogger,pilih Template → Edit HTML

Langkah 2

Salin kode dibawah ini dan letakkan diatas kode </b:template-skin> atau ]]></b:skin> atau </style>

/* CSS Share Button */
.tombol-berbagi-anggasave{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #f0f0f0;margin:auto}
.tombol-berbagi-anggasave-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-anggasave-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #f0f0f0}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-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}
.tombol-berbagi-fb-label{color:#2d609b}
.tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-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}
.tombol-berbagi-tw{background-position:0 -43px}
.tombol-berbagi-tw-label{color:#00c3f3}
.tombol-berbagi-gp{background-position:0 -86px}
.tombol-berbagi-gp-label{color:#f00}
.tombol-berbagi-lin{background-position:0 -129px}
.tombol-berbagi-anggasave a{color:#999;transition:all .3s;}
.tombol-berbagi-anggasave a:hover{color:#7cb0ed}

@media only screen and (max-width:640px){
.tombol-berbagi,.tombol-berbagi-anggasave-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}
.tombol-berbagi,.tombol-berbagi-anggasave-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}

Langkah 3
Cari kode <data:post.body/> ,lalu salin kode dibawah ini dan letakkan dibawah kode <data:post.body/>

<!-- Tombol share media sosial -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi-anggasave'>
<div class='tombol-berbagi-anggasave-fb'>
<a class='tombol-berbagi-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='tombol-berbagi-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'> Share on Facebook</a>
</div>
<div class='tombol-berbagi-anggasave-tw'>
<a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-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='tombol-berbagi-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'>Share on LinkedIn</a>
</div>
  </div>
</b:if>

Karena kode <data:post.body/> ada lebih didalam template blog silakan anda coba satu persatu atau pilih kode yang ditemukan pertama kali.

Lalu simpan template dan lihat hasilnya.

Nah gimana hasilnya? Jika ada pertanyaan dan masalah silakan langsung komentar saja dibawah fast respon hehe. Cukup sekian artikel ini semoga bermanfaat.