Memasang Google Translate pada Blog

Kali ini blog trik dan tips akan memberikan tips bagaimana cara membuat Google Translate pada halaman blog anda. Google translate ini dikembangkan oleh Google untuk mentranslet bahasa pada blog blogger ke berbagai bahasa lainnya. Dengan membuat Google Translate penggunjung dari luar negeri dapat membaca artikel anda apabila ia menggunakan widget ini. Cara pemasangan widget ini sangat mudah, untuk itu langsung saja ikuti langkahnya berikut ini:


1. Masuk ke Rancangan --> Edit Laman
2. Tambah Gadjet pilih HTML Javascript
3. Masukan kode dibawah ini:

<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>

4. Simpan gadjet anda

Demikian cara pemasangan Google Translate pada blog anda. Mudah2an tutorial singkat ini dapat memberikan manfaat. Salam blogging...

Widget

Membuat Komentar Area Paling Keren ala IntenseDebate

Blog Trik dan Tips ingin memberikan apresiasi serta 2 jempol untuk IntenseDebate karena telah mengembangkan komentar area dengan fitur yang sangat menarik. Untuk membuat komentar area menjadi stylis biasanya membutuhkan banyak waktu untuk mengedit template anda, namun dengan IntenseDebate, anda bisa membuat komentar area menjadi lebih mudah dan terlihat keren. Pengunjung yang datang ke blog anda akan memperoleh kemudahan serta menyukai komentar area yang anda miliki. Beberapa fitur yang ditawarkan IntenseDebate yaitu, threaded comment, email notifikasi, profil komentator, moderasi serta blacklist, open id, integrasi twitter, facebook dan rss, plugin api, dan widget. Jika sobat tertarik untuk membuatnya ikuti petunjuk dibawah ini:

1. Simpan template anda terlebih dahulu untuk mencegah terjadi kesalahan editing
2. Kunjungi situs IntenseDebate lalu daftarkan diri anda (Isi Username, password, email)
3. Lakukan konfirmasi email untuk aktivasi akun IntenseDebate
4. Setelah itu instal IntenseDebate (masukan url blog anda)

5. Selanjutnya upload template blog anda ke IntanseDebate, dimana secara otomatis template anda akan dimodifikasi.
6. Kopi kode yang telah dimodifikasi
7. Lalu login ke Blogger, masuk ke Rancangan --> Edit HTML
8. Centang Expand Template Widget
9. Hapus semua kode tersebut lalu paste kode yang telah kita kopi dari IntenseDebate
10. Simpan template anda lalu lihat hasilnya

Mudah sajakan untuk membuat komentar area IntenseDebate pada blog anda. Anda juga dapat menambah widget dari intense debate seperti blog stat, komentar terbaru, popular blog post, top user widget dan my recent comment widget. Lengkap semua fiturnya yang pasti sangat bermanfaat. Demikian tutorial blog trik dan tips semoga bermanfaat.

Komentar , Widget

Cara Membuat Burung Terbang Twitter pada Blog

Inilah tutorial yang saya ingin sekali bagikan ke anda yaitu membuat flying twitter bird atau widget burung terbang twitter pada blog. Widget ini tentunya akan menarik perhatian pengunjung untuk menjadi follower anda. Widget yang lucu ini sangat menarik, karena burung twitter akan terbang kemanapun anda mengscroll halaman baik ke atas maupun ke bawah....he3 pokoknya lucu dan keren abis. Nah jika anda tertarik untuk membuatnya ikuti langkah berikut ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit Laman
3. Tambahkan Gadjet lalu pilih HTML/Javascript
4. Masukkan kode dibawah ini pada gadjet tersebut

<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGXw4tZCCSwMopfWrWFlAUhc3qpYAEQtVf0GQtZWgiXkk9OqfciqbDQ7Ku5PIOO3-hPV1hGJHssYgSvezzTr4e0e5idwixyN1EXsZ75NDpkCB8cyxpc9czPgoDXCnvTe1DlUPRzoJre3yq/s1600/birdsprite.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/blogtrikdantips";var tweetThisText= "What up guys";tripleflapInit();
</script>

5. Selanjutnya sobat ganti kode berwarna biru (blogtrikdantips) diatas dengan username twitter anda.
6. Simpan Gadjet lalu lihat hasilnya

Demikian langkah-langkah membuat widget burung terbang twitter pada blog. Sobat dapat membuatnya diblog untuk menjadikan blog lebih menarik ketika dikunjungi. Sekian dan salam blogging...

Widget

Membuat Widget Rating Star dari Outbrain

Jika sobat ingin agar posting yang sudah ditulis diberi penilaian atau rating maka widget yang akan kita buat ini bisa bermanfaat. Pengunjung yang membaca artikel anda dapat memberikan penilaian dengan memilih jumlah bintang. Semakin banyak bintang maka semakin menarik artikel yang mereka baca. Widget yang akan kita buat diperoleh dari Outbrain, yang mana sangat mudah untuk diinstal. Berikut ini adalah langkahnya.....

1. Kunjungi situs ini http://www.outbrain.com/getwidget
2. Lalu Choose Blogger Platform (pilihlah platform blogger jika sobat menggunakan blogger)
3. Pilih Bahasa Indonesia untuk language
4. Lalu centang kotak untuk menyetujui TOS
5. Klik Tombol Instal
6. Anda akan langsung diredirect untuk menginstal widget pada blogger.


7. Jika sobat ingin langsung diinstal maka klik tombol Menambah Widget
8. Lalu lihat hasilnya

Demikian langkah2 membuat rating star widget. Anda bisa melihat widget tersebut tampil pada blog, semakin banyak bintang maka semakin disukai posting anda. Sekian dan salam blogging...

Widget

Menempatkan Facebook Like Box Dibawah Posting

Facebook Like Box adalah plugin yang memungkinkan pengguna facebook untuk secara tidak langsung berlangganan update blog anda melalui akun facebook mereka. Sebelum saya telah memberikan tips dan trik bagaimana membuat facebook like box muncul dengan efek buka tutup dan slider. Kali ini kita akan membuat facebook like box dibawah posting. Beberapa blog menempatkan facebook like box meraka dibawah posting karena biasanya pembaca akan melihat like box tersebut setelah membaca posting. Jadi daerah ini dapat menambah jumlah fans blog Anda. Untuk membuatnya ikuti trik dan tips berikut ini:

1. Login ke Blogger
2. Masuk ke Rancangan -- Edit HTML
3. Centang Expand Template Widget
4. Cari kode <data:post.body/>
5. Letakkan kode dibawah ini setelah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FBlogTrikDanTips&amp;width=590&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180' style='border:none; overflow:hidden; width:590px; height:180px;'/> </b:if>

6. Ubah kode berwarna merah dengan kode fan page anda
7. Simpan template anda

Coba sobat lihat hasilnya di blog. Widget ini akan muncul setelah atau dibawah posting. Jika ukurannya tidak sesuai dengan ukuran posting halaman anda, maka sesuaikan ukuran box dengan mengubah kode lebar facebook like box diatas. Selamat mencobanya....

Widget

Membuat Tombol Facebook, Twitter dan Google+ Melayang

Sebelumnya kita membuat tombol facebook, twitter dan Google+ pada halaman posting atau disidebar, namun kali ini kita akan membuat tombol tersebut melayang dan akan bergeser ketika pengguna mengscroll halaman ke atas atau bawah. Trik yang satu ini akan menambah efek pada halaman blog anda sehingga tampak lebih indah. Kita akan menggunakan kode Javascript untuk membuat widget yang satu ini. Caranya sangat mudah, jika sobat ingin membuatnya ikuti langkah berikut ini:

1. Login ke Blogger
2. Masuk ke Rancangan -- Elemen Halaman
3. Tambahkan gadjet lalu pilih HTML/JavaScript
4. Masukkan kode berikut ini:

<style>
/*-------Blogtrikdantips Tombol Melayang------------*/
#floatdiv {
position:absolute;
width:94px;
height:229px;
top:0;
left:0;
z-index:100
}

#bttsidebar {
border:1px solid #ddd;
padding-left:5px;
position:relative;
height:220px;
width:55px;
margin:0 0 0 5px;
}
</style>


<div id="floatdiv">
<div id="bttsidebar">
<table cellpadding="1px" cellspacing="0">
<tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>
</td>
</tr>
<tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">
<g:plusone size="Tall" expr:href="data:post.url">
</g:plusone></td>
</tr>
<tr>
<td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="blogtrikdantips">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</td>
</tr>
<tr>
<td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;">
<p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://www.blogtrikdantips.blogspot.com" target="_blank">Widgets</a></p>
</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
// JavaScript Document

<!--
/* Script by: www.jtricks.com
* Version: 20071017
* Latest version:
* www.jtricks.com/javascript/navigation/floating.html
*/
var floatingMenuId = 'floatdiv';
var floatingMenu =
{
targetX: 0,
targetY: 300,
hasInner: typeof(window.innerWidth) == 'number',
hasElement: typeof(document.documentElement) == 'object'
&& typeof(document.documentElement.clientWidth) == 'number',
menu:
document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId]
};
floatingMenu.move = function ()
{
floatingMenu.menu.style.left = floatingMenu.nextX + 'px';
floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
}
floatingMenu.computeShifts = function ()
{
var de = document.documentElement;
floatingMenu.shiftX =
floatingMenu.hasInner
? pageXOffset
: floatingMenu.hasElement
? de.scrollLeft
: document.body.scrollLeft;
if (floatingMenu.targetX < 0)
{
floatingMenu.shiftX +=
floatingMenu.hasElement
? de.clientWidth
: document.body.clientWidth;
}
floatingMenu.shiftY =
floatingMenu.hasInner
? pageYOffset
: floatingMenu.hasElement
? de.scrollTop
: document.body.scrollTop;
if (floatingMenu.targetY < 0)
{
if (floatingMenu.hasElement && floatingMenu.hasInner)
{
// Handle Opera 8 problems
floatingMenu.shiftY +=
de.clientHeight > window.innerHeight
? window.innerHeight
: de.clientHeight
}
else
{
floatingMenu.shiftY +=
floatingMenu.hasElement
? de.clientHeight
: document.body.clientHeight;
}
}
}
floatingMenu.calculateCornerX = function()
{
if (floatingMenu.targetX != 'center')
return floatingMenu.shiftX + floatingMenu.targetX;
var width = parseInt(floatingMenu.menu.offsetWidth);
var cornerX =
floatingMenu.hasElement
? (floatingMenu.hasInner
? pageXOffset
: document.documentElement.scrollLeft) +
(document.documentElement.clientWidth - width)/2
: document.body.scrollLeft +
(document.body.clientWidth - width)/2;
return cornerX;
};
floatingMenu.calculateCornerY = function()
{
if (floatingMenu.targetY != 'center')
return floatingMenu.shiftY + floatingMenu.targetY;
var height = parseInt(floatingMenu.menu.offsetHeight);
// Handle Opera 8 problems
var clientHeight =
floatingMenu.hasElement && floatingMenu.hasInner
&& document.documentElement.clientHeight
> window.innerHeight
? window.innerHeight
: document.documentElement.clientHeight
var cornerY =
floatingMenu.hasElement
? (floatingMenu.hasInner
? pageYOffset
: document.documentElement.scrollTop) +
(clientHeight - height)/2
: document.body.scrollTop +
(document.body.clientHeight - height)/2;
return cornerY;
};
floatingMenu.doFloat = function()
{
// Check if reference to menu was lost due
// to ajax manipuations
if (!floatingMenu.menu)
{
menu = document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId];
initSecondary();
}
var stepX, stepY;
floatingMenu.computeShifts();
var cornerX = floatingMenu.calculateCornerX();
var stepX = (cornerX - floatingMenu.nextX) * .07;
if (Math.abs(stepX) < .5)
{
stepX = cornerX - floatingMenu.nextX;
}
var cornerY = floatingMenu.calculateCornerY();
var stepY = (cornerY - floatingMenu.nextY) * .07;
if (Math.abs(stepY) < .5)
{
stepY = cornerY - floatingMenu.nextY;
}
if (Math.abs(stepX) > 0 ||
Math.abs(stepY) > 0)
{
floatingMenu.nextX += stepX;
floatingMenu.nextY += stepY;
floatingMenu.move();
}
setTimeout('floatingMenu.doFloat()', 20);
};
// addEvent designed by Aaron Moore
floatingMenu.addEvent = function(element, listener, handler)
{
if(typeof element[listener] != 'function' ||
typeof element[listener + '_num'] == 'undefined')
{
element[listener + '_num'] = 0;
if (typeof element[listener] == 'function')
{
element[listener + 0] = element[listener];
element[listener + '_num']++;
}
element[listener] = function(e)
{
var r = true;
e = (e) ? e : window.event;
for(var i = element[listener + '_num'] -1; i >= 0; i--)
{
if(element[listener + i](e) == false)
r = false;
}
return r;
}
}
//if handler is not already stored, assign it
for(var i = 0; i < element[listener + '_num']; i++)
if(element[listener + i] == handler)
return;
element[listener + element[listener + '_num']] = handler;
element[listener + '_num']++;
};
floatingMenu.init = function()
{
floatingMenu.initSecondary();
floatingMenu.doFloat();
};
// Some browsers init scrollbars only after
// full document load.
floatingMenu.initSecondary = function()
{
floatingMenu.computeShifts();
floatingMenu.nextX = floatingMenu.calculateCornerX();
floatingMenu.nextY = floatingMenu.calculateCornerY();
floatingMenu.move();
}
if (document.layers)
floatingMenu.addEvent(window, 'onload', floatingMenu.init);
else
{
floatingMenu.init();
floatingMenu.addEvent(window, 'onload',
floatingMenu.initSecondary);
}
//-->
</script>

5. Gantikan kode berwarna biru (blogtrikdantips) dengan username twitter anda
6. Simpan gadjet
7. Masuk ke Rancangan -- Edit Halaman lalu cari kode </head>
8. Paste kode dibawah ini diatas kode </head>

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

9. Simpan Template anda

Cobalah lihat hasilnya sekarang, widget tersebut akan melayang disamping kiri blog anda. Selamat mencobanya....

Widget

Membuat Email Subscription dengan Icon Bergambar Sketsa

Saya biasanya suka bermain-main dengan widget blogger dan paling menarik adalah menggabungkan elemen satu dengan yang lain. Kebetulan kali ini saya akan membuat widget berlangganan yang iconnya merupakan hasil gambaran tangan. Widget ini juga dilengkapi dengan tombol social media seperti facebook dan twitter. Serta tidak lupa dilengkapi juga dengan Feedburner untuk tombol berlangganan. Widget ini dapat menjadi perhatian khusus buat blog anda sehingga mendorong orang untuk berlangganan. Proses pemasangannya cukup mudah, tidak perlu mengedit HTML dari template Anda. Berikut ini caranya:

1. Masuk ke Rancangan --> Elemen Laman
2. Tambahkan Gadjet pilih HTML/Javascript
3. Masukan kode dibawah ini:

<style class="text/css">
table
{
border-bottom: 1px solid #E6E6E6;
float: center;
width: 280px;
margin:10px 0 0 20px;
}
.subicons
{
border-right: 1px solid #E6E6E6;
}
.Fadeout {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}
.Fadeout:hover{
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
</style>
<div class="table">
<table>
<tr>
<td><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/pages/Blogtrikdantips" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMjRIXYUVv6u4-XOHcFS3k0aVIZf4_jq-1opByuYI-i_rVHjOM54auzCJM9o7mpMWAYOIX4YIgTTFTcsYeneRdR-5nkDPugWk6464XsVMN-eJdYYw47LUmb2Ph7byLOjJNxF9BxYOUDXyJ/s1600/facebook-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://twitter.com/Blogtrikdantips" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiujr3EssOeWAF8ofXAIg9joPPK5j_d-S1Rm5l-lz08VjhQM2rdrt67WuZ1gImGIH1BPlSHZXvt2C0r1qYEZkkygeYjW8iLAEM99VeDigkSS2_Ex6b4qIBlSld5BR-PCTOFDuEiV-ZzPRA/s1600/twitter-48.png" /></a></div></td>
<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/Blogtrikdantips" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2NdxtJrOC0japVsxvo8uNrJ_MxHJ2sBVcGU4eiz5_jjSeiX_Dsd53tya0Bwb9d-CKM2l_NC6DgdTk-4RbcUZBEuhGW4kzU-NslPQOaSphyphenhyphen1XhN9tiOrubyonCl_mXF15pzvJmAWoRhyphenhyphenJT/s1600/rss-48.png" /></a></div></td>
<td><a class="Fadeout" href="https://plus.google.com/xxxxxxxxx/posts" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_qSC1GapRAk1E-AzUcMx4momd6Qr2gqux4-_GHK8BWWC2tjR-QTMcUiHVJt0ZsyYSfr7lN3dstQGe-XjD4KQ699ZnThjQygPdA98obI5VypMA49lozNjpLXaZzz99tkxbQKvjXMMuJt5r/s1600/google-48.png" /></a></td>
</tr></table>
</div>

<style>
.rssbuttontable
{
border: 1px solid #E6E6E6;
background: #FFDCB1;
float: center;
width: 270px;
margin-left:10px;
padding: 5px 5px 5px 5px;
border-radius: 5px;
-moz-border-radius: 5px;
height: 35px;
float: left;
display: inline;
margin-top:5px;
margin-bottom:5px;
}
input.Subscriberssbutton
{
background:-moz-linear-gradient(top,#F88017 0%,#FF6600 100%); background:-webkit-gradient(linear,left top,left bottom,from(#F88017),to(#FF6600));
border: 1px solid #FF6600;
text-transform: none;
font:bold 13px arial;
color: #fff;
height: 30px;
padding: 4px 2px 5px 2px;
margin: 0px 0 0x 0px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;
display: inline;
}
</style>
<table class="rssbuttontable">
<tr>
<td>
<a rel="nofollow" href="http://feeds.feedburner.com/blogtrikdantips"><img src="http://feeds.feedburner.com/~fc/blogtrikdantips?bg=FF6600&amp;fg=444444&amp;anim=1" height="26" width="88" style="border:0" alt="" />
</a>
</td>
<td>
<input value="Subscribe to Get Updates" class="Subscriberssbutton" type="button" onclick="window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=blogtrikdantips&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=650,height=570&#39;);return true" /></td></tr></table>
<style class="text/css">
.grablink
{
link-color:#0084CE;
font-size:12px;
text-align:right;
text-weight:italic;
}
</style>
<div class="grablink">
<a href="http://www.blogtrikdantips.blogspot.com">Blogger Widgets</a>
</div>

4. Gantilah kode berikut ini:

http://www.facebook.com/pages/blogtrikdantips dengan fanpage facebook anda.
http://twitter.com/blogtrikdantips dengan halaman twitter Anda.
http://feeds.feedburner.com/blogtrikdantips dengan feedburner link anda.
https://plus.google.com/xxxxxxxxx/posts dengan halaman + Google Anda.
blogtrikdantips (dari bagian bawah kode di atas) dengan id feedburner Anda.

5. Klik simpan.

Cobalah anda lihat hasilnya pada blog. Hasilnya yang pasti akan sangat menarik. Semoga posting ini bermanfaat...selamat mencoba!

Widget

Membuat Widget Klasik Subscription di Blog

Baru-baru ini saya merancang widget berlangganan yang sederhana. Kali ini saya akan membuat widget berlangganan dengan tampilanan klasik. Widget ini dilengkapi dengan tombol sosial networking yaitu Twitter dan Facebook. Fitur ini akan menggunakan efek hover dan secara otomatis cocok pada sidebar anda. Proses pemasangan widget ini blogger cukup sederhana, cukup ikuti saja langkah berikut ini:

1. Masuk ke Rancangan --> Elemen Laman
2. Tambahkan Gadjet pilih HTML/Javascript
3. Masukan kode dibawah ini:

<style>

/* ---------Widget by www.blogtrikdantips.blogspot.com----------- */

.social-connect-widget{background:#F5F4EF;border:1px solid #E7E6DE;padding:10px; border-radius:5px; -moz-border-radius:5px;}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#FFF}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px;height:32px;width:32;}
</style>


<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<a href='http://feeds.feedburner.com/USERNAME'><img alt='RSS Feed' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdFHiT93Bif-gTmHNPWsVP96kwgfgKAZRaup1XsrTOsoR5y4KTFjGOxoQF7HaDiJbqGMkHygEORi0JvNh4xOiRBnmsCw89OUYGX2iBltC6GIdd5cctvDUT95lUyATKw1NOfwAY_XZCGjkI/s1600/rss.png"/></a><a href='http://feeds.feedburner.com/USERNAME'>Subscribe to our RSS Feeds!</a>
</div>

<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/USERNAME'><img alt='Follow Us on Twitter!' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj404NiHh7Q3xDspJGEvqXN7c41i0l69XtTpT6YK8T785G93ZTv_e744HDD0NP5U5vgn-Woz2ZZpnZNm6w4q6_0cAxj_bscxqJggsuSygWd1OnBJVX724ZQ9IKfGjmbTnsKkgGt5ruqNhz/s1600/twitter.png" title='Follow Us on Twitter!'/></a><a href='http://twitter.com/USERNAME'>Follow Us on Twitter!</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://facebook.com/USERNAME'><img alt='Be Our Fan!' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjz7I2_g06w6JQ-mwVCqffHXaz1muZWRhCTZYe4vPh9DCqatwAOZYYCMIUTqQXvvxilAmpAhucmOddtxsiKluErDeIPtO72Ao8FC0rK3lmJmS9hfvR9oUhpZQjzIXQ80z9M84kgpgMdBty/s1600/facebook.png' title='Be Our Fan"/></a><a href='http://facebook.com/USERNAME'>Follow us on Facebook!</a>
</div>

4. Anda perlu mengganti kode berikut ini dengan kode id Anda sendiri.

http://feeds.feedburner.com/USERNAME
http://twitter.com/USERNAME
http://facebook.com/USERNAME

5. Simpan widget dan lihat hasilnya

Semoga dengan widget yang baru ini anda akan semakin puas dengan tampilan blog. Semoga bermanfaat.

Widget