Tips Pintar Membuat Tombol Share Keren pada BlogSpot

Share atau yang sering kita kenal dengan sebutan bagikan adalah salah satu cara kita untuk memberikan sesuatu hal sebagai contohnya membagikan informasi postingan yang ada pada blog ini ke teman atau ke media sosial, Nah.. agar kita dengan mudah membagikannya maka perlu untuk membuat sebuah icon atau tombol Share tersebut pada postingan blog kita. Pada Postingan kali ini akang akan membagikan Tips Pintar Membuat Tombol Share yang Keren pada Blogspot. Tombol Share yang ada pada blog biasanya dibuat sebagai upaya pemilik blog untuk memudahkan pengunjung blognya dalam membagikan artikel yang menurut pembaca blog sangat lah bermanfaat ke dalam jejaring sosial media yang dimilikinya semisalnya ke Facebook, Twitter, Google+, dan Linkedin. Tombol Share Buton ini nantinya akan muncul pada setiap postingan.

Ok... Baiklah langsung saja akang kasih tahu caranya untuk membuat tombol share keren seperti yang ada pada blog ini, silahkan disimak dengan seksama ya...

Tips Pintar Membuat Tombol Share Keren pada Blogspot

1. Silahkan Login dulu ke Blogger >> Template >> Klik Edit HTML >> Cari kode seperti dibawah ini kemudian pilih yang kedua pada markup post ( bukan mobile post )

<data:post.body/>

2. Salin kode dibawah ini kemudian pastekan pada kode di atas

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

<div class='tombol-berbagi-postinganmusa'>

<div class='tombol-berbagi-postinganmusa-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-postinganmusa-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 salin kode berikut ini kemudian pastekan tepat sebelum kode ]]></b:skin>

/* CSS Share Button */

.tombol-berbagi-postinganmusa{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-postinganmusa-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit}

.tombol-berbagi-postinganmusa-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/AVvXsEglEy5t2u2DDe7p-wEW-3bVbjokNg168DfHcoTF8v8XvwxT_wx5_sAklj8SLDYY3s8x1eNaw98wYG51M1Vwa0zl6gKGplSOoFZMWCUe6PRqW3EFRy9uKzsGxNNLYej8AeW3w6sGrYzm5QN_/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-postinganmusa a{color:#999;transition:all .3s;}

.tombol-berbagi-postinganmusa a:hover{color:#7cb0ed}

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

.tombol-berbagi,.tombol-berbagi-postinganmusa-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit}

.tombol-berbagi,.tombol-berbagi-postinganmusa-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}

4. Simpan Template

Setelah anda menyimpan Template maka Tombol Share yang keren akan tampil pada setiap postingan anda, Cukup Mudah bukan,..??? Nah tunggu apa lagi jika anda ingin tampilan tombol share keren seperti diatas silahkan terapkan pada blog anda.