Pada postingan yang lalu, saya sudah memberikan tutorial tentang Cara Memasang Tombol Like Dan Share, dan pada kesempatan kali ini saya akan memberikan tutorial tentang Cara Memasang Fans Page FB dan Twitter Melayang di Blog. Widget yang akan saya bagikan ini sudah diberi efek melayang, jadi Anda tidak perlu khawatir widget ini nantinya akan memakan space yang besar di blog anda.
Berikut adalah langkah-langkahnya :
Berikut adalah langkah-langkahnya :
1. Login ke akun blog Anda
2. Pilih Tata Letak
3. Kemudian Klik Tambahkan Gadget => Pilih HTML/javascript.
4. Copy Kode di bawah ini dan pastekan di HTML/javascript tadi. kemudian simpan/save !!!
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute;
bottom:-1000px;
left:50%;
margin:0px 0px 90px -182px;
width:auto;
height:auto;
padding:17px 6px 2px 16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;}
#kotak-facebook a.close {
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
cursor:pointer;
}
</style>
<script src='http://tugasku4u.googlecode.com/files/tombol-close-menu-pribadi.js'/></script>
<div id='kotak-facebook'>
<font size="3"><b><u>Like & Follow Blog CybeR-SvD</u></b></font size>
<br/>
<div class="twitter">
<iframe title="" style="margin-top:10px;width:250px; height:20px" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351& align=&button=blue&id=twitter_tweet_button_0& lang=ID&link_color=&screen_name=ReezaRenaldy&show_count=& show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe></div>
<center>
<div class="fb-like-box" data-href="https://www.facebook.com/pages/Cyber-SvD/170367183060156" data-width="292" data-height="190" data-show-border="false" data-show-faces="true" data-stream="false" data-header="false"></div>
</center>
<br/>
<a class='close' href='#'>×</a>
</div>
Keterangan:
Warna Merah Ganti dengan Account Twitter Anda
Warna Hijau Ganti dengan Url Fans Page Anda
Warna Kuning Ganti Dengan Judul yg Anda Suka
5. Simpan, kemudian pilih Template => Edit Template
6. Cari kode <body>, Untuk mempermudah mencari silahkan tekan ctrl+F pada keyboard dan silahkan tulis kode di atas.
6. Cari kode <body>, Untuk mempermudah mencari silahkan tekan ctrl+F pada keyboard dan silahkan tulis kode di atas.
7. Setelah dapat, copy dan letakkan kode di bawah ini tepat di bawah kode <body>. Anda bisa melihat contohnya pada gambar di bawah...
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Kode di atas ditambah jika Anda belum memasang Fanspage pada sidebar blog Anda.
Jika ada yang kurang dimengerti, silahkan berkomentar di blog ini....
8. Simpan template Anda, Selesai... lihat blog Anda !!!
No comments:
Post a Comment