Cara Membuat Tombol Share Sosial Media Keren Di Blog

Cara Membuat Tombol Share Sosial Media Keren Di Blog - Ketika kita memiliki sebuah blog pastinya kita ingin teman teman kita mengenal blog kita dan membaca blog kita. Dan wajib hukumnya untuk para blogger menyediakan tombol khusus share artikel mereka ke sosial media seperti facebook, twitter, linkedin, google plus dan masih banyak lagi. Memang template blog yang sekarang sudah menyediakan tombol share nya otomatis bawaan dari template tetapi ada sebagian yang belum ada dan ingin juga menyediakan tombol share sosial media yang lebih keren dari bawaan template. Karena dengan adanya tombol ini akan memudahkan untuk para pembaca artikel kamu untuk share artikel yang mereka inginkan ke sosial media mereka. Untuk itu hari ini saya akan share bagaimana cara membuat tombol share sosial media keren di blogspot , ikuti langkah langkahnya dengan benar , karena jika ada kesalahan maka efeknya tombol share kamu tidak akan berhasil dibuat

Cara Membuat Tombol Share Sosial Media Keren Di Blog

1. Silahkan buka blogspot kamu lalu masuk ke menu Tema - Edit HTML cari kode <data:post.body/> , dan cari <data:post.body/> di posisi yang kedua (biasanya ada 3/4 kode tersebut , pilih yang kedua)

2. Lalu salin kode di bawah ini setelah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='tombol-berbagi-arlina'>
<div class='tombol-berbagi-arlina-fb'>
<a class='tombol-berbagi-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-fb-label' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + 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='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-gp-label' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
<div class='tombol-berbagi'>
<a class='tombol-berbagi-lin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='_blank'/>
<a class='tombol-berbagi-lin-label' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a>
</div>
</div>
</b:if>

3. Setelah itu salin kode dibawah ini setelah kode ]]></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/AVvXsEh8sZ-6mBUpjoYc2_dQQljxG_qXvIJfPCUeYGY4_bXovFui-DPhA4WRNvTLof4Y7gqda6iPicCXIEx2K5b9ASHsW0_3c2MzwhYmF8WRKwh06kEuV7oymCsPbUD7RK8wbpWMhwJK9y6DuMsO/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}}