√ Cara Gampang Menciptakan Tombol Share Keren Dibawah Postingan

Cara Praktis 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, alasannya ialah tombol share ini berfungsi mempermudah para pengunjung untuk menyukai ataupun membagikan artikel yang sedang dibacanya, dan tentu saja hal ini merupakan sebuah laba bagi si empunya blog. Tanpa membuang waktu lagi, berikut cara gampang menciptakan 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 isyarat dibawah ini diatas isyarat ]]></b:skin>. Disini Kang AP menunjukkan dua pilihan gambar yang sanggup anda pasang, silahkan pilih mana yang berdasarkan 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/AVvXsEhI-12lmKSRaYr2Jyyt4SX4LBD3YqD_wOy21l9H3OB_ShQEfMSBjpgQ9e6D-zFoxYu5AVWPqR1aAJhhO-itrJ2YL2xKDh7-P6ngEm9F9WumFaD1a9hBBDfQSdboCGFk8udPGje18aaBBOk/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 isyarat yang berwarna biru sesuaikan dengan lebar template anda.

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

6. Letakkan isyarat di bawah ini dibawah isyarat <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 :

» Cara Praktis Membuat Kolom Langganan Keren Di Bawah Postingan

» Cara Praktis Memasang Emoticon Pada Kolom Komentar Blog

» Cara Memasang Burung Twitter Terbang Pada Blog

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

7. Simpan dan lihat hasilnya

Demikian cara gampang menciptakan tombol share keren dibawah postingan, supaya bermanfaat. Terima kasih sudah mampir di blog yang sederhana ini, supaya berhasil.


Sumber http://ap-thea.blogspot.com