Tutorial Membuat Widget Tombol "Join Facebook"

Mungkin dia antara sobat blogger ada yang penasaran , gimana sih caranya membuat widget  "Join Facebook" di blog seperti pada tampilan atas blog ini ??

Sebenarnya caranya cukup mudah bro  daripada anda bingung, langsung saja ikuti langkah langkah berikut ini :

• Login ke Akun Blogger sobat.
• Masuk ke Tata Letak/ Rancangan lalu pilih tab Edit HTML.
• Klik Download Full Template, untuk mem-backup template sobat, jika terjadi kesalahan.
• Beri tanda centang pada Expand Template Widget.
• Copy kode di bawah ini persis di atas kode ]]></b:skin>

/*-- (mta bar) --*/ #mta_bar{background:#000; border-bottom:2px solid #111; z-index:100; top:0; left:0; width:100%; overflow:auto; position:fixed; margin-left:0; margin-right:0; margin-top:0; margin-bottom:4px; padding-left:0; padding-right:0; padding-top:7px; padding-bottom:4px; z-index:10000;opacity: 0.9;filter: alpha(opacity: 90);} * html #mta_bar{position:absolute; /*IE6 hack*/width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px":body.clientWidth+"px")} #mta_bar .center{float:left; text-align:center; font-family:Verdana,Arial; font-size:13px; font-weight:bold; font-style:normal; color:#FFFFFF; width:65%} #mta_bar .left{float:left; text-align:left; font-family:Verdana,Arial; font-size:13px; font-weight:normal; font-style:normal; color:#FFFFFF; width:20%} #mta_bar .right{font-family:verdana,Arial,Helvetica,sans-serif; float:right; text-align:center; font-weight:normal; font-size:10px; letter-spacing:0; width:30px; white-space:nowrap} #mta_bar .right a{font-size:10px; color:#FFFFFF; text-decoration:none} #mta_bar .right a:hover{font-size:10px; color:#80ff00; text-decoration:none} #left_bar a{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEignka9aPCIKyHNmb-bghyphenhyphenqH0ZFYrw4tHc1GbUS38CrA05uXIfTftETeDOqNbj-xIlXrExdpP-IShJDJjutT6DhkGS11Ev32zLPx8o6WB0QmonrIc15a8a3fj9actHWdOdl8KXoeCCsAHDS/s1600/FaceBook.png') no-repeat; text-decoration:none; color:#FFFFFF; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:0} #left_bar a:hover{text-decoration:none; color:#80ff00} #left_bar2 a{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEignka9aPCIKyHNmb-bghyphenhyphenqH0ZFYrw4tHc1GbUS38CrA05uXIfTftETeDOqNbj-xIlXrExdpP-IShJDJjutT6DhkGS11Ev32zLPx8o6WB0QmonrIc15a8a3fj9actHWdOdl8KXoeCCsAHDS/s1600/FaceBook.png') no-repeat 2px; text-decoration:none; color:#FFFFFF; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0} #left_bar2 a:hover{text-decoration:none; color:#80ff00} #to_top{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-zLjDvbHLWgXrNouAqNlR4e_UsX-SHgEATiSH_ZsTvWEna5cnHYlZy3GVX8jNwwwg6RAwrZ8W48lq5L6i9j_RnZfGHs97nulEUhgdSDdWgDPiC6jN0HBl5xdEnq0z1ULWu2gSfoTgnedt/s1600/delete.png) no-repeat scroll 0%; position:absolute; /*this replaces float - fixes thanks to Larry ofhttp://blog.lroot.com*/height:18px; width:19px; margin:0 0 0 900px; /*this was updated*/padding:9px 5px} #anima_sudut2 a:link { color:#000000; } #anima_sudut2 a:visited { color: #FFFFFF; text-decoration:none; } #anima_sudut2 a:hover { color: #000000; } #to_top a{padding:8px} a.tip {position:relative} a.tip span { display:none; padding:5px; z-index:100; background:#000; color:#fff; text-decoration:none; width:200px; /* lebar tooltip */ height:auto; -moz-border-radius:2px; -webkit-border-radius:2px } a:hover.tip { font-size:99%; cursor:pointer } a:hover.tip span { display:block; position:absolute; -moz-opacity:0.7; opacity:0.7; top:-40px; left:auto; right:-2px; bottom:auto; line-height:14px; font-size:12px; font-weight:normal; } .menu{ border:none; border:0px; margin-left:35px; padding:0px; font-size:13px; } .menu ul{ background:#000000; height:2px; list-style:none; margin:0; padding:0; } .menu li{ float:left; padding:0px; } .menu li a{ background:#000000; color:#80ff00; display:block; font-weight:normal; line-height:30px; margin:0px; padding:0px 10px; text-align:center; text-decoration:none; } .menu li a:hover, .menu ul li:hover a{ background: #212121; color:#80ff00; text-decoration:none; } .menu li ul{ background:#000000; display:none; height:auto; padding:0px; margin:0px; border:0px; position:absolute; width:180px; z-index:200; /*top:1em; /*left:0;*/ } .menu li:hover ul{ display:block; } .menu li li { display:block; float:none; margin:0px; padding:0px; width:180px; } .menu li:hover li a{ background:none; } .menu li ul a{ display:block; height:30px; font-size:12px; font-style:normal; margin:0px; padding:0px 10px 0px 15px; text-align:left; } .menu li ul a:hover, .menu li ul li:hover a{ background:#212121 center left no-repeat; border:0px; color:#80ff00; text-decoration:none; } .menu p{ clear:left; }

• Kemudian tambahkan kode Java Script di bawah ini, persis di atas kode </head>

<script src="http://strip-ads.googlecode.com/files/strip-ads-versi2.js" type="text/javascript"></script>  

• Lalu letakkan kode di bawah ini persis di bawah kode </body>

<div id='mta_bar'> <div id='left_bar2'> <span class='left'> <a href='http://www.facebook.com/ibliskematian' target='_blank'>Add Me On Your Facebook</a></span></div> <div id='left_bar'> <span class='center'><a href='http://www.facebook.com/home.php?sk=group_104285069649464' target='_blank;'>Join Ibllezboy di Facebook!</a></span></div> <span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;o-om.com.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://lh4.ggpht.com/_QfufFNlfNgs/TEFGnF1yYBI/AAAAAAAAADM/d659lgBAzSI/delete.png' style='cursor:hand;cursor:pointer;'/></span></div>  

• Simpan Template dan lihat hasilnya.

Catatan : Jangan lupa untuk mengganti teks yang bercetak tebal miring tersebut dengan link anda 

Masih bingung??  Silahkan tinggalkan komentar di bawah ini ☻

Terima kasih telah berkunjung di blog saya  mampir lagi ya,,