Tips/Cara Membuat Share Button Ringan Sederhana di Blog - Setelah kemarin membahas mengenai membuat auto read more ringan dan seo di blog, kali ini mas jonny akan membagikan kepada pembaca mengenai tips membuat share button di blog dan pastinya masih tetap memegang teguh prinsip seo dan fast loading karena judul artikel ini membahas mengenai sederhana bukan berarti share button ini gak keren. Sederhana diibaratkan sebagai fast loading tadi karena share button yang satu ini tidak menggunakan javascript. Bagaimana ? anda tertarik mari kita kerjakan.
( Baca Juga : Cara Membuat Widget Artikel Terbaru Ringan )
Tips Membuat Share Button Ringan Sederhana di Blog
( Baca Juga : Cara Membuat Widget Artikel Terbaru Ringan )
Tips Membuat Share Button Ringan Sederhana di Blog
- Pertama Masuk ke Template > Edit HTML ( Jangan Lupa )
- Kedua cari kode
]]></b:skin>atau </style>. - Dan masukkan kode css dibawah ini tepat diatas salah satu kode tadi.
/*Share Button*/
.sharebutton{display:block;list-style:none;margin:10px
0;padding:0}
.sharebutton
a{color:#FFFFFF!important;display:block;text-decoration:none!important}
.sharebutton li{float:left;margin-right:5px;}
.share{font-weight:bold;margin-right:10px;padding:7px 0}
.fb a{background:#306199;padding:7px 15px}
.fb a:hover{background:#244872}
.linkedin a{background:#007bb6;padding:7px 15px}
.linkedin a:hover{background:#005983}
.twitter a{background:#26c4f1;padding:7px 15px}
.twitter a:hover{background:#0eaad6}
.gplus a{background:#e93f2e;padding:7px 15px}
.gplus a:hover{background:#ce2616}
.pinterest a{background:#b81621;padding:7px 15px}
.pinterest a:hover{background:#8a1119}
.pinterest{margin-right:0}
- Cari kode
<data:post.body/> dan letakkan kode dibawah ini tepat diatas kode tadi jika ingin meletakkan diatas postingan blog. Letakkan kode dibawah kode tadi jika ingin memasangnya dibawah postingan blog.
<ul class='sharebutton'>
<li
class='share'>Bagikan :</li>
<li class='fb'>
<a
expr:href='"http://www.facebook.com/sharer.php?u=" +
data:post.url'
onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return
false;' target='_blank' title='Share on Facebook'>Facebook</a>
</li>
<li class='linkedin'>
<a
expr:href='"http://www.linkedin.com/cws/share?url=" +
data:post.url'
onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return
false;' target='_blank' title='Share on Linkedin'>Linkedin</a>
</li>
<li class='twitter'>
<a
expr:href='"http://twitter.com/share?url=" + data:post.url'
onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return
false;' target='_blank' title='Share on Twitter'>Twitter</a>
</li>
<li class='gplus'>
<a
expr:href='"https://plus.google.com/share?url=" +
data:post.url'
onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return
false;' target='_blank' title='Share on Google Plus'>Google+</a>
</li>
<li class='pinterest'>
<a
href='javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type'
,'text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());'
onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return
false;' target='_blank' title='Share on Pinterest'>Pinterest</a>
</li>
</ul>
- Jika kode <data:post.body/> lebih dari satu silahkan coba yang kedua dan jika masih belum bisa silahkan coba satu per satu.
Demikianlah Tips Membuat Share Button Ringan Sederhana di Blog semoga dapat bermanfaat untuk anda dan jika masih ada masalah silahkan berkomentar. Dan jangan lewatkan cara mempercepat loading blog dengan lazyload.
Belum ada tanggapan untuk "Tips Membuat Share Button Ringan Sederhana di Blog"
Post a Comment