Not Found: Desember 2012

Senin, 17 Desember 2012

Cara Membuat Share Button Melayang

Cara membuat Share Button Twitter, Like Share, Google +1 Melayang. Widget buat share button. Bagi sobat yang belum mempunyai tombol share button alangkah baiknya sobat mempunyai widget ini pada blog sobat. Karena dengan widget ini kita akan lebih mudah bila kita ingin share-share artikel kita ke situs jejaring sosial seperti Facbook, twitter, google + dll.

Cara Membuat Share Button Melayang:
1. Login blog
2. Pilih Tata Letak
3. Pilih Add Gadget (HTML/Javascript)
4. Lalu pastekan kode dibawah ini

<style>
#pageshare {position:fixed; bottom:5%; right:0px; 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>
<br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://ilovebloggink.blogspot.com/2012/12/cara-membuat-share-button-melayang.html" target="blank"><font color="blue">[Get Widget]</font></a></div>
</div>

Simpan dan lihat hasilnya. Selamat mencoba

Minggu, 16 Desember 2012

Cara Membuat Page Number Navigation With Colour

Page Number Navigation With Colour adalah widget yang berguna untuk navigasi ke artikel berikiutnya namun yang ini dalam bentuk nomor serta dengan berbagai warna. Untuk Demo Silahkan lihat menu beranda blog ini. Cara membuatnya simak langkah-langkah dibawah ini:

1. login
2. buka menu tata letak lalu add gadget (HTML/JavaScript)
3. lalu pilih salah satu dibawah ini sesuia selera sobat (warna)

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixR7zjsmtsp_T-ANut5MJhh0V6nLxLBrmDnQx9XFqyBLE5Wgs9rcYiRZsNjotbU66h327aB4NQRK7TK-5816EH-PNxYL-j2RLDlV96RRIyrt1n7bdOeKyUhRJiXTgdqd-Fb6ZNh-KYF-8/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
margin:0px 1px 0 1px;padding:3px 10px;color:#EEEEEE;line-height:30px;cursor:pointer;}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixR7zjsmtsp_T-ANut5MJhh0V6nLxLBrmDnQx9XFqyBLE5Wgs9rcYiRZsNjotbU66h327aB4NQRK7TK-5816EH-PNxYL-j2RLDlV96RRIyrt1n7bdOeKyUhRJiXTgdqd-Fb6ZNh-KYF-8/s1600/yellow-butt.png) repeat-x;background-position:-10px -43px;
border:1px solid #FB5106;-webkit-border-radius:7px;
-moz-border-radius:7px;border-radius:7px;color:#ffffff;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixR7zjsmtsp_T-ANut5MJhh0V6nLxLBrmDnQx9XFqyBLE5Wgs9rcYiRZsNjotbU66h327aB4NQRK7TK-5816EH-PNxYL-j2RLDlV96RRIyrt1n7bdOeKyUhRJiXTgdqd-Fb6ZNh-KYF-8/s1600/yellow-butt.png) repeat-x;background-position:0px -43px;border:1px solid #FD6C02;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;line-height:30px;padding:3px 10px;color:#ffffff;}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixR7zjsmtsp_T-ANut5MJhh0V6nLxLBrmDnQx9XFqyBLE5Wgs9rcYiRZsNjotbU66h327aB4NQRK7TK-5816EH-PNxYL-j2RLDlV96RRIyrt1n7bdOeKyUhRJiXTgdqd-Fb6ZNh-KYF-8/s1600/yellow-butt.png) repeat-x;background-position:-55px -43px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:1px solid #FB5106;-webkit-border-radius:7px; -moz-border-radius:7px;border-radius:7px;color:#FFFFFF;text-decoration:underline;font-weight:bold;} </style>
<a href="http://www.vikrymadz.web.id/" target="_blank" title="vikrymadz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVsOlw1yVT0crCNCh-6jVPsTPDnvaA5DNtq9VG2kifXlejkMRAcPxLifOddEJ3sz0chp41fUTuup_RV5a1ZNEv73At1wmvqV_mOatzL0X2A2X2ARXZhwgf2o0MLKOcEWfyHy7tleKCr2I/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://vikrymadz.googlecode.com/files/pagenumbervikrymadz.js'></script>

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLxMdga71fEhZ9HHqdf2ibzPteRFXqBmOi-TF5efupWOVTKQwnJURfCUHvDwUj59IWMIw6wexND0U_b_unFT116BZkAYFKCCad0H_MsOTivH8Nqmi1J4btll4Ystd-5LbGPAQV-JNa3lE/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;margin:0px 1px 0 1px;padding:3px 10px;color:#EEE;line-height:30px;cursor:pointer;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLxMdga71fEhZ9HHqdf2ibzPteRFXqBmOi-TF5efupWOVTKQwnJURfCUHvDwUj59IWMIw6wexND0U_b_unFT116BZkAYFKCCad0H_MsOTivH8Nqmi1J4btll4Ystd-5LbGPAQV-JNa3lE/s1600/greendiamond.png) repeat-x;background-position:0px -30px;
border:2px solid #006666;-webkit-border-radius:20px;
-moz-border-radius:20px;border-radius:20px;color:#FFF;-text-decoration:underline;}.showpageOf{margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLxMdga71fEhZ9HHqdf2ibzPteRFXqBmOi-TF5efupWOVTKQwnJURfCUHvDwUj59IWMIw6wexND0U_b_unFT116BZkAYFKCCad0H_MsOTivH8Nqmi1J4btll4Ystd-5LbGPAQV-JNa3lE/s1600/greendiamond.png) repeat-x;background-position:0px -0px;border:2px solid #555;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;line-height:30px;padding:3px 10px;color:#EEE;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);}.showpagePoint {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLxMdga71fEhZ9HHqdf2ibzPteRFXqBmOi-TF5efupWOVTKQwnJURfCUHvDwUj59IWMIw6wexND0U_b_unFT116BZkAYFKCCad0H_MsOTivH8Nqmi1J4btll4Ystd-5LbGPAQV-JNa3lE/s1600/greendiamond.png) repeat-x;background-position:0px -30px;margin:0 3px 0 3px;padding:3px 10px;line-height:30px;cursor:pointer;white-space:nowrap;border:2px solid #007777;-webkit-border-radius:20px; -moz-border-radius:20px;border-radius:20px;color:#EEE;text-decoration:underline;font-weight:bold;-webkit-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);-moz-box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);box-shadow:6px 6px 12px 4px rgba(0,0,0, 0.2);} </style>

