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