Assalamualaikum wr.wb.
Malam minggu gini enaknya post tentang tutorial-tutorial blog.dan kali ini saya akan mempublikasikan sebuah trik kepada sobat semua yang berjudul
"Tombol Share (Share Button) Valid HTML5 dan SEO".Oke, Langsung saja ke Pokoknya :D
Penempatan CSS
- Pertama, Buka Menu Edit Temiplate
- Cari kode ]]></b:skin> atau </style>, tekan f5 untuk memudahkan pencarian
- Setelah mendapatkan kode diatas, letakan kode dibawah ini tepat diatas kode diatas
#share-button{margin:8px 0;padding:0;overflow:hidden}#share-button p{float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);background:#fafafa;display:block;padding:5px 8px !important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff}#share-button a{position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:6px 6px;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;border:1px solid #fff}#share-button a:hover{top:1px;
left:1px;box-shadow:0px 0px 3px rgba(1,1,1,.1)}
- Eits!, jangan simpan dulu masih ada langkah selanjutnya.
Penempatan HTML
- Masih dengan menu edit template, kali ini cari kode <b:includable id='postQuickEdit' var='post'> atau postQuickEdit
- Jika sobat sudah mendapatkan kode di template tersebut silahkan ditaruh kode dibawah ini tepat diatas kode yang tadi
<b:if cond='data:blog.pageType == "item"'>
<div id='share-button'>
<p>Share to</p>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' style='background:#3b5998;'>Facebook</a>
<a expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' style='background:#c0361a;'>Google+</a>
<a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + "&lang=id"' rel='nofollow' style='background:#4099ff;'>Twitter</a>
<a expr:href='"http://digg.com/submit?url=" + data:blog.url' rel='nofollow' style='background:#000;'>Digg</a>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' style='background:#FF9900;'>Lintaskan</a>");
//]]>
</script>
<div class='clear'/>
</div></b:if>
- Nah, Sekarang simpan templatenya
Jadi, Gimana ? Udah dibuat belum Share Button-nya ? Kalau udah saya mengucapkan terima kasih telah membaca artikel ini.Sekian dan Semoga bermanfaat :D