<a href="http://www.vikrymadz.web.id/" target="_blank" title="vikrymadz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVsOlw1yVT0crCNCh-6jVPsTPDnvaA5DNtq9VG2kifXlejkMRAcPxLifOddEJ3sz0chp41fUTuup_RV5a1ZNEv73At1wmvqV_mOatzL0X2A2X2ARXZhwgf2o0MLKOcEWfyHy7tleKCr2I/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://vikrymadz.googlecode.com/files/pagenumbervikrymadz.js'></script>

<style type="text/css">.blog-pager,#blog-pager{font-family:arial, serif;font-weight:bold;font-size:12px;width:98%;}.showpageNum a,.showpage a {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitlx1I4H7QMIGYLFg7eiqYe1p7FRL7T0chd3uVfNh1oXgsZrpxQLujpHaNNRfQN5bfXAleET980L75goCxyG9noA2E6cClbZd0uQgaxFqyzmbqd8qGRkK0KTMMCF8nADmsu5_YRSOqabc/s1600/darkblue.png) repeat-x;
border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
margin:0px 1px 0 1px;padding:3px 10px;color:#FFF;line-height:30px;cursor:pointer;white-space:nowrap;
}.showpageNum a:hover,.showpage a:hover {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitlx1I4H7QMIGYLFg7eiqYe1p7FRL7T0chd3uVfNh1oXgsZrpxQLujpHaNNRfQN5bfXAleET980L75goCxyG9noA2E6cClbZd0uQgaxFqyzmbqd8qGRkK0KTMMCF8nADmsu5_YRSOqabc/s1600/darkblue.png) repeat-x;
border:2px solid #5C8CFB;-webkit-border-radius:7px;
-moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:none;
}.showpageOf{
margin:0 8px 0 0;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitlx1I4H7QMIGYLFg7eiqYe1p7FRL7T0chd3uVfNh1oXgsZrpxQLujpHaNNRfQN5bfXAleET980L75goCxyG9noA2E6cClbZd0uQgaxFqyzmbqd8qGRkK0KTMMCF8nADmsu5_YRSOqabc/s1600/darkblue.png) repeat-x;border:2px solid #5C8CFB;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;
line-height:30px;padding:3px 10px;color:#FFF;
}.showpagePoint {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitlx1I4H7QMIGYLFg7eiqYe1p7FRL7T0chd3uVfNh1oXgsZrpxQLujpHaNNRfQN5bfXAleET980L75goCxyG9noA2E6cClbZd0uQgaxFqyzmbqd8qGRkK0KTMMCF8nADmsu5_YRSOqabc/s1600/darkblue.png) repeat-x;
margin:0 3px 0 3px;padding:3px 10px;
line-height:30px;cursor:pointer;white-space:nowrap;
border:2px solid #5C8CFF;-webkit-border-radius:7px;
-moz-border-radius:7px;border-radius:7px;color:#e4905a;text-decoration:underline;font-weight:bold;
} </style>

