Sebelumnya saya juga sudah memberikan Tutorial Membuat Widget Iklan Text Melayang di Blog, kali saya akan menyampaikan tutorial
Widget Share Melayang di Sisi Blog. Widget ini akan dipasang pada posisi samping blog sobat,
serta tampilannya yang sangat menarik, tanpilannya seperti gambar berikut ini :
Fungsi utama Widget ini yaitu
untuk memudahkan sobat share / submit artikel sobat pada media di internet
contohnya media social seperti Google plus, Twitter, Digg, dan facebook.
Sebenarnya sobat bisa taruh widget tambahan lainnya, cuma saja kalau terlalu
banyak tentu akan memenuhi halaman blog sobat dan terlihat tidak rapi.
Sebenarnya sebelumnya saya juga
pernah memberikan cara buat tombol share pada blog, hanya saja widget ini lebih
cocok dipasang pada bawah / atas posting, karena tampilannya yang berkesan
memenuhi blog kalau dipasang melayang. Sobat bisa lihat di Widget Share Blog.
Baiklah berikut cara untuk
memasang Widget Share Melayang di Sisi Blog sobat,
1. Login ke akun blog
sobat,
2. Lalu buka => Tata Letak => Elemen Halaman => Tambah Gadget
=> HTML/Javascript
3. Lalu copy kan kode
berikut kedalamnya :
<style type="text/css">
*{margin:0;padding:0;}
* html #z33sHare{
position: absolute;
}
#z33sHare{
right:0%;width:
70px;background:transparant;border:0px solid #E7E7E7;-moz-border-radius:3px;-webkit-border-radius:3px;
position:fixed;
bottom: 40%;
}
#z33sHare div{
padding:6px 6px 6px 5px;
}
#stw{
margin-left:-2px;
}
#sfs{
margin-left:-5px;
}
</style>
<div id="z33sHare">
<div id="ssl-box">
<div id="stw">
<div><a name="Widget"
type="Widget"
href="http://mankita.blogspot.com/">Share</a><script
src="Widget" type="text/javascript">
</script></div>
<!-- Place this tag where you want the +1 button to
render -->
<g:plusone size="tall"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src =
'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
<a href="http://twitter.com/share"
class="twitter-share-button"
data-count="vertical">Tweet</a><script
type="text/javascript"
src="http://platform.twitter.com/widgets.js"></script>
</div>
<!-- Tambah code lainnya
-->
<div>
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 =
document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton
DiggMedium"></a>
</div>
</div>
<div><a name="fb_share"
type="box_count"
href="http://www.facebook.com/sharer.php">Share</a><script
src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script></div>
<div
style="clear:both;"></div></div>
Silahkan Rubah :
# Yang berwarna Merah
silahkan tambahkan code Widget share lainnya jika sobat punya. Jika tidak
gunakan yang sudah tersedia diatas saja. Widget diatas sudah terdapat tombol
Facebook share, Twitter, Google+, dan Digg.
# Yang berwarna Hijau itu
merupakan posisi widget, sobat bisa gunakan right = posisi kanan dan left
= untuk posisi kiri.
# Dan untuk yang berwarna
Biru yaitu jarak (dalam %) dari bawah, sobat bisa ganti sesuai dengan ukuran
yang sobat mau.
4. Sekarang SAVE. Lalu refresh
bolag sobat dan akan terlihat hasilnya. Jika masih bingung silahkan bertanya.
Tidak ada komentar:
Posting Komentar