Cara Memasang Tombol Share di Blog

Cara Memasang Tombol Share di Blog - Hallo Gengs ! Habis Hujan di rumah kini saatnya memulai untuk ngekrip eh salah nge-blog maksudnya ✌ Kali ini IDTGADGET akan share cara memasang tombol share di blog.

Share Button

Fungsi Tombol share button itu apa sih kak ? Fungsi share button adalah memberi kenyamanan kepada pengunjung atau visitor jika ingin membagikan artikel ini yang mungkin bermanfaat tanpa susah - susah untuk menulis artikel atau link. Caranya cukup mudah Klik Salah satu Icon Sosial Media nya lalu Bagikan, cukup mudah bukan.

Untuk View bisa di lihat di bawah ini atau di penutup artikel ini hanya yang saya pakai beda CSS. (Di Ganti)

Ilustrasi

Next metode nya :

1. Masuk ke akun Blogger -> Template -> Klik Edit HTML -> Cari Code di ngisor iki trus pilih yang kedua bagian content post bukan mobile post

<data:post.body/>

2. Lanjut Salin Code nang ngisor iki pas di bawah Code atas ⇑

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tombol-berbagi-zhuber'>
<div class='tombol-berbagi-zhuber-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-zhuber-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>

3. Lanjut maneh kopi code nang ngisor iki pas sebelum ]]></b:skin> atau </style>

/* CSS Share Button */
.tombol-berbagi-zhuber{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto}
.tombol-berbagi-zhuber-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}
.tombol-berbagi-zhuber-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada}
.tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju-B945zYqNGHdWdRNI6oCj380AwWOHdS47SPbBBIqQqQJiqdQ02jtm40_ocwJEYB3u8bssGVBbKcJ4KJ2Z_uX7w8PL2K4xINhnbExCdiaO73MKjODB_KrUjpF2VhrfMPcUKwzozeGR4U6/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-zhuber a{color:#999;transition:all .3s;}
.tombol-berbagi-zhuber a:hover{color:#7cb0ed}

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

4. Nice siap Simpan Simpan Template lihat hasilnya.

Demikian Cara Memasang Tombol Share di Blog Semoga bermanfaat. Salam Blogger.