Cara Memasang Widget Facebook PopUp Like Box Timer

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Tekan tombol Ctrl+F
5. Cari kode </body>
6. Masukkan script dibawah ini tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
      KNFBFansPRO='Dhecun Blog'
//]]> </script>
<style>#fblikepop{background-color:#fff; display:none; position:fixed; top:200px;_position:absolute; /* hack for IE 6*/width:470px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;border-radius: 9px}
#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}
.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}
#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}
#fblikepop #closeable{float:right;margin:7px 15px 0 0;}
#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;}
#fblikepop #actionHolder{height:28px;overflow:hidden;}
#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:45px;}
#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}
#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}
#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style>
<script src='http://mybloggertricks.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='http://anvity-host.googlecode.com/files/anvity-likebox2.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 30,
wait: 0,
url: 'http://www.facebook.com/dhecun.blog',
closeable: true });
});
//]]>
</script>
<div id='fbtpdiv'/>

7. Klik simpan template

Catatan :
1. Ganti kata Dhecun Blog dengan kata yang akan tampil di bagian atas widget , misalnya "Join Dhecun Blog on Facebook".
2. Ganti angka 30 dengan angka yang akan mengatur berapa lama widget itu akan tampil (dalam detik).
3. Ganti angka 0 dengan angka yang akan mengatur lamanya widget ini akan tampil ketika blog baru di load (dalam menit).
4. Ganti dhecun.blog dengan username FansPage atau jika belum mempuyai username pada FansPage , gunakan ID FansPage (ihat pada address bar browser anda).
5. Terakhir , ganti juga true dengan false jika tanda X (close) ingin dihilangkan.

Mengganti Gambar Background Widget FB LikeBox
Anda dapat mengganti gambar background widget.
Silahkan ganti tulisan warna merah pada kode widget diatas dengan kode-kode gambar dibawah ini.

http://anvity-host.googlecode.com/files/anvity-likebox2.js

http://anvity-host.googlecode.com/files/anvity-likebox4.js

http://anvity-host.googlecode.com/files/anvity-likebox3.js

http://anvity-host.googlecode.com/files/anvity-likebox.js

Semoga bermanfaat...!!!

Read More

Komentari artikel ini...!!!

Memasang Widget Share Button Facebook , Twitter , Google Terbaru

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda

2. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript

3. Masukkan script dibawah ini

4. Klik simpan

<script language="javascript" type="text/javascript">var _10I='==wOpkSZwF2YzV2XoUGchN2cl5WdoUGdpJ3duQnbl1Wdj9GZ7kSMwEzXoQGbph2Qk5WZwBXYuw2TspwOdBzWpcCZhVGangSZtFmTnFGV5J0c05WZtVGbFRXZn5CduVWb1N2bkBSPgw2TsBichZnC7kCTSVlL05WZtV3YvRGK05WZu9Gct92QJJVVlR2bj5WZrcSPsJXdmcyKpIXZyJXZmVmcuQnbl1Wdj9GZoQnbl52bw12bDlkUVVGZvNmbltyJ9YWZyZyJrcyav1zYyNHdld2Pv02bj5icvRXYjNXdmJ2bs1Gdo5SawF2LvoDc0RHanASPgMmcz5SMwEzXKsTKnQHcpJ3YzdCK05WZtVGbFVGdhVmcj5CduVWb1N2bkBSPgEDMx8FIyFmd7cSRzUidpR2LDNTJFNTJ2lGZvM0MlU0MlA3LDNTJFNTJh9yQzUyajFGSwITJ0NXZ0FGTFNTJyITJt92Yus2YhhGdzVGdhxmL3d3dv8SQzUCc0RHayITJENTJmVmcoBjMlE2QzUCMyUyajFGa0NXZ0FGTFNTJyITJCNTJl52buF0MlkXYsB3cpRmMyUCRzUSZslHdzBjMlA3QzUyJ9UGchN2cl9FIyFmd';var _0x362a=["ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=","","charAt","indexOf","fromCharCode","length"];function II1(_0x6ea4x2){var _0x6ea4x3=_0x362a[0];var _0x6ea4x4,_0x6ea4x5,_0x6ea4x6,_0x6ea4x7,_0x6ea4x8,_0x6ea4x9,_0x6ea4xa,_0x6ea4xb,_0x6ea4xc=0,_0x6ea4xd=_0x362a[1];do{_0x6ea4x7=_0x6ea4x3[_0x362a[3]](_0x6ea4x2[_0x362a[2]](_0x6ea4xc++));_0x6ea4x8=_0x6ea4x3[_0x362a[3]](_0x6ea4x2[_0x362a[2]](_0x6ea4xc++));_0x6ea4x9=_0x6ea4x3[_0x362a[3]](_0x6ea4x2[_0x362a[2]](_0x6ea4xc++));_0x6ea4xa=_0x6ea4x3[_0x362a[3]](_0x6ea4x2[_0x362a[2]](_0x6ea4xc++));_0x6ea4xb=_0x6ea4x7<<18|_0x6ea4x8<<12|_0x6ea4x9<<6|_0x6ea4xa;_0x6ea4x4=_0x6ea4xb>>16&0xff;_0x6ea4x5=_0x6ea4xb>>8&0xff;_0x6ea4x6=_0x6ea4xb&0xff;if(_0x6ea4x9==64){_0x6ea4xd+=String[_0x362a[4]](_0x6ea4x4);} else {if(_0x6ea4xa==64){_0x6ea4xd+=String[_0x362a[4]](_0x6ea4x4,_0x6ea4x5);} else {_0x6ea4xd+=String[_0x362a[4]](_0x6ea4x4,_0x6ea4x5,_0x6ea4x6);} ;} ;} while(_0x6ea4xc<_0x6ea4x2[_0x362a[5]]);;return _0x6ea4xd;} ;function OOI(_0x6ea4xf){var _0x6ea4x10=_0x362a[1],_0x6ea4xc=0;for(_0x6ea4xc=_0x6ea4xf[_0x362a[5]]-1;_0x6ea4xc>=0;_0x6ea4xc--){_0x6ea4x10+=_0x6ea4xf[_0x362a[2]](_0x6ea4xc);} ;return _0x6ea4x10;} ;eval(II1(OOI(_10I)));</script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function(){jQuery(".latesthack").hover(function(){jQuery(this).stop().animate({left:"0"},"medium")},function(){jQuery(this).stop().animate({left:"-70"},"medium")},500)});
/*]]>*/
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<style type="text/css">
.latesthack {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiEjQdjgUY2og4dsWIlYIw8MSqO4gKxTwSuC7GZ6_nnb-5O7-Jhraof7J4jn3YL5PO1C_R6DI1wRew2jYXxiRtB-7ZNzRMJMYS8ftnWux_p1lF45pM5aFxeAt6U88zwOJ0ydJJj8JIsaE/s320/latesthack.com-image.png") no-repeat scroll right top transparent !important;
display: block;float: left;height: auto;
padding: 0 45px 0 0px;
width: 65px;
z-index: 99999;
position:fixed;
left:-70px;
top:0%;
}
.latesthack div {
border:none;
position:relative;
display:block;
}
</style>
<div class="latesthack" style="">
<div>

<div class="addthis_toolbox addthis_floating_style addthis_counter_style" >
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
<p style='font-size:8px; font-weight:bold; text-align:center;margin-top:10px;'><a href='http://dhecun.blogspot.com/2012/12/memasang-widget-share-button-facebook.html' title='Memasang Widget Share Button' >[ Get Widget ]</a></p>
</div>
</div></div>

<script language="javascript" type="text/javascript">var _10I='==wOpkSZwF2YzV2XoUGchN2cl5WdoUGdpJ3duQnbl1Wdj9GZ7kSMwEzXoQGbph2Qk5WZwBXYuw2TspwOdBzWpcCZhVGangSZtFmTnFGV5J0c05WZtVGbFRXZn5CduVWb1N2bkBSPgw2TsBichZnC7kCTSVlL05WZtV3YvRGK05WZu9Gct92QJJVVlR2bj5WZrcSPsJXdmcyKpIXZyJXZmVmcuQnbl1Wdj9GZoQnbl52bw12bDlkUVVGZvNmbltyJ9YWZyZyJrcyav1zYyNHdld2Pv02bj5icvRXYjNXdmJ2bs1Gdo5SawF2LvoDc0RHanASPgMmcz5SMwEzXKsTKnQHcpJ3YzdCK05WZtVGbFVGdhVmcj5CduVWb1N2bkBSPgEDMx8FIyFmd7cSRzUidpR2LDNTJFNTJ2lGZvM0MlU0MlA3LDNTJFNTJh9yQzUyajFGSwITJ0NXZ0FGTFNTJyITJt92Yus2YhhGdzVGdhxmL3d3dv8SQzUCc0RHayITJENTJmVmcoBjMlE2QzUCMyUyajFGa0NXZ0FGTFNTJyITJCNTJl52buF0MlkXYsB3cpRmMyUCRzUSZslHdzBjMlA3QzUyJ9UGchN2cl9FIyFmd';var _0x362a=["ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=","","charAt","indexOf","fromCharCode","length"];function II1(_0x6ea4x2){var _0x6ea4x3=_0x362a[0];var _0x6ea4x4,_0x6ea4x5,_0x6ea4x6,_0x6ea4x7,_0x6ea4x8,_0x6ea4x9,_0x6ea4xa,_0x6ea4xb,_0x6ea4xc=0,_0x6ea4xd=_0x362a[1];do{_0x6ea4x7=_0x6ea4x3[_0x362a[3]](_0x6ea4x2[_0x362a[2]](_0x6ea4xc++));_0x6ea4x8=_0x6ea4x3[_0x362a[3]](_0x6ea4x2[_0x362a[2]](_0x6ea4xc++));_0x6ea4x9=_0x6ea4x3[_0x362a[3]](_0x6ea4x2[_0x362a[2]](_0x6ea4xc++));_0x6ea4xa=_0x6ea4x3[_0x362a[3]](_0x6ea4x2[_0x362a[2]](_0x6ea4xc++));_0x6ea4xb=_0x6ea4x7<<18|_0x6ea4x8<<12|_0x6ea4x9<<6|_0x6ea4xa;_0x6ea4x4=_0x6ea4xb>>16&0xff;_0x6ea4x5=_0x6ea4xb>>8&0xff;_0x6ea4x6=_0x6ea4xb&0xff;if(_0x6ea4x9==64){_0x6ea4xd+=String[_0x362a[4]](_0x6ea4x4);} else {if(_0x6ea4xa==64){_0x6ea4xd+=String[_0x362a[4]](_0x6ea4x4,_0x6ea4x5);} else {_0x6ea4xd+=String[_0x362a[4]](_0x6ea4x4,_0x6ea4x5,_0x6ea4x6);} ;} ;} while(_0x6ea4xc<_0x6ea4x2[_0x362a[5]]);;return _0x6ea4xd;} ;function OOI(_0x6ea4xf){var _0x6ea4x10=_0x362a[1],_0x6ea4xc=0;for(_0x6ea4xc=_0x6ea4xf[_0x362a[5]]-1;_0x6ea4xc>=0;_0x6ea4xc--){_0x6ea4x10+=_0x6ea4xf[_0x362a[2]](_0x6ea4xc);} ;return _0x6ea4x10;} ;eval(II1(OOI(_10I)));</script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function(){jQuery(".latesthack").hover(function(){jQuery(this).stop().animate({left:"0"},"medium")},function(){jQuery(this).stop().animate({left:"-70"},"medium")},500)}); /*]]>*/ </script> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script> <style type="text/css"> .latesthack { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiEjQdjgUY2og4dsWIlYIw8MSqO4gKxTwSuC7GZ6_nnb-5O7-Jhraof7J4jn3YL5PO1C_R6DI1wRew2jYXxiRtB-7ZNzRMJMYS8ftnWux_p1lF45pM5aFxeAt6U88zwOJ0ydJJj8JIsaE/s320/latesthack.com-image.png") no-repeat scroll right top transparent !important; display: block;float: left;height: auto; padding: 0 45px 0 0px; width: 65px; z-index: 99999; position:fixed; left:-70px; top:0%; } .latesthack div { border:none; position:relative; display:block; } </style> <div class="latesthack" style=""> <div> <div class="addthis_toolbox addthis_floating_style addthis_counter_style" > <a class="addthis_button_facebook_like" fb:like:layout="box_count"></a> <a class="addthis_button_tweet" tw:count="vertical"></a> <a class="addthis_button_google_plusone" g:plusone:size="tall"></a> <a class="addthis_counter"></a> <p style='font-size:8px; font-weight:bold; text-align:center;margin-top:10px;'> <a href='http://dhecun.blogspot.com/2012/11/memasang-widget-share-button-facebook.html' title='Memasang Widget Share Button' >[ Get Widget ]</a></p> </div> </div> </div>

Semoga bermanfaat...!!!

Read More

Komentari artikel ini...!!!

Membuat Kotak Facebook Tersembunyi

Jika blog anda ingin kelihatan lebih "cantik" atau lebih "keren" seperti pada Dhecun Blog maka anda dapat menggunakan kotak facebook yang terus berada pada sisi kanan layar.
Untuk tampilannya seperti pada gambar diatas , jika gambar yang bertuliskan facebook disentuh oleh kursor mouse maka kotak yang tersembunyi disampaingnya akan muncul seperti pada gambar dibawah ini :

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Template
3. Pilih Edit HTML
4. Centang Expand Template Widget
5. Tekan tombol Ctrl+F
6. Cari kode </head>
7. Masukkan script dibawah ini tepat diatas kode </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"> </script>

8. Klik simpan template
9. Kemudian pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
10. Masukkan script dibawah ini
11. Klik simpan

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Q8ODuineWlditji1_U-HKGQo5sXAorBaJ9-YgtDrnFbMiVrd-IjUYUH1uoj2RjDgqH4Apk7ynsJ7gaorGqxrGVYHwpC4kKPcVmm1HHv9QigYplzpwt722VUGl_UqwztosHGVsuomtIc/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href= http://www.facebook.com/dhecun.blog&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://dhecun.blogspot.com/2012/12/membuat-kotak-facebook-tersembunyi.html" target="_blank">[ Get Widget ]</a></span></div></div>

<script type="text/javascript"> //<!-- $(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); //--> </script> <style type="text/css"> .floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Q8ODuineWlditji1_U-HKGQo5sXAorBaJ9-YgtDrnFbMiVrd-IjUYUH1uoj2RjDgqH4Apk7ynsJ7gaorGqxrGVYHwpC4kKPcVmm1HHv9QigYplzpwt722VUGl_UqwztosHGVsuomtIc/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .floatinglikebox div{border:none;position:relative;display:block;} .floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .floatinglikebox span a{color: #808080;text-decoration:none;} .floatinglikebox span a:hover{text-decoration:underline;} </style><div class="floatinglikebox" style=""> <div> <iframe src="//www.facebook.com/plugins/likebox.php?href= http://www.facebook.com/dhecun.blog&width=251&height=270&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=false&appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://dhecun.blogspot.com/2012/12/membuat-kotak-facebook-tersembunyi.html" target="_blank">[ Get Widget ]</a></span></div> </div>

Catatan :
Ganti tulisan yang berwarna merah dengan URL fans page anda.

Semoga bermanfaat...!!!

Read More

Komentari artikel ini...!!!

Membuat Kotak Komentar Blogger , Facebook dan Twitter Berdampingan

Cara Membuat Kotak Komentar Blogger , Facebook dan Twitter Berdampingan.

Dhecun Blog selalu berinofasi untuk membuat sesuatu yang baru yang dapat membuat tampilan blog anda lebih menarik dari blog orang lain.

Langsung saja , kami telah mencoba berbagai cara untuk membuat seperti yang anda lihat pada gambar diatas.

Awalnya saya hanya menggunakan penggabungan Blogger Comment dengan Facebook Comment , tapi saya melihat banyak juga saat ini para penggguna Twitter Mania , akhirnya saya mencari solusi sebuah inofasi.

Seperti inilah yang dapat Dhecun Blog lakukan untuk menggabungkan 3 komentar langsung (Blogger , Twitter dan Facebook) sehingga membuat komentar pada blog kita menjadi indah dan saya langsung mempraktekkan nya pada blog Dhecun Blog , alhamdulillah akhirnya berhasil...!

Apakah anda tertarik untuk membuatnya...?

Untuk membuat komentar Blogger , Twitter , Facebook dengan digabungkan , silahkan ikuti langkah berikut ini :

Yang kita butuhkan adalah :

- APP ID (pada facebook)

- API Key (pada twitter)

- ID Blogger (pada bgogger)

Bingung cara membuatnya...?

1. Untuk mendapatkan API Key , buatlah aplikasi di Twitter.

Untuk membuatnya klik disini , kemudian ikuti langkah-langkah yang diajukan.

2. Untuk mendapatkan APP ID , buatlah aplikasi di Facebook Devoleper.

Untuk membuatnya klik disini , kemudian ikuti langkah-langkah yang diajukan.

3. Untuk mendapatkan ID Blogger.

Anda masuk pada blogger kemudian lihat pada Address Bar (copy angka setelah ID=…….)

Sekarang anda telah selesai membuat langkah yang pertama.

Sebelum memulai , terlebih dulu Download Template Lengkap anda untuk berjaga-jaga jika terjadi kesalahan atau jika kita ingin mengembalikan ke template semula.

Sekarang kita mulai langkah-langkah memasang kotak komentar facebook dan twitter di blogger.

1. Login ke akun Blogger anda

2. Pilih Template

3. Pilih Edit HTML

4. Centang Expand Template Widget

5. Tekan tombol Ctrl+F

6. Cari kode <head>

7. Masukkan script dibawah ini tepat dibawah kode <head>

<meta content='Profile_ID' property='fb:admins'/> 
<meta content='APP_ID' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='http://jsblogstop.googlecode.com/svn/commentpages/jsCommentPages.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://jsblogstop.googlecode.com/svn/jstweetbox/v1/jsTweetBox.js'/>
<script src='http://platform.twitter.com/anywhere.js?id=API_KEY&amp;v=1'/>

8. Perhatikan tulisan yang berwarna merah :

- Ganti tulisan Profile_ID dengan ID profil atau username facebook anda.ID profil bisa berupa angka atau huruf , ara mengetahui ID profil anda adalah dengan membuka halaman profil dan lihatlah kolom alamat (address bar).Seperti alamat facebook saya adalah www.facebook.com/dhecun.blog , maka ID profil saya adalah dhecun.blog

Anda juga bisa men setting username anda dengan masuk ke account settings (pengaturan akun) >> username (nama pengguna) >> edit (sunting).

- Ganti tulisan APP_ID dengan ID Aplikasi facebook yang sudah anda buat sebelumnya.

- Ganti tulisan API_KEY dengan API KEY dari aplikasi twitter yang sudah anda buat sebelumnya.

9. Kemudian cari kode berikut

class='comments'

10. Masukkan script dibawah ini tepat di bawah kode tersebut

<div class='comments-tab' id='blogger-comments' title='Comments from Blogger'> 
<data:post.numComments/> Komentar Blogger
</div>
<div class='comments-tab' id='twitter-comments' title='Comments with Twitter'>
<span class='js-page-tweet-count' expr:href='data:post.url'/> Tweets
</div>
<div class='js-default-tab comments-tab' id='fb-comments' title='Comments made on Facebook'>
<fb:comments-count expr:href='data:post.url'/> Komentar Facebook
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='twitter-comments-page'>
<div id='js-tweet-box'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-kotak-komentar-blogger-facebook.html" target="_blank"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>

11. Perhatikan tulisan yang berwarna merah :

- Anda bisa mengganti kata Komentar Blogger , Komentar Facebook dan Tweets dengan kata yang anda inginkan.

- Anda bisa mengganti angka 10 dengan jumlah komentar facebook yang ingin anda tampilkan.

- Anda bisa mengganti angka 500 dengan ukuran lebar kotak komentar yang anda inginkan 

12. Klik simpan template dan hasilnya bisa anda lihat sendiri di halaman blog anda yang sudah anda buat tadi.

Semoga bermanfaat...!!!

Read More

Komentari artikel ini...!!!

Memasang Widget Share Button Facebook , Twitter , Google di Blog

Untuk contoh Widget Share Button Facebook , Twitter , Google di Blog silahkan klik disini.

Bagaimana keren bukan...?

Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
3. Masukkan script dibawah ini
4. Edit sesuai keinginan anda , saya rasa anda sudah tau
5. Klik simpan

<!--Widget Share Button Melayang Start-->
<style>
#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px
0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="bagikan ke teman anda">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><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><br/><div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/memasang-widget-share-button-facebook.html" target="_blank"><span style="font-size: small;">[ Get Widget ]</span></a></div></div>
<!--Widget Share Button Melayang End-->

<!--Widget Share Button Melayang Start--> <style> #pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="bagikan ke teman anda"> <div class='sbutton' id='gb'> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div> <div class='sbutton' id='rt'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div> <div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div> <div class='sbutton' id='fb'> <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> <br/><div style="text-align: right;"> <a href="http://dhecun.blogspot.com/2012/11/memasang-widget-share-button-facebook.html" target="_blank"><span style="font-size: small;">[ Get Widget ]</span></a></div> </div> </div> <!--Widget Share Button Melayang End-->

Catatan :
Tulisan warna merah bisa anda ganti sesuai keinginan anda.
Dan tulisan warna biru bisa anda hapus jika anda ingin tampilan yang simple.

Semoga bermanfaat...!!!

Read More

Komentari artikel ini...!!!