Senin, 26 Maret 2012

Cara Membuuat Widget 3 in 1 (Blogger, Facebook, Twitter)

Kali ini  Aandth�s Blog akan menjelaskan tentang "Cara Membuuat Widget 3 in 1 (Blogger, Facebook, Twitter)"
Nah klo gag tau bisa langsung di coba ,,,
  • Login
  • Rancangan
  • Edit Laman
  • Tambah Gadget
  • HTML/JavaScript
<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUTsRkGSmvFdLwIhXRdhjLdpb-snDN5jW1iMV5SsCXwNP5KjXRyJHVLwMTY9KBF-u3yJb_XHZ_I_5VryLw2bd6ItwjeNxmscZrnSC4eRW0tfNc8gpqziMdlZP8d8aTYdcsebYnjMkXuuz2/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjChd8WBRiDgkp0KQXGZbxqVbuag3Qg7YQtBLeh7klMVAOygl_qyRd1QVsf_fy0grbj4ACQYRXqThVffjipEvsdoH2v5k2w1cVI0IbJwjVuPUR_p_QM0-tA61bMKlzKR1CByDyBObM8fqVU/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
.barconteblogger{margin:5px 0 0 47px}
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6XmGh6kSpxgUzZ0ZteGRXnYmc423_BAJ9TgB4Llml-78q-4EOGe5hnDMOoTqpOHDMjGVdnhqBI5hGVnVIR7i77kPWe9VFUJ8EL16MFUQnfNaqV3r5Ne-DoCY472OrWGSWUmrTzLXcn3tb/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjab45KFYfILraLJ5bzWfVB25QU3mK27lAlTiJmPoUNmZn8SDAInzETa_gLchIHl-3V1KGeEpQl89y1ki4gWNscKltm0onB6ERDJZIXP6skxfGR0cpZS1eJ9KjLA5l83GCcJ8qPGCnkVZUk/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}
.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfEWxzQuGUUXCPQqqXCtqlD8BZ02xvrWerYhKopNr1xL-N_xtcJAkTHV3mGINuGcEnZGACZTnNpb0lC_CTRHQCrFhTtHE0FXvgFd_fdI3mZwzu4i9Y-IYCeZuGJulBopJOywj1AAbVUkqk/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZSEGSamUHMN6CNUWWZewWF2KBMQYX7pGHSAfBhyFPGuSN24qY6fgqlGLsk9M67vtLpwRgf7h0ffNLFNFQJj_fQtgq9WOtpX2d0DlpE2YNX5zSZ_L_qMYGKgXmM_Cpy6tiGYXLYsBa5k93/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
</style>
<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">
CONTENT BLOGGER HERE
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
CONTENT TWITTER HERE
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
CONTENT FACEBOOK HERE
</div>
</div> 
NB:
         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.

Nah mudah kan
Selamat Mencoba & Sampai Jumpa

Posted By: Aandth�s Blog

0 komentar:

Posting Komentar