<a href="http://www.vikrymadz.web.id/" target="_blank" title="vikrymadz"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVsOlw1yVT0crCNCh-6jVPsTPDnvaA5DNtq9VG2kifXlejkMRAcPxLifOddEJ3sz0chp41fUTuup_RV5a1ZNEv73At1wmvqV_mOatzL0X2A2X2ARXZhwgf2o0MLKOcEWfyHy7tleKCr2I/s1600/page-number.png" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://vikrymadz.googlecode.com/files/pagenumbervikrymadz.js'></script>

4. simpan template dan coba lihat hasilnya. Selamat mencoba..

sumber

Sabtu, 15 Desember 2012

Css3 Beautiful Label Widget

Css3 Beautiful Labels Widget. Langsung saja saya kasih screen shootnya :

ok bagi sobat yang pengen tahu cara membuatnya silahkan simak cara membuat Css3 Beautiful Labels Widget

1. login blog
2. buka menu template > edit HTML > lanjutkan
3. lalu cari kode ]]></b:skin>
4. lalu letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

.label-size a {
display: inline-block;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
padding: 4px 7px;
font-family: 'Helvetica Neue', helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
height: 14px;
vertical-align: middle;
margin-bottom: 6px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}
.label-size a {
color: #996633;
border: 1px solid #DDA13C;
background: rgb(238,177,75);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
background: -webkit-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background: -o-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background: -ms-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
background: linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeb14b', endColorstr='#cc912d',GradientType=0 );
}
.label-size a:before {
content: '\2022';
color: #FFFFFF;
margin-right: 4px;
font-size: 15px;
line-height: 13px;
height: 13px;
vertical-align: text-top;
text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}
.label-size a:hover {
text-decoration: none;
background: rgb(240,183,86);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
background: -webkit-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background: -o-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background: -ms-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
background: linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b756', endColorstr='#d6a044',GradientType=0 );
}

5. Simpan template dan lihat hasilnya.

Selasa, 11 Desember 2012

Memodifikasi Followers

Tutorial blog yang ringan, tapi mungkin bermanfaat, kita coba memodifikasi followers blogger. Biasanya followers dipasang langsung pada widget yang sudah tersedia di blogger, tapi kali ini kita akan memasangnya di widget HTML/Javascript.

Tertarik? Langsung saja ikuti langkah-langkah dibawah ini:

Masuk ke Rancangan
Klik Elemen Laman
Pilih Tambah Gadget
Klik yang HTML/JavaScript
Kemudian masukkan kode followers dibawah ini :

<script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript"></script>

<div id="div-eknxr14kfzlq" style="width:280px;border:1px solid #cccccc;"></div>

<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#dedede';
skin['ENDCAP_BG_COLOR'] = '#f0f0f0';
skin['ENDCAP_TEXT_COLOR'] = '#444';
skin['ENDCAP_LINK_COLOR'] = '#444';
skin['ALTERNATE_BG_COLOR'] = '#fff';
skin['CONTENT_BG_COLOR'] = '#f9f9f9';
skin['CONTENT_LINK_COLOR'] = '#444';
skin['CONTENT_TEXT_COLOR'] = '#444';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#444';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#444';
skin['CONTENT_HEADLINE_COLOR'] = '#444';
skin['NUMBER_ROWS'] = '3';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-eknxr14kfzlq',
site: '06215030860304111239' },
skin);
</script>

Ganti kode yang berwarna merah dan orange dengan kode id blog sobat
Kode berwarna hijau adalah lebar widget, sesuaikan dengan template sobat
Kode warna ungu adalah warna widget blog, sobat bisa ganti. Kode Warna cek DISINI
Simpan.

Keterangan :

- Untuk mencari kode yang berwarna merah dan orange, jika sebelumnya sobat sudah memasang widget followers, maka sobat bisa klik kanan pada halaman blog kemudian klik “view page source” lalu klik CTRL+F dan ketik saja followers. Dari situ sobat dapat melihat kode id dan site dari blog sobat. Selamat mencoba.

