Cara Membuat Tombol Share di Blog

Cara Membuat Tombol Share Blog - Pastinya sebagai seorang blogger, kalian ingin blog kalian menjangkau semua orang. Berbagai cara dapat kalian lakukan untuk mencapai tujuan tersebut.

Dari sekian banyak cara yang bisa ditempuh, salah satunya adalah membuat tombol share agar pembaca bisa membagikan artikel kalian kalau-kalau mereka merasa terbantu dan ingin menyebarluaskan informasi berguna yang kalian buat. Selain itu apabila blog kalian banyak di-share oleh pembaca, Google juga memiliki pandangan yang lebih baik dibandingkan blog yang tidak memiliki atau sedikit share-nya.

Nah pada kesempatan ini, kami akan membagikan beberapa varian dan cara memasang tombol share agar semakin banyak pengunjung yang datang ke dalam blog kalian.

Langsung saja ke langkah-langkahnya......

Share Button #1

Berikut previewnya...

Login Dashboard Blogger kalian > klik Template > pilih Edit HTML
Cari kode [[></b:skin> atau </style> (gunakan shortcut CTRL+F agar lebih mudah), lalu klik enter
Pastekan kode dibawah ini tepat diatas kode [[></b:skin> atau </style>

* share button */
#share-this{overflow:hidden;margin:10px 18px;line-height:1.4em}#share-this a{float:left;display:block;color:#fff;padding:10px 14px;text-align:center;margin:0 3px 3px;font-size:12px}#share-this a.this-fb{background:#395796;}#share-this a.this-tw{background:#4cb0ea;}#share-this a.this-gp{background:#de3425;width:44px;padding:0;text-align:center;height:41px;overflow:hidden;}#share-this a.this-gp i{margin:5px 0 0;text-align:center;padding:0}#share-this a.this-fb:hover,#share-this a.this-tw:hover,#share-this a.this-gp:hover {opacity:.9}#share-this i {margin-right:12px}
.this-fb i,.this-tw i,.this-gp i{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqJ6Zg5QUnyCxXJRhBYsVK-Pb8cFdxoFVgfJgacPIQ2StHY9I7xzu64-DT241aK7huAPUzO-HjWBZ5va2Yw_mE8gy2JI_zjy79ZQ0g0AsWVD83vSwt2nsJeiYwBQWZCeBC0moTfnWYj8A/s1600/sosmed22.png) no-repeat;width:22px; height:18px; display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}.gp-del{display:none}
.this-fb i{background-position:0 -100px;margin-top:-4px}.this-tw i{background-position:0 -150px}.this-gp i{background-position:0 -200px}.notpay {font-size:13px;line-height: 22px;border:2px #df3f2a solid;padding:3px 15px;text-align:center;margin:0 0 25px;}.pay {font-size:13px;line-height: 22px;border:2px #5973b0 solid;padding:3px 15px;text-align:center;margin:0 0 25px;}

@media screen and (max-width:414px){#share-this{margin:10px 15px}.gp-del{display:block}#share-this a{min-width:100%;padding:0;text-align:center !important;height:45px;line-height:45px;margin:0 auto 3px !important}#share-this a.this-gp i, #share-this i{display:none}#share-this a.this-gp{height:auto;margin:0 auto;padding:0}
}

Lalu cari kembali kode <data:post.body/> urutan ke-2 karena ada 1-4 kode dalam satu template (gunakan shortcut CTRL+F agar lebih mudah), lalu klik enter
Pastekan kode dibawah ini tepat diatas kode <data:post.body/> (jika ingin meletakkan tombol share diatas postingan) atau dibawah kode <data:post.body/> (jika ingin meletakkan tombol share dibawah postingan

<div id='share-this'>
<a class='this-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Facebook'><i class='fb-1'/>Share on Facebook</a>
<a class='this-tw' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Twitter'><i class='tw-2'/>Tweet on Twitter</a>
<a class='this-gp' expr:href='"https://plus.google.com/share?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Google+'><i class='gp-2'/><span class='gp-del'>Plus on Google+</span></a></div>

Klik Pratinjau Tema untuk memastikan semuanya sudah benar
Klik Simpan Template
Selesai

Share Button #2

Berikut previewnya...

Login Dashboard Blogger kalian > klik Template > pilih Edit HTML
Lalu cari kode <data:post.body/> urutan ke-2 karena ada 1-4 kode dalam satu template (gunakan shortcut CTRL+F agar lebih mudah), lalu klik enter
Pastekan kode dibawah ini tepat diatas kode <data:post.body/> (jika ingin meletakkan tombol share diatas postingan) atau dibawah kode <data:post.body/> (jika ingin meletakkan tombol share dibawah postingan

<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>

Cari kembali kode [[></b:skin> atau </style> (gunakan shortcut CTRL+F agar lebih mudah), lalu klik enter
Pastekan kode dibawah ini tepat diatas 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/AVvXsEil8Nejoj2Ls8plAEIeQRpyInXqhd_5ueoHFb-CS6kH4uxMY66Ujbgm7QVXivjw5GpEJqxZ5Y8wpuczReSCDKY03pngj10GF1F7Q3cZZAakpII7Nn74PEpao9bJu1oDyDqa8Kkvt2futVqK/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}
}

Klik Pratinjau Tema untuk memastikan semuanya sudah benar
Klik Simpan Template
Selesai

Share Button #3

Berikut previewnya...

Login Dashboard Blogger kalian > klik Template > pilih Edit HTML
Lalu cari kode <data:post.body/> urutan ke-2 karena ada 1-4 kode dalam satu template (gunakan shortcut CTRL+F agar lebih mudah), lalu klik enter
Pastekan kode dibawah ini tepat diatas kode <data:post.body/> (jika ingin meletakkan tombol share diatas postingan) atau dibawah kode <data:post.body/> (jika ingin meletakkan tombol share dibawah postingan

<br/>
<br/>
<center><iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;send=false&amp;layout=button_count&amp;show_faces=false&&share=true&width=140&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21"' style='border:none; overflow:hidden; width:140px; height:21px;'/>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='HeruAryaa' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='https://platform.twitter.com/widgets.js' type='text/javascript'/>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
<script type='text/javascript'>
window.___gcfg = {lang: 'id'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script></center>

Klik Pratinjau Tema untuk memastikan semuanya sudah benar
Klik Simpan Template
Selesai

Cara Memasang Tombol Share tanpa Script

Cara ini kami berikan untuk kalian yang tidak mau repot-repot untuk mencari dan menempelkan script secara berulang-ulang pada template kalian.

Langsung saja disimak caranya dibawah ini....

Buka Addthis lalu signup dengan e-mail atau akun google kalian
Setelah signup kalian akan diarahkan ke page ini > klik Share Buttons
Lalu pada menu Share Buttons kalian akan diminta memilih style untuk tombol share kalian
Pada page ini konfigurasikan tombol share kalian
Setelah selesai dikonfigurasikan, kalian akan mendapatkan script. Script ini silahkan kalian copy dan paste tepat diatas kode </body>
Selesai

Nah itulah bagaimana caranya untuk membuat dan memasang tombol share di blog kalian. Dari sekian banyak varian & cara yang kami berikan, kalian bebas memilih style mana yang cocok untuk blog kalian. Sekian panduan dari kami dan semoga bermanfaat. Jangan lupa share artikel ini supaya bisa lebih berguna bagi banyak orang