Cara menambahkan tombol share media sosial di bawah postingan

Tombol berbagi media sosial yang bagus dan simpel membantu kita mendapatkan artikel dengan baik di platform medsos yang berbedadengan mudah. Ketika sebagian konten dibagikan berkali-kali di berbagai platform medsos, ini membantu kita mendapatkan lebih banyak tautan, laulintas gratis, yang meningkatkan nilai konten kita di mesin pencari pada akhirnya peringkatnya juga bagus.

Hari ini aku akan membahas bagai mana caranya memasang tombol share di bawah posting.

Tombol share yang akan aku bagikan memiliki desain yang bagus sehingga menjadi nilai tambah untuk tampilan konten kamu. selain itu tombol share media sosial ini sangat responsif

aku telah menggunakan empat tombol berbagi media sosial yang berbeda sebagai berikut:

-Twitter
-Facebook
-Google Plus
-Pinteres

Aku hanya menggunakan empat tombol karena ruangnya terbatas, namun Kamu bisa menambahkan lebih banyak jika kamu mau atau menghapus yang tidak kamu inginkan dan menambahkannya. Yang perlu kamu miliki adalah pengetahuan HTML dan CSS. kamu juga dapat mengambil kode tombol share media sosial dari situs platform media sosial yang terkenal. tapi kamu juga bisa menyalin kode dibawah ini.

Langkah 1) Pergi ke Blogger → Template → Edit HTML

Langkah 2) Klik di dalam kotak kode Template → Tekan Ctrl + A dan salin kode template Anda ke file notepad dan minta Backup jika Anda melakukan sesuatu yang salah, kamu dapat mengembalikannya kembali ke aslinya.

Langkah 3) Ok, jadi sekarang kamu punya backup jadi sekali lagi klik di dalam kotak kode template, Tekan Ctrl + F dan cari tag penutup ini </ head>

Langkah 4) Sekarang sebelum tag </ head> ini, tempel seluruh kode CSS yang ada di bawah ini

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*----Social Share Buttons Bar Coded By TwistBlogger.com----*/
#twistBloggerSocialbar {
float: left;
width: 100%;
padding-bottom: 7px;
margin-top: 15px;
padding: 5px 0px 5px 0px;
border-bottom: 1px solid #F2F2F2;
border-top: 1px solid #F2F2F2;
margin-bottom: 15px;
height: 28px;
background: #FFF9F9;
position: relative;
z-index: 9999;
overflow: hidden!Important;
}
.shareBox {
float: left;
padding: 0px;
margin-right: 10px;
height: 20px;
}
.titleBox {
background: #5F5F5F;
border: 1px solid #000000;
height: 100%;
text-transform: uppercase;
padding: 3px 10px;
margin-right: 5px;
font-size: 15px;
font-family: sans-serif;
line-height: 1.4em;
font-weight: bold;
color: #EFF9FD;
border-radius: 0px 2px 2px 0px;
}
.titleBox:before, .titleBox:after {
left: 74px;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.titleBox:before {
border-color: rgba(245,0,0,0);
border-left-color: #000000;
border-width: 6px;
margin-top: -5px;
}
.titleBox:after {
border-color: rgba(245,0,0,0);
border-left-color: #5F5F5F;
border-width: 5px;
margin-top: -4px;
}
.twitterBox {
width: 77px;
background: #00A8E8;
height: 100%;
padding: 4px 10px;
border: 0;
}
.googlePlusBox {
width: 57px;
background: #E06352;
height: 100%;
padding: 4px 10px;
border: 0;
}
.stumblupon {
width: 75px;
background: #5F5F5F;
height: 100%;
padding: 5px 10px 3px 10px;
border: 0;
}
</style>
<script type='text/javascript'>
//Stumble Upon Script
(function (){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a, b)})();
// Twitter Script
window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));
</script>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
</b:if>

Setelah kamu melakukan langkah di atas. langkah berikutnya adalah:

Langkah 5) Sekarang cari baris kode ini <div class='post-header-line-1'/> dan tempelkan kode di bawah ini tepat di bawahnya.

Catatan: kamu mungkin menemukan baris kode ini muncul lebih dari satu kali (biasanya dua kali) jadi kamu harus menempelkan kode HTML setelah tampil kedua di kode template Anda.

<b:if cond='data:blog.pageType == "item"'>
<div id='twistBloggerSocialbar'>
<div class='shareBox'><div class='titleBox'>SHARE</div></div>
<div class='shareBox'> <div class='twitterBox'><a class='twitter-share-button' expr:data-text='data:post.title' data-via='TwistBlogger' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div></div>
<div class='shareBox'>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false' style='background: #4965B4; width:80px; height: 100%; padding: 4px 10px; border: 0;'/>
</div>
<div class='shareBox'>
<div class='googlePlusBox'><div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/></div>
</div>
<div class='shareBox'>
<div class='stumblupon'>
<su:badge expr:location='data:post.url' layout='1'/>
</div>
</div>
</div>
</b:if>

Penting: ubah yang ditandai warna kuning dengan akun twitter kamu, gunanya kamu bisa menemukan siapa saja yang membagikan posting blog kamu ke twitter.

sudah selesai, langkah terakhir simpan template kamu. silahkan lihat hasilnya.

semoga bermanfaat..