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/AVvXsEiIR3UZfpg7bOUbCABe5qWKksxn65KI0F-1tQbFzp2qKMAhv3tE2lxs2dRzKlbhITX5EpfinVxTD_eaaIb6-yPSbILyq0_KpqRtpYy6esXU2DvwgTJQoPgvYokcX6INzvqTszA10QCKv3LN/');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/AVvXsEj_Suff1Es1OO0ldRMu_WW6fQ5IaKSVW6O9Y9IZo5g6nHPx4CmnfioMcPiink8fQWcBwqGaqPEdgkl3K1Se_ROw3fIF_8VHBGy_Y0cZHnQUHy5THQCUXevMfpY04OOWk3PJ61lwbo6YkJCj/');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/AVvXsEiTZHQGtMOjUyYapX0_MjJtr9u_qM8dSYwdTq7R7mnD8xMWLwfOOLgc3yu-JFL49RM96E9AxzKHRwqRaJ8lswRzKEjvlYCHH-XTleanf8htWQ1PXZcl04_BZ7QMUAX9LK23GgpwVp3y6iiR/');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/AVvXsEhS96WubmY4flwgbL2_g4oH3jJ8u8F35fiunMtbJmTZfzXTHwl1fla28iUFyDNxp-lbufjfRtafJeeG4VRqyiQ6u9jQr3EEIn6_OhbT0bZNLzUPSE_RXfIZMOknoW0c1Xlz5oIdwlOV7sHr/');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/AVvXsEiO2DYfi4DNbKzeIUMYDTjhnSIWvqHb6ZMaYe8yBIf-LEaWibql75cXYJgEDYv-OQZZg7wG0oyNbNce2N6FNBdwKu3n8FW-V4SmxFttq5NJJdYnpmZbEXwHNyM8kvy83xqnK5WwvvZG9mqg/');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/AVvXsEiYrg1rP7eee9sKXZNFlqPKiUlW2qhfLNAroFGtRg8nvj9dnyKujEPkRd1ameHcfo1YCfpaf4nkGRQALKHNV-Km4B4sQvhw7qw09JTXSMKDTAZgcBOCqH801uMMRNstjK74csJQkFU8YWAx/');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