Cara Membuat Menu Tab View

Untuk menghemat tempat, tab view menu sangat efisien. Ukuran yang relatif kecil tapi bisa memuat banyak space. Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik – baik tutorial ini dan yang paling penting jangan lupa untuk backup template sobat terlebih dahulu.

Silahkan login ke blogger dengan ID sobat tentunya.
Tata Letak.
Pilih Edit HTML.
Jangan lupa backup template sobat terlebih dahulu dengan mengklik Download Template Lengkap.
Kemudian letakkan kode javascript berikut sebelum kode </head>

Setelah itu letakkan kode berikut di atas kode ]]></b:skin>

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Utama Atas */
text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Kemudian Simpan Template.

Langkah selanjutnya, silahkan sobat klik Tata Letak.
Klik Elemen Halaman dan tambahkan Gadget.
Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Kemudian Simpan.

Keterangan :

Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi.
Kode yang berwarna orange silahkan sobat isi dengan judul - judul dari menu.
Dan yang berwarna ungu, adalah isi dari menu. Sobat bisa menambahkan link, gambar, banner, dll.

Oke sobat, selamat mencoba.

Selasa, 04 Desember 2012

Cara Membuat Page Navigasi Tombol Halaman

Page Navigation adalah sebuah Widget yang digunakan pada Web ataupun Blog untuk memperlihatkan postingan atau artikel pada Webblog tersebut per halaman (tombol halaman seperti om Yahoo),contohnya seperti gambar dibawah ini:

Untuk membuatnya sangatlah mudah
1. Login ke Blogger
2. Lalu Klik Menu Templates/Tata Letak
3. Klik Add Widget Element /Tambah Widget
4. Pilih Menu HTML/Java Script
5. Lalu Copy Script di bawah dan Pastekan pada kotak HTML tersebut
6. Simpan Winget tersebut
7. Pindahkan Widget tersebut Tepat di bawah Post
8. Lalu Simpan

Simpan dan selesai. Selamat mencoba :)

Cara Membuat Scroll Pada Archive Blog

Untuk jelasnya langsung saja ikuti langkah dibawah ini :

1. Login ke Acount Blogger atau Dashboard
2. Pilih Layout
3. Llalu klik Edit HTML
4. Centang dulu Expand Widget Templates
5. Cari kode yang seperti ini : <div id='ArchiveList'> atau kata "Archive". Untuk memudahkan mencarinya , gunakan saja Ctrl +F.
6. Kalau sudah, tambahkan kode warna hijau itu sebagai scollnya
Lengkapnya kode tersebut seperti dibawah ini :

<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:250; height:220px; padding:10px;border:1px solid #eee'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div></div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>

Catatan:
Angka 200px adalah tinggi kotak scroll itu, silahkan disesuaikan.

Mungkin saja diblog anda kodenya berbeda, Oleh karena itu carilah yang mirip dan perlu dicoba, yang paling penting jangan lupa templatenya dibackup dulu.

Kalau sudah jangan lupa save template. Selamat mencoba.

Cara Membuat Recent Post Thumbail di Blog

Cara Menambahkan Artikel Terbaru/Recent Post Otomatis Di Blog. Widget ini memiliki tampilan yang tidak kalah menarik dari widget sejenisnya. sebagai contoh silakan lihat gambar diatas.

Tertarik? Anda tinggal mengikuti langkah-langkah di bawah ini:

1. Login Blogger > Rancangan > Tambah Widget > Pilih HTML/Javascript
2. Copy paste kode di bawah ini ke HTML/Javascript

<div style="background:#ebebeb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizT15FSdn1LIyjl8u-0KOTbOHLwKGKTCl-6yPUIlz6EUwr549mg24FXVIk8C-SZZbtbO0hd_dTh4UtWx2Af_v3gw7O7aFT177w1radqwgscAqIh-d342draaHbnfQ3nQ6gcomaX52FkdnJ/s1600/auto+recent+post+for+blogger.jpg); font-size:12px; padding:6px; width:288px; height:276px; text-transform: uppercase;">
<div style="padding-top:5px;">
<div style="overflow:auto; height:265px; width:281px;-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;">
<script language="JavaScript">

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_cCK2XzIUvPBySznEewh-BgC4xbnfr0CBjkvlFIs3cLavkPb5GjpTo7_zv1qf6LMyJy9qnPN6Gz3g9TEYS5sX6Kzsb5ortFPOeEbvf6jJ-Ot1RXOCmdvm-IXWeY2mJFPjo-B3CPuuQIt/s1600/IdRowRight.jpg";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_cCK2XzIUvPBySznEewh-BgC4xbnfr0CBjkvlFIs3cLavkPb5GjpTo7_zv1qf6LMyJy9qnPN6Gz3g9TEYS5sX6Kzsb5ortFPOeEbvf6jJ-Ot1RXOCmdvm-IXWeY2mJFPjo-B3CPuuQIt/s1600/IdRowRight.jpg";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_cCK2XzIUvPBySznEewh-BgC4xbnfr0CBjkvlFIs3cLavkPb5GjpTo7_zv1qf6LMyJy9qnPN6Gz3g9TEYS5sX6Kzsb5ortFPOeEbvf6jJ-Ot1RXOCmdvm-IXWeY2mJFPjo-B3CPuuQIt/s1600/IdRowRight.jpg";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_cCK2XzIUvPBySznEewh-BgC4xbnfr0CBjkvlFIs3cLavkPb5GjpTo7_zv1qf6LMyJy9qnPN6Gz3g9TEYS5sX6Kzsb5ortFPOeEbvf6jJ-Ot1RXOCmdvm-IXWeY2mJFPjo-B3CPuuQIt/s1600/IdRowRight.jpg";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7_cCK2XzIUvPBySznEewh-BgC4xbnfr0CBjkvlFIs3cLavkPb5GjpTo7_zv1qf6LMyJy9qnPN6Gz3g9TEYS5sX6Kzsb5ortFPOeEbvf6jJ-Ot1RXOCmdvm-IXWeY2mJFPjo-B3CPuuQIt/s1600/IdRowRight.jpg";

showRandomImg = true;

boxwidth = 260;

cellspacing = 5;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 35;

thumbheight = 35;

fontsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 15;

home_page = "http://ilovebloggink.blogspot.com/";

</script>

<script src="http://recentpostkucoba.googlecode.com/files/Recentpostyoutblog.txt" type="text/javascript"></script></div></div></div>

Keterangan silakan ganti tulisan warna pada home_page = "http://ilovebloggink.blogspot.com/"; silakan Anda ganti dengan link atau url blog Anda.

3. Setelah selesai Simpan.

Membuat Widget Scrolling Related Post di Blog

Widget related post atau artikel terkait yang ingin saya share kali ini sedikit berbeda dengan widget related post statis (diam) yang sering kita lihat pada blog pada umumnya. Kali ini kita akan belajar membuat widget related post dengan fitur Carousel (Carousel Related Post). Keunikan widget related post ini ada pada scrolling dengan efek marque dari thumbnail dan judul artikel sesuai label terkait dari posting yang ada, Dan apabila mouse kita sorotkan pada thumbnail atau judul (mouseover).

Cara Membuat Carousel Related Post Di Blogspot

1. Login ke dashboard blogger anda, pilih Rancangan > Edit HTML, centang Expand widget template.
2. Cari kode </head> pada template anda.
3. Letakkan kode CSS/JS dibawah ini diatas kode </head>.

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {float:center;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
#related-posts h2{font-size: 1.6em;font-weight: bold;color:#000;font-family:Arial, Georgia;margin-bottom:0.75em;margin-top: 0em;padding-top: 0em;}
#related-posts a{-webkit-transition: background 1s ease, color 1s ease;-moz-transition: background 1s ease, color 1s ease;-o-transition: background 1s ease, color 1s ease;}
#related-posts a:hover{background-color:#d4eaf2;-webkit-transition: background 1s ease, color 1s ease;-moz-transition:background 1s ease, color 1s ease;-o-transition:background 1s ease, color 1s ease;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px;-o-border-radius:5px;}
.tooltip{width: 115px; color:#000;font:lighter 12px/1.3 Arial,sans-serif;text-decoration:none;text-align:left}
.tooltip span.top{padding:20px 5px 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwNa_L3A3G6Z_TqEujx0kDhMAGRW-D33CUzuOBmap_PTSYqietX5q-SXZCm98kJAi6TPAcpTsIE-BYcJVm6bAPMXIPHLxAL8OpSnkwz3eaiDlUPzazzgID8L6cAYehFbOtpYOCxYwAOlk/s1600/bt.png) no-repeat top;}
.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwNa_L3A3G6Z_TqEujx0kDhMAGRW-D33CUzuOBmap_PTSYqietX5q-SXZCm98kJAi6TPAcpTsIE-BYcJVm6bAPMXIPHLxAL8OpSnkwz3eaiDlUPzazzgID8L6cAYehFbOtpYOCxYwAOlk/s1600/bt.png) no-repeat bottom;}
</style>
<script type='text/javascript'>window.onload=function(){enableTooltips("calcList")};imgBT=new Image();imgBT.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDRyHJ4DlD7qsN2SqE5kkFblS7fCM_vC2SLNKUCQPmO1wJIZ0GmqFILICC6scByxaaJuze0tMQKKA66RPWn4D3SO9yNMDPar3jCXnd27WWxnHUodZv7Zwxmkxv-1YHiyxW1msB-cvmKUY/s1600/noimage.jpg';</script>
<script src='http://dvslabs.googlecode.com/files/rp-bubbled-thumbnails.js' type='text/javascript'></script>
</b:if>

4. Kemudian cari kode <div class='post-footer-line post-footer-line-1'> pada template anda. Letakkan kode HTML dibawah ini dibawah kode <div class='post-footer-line post-footer-line-1'>. Jika template anda kodenya ada 2, maka letakkan kode HTML dibawah kode <div class='post-footer-line post-footer-line-1'> yang pertama.

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop>
<h3>Related Posts</h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=10;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>

5. Preview dulu untuk melihat tampilan hasilnya.
6. Jumlah maksimum posting yang ditayangkan adalah 20. Silahkan ganti angka 10 yang saya tandai warna ungu jika anda ingin merubahnya.
7. Save/Simpan template anda.

sumber:

Senin, 03 Desember 2012

Cara Membuat Widget Melayang Floating Follower, Twitter dan Facebook Like Box (3 in 1)

3 in 1 floating widget yang menurut saya merupakan salah satu widget blogger terbaik, 3 buah widget melayang yang digabung dalam 1 gadget, dimana dalam gadget ini memuat widget follower blogger (Google Friend Connect), widget update status Twitter dan widget Facebook Like Box sekaligus !!

Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box :

1. Login ke dashboard blogger anda, pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).
2.Copy script master widget dibawah ini dan paste pada gadget.

3. Kustomisasi widget :
Ganti tulisan CONTENT BLOGGER HERE dengan kode HTML Google Friend Connect anda.
Ganti tulisan CONTENT TWITTER HERE dengan kode HTML widget status Twitter anda.
Ganti tulisan CONTENT FACEBOOK HERE dengan kode HTML Facebook Like Box anda.

4. Simpan dan selamat mencoba

Cara Memodifikasi Icon List Pada Postingan

Cara Memodifikasi Icon List Pada Postingan. Belum paham judulnya ya???? nih langsung aja ya tak kasih lihat contohnya...

Tertarik? Ikuti langkah-langkah dibawah ini:

1. login blogger
2. rancangan >> edit HTML
3. Cari kode .post ul li { . . . . } keterangan : titik-titik adalah kode yang lain (Gunakan Ctrl + f )
4. Jika tidak ketemu cari kode .post{ . . . . } saja
5. Ganti kode tersebut .post ul li { . . . . } dengan kode berikut ini (Note : jika menggunakan kode .post{ . . . . } maka letakkan kode di bawah ini setelah kode .post{ . . . . } )

.post ul li {
list-style: none url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYN3dAqnb8XcPMZD8AWaKSmXDBHXpWgfURHGnD1kX4cn-_Y1I5NLhv1gwIbuE048G0kBsGublbHEM1sKhjKlh1-nPdHhJlIx0FqQVPxZo-f4WPwE0D5VLyWocCFhXI-CI3mzLVnrCOj5U/s1600/icon_star.PNG) inside;
vertical-align: middle;
padding: 0px;
margin-left: -10px;
margin-right: 10px;
}

NB :kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYN3dAqnb8XcPMZD8AWaKSmXDBHXpWgfURHGnD1kX4cn-_Y1I5NLhv1gwIbuE048G0kBsGublbHEM1sKhjKlh1-nPdHhJlIx0FqQVPxZo-f4WPwE0D5VLyWocCFhXI-CI3mzLVnrCOj5U/s1600/icon_star.PNG bisa dirubah dengan kode gambar atau icon milik sobat sendiri (kecil)
6. Simpan dan lihat hasilnya....

Cara Membuat Kotak Komentar Blogger, Facebook dan Twitter Berdampingan di Blog

Cara Membuat Kotak Komentar Blogger, Facebook dan Twitter Berdampingan di Blogger. Semoga bermanfaat dan dapat membuat blog kita meningkat Trafficnya, hehe

Untuk membuat kotek komentar Blogger, Twitter, Facebook dengan digabungkan seperti gambar diatas, ikuti langkah dibawah ini :

Yang kita butuhkan adalah :
- APP ID (pada facebook)
- API Key (pada twitter)
- ID Blogger (pada bglogger)

Bingung cara membuatnya-??
Naahh…
Langsung saja untuk mendapatkan API Key buatlah aplikasi di Twitter,
Untuk membuat nya KLIK DISINI
kemudian ikuti langkah-langkah yang diajukan. (mudah)

Untuk mendapatkan APP ID buatlah aplikasi di Facebook Devoleper
Untuk membuatnya KLIK DISINI
kemudian ikuti langkah-langkah yang diajukan. (mudah)

Untuk mendapatkan ID Blogger,
Kita masuk pada blogger kemudian lihat pada Address Bar (copy angka setelah ID=…….)

Sekarang selesai langkah pertama.
Sebelum memulai, terlebih dulu download template lengkap untuk berjaga-jaga barangkali kita ingin mengembalikan ke template semula atau jika terjadi kesalahan. Sekarang kita mulai langkah-langkah memasang kotak komentar facebook dan twitter di blogger.

1. Masuk ke akun blogger, lalu pilih Rancangan > Edit HTML > Centang 'Expand Template Widget'
2. Tekan tombol Ctrl+F lalu cari kode <head>
3. Masukkan kode berikut tepat di bawah kode :
3. Masukkan kode berikut tepat di atas 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&v=1'/>

Perhatikan kode berwarna ungu :

Ganti tulisan Profile_ID dengan ID profil atau username facebook kita. ID profil bisa berupa angka atau huruf. Cara mengetahui ID profil kita adalah dengan membuka halaman profil dan lihatlah kolom alamat (address bar). Seperti alamat facebook saya adalah www.facebook.com/rizky.vanhalen, maka ID profil Saya adalah rizky.vanhalen.
Kita juga bisa mengeset username dengan masuk ke account settings (pengaturan akun) > username (nama pengguna) > edit (sunting).
Ganti tulisan APP_ID dengan ID Aplikasi facebook kita yang tadi kita buat sebelumnya
Ganti tulisan API_KEY dengan API KEY dari aplikasi twitter yang kita buat sebelumnya

Berikutnya, cari kode class='comments'
Masukkan kode berikut tepat di bawah kode class='comments'

<div class='comments-tab' id='blogger-comments' title='Comments from Blogger'>
<data:post.numComments/> Comments
</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
</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 == "item"'>
<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'>

Perhatikan kode berwarna ungu:

Kita bisa mengganti kata Comments dan Tweets dengan kata lainnya yang diinginkan
Kita bisa mengganti angka 10 dengan jumlah komentar facebook yang ingin ditampilkan
Kita bisa mengganti angka 500 dengan ukuran lebar kotak komentar yang diinginkan.
Simpan template dan lihat hasilnya. Selamat mencoba

Cara Membuat Daftar Isi dengan Efek Sliding JQuery

Cara Membuat Daftar Isi dengan Efek Sliding Jquery.

login blog
buka menu posting >> entri baru
lalu masukkan kode dibawah ini

<link href="http://sites.google.com/site/congcot/kode-1/CCcss1.css" media="screen" rel="stylesheet" type="text/css"></link> <script src="http://sites.google.com/site/congcot/kode-1/CCjs1.js">
</script> <script src="http://ilovebloggink.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">
</script> <script type="text/javascript">
var accToc=true;
</script> <script src="http://sites.google.com/site/congcot/kode-1/CCjs2.js" type="text/javascript"> </script>

NB :

http://ilovebloggink.blogspot.com ganti dengan alamat blog sobat. Terbitkan dan lihat hasilnya.
untuk Demo bisa di lihat di daftar isi pada menu bar blog saya. Selamat mencoba

Minggu, 02 Desember 2012

Cara Memasang Komentar Facebook di Blog (Lengkap)

Setelah beberapa waktu lalu saya membuat Cara Cepat Memasang komentar Facebook di Blog, kali ini kita akan sama-sama belajar cara lengkap memasang komentar facebook di blog. Untuk cara yang satu ini memang cukup rumit, untuk itu simak baik-baik tutorial pasang komentar facebook di blog berikut ini.

1. Anda harus terlebih dahulu membuat aplikasi anda terlebih dahulu , untuk itu silahkan masuk ke akun facebook anda .
2. Lalu buka link ini Facebook developer page
3. Setelah membuka link tersebut anda akan dibawa ke link setup membuat aplikasi Anda verifikasi melalui mobile phone , cukup masukan nomor handphone anda dan ikuti langkah selanjutnya .
4. Setelah terverifikasi anda masuk ke link di nomor 2 tadi sehingga muncul gambar seperti ini

Isikan nama situs , url situs jangan lupa tambahkan Backslash " / " di belakang Ulr ,
lalu lokasi , contoh : Site name : tutorial blog, Url site: http://ilovebloggink.blogspot.com/, Lokasi : indonesia Lalu tekan Create
5. Lalu anda akan dibawa ke tempat aplikasi

Lalu ikuti langkah-langkah nya. Setelah itu yang anda butuhkan adalah nomor App ID/API Key . Setelah anda membuat aplikasi untuk plugin kotak komentar facebook , silahkan lihat langkah selanjutnya .

Untuk memasang box comment facebook di blog anda terlebih dahulu untuk log in di akun blogger anda lalu Silahkan Menuju Layout ( Rancangan )> Edit HTML dan check Expand Widget Templates. Lalu cari code berikut: <data:post.body/> biasanya ada 2 pilihan dan pilih yang kedua . Anda taruh kode berikut ini dibawah kode tadi:

<b:if cond='data:blog.pageType == "item"'> <p align='left'>Silahkan Gunakan Facebook Comment, Jika Anda Tidak Memiliki Url Blog!</p> <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#appId=APP ID&xfbml=1'/><fb:comments expr:href='data:post.url' numposts='5' width='580'/> </b:if>

APP ID ganti dengan No App id yang sudah anda buat tadi, bisa dilihat pada gambar di bawah (yang di lingkari) :

lalu cari kode <b:skin><![CDATA[/* Setelah menemukan silahkan taruh kode ini diatas kode tadi:

<meta content='http://www.facebook.com/ID-PROFIL-FACEBOOK' property='fb:admins'/> <meta content='APP ID' property='fb:app_id'/>

Ganti id profil facebook dengan id profil facebook anda dan ganti app id dengan no app id yang telah anda buat tadi. Simpan template. Selesai..

Widget Twitter JQuery

Widget kali ini adalah twitter widget dengan efek JQuery. Widget ini di buat oleh Mike More. Widget twitter ini cukup unik karena bisa menampilkan foto wajah-wajah followers dan friends (teman Anda) di twitter. Cara memasangnya:

1. widget Twitter Jquery Simple
Hanya menampilkan photo wajah-wajah friends dan followers Anda saja. Copy paste kode di bawah di atas kode </body> pada template Anda dan Simpan

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-1.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#friends').twitterFriends({ debug:1 ,username:'Rizky10_' }); }); </script>

Ganti username:'Rizky10_' dengan username twitter Anda
Copy kode di bawah dan pastekan di Tata Letak --- Tambah Gadget --- HTML/Javascript dan simpan.

<div id="friends"></div>

2. widget twitter jQuery dengan header dan footer.
Hampir sama dengan di atas namun yang ini memiliki header dengan tombol follow ke twitter Anda di sertai dengan footer juga. Copy paste kode di bawah di atas kode </body> pada template Anda dan Simpan

<link href="http://twitter-friends-widget.googlecode.com/svn/v2/light.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-2.0.min.js" type="text/javascript"></script>

Copy kode di bawah dan pastekan di Tata Letak --- Tambah Gadget --- HTML/Javascript

<div class="twitter-friends" data-options="{ username:'Rizky10_' }"> <a class="tfw-info" href="http://www.moretechtips.net" target="_blank">Twitter Friends/Followers Widget</a></div>

Ganti username:'Rizky10_' dengan user name twitter Anda dan simpan.

3. Twitter widget jquery dg header dan footer, di tambah update status followers atau friens (teman) Anda secara bergantian.
Hampir sama dengan yang ke 2 di sertai header, footer dan tombol follow. Namun bedanya widget yang satu ini berwarna gelap (hitam), dan di tambah efek jquery pada up date status teman Anda. Copy paste kode di bawah di atas kode </body> pada template Anda dan Simpan.

<link href="http://twitter-friends-widget.googlecode.com/svn/v2/dark.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-2.0.min.js" type="text/javascript"></script>

Copy kode di bawah dan pastekan di Tata Letak --- Tambah Gadget --- HTML/Javascript.

<div class="twitter-friends">  <a class="tfw-info" href="http://www.moretechtips.net" target="_blank">Twitter Friends/Followers Widget</a></div>