Cara Memasang Share Button Sosial Media Sederhana

Cara Membuat Share Button Sederhana Untuk Blogger - pada kesempatan ini saya akan membagikan tutorial singkat kepada anda tentang memasang share button sederhana dan simple. share button harus ada di blog anda agar mempercantik blog anda dan pengunjung bisa membagikan artikel anda ke media sosial mereka apabila bermanfaat bagi mereka. karena itulah anda harus memasang share button sederhana ini. mari simak cara pemasangannya yuk.

Cara Memasang Share Button Sosial Media

1. Silahkan login ke blog anda, pilih theme dan klik edit theme
2. Salin kode dibawah ini dan letakkan diatas kode berikut ini ( pilih salah satu kode ) </style> atau ]]></b:skin>

/* CSS Share Button */
.tombol-berbagi-suryapero{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #f0f0f0;margin:auto}
.tombol-berbagi-suryapero-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-suryapero-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-suryapero a{color:#999;transition:all .3s;}
.tombol-berbagi-suryapero a:hover{color:#7cb0ed}

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

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

<!-- Tombol share media sosial -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi-suryapero'>
<div class='tombol-berbagi-suryapero-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-suryapero-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.

4.Silahkan Simpan themenya dan lihat hasilnya.

Apabila tidak berhasil cara diatas bisa anda ikuti cara lainnnya seperti berikut.

1. Letak kode < -- Tombol share button -- > di antara kode profil anda dan iklan adsense ( contoh seperti blog suryapero ini )

Contoh 1

Contoh 2

Demikianlah tutorial cara membuat tampilan sosial media diblog anda, semoga bermanfaat dan bisa berhasil diblog anda semua. apabila ada pertanyaan silahkan komentar dibawah, saya akan usahakan menjawabnya. terima kasih sudah mengunjungi blog suryapero ini.

Surya Seorang mahasiswa yang senang membagikan informasi yang sudah saya dapatkan. Informasi yang saya tulis blog ini, sesuai pengalaman saya dari pertama blog.

Berbagi :