KLIK

Cara Memberi Widget Google Friend Connect, Twitter, Dan Facebook Like Box Melayang

4.5
Postingan kali ini kita akan membahas tentang 3 in 1 Floating Widget.

Apa itu 3 in 1 Floating Widget..?
3 in 1 Floating Widget adalah widget yang menampilkan tiga buah widget, yaitu Google Friend Connect, Twitter, dan Fans Like Box Facebook yang melayang dalam satu widget.


Mau..?
Ikuti langkah – langkahnya :

1.       Masuk Dasbor

2.       Klik Rancangan

3.       Klik Tambah Gadget

4.       Pilih HTML/Javascript

5.       Copy kode berikut

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF_D9p_giHVDSolMtwzIX7N5qq2Xr3YEajuHsAhFJuTRS43XBi9inLAsh4tqPn7NGW0ir9gh1cTvgdQGI_fAbj0wG5UWbPXISBDrr0kx_ocXVa2D7acLtwxTA3DLGU0_jfLxwbY-97wYD-/');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/AVvXsEgXGOi198avUNw2jR1OX9c_aO6gmGwVHbzZJEMtVZc1S9YKFV6voWKUh1oMZOO4YlXyLE-wRLfcwIvhdjGQi79mDd-hnoe9yUi5MjvT0ERHaisf0AcvGJTri3GZEAN7TMOzA5NI7FlgqHne/');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/AVvXsEif0vLJGkiRMGXhBKZdkqYdBeDic8bKmsBt0LlJonlbXjitKsWXgmadKGYhf8k_H5RNIXff_p-BktSUod5N47zV7U1GuJU65MXcJoPP6OceLZdxKtC_e75BO89oLQPKiI7BdSVVlU_44S-5/');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/AVvXsEgiuftNR3C6lbGoVDvf_JMrnzQAjcqXohLeAN7uyOhgyVnkSMrugR2iwyp6Lz-diJ3tbe2tbaQ4aRNPPHzHdRDsQJmEK7FisGHU0fRNatetSEulsZ8l905BT9er5pzF3QacG7RVI4yY0ki0/');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/AVvXsEjni9zx7fI8wade2ULQwoc7OdBQY69XZ-fplj5jEfsr9-lSf7Uydgmlxt33qs_bHJZAqi-JzFdmSwaaPNjST4HsBN1sCa7uuu-jvo5AnhhvFCw1FqgkBrJKEqygyigFawNY8brcK5Xp_FtQ/');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/AVvXsEjHAcItAJAtGpoRqHu9ZYfyEWIqTeIYLdVoFUa0hbukI5Fu7OhdgvXdOkow3xqjP-YniRIxDXWeRziEPnQ-KowORr9ig-GuKgsLk4HN8zL-04U9TnmbZJNtPxZnlT8H3fjYawmafffAiKbT/');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">
KODE BLOGGER
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
KODE TWITTER
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
KODE FACEBOOK
</div>
</div>

Keterangan :
Ganti tulisan KODE BLOGGER dengan kode HTML Google Friend Connect anda.
Ganti tulisan KODE TWITTER dengan kode HTML Widget Status Twitter anda.
Ganti tulisan KODE FACEBOOK dengan kode HTML Facebook Fans Like Box anda.


6.       Paste di Jendela HTML/JavaScript

7.       Klik Simpan


Jika anda belum tahu Kode Blogger anda, Kunjungi Google Friend Connect, untuk Kode Twitternya, Kunjungi Twitter, dan untuk Facebook, Kunjungi Facebook Like Box.

Sekian postingan kali ini.
Baca juga artikel tentang Cara Membuat Floating Like Box Facebook Di Blog.
Semoga Bermanfaat. Terima Kasih.
Klik jika artikel ini bermanfaat
UBLO SEVEN

Post Author : M. Arief Ubaidillah

Terimakasih atas kunjungan dan kesediaan anda membaca artikel ini. Kritik dan Saran dapat anda sampaikan melalui Kotak Komentar di bawah ini atau di Facebook (Muhammad Arief Ubaidillah) bisa juga di Twitter (@ubeeed).

0 comments:

Komentar Anda Sangat Bermanfaat

Silahkan Berkomentar !

 
The Official Website Of Arief Ubaidillah
Copyright© 2013 UBLO SEVEN™ | Use Chrome To The Maximum Result