Iklan

Cara Baru Membuat Tombol Share di Bawah Posting Blog


Pada kesempatan kali ini saya akan share Membuat Share Di Bawah Postingan tentu fungsi dari tombol share ini adalah untuk membagi kan para pengunjung ke media sosial mereka jika artikel kamu menarik untuk mereka. 

Sebenarnya blogger sudah ada tombol share milik mereka akan tetapi masih belum valid HTML5 tentu ini harus di modifikasi agar bisa menjadi valid HTML5. 

Bagaimana membuat tombol share nya berikut ini adalah tutorial berikut ini



Untuk membuat tombol share ini hanya menggunakan CSS saja tanpa menggunakan gambar, sehingga tampilan dari tombol share ini lebih sederhana dan minimalis dengan di sertai warna-warna yang menarik. Untuk memasang tombol share di bawah posting blog juga cukup mudah, hanya dengan menambahkan sedikit kode saja yang terdapat dibawah ke dalam Edit HTML template blog maka hasilnya seperti yang tertera pada gambar di atas. Untuk itu berikut tutorial untuk Membuat Tombol Share di Bawah Posting Blog agar valid HTML5 dan full color.

1. Login ke akun blogger.
2. Masuk ke Template lalu pilih Edit HTML.
3. Copy kode berikut ini lalu taruh di atas kode ]]></b:skin>

.widgetshare{font:bold 12px/20px Tahoma !important;background:#333;border:1px solid #444;padding:5px 4px;color:#fff !important;margin-top:10px}.widgetshare a{font:bold 12px/20px Tahoma !important;text-decoration:none !important;padding:5px 4px;color:#fff !important;border:1px solid #222;transition:all 1s ease}.widgetshare a:hover{box-shadow:0 0 5px #0f0;border:1px solid #e9fbe9}.fcbok{background:#3B5999}.twitt{background:#01BBF6}.gplus{background:#D54135}.digg{background:#5b88af}.lkdin{background:#005a87}.tchno{background:#008000}.ltsme{background:#fb8938}

4. Selanjutnya copy kode berikut ini, lalu taruh di bawah kode <data:post.body/> atau bisa juga <div class='post-footer'>

<div class='widgetshare'>
Share artikel ke: 
<a class='fcbok' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a> 
<a class='twitt' expr:href='&quot;https://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a> 
<a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a>
<a class='lkdin' expr:href='&quot;https://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Linkedin</a>
<a class='tchno' expr:href='&quot;https://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' rel='nofollow' target='_blank'>Technorati</a>
<a class='digg' expr:href='&quot;https://digg.com/submit?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Digg</a>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='https://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' class='ltsme'>Lintasme</a>");
//]]>
</script>
</div>

5. Langkah terakhir tinggal Simpan template lalu lihat hasilnya.

Demikian tutorial untuk Membuat Tombol Share di Bawah Posting Blog. Perlu diperhatikan dalam langkah pemasangannya, biasanya didalam template blog terdapat beberapa kode <data:post.body/> dan <div class='post-footer'> maka dari itu silahkan sesuaikan dengan template blog yang anda gunakan.
DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.sudarblogger.web.id. Terima kasih.

0 Response to "Cara Baru Membuat Tombol Share di Bawah Posting Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel