Facebook Like Dan Twitter Follow Box Melayang New Style

52 Komentar


Membuat Facebook Like Dan Twitter Follow Box Melayang. Huahahaha...akhirnya experimen widget Mas Yusa berhasil alias sukses :D. Kali ini Mas Yusa akan share widget lagi (Tentunya halal bro..!), widget melayang yang Mas yusa share kali ini tidak menggunakan script Jquery (Selamet deh berat blog anda) Hahaha. Mas yusa terinpirasi widget facebook like box melayang dari sobat planktoon.blogspot.com yang enggak makai jquery. Sebenarnya widgetnya hampir sama dengan bang planktoon, tapi ada tambahan dari saya, yaitu twitter follow box yang sangat keren (di desain mirip facebook like box)


Untuk Screen Shootnya :
 

Nah, untuk yang tertarik...langsung aja simak caranya :
  • Masuk akun Blogger anda
  • Masuk Rancangan/Tata Letak
  • Klik Add widget->HTML/Java Script
  • Masukan kode di bawah ini :
<!-- Script kotak like Facebook dan Twitter Follow box Melayang -->
<style type="text/css">
#topbar{
position:absolute;
padding-left:260px;
background-color: transparancy;
width: 300px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<table border="1" bgcolor="FFFFFF">
<tr>
<td>
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="http://4.bp.blogspot.com/-9MWyoN5VsJM/TivTpPyUuhI/AAAAAAAABL0/ldO739MTRBg/s1600/close3.png" /></a></div>
<center>
<div style="background: #fff;">

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/MasyusaBlogspotcom/317602688268316&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 230px; width: 300px;background:#fff;"></iframe>

<script type="text/javascript"
src="http://s.moopz.com/fanbox_init.js"></script><div
id="twitterfanbox"><script
type="text/javascript">fanbox_init("yusa_syihab");</script
type="text></div
id="twitterfanbox">

</div>
</center></td>
</tr>
</table>
</div>
<!-- akhir -->
  • Note : Untuk yang berwarna BIRU, ganti dengan url Facebook Fanpage blog anda. Dan untuk yang berwarna MERAH ganti dengan ID Twitter anda (Tidak pakek @).
  • Lalu Simpan.
Jika tidak berhasil, mari bertanya VIA KOMENTAR DIBAWAH... :D
Jangan lupa klik iklan Mas Yusa ... :)
Baca Peraturan Copy Paste !

Anda sedang membaca artikel tentang Facebook Like Dan Twitter Follow Box Melayang New Style dan anda bisa menemukan artikel Facebook Like Dan Twitter Follow Box Melayang New Style ini dengan url http://masyusa.blogspot.com/2012/07/membuat-facebook-like-dan-twitter.html, Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Facebook Like Dan Twitter Follow Box Melayang New Style ini sangat bermanfaat bagi teman-teman Anda, namun jangan lupa untuk meletakkan link postingan Facebook Like Dan Twitter Follow Box Melayang New Style sebagai sumbernya. Jika tidak saya akan laporkan Google ! Yusa Syihab Akbar


52 comments

July 16, 2012 at 6:53 PM

oke sob. kapan" gua coba. kalo twitter aja gimana ?
baca juga artikelku n kasih comment ya http://azka-veiro.blogspot.com/2012/07/cara-posting-tampilan-postingan-dengan.html

July 16, 2012 at 7:27 PM

nice share sob, keep blogging..... :D

July 16, 2012 at 9:18 PM

@AzkaveiroMakasih sob dah mampir... :)

July 16, 2012 at 9:18 PM

@Zlems Creative™Oke sob... :)

July 16, 2012 at 9:30 PM

keren gan!

July 16, 2012 at 9:32 PM

@halimahTerimakasih mbak... :)

July 16, 2012 at 10:06 PM

keren juga ni..
thanks dah share sob

July 16, 2012 at 10:10 PM

@efliandaSama sama :)

July 16, 2012 at 10:29 PM

berat ke koneksi ga sob?

July 16, 2012 at 10:35 PM

@kreasifathanGak sob, lebih ringan ini dibanding yang melayang di pojok... kalo melayang dipojok kan pakek JQUERY. Jadi memperberat loading blog :)

July 17, 2012 at 12:16 AM

Thanks sob tutorialnya....

thanks ya dh follow back...

July 17, 2012 at 12:21 AM

bisa melayang-layang ya Mas, wah, kapan2 bisa ikutan nyoba nih ... :)

July 17, 2012 at 12:28 AM

@Cadis HangoluanSama sama bro? :)

July 17, 2012 at 12:28 AM

@EKA IKHSANUDINSilahkan, Makasih dah mampir... :)

July 17, 2012 at 12:47 AM

keren sob, saya coba di blog yang satunya lagi
..:)

July 17, 2012 at 1:33 AM

mantap sob,seperti di blogku cuma tinggal kasih kode twitternya aaja :)

July 17, 2012 at 1:41 AM

@Saeful RahmanSilahkan Bro! :)

July 17, 2012 at 1:42 AM

@MisbahudinBener sob... :D

July 17, 2012 at 1:55 AM

sob,kotak komentarnya ini auto hide pake kode JS ya?

July 17, 2012 at 2:09 AM

nggak bikin berat nih sob,...kalau nggak aku pakai hehehe

July 17, 2012 at 2:10 AM

@MisbahudinMangsute mas..? :D JS seng pie? javascript?

July 17, 2012 at 2:12 AM

@zulhamKalo berat sih iya...tapi gak berat banget kayak like box yang melayang disamping (Pakek JQuery)

July 17, 2012 at 2:22 AM

Mantap Sobb , Kapan-Kapan bisa diCoba Nih !!!

July 17, 2012 at 5:15 AM

mantap sob.. keren pula :)
thx share infonya :)

kalo yang berada di bawah judul post ada gak ya kang..?
jadi dia gantung dibawah judul post tapi disebelah kanan.. tapi isi postingan sejjajar dengan dia.. :D

aduh kepanjangan..

July 17, 2012 at 8:10 AM

makin mantep aja mas yusa nih, kereeennn...

July 17, 2012 at 5:50 PM

@Kevin SullivanSilahkan sob... :)

July 17, 2012 at 5:51 PM

@budi os 19Sama sama sob... :)

July 17, 2012 at 5:51 PM

@Santai Sejenak | Secangkir Teh dan Sekerat RotiWaduh aku gak mudeng kang... :D

July 17, 2012 at 5:52 PM

@wansflydreamHahaha.. :) Makasih dah mampir..?

July 17, 2012 at 5:56 PM

Gmana ngatur supaya letaknya pas ditengah2 sob? ?
pengen pasang ni sob :D

July 18, 2012 at 12:25 AM

@MaxGak tau ane sob...sepertinya settingan yang diatas udah di tengah deh. :D

July 18, 2012 at 2:11 AM

tutornya mantab mas,,oh iya skalian ijin follow..dan maaf saya jarang Ol..soAAAlnya kseharian saya sbg kuli sibuk banget

July 18, 2012 at 4:50 AM

@Pay AkhmadGpp sob.. :)

July 18, 2012 at 5:31 AM

Mantap... !!!!

Thanks for share yusa.. !!!

July 18, 2012 at 8:39 AM

makasih untuk artikelnya sob, ane coba dulu :)

July 18, 2012 at 2:58 PM

@Dian (Admin Sobat Blogger's)sama sama sob.. :D thanks udah moro

July 18, 2012 at 2:58 PM

@Aldio BlogSilahkan Mas Bro!!!! :)

July 20, 2012 at 12:34 AM

Info yang bermanfaat, tapi berhubung ane gag terlalu aktif di twitter, jd cuma pake FB doang deh, hhee (✿◠‿◠)

July 20, 2012 at 3:53 AM

wow keren sob , coba ga twitter sob . ane mau pasang juga.

July 20, 2012 at 5:22 AM

mantab nih sob.. ane simpan dulu ya.. :D

July 20, 2012 at 6:00 AM

@Say No To Maho BlogsSilahkan sob.. :)

July 20, 2012 at 6:00 AM

@Andy BorneoSilahkan bro. :D

July 26, 2012 at 10:34 PM

keren sobbb,,,

July 28, 2012 at 8:39 AM

itu pastenya sebelum atau sesudah < head > mas? makasih

July 28, 2012 at 11:23 PM

wah mantap nih,,bisa dicoba nih sob,,biar dapat banyak like

July 30, 2012 at 6:04 AM

ijin nyoba sob..

Mantep tutornya kapan2 akan dicoba.

August 24, 2012 at 3:07 AM

Saya kok gag bisa pasang like box yg ada di samping ya sperti di blog ini??
Udh trpsang tp gmw muncul pz disorot pke mouse..

November 5, 2012 at 11:47 AM

kalo ditambah google plus gimana sob

March 17, 2014 at 3:30 AM

kalo pengen dimasukin beberapa gambar gimana yah?
pengen bikin melayang buat icon contact person like ym, bbm, whatsapp di kanan.. tapi cuma muncul pas kursor nyorot ke pinggir / kotak kaya facebook twitter di blog ini..

June 6, 2014 at 12:09 AM

kok saya ga muncul ya

Post a Comment

Silahkan kalian berkomentar,namun tetap jaga kesopanan dengan tidak melakukan komentar spam (•͡˘˛˘ •͡)┌П┐ .
Untuk yang tidak mempunyai akun apapun,anda bisa gunakan Anonim (✿◠‿◠)...
Untuk membalas komentar/reply akan keluar Pop Up, jangan hapus kode yang ada di kotak komentar
\\▼▼▼| |▼▼▼| |▼▼▼| |▼▼▼| |▼▼▼| |▼▼▼| |▼▼▼//

Welcome to: Mas Yusa Blog | Twitter: Yusa_Syihab & Google+: Yusa Syihab
 
Follow Me

English
Japanese
Korean
Arabic
Chinese Simplified

Kembali Ke Atas Copyright © 2012 | Template Platinum Theme Modified by Mas Yusa