Memasang Tombol Share Di Blog

Memasang Tombol Share di Blog - Pada postingan ke dua di hari ini akan membuatkan sebuah share button pada postingan yang digunakan blog ini. Tutorial ini Saya buat atas undangan sahabat blogger di sini.

Share button ini mempunyai kegunaan untuk memudahkan pengunjung yang ingin membuatkan artikel yang dirasa bermanfaat ke jaringan sosial media mereka. Seperti Facebook, Twitter, Google plus, dan Linkedin. Share button ini nantinya akan muncul di setiap postingan blog sobat.

Baca juga : Memasang Widget Share Button di Postingan

Untuk tampilan menyerupai screenshot di bawah ini atau dapat dilihat pribadi di bawah artikel blog ini (jika belum diganti)

Berikut cara penerapannya :

1. Login ke Blogger > Template > Klik Edit HTML > Cari arahan di bawah ini lalu pilih yang ke dua dalam markup post (bukan mobile post)

<data:post.body/>

2. Kemudian salin arahan di bawah ini sempurna sehabis arahan yang disebutkan tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='tombol-berbagi-arlina'> <div class='tombol-berbagi-arlina-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-arlina-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. Selanjutnya terapkan arahan di bawah ini sempurna sebelum ]]></b:skin> atau </style>

/* CSS Share Button */ .tombol-berbagi-arlina{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-arlina-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit} .tombol-berbagi-arlina-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/AVvXsEh3p7t8D3-1dKaiqfbVU6HmrP9V9x8lJkIa8XXDVgGkFEEwuJKmVIU_y8YTnxeSETQo707soGxSALuHhW38fSCwSVlAUGklpFtDf0sm2aPmvTQX0sIDjmH_BEjOxK6TLy73s_DulwqmmWRV/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-arlina a{color:#999;transition:all .3s;} .tombol-berbagi-arlina a:hover{color:#7cb0ed}  @media only screen and (max-width:640px){ .tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit} .tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}

4. Simpan template.

Bagi sahabat yang ingin mempunyai Kode Promo Hosting Terbaru, silakan kunjungi Promo Hosting

Demikian cara Memasang Tombol Share di Blog, biar bermanfaat.

Tweet

Subscribe to receive free email updates: