Cara Mudah Membuat Tombol Share Keren Dibawah Postingan


Cara Mudah Membuat Tombol Share Keren Dibawah Postingan - Tombol share merupakan salah satu hal penting yang harus ada di dalam sebuah website/blog. Kenapa harus ada? Ya, karena tombol share ini berfungsi mempermudah para pengunjung untuk menyukai ataupun membagikan artikel yang sedang dibacanya, dan tentu saja hal ini merupakan sebuah keuntungan bagi si empunya blog. Tanpa membuang waktu lagi, berikut cara mudah membuat tombol share keren dibawah postingan. Silahkan disimak langkah-langkah dibawah ini.


1. Pertama, anda login dulu ke Blogger

2. Pilih Template » Edit HTML

3. Cari Kode ]]></b:skin>

4. Pasangkan kode dibawah ini diatas kode ]]></b:skin>. Disini Kang AP memberikan dua pilihan gambar yang bisa anda pasang, silahkan pilih mana yang menurut anda cocok.


Kode Gambar 1
 .share-button-box {height:67px;background: url(https://lh3.googleusercontent.com/-AOWysCwFacc/VxyVulKA08I/AAAAAAAACoA/0za4kAZMDqwnJPBxct4e0kzNCCQGAVW-ACLcB/s1600/copasange-gokil.gif) no-repeat 300px 5px;margin:5px 0 15px;overflow:hidden;}

.share-buttons{margin:0 0;height:67px;float:left}
.share-buttons .share{float:left;margin-right:10px;display:inline-block}

Kode Gambar 2
.share-buttons-box {height: 67px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgknr4sx2uwbYiKNEYPDWYQABsRkLUpIjKqnAMl18NOEbkxGSIzF3DvD5M8wtRzwtveyJ7RHLN7adf2n6mL_jZKtvFgVvFxztkoaH2JBjW5OM9XkplIfh9Ckp1nHMT7_7OAKscXuo_rEY8/s1600/copasange+share+hell.png) no-repeat 300px 5px;margin:5px 0 15px;overflow:hidden;}

.share-buttons{margin:0 0height:67px;float:left}
.share-buttons .share{float:left;margin-right:10px;display:inline-block}


Karena setiap lebar template berbeda, silahkan ganti kode yang berwarna biru sesuaikan dengan lebar template anda.

5. Sekarang cari kode <data:post.body/>

6. Letakkan kode di bawah ini dibawah kode <data:post.body/>

<div class='share-buttons-box'>
<div calss='share-buttons'>
<div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
<div class='share like'><div class='fb-like' data-action='like' data-layout=box_count' data-share='false' data-show-face='false' expr:data-href='data:post.url'/></div>
<div class='share fbshare'><div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div>
<div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
</div>
</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;,&#39;twitter-wjs&#39;);<script>
<div style=clear: both;'/>

Baca juga :

Pada langkah ini orang banyak melakukan kesalahan. Jika pada template anda terdapat dua kode <data:post.body/>, tempatkan kode diatas dibawah kode <data:post.body/> yang kedua.

7. Simpan dan lihat hasilnya

Demikian cara mudah membuat tombol share keren dibawah postingan, semoga bermanfaat. Terima kasih sudah mampir di blog yang sederhana ini, semoga berhasil.


LANGGANAN ARTIKEL GRATIS
Jika anda menyukai artikel-artikel yang ada di blog Kang AP, silahkan untuk berlangganan gratis via email. Anda akan mendapat kiriman setiap ada artikel baru yang terbit di blog Kang AP ini. Terimakasih.

1 Response to "Cara Mudah Membuat Tombol Share Keren Dibawah Postingan"