0 Cara Buat Widget Tombol Join Facebook

Setelah kemarin ada salah satu sobat blogger merequest Cara Buat Tombol Join Facebook ,Maka saya akan share gimana caranya agar sobat blogger lainnya juga tidak bosan dengan blog ini karena hanya menyediakan INFORMASI ALAT MUSIK saja.
Ok. langsung saja pada pokok pembahasan...

• 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('http://remoxp.hostzi.com/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('http://remoxp.hostzi.com/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/AVvXsEhHmvTIBO_RBorSOpzPK9G4aX7xfzV5kHyQLNk6YbioezssHl5F2SSarEZz7KlxOYcpcL_Q-5B-2Fz0qMFebQ3zDGr2ISYq1b4qExPcmO4vnQUQwu7yhUooLRyDohyphenhyphenZ61pT4dgOKr13ieos/s400/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/sadikin2' target='_blank'>Login to Facebook</a></span></div> <div id='left_bar'> <span class='center'><a href='http://www.facebook.com/sadikin2' target='_blank;'>Join Join Computer Word in 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.

Nb: Jangan lupa mengganti tulisan yang bercetak tebal dengan alamat FB sobat blogger...

Title : Cara Buat Widget Tombol Join Facebook
Posted by : Unknown
Published : 2012-09-16T00:18:00-07:00
Rating : 5
Reviewer : 99999 Reviews