Di
sini kami ingin mengajarkan cara nak buat like box yabg menarik
sesuai untuk blog anda agar lebih comel. Anda boleh menambah alat
ini dengan sangat mudah ke blog anda dengan hanya salin dan tampal
code.anda hanya perlu untuk menggantikan nama facebook page saya
dengan facebook page anda dan siap.
Bagaimana
nak menambah POP UP ini ke dalam blog anda
Seperti
biasa saya telah menyediakan pemasangan yang amat mudah .Anda hanya
perlu copy dan paste kod di bawah .....
Sekarang
pergi ke Blogger Design> Dashboard.
Add
a Gadget> HTML / JavaScript.
Paste
kod di bawah selepas menggantikan username saya dengan anda.
<style>
/*
ColorBox
Core Style:
The
following CSS is consistent between example themes and should not be
altered.
*/
#colorbox,
#cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0;
z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed;
width:100%; height:100%;}
#cboxMiddleLeft,
#cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay,
#cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;
height:100%;}
#cboxPrevious,
#cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left;
margin:auto; border:0; display:block;}
.cboxIframe{width:100%;
height:100%; display:block; border:0;}
/*
User
Style:
Change
the following styles to modify the appearance of ColorBox. They are
ordered
& tabbed in a way that represents the nesting of the generated
HTML.
*/
#cboxOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvwszpBjIG-bYA_FAd32d-5IQNc-fVBOjBJu6xAlMgwbGlswdKia8Bfx2SDkfNJLcf2NfFlUz7U_PMGbb5VYRuURTk_o2aMiPKSQ-89HewGa3sksyDvEaWh0iZ3gp41i1kdj0C7hSzPLHR/s1600/overlay.png)
repeat 0 0;}
#colorbox{}
#cboxTopLeft{width:21px;
height:21px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aXZHo1271n_PHQPk9bO1Ji0p6E8s6VzkwDqMQlhQI_z51LKEr6HnKtgP0sfqisC1uXw6p9FttNHBGE1Nbw_329E1EeJebqTR0MJ0Ry-hJrIaDX14Hn4gk73QMWDBbCjz1xn7Rse6pni-/s1600/controls.png)
no-repeat -101px 0;}
#cboxTopRight{width:21px;
height:21px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aXZHo1271n_PHQPk9bO1Ji0p6E8s6VzkwDqMQlhQI_z51LKEr6HnKtgP0sfqisC1uXw6p9FttNHBGE1Nbw_329E1EeJebqTR0MJ0Ry-hJrIaDX14Hn4gk73QMWDBbCjz1xn7Rse6pni-/s1600/controls.png)
no-repeat -130px 0;}
#cboxBottomLeft{width:21px;
height:21px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aXZHo1271n_PHQPk9bO1Ji0p6E8s6VzkwDqMQlhQI_z51LKEr6HnKtgP0sfqisC1uXw6p9FttNHBGE1Nbw_329E1EeJebqTR0MJ0Ry-hJrIaDX14Hn4gk73QMWDBbCjz1xn7Rse6pni-/s1600/controls.png)
no-repeat -101px -29px;}
#cboxBottomRight{width:21px;
height:21px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aXZHo1271n_PHQPk9bO1Ji0p6E8s6VzkwDqMQlhQI_z51LKEr6HnKtgP0sfqisC1uXw6p9FttNHBGE1Nbw_329E1EeJebqTR0MJ0Ry-hJrIaDX14Hn4gk73QMWDBbCjz1xn7Rse6pni-/s1600/controls.png)
no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aXZHo1271n_PHQPk9bO1Ji0p6E8s6VzkwDqMQlhQI_z51LKEr6HnKtgP0sfqisC1uXw6p9FttNHBGE1Nbw_329E1EeJebqTR0MJ0Ry-hJrIaDX14Hn4gk73QMWDBbCjz1xn7Rse6pni-/s1600/controls.png)
left top repeat-y;}
#cboxMiddleRight{width:21px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aXZHo1271n_PHQPk9bO1Ji0p6E8s6VzkwDqMQlhQI_z51LKEr6HnKtgP0sfqisC1uXw6p9FttNHBGE1Nbw_329E1EeJebqTR0MJ0Ry-hJrIaDX14Hn4gk73QMWDBbCjz1xn7Rse6pni-/s1600/controls.png)
right top repeat-y;}
#cboxTopCenter{height:21px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCze1-SpNCIvl1iJ8cjtj55equlvzzUiloI7C-IEzy3VFOgoIDPuNoP3PE1h90bDFzQ_K58nHVy_9WU9a0mId5h9Eg-6WSg43lLskyBIMGTt-EOgnmsZdz2ayleQT9z1rpOpkSehCtu0FA/s1600/border.png)
0 0 repeat-x;}
#cboxBottomCenter{height:21px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCze1-SpNCIvl1iJ8cjtj55equlvzzUiloI7C-IEzy3VFOgoIDPuNoP3PE1h90bDFzQ_K58nHVy_9WU9a0mId5h9Eg-6WSg43lLskyBIMGTt-EOgnmsZdz2ayleQT9z1rpOpkSehCtu0FA/s1600/border.png)
0 -29px repeat-x;}
#cboxContent{background:#fff;
overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px;
border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute;
bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute;
bottom:4px; left:58px; color:#949494;}
#cboxSlideshow{position:absolute;
bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute;
bottom:0; left:0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aXZHo1271n_PHQPk9bO1Ji0p6E8s6VzkwDqMQlhQI_z51LKEr6HnKtgP0sfqisC1uXw6p9FttNHBGE1Nbw_329E1EeJebqTR0MJ0Ry-hJrIaDX14Hn4gk73QMWDBbCjz1xn7Rse6pni-/s1600/controls.png)
no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px
-25px;}
#cboxNext{position:absolute;
bottom:0; left:27px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aXZHo1271n_PHQPk9bO1Ji0p6E8s6VzkwDqMQlhQI_z51LKEr6HnKtgP0sfqisC1uXw6p9FttNHBGE1Nbw_329E1EeJebqTR0MJ0Ry-hJrIaDX14Hn4gk73QMWDBbCjz1xn7Rse6pni-/s1600/controls.png)
no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px
-25px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwKNKvdiPwfoSpM1BNf0ixQxNQNqkf-JqAtBrLCS-b1HOcp7Cr_c-ocHmSeHJ5qlkhgTujVHH85eXIYtTrdXbhvKzZyfOxScVY9YXdIJFAenV3co4MPMenLASzMu9o0hczxHc9rUsDYBCK/h120/loading.gif)
no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwKNKvdiPwfoSpM1BNf0ixQxNQNqkf-JqAtBrLCS-b1HOcp7Cr_c-ocHmSeHJ5qlkhgTujVHH85eXIYtTrdXbhvKzZyfOxScVY9YXdIJFAenV3co4MPMenLASzMu9o0hczxHc9rUsDYBCK/h120/loading.gif)
no-repeat center center;}
#cboxClose{position:absolute;
bottom:0; right:0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aXZHo1271n_PHQPk9bO1Ji0p6E8s6VzkwDqMQlhQI_z51LKEr6HnKtgP0sfqisC1uXw6p9FttNHBGE1Nbw_329E1EeJebqTR0MJ0Ry-hJrIaDX14Hn4gk73QMWDBbCjz1xn7Rse6pni-/s1600/controls.png)
no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px
-25px;}
/*
The
following fixes a problem where IE7 and IE8 replace a PNG's alpha
transparency with a black fill
when
an alpha filter (opacity change) is set on the element or ancestor
element. This style is not applied to or needed in IE9.
See:
http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE
#cboxTopLeft,
.cboxIE
#cboxTopCenter,
.cboxIE
#cboxTopRight,
.cboxIE
#cboxBottomLeft,
.cboxIE
#cboxBottomCenter,
.cboxIE
#cboxBottomRight,
.cboxIE
#cboxMiddleLeft,
.cboxIE
#cboxMiddleRight {
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
/*
The
following provides PNG transparency support for IE6
Feel
free to remove this and the /ie6/ directory if you have dropped IE6
support.
*/
.cboxIE6
#cboxTopLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEm8L5YzSNBB64SlDSUYFqbpRMEFSP3U4X_UbixzWTFs8DgTzrPVprJlX5HgKldrHqpNo6cnYLrGc3kZHJsh8rIQBaTMbwtzH2aieMKxEqbfFJfwyULTG1sydXFgx4hPtMMWhEJs-DqSvk/s1600/borderTopLeft.png);}
.cboxIE6
#cboxTopCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEoj1c5qsldQA4mrvdRlQmpa7OfkCXcqMaqbNJ0a0O4nK_TgWtKCHpqgc_EGwVcu3my2G1nJTK40Vhz28jckA9mGgXbcKyGK07g41cf7N8wszmx0V_YSjgJu2v08cv7iCiWtUcdHfhfNln/s1600/borderTopCenter.png);}
.cboxIE6
#cboxTopRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMw8MfuzEJeUG6g1yVMXEnqGZgiWmmAWWw8HGTWk98px5wwNr7kRsGsahX0URSw-4x4pgeUT-CKdqzIA6XrWpwVZv15SjKQVuL9QioSPR4F8G7-V6hOTS52yGDKH7UNAPDu4qnpv4VA0so/s1600/borderTopRight.png);}
.cboxIE6
#cboxBottomLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMw8MfuzEJeUG6g1yVMXEnqGZgiWmmAWWw8HGTWk98px5wwNr7kRsGsahX0URSw-4x4pgeUT-CKdqzIA6XrWpwVZv15SjKQVuL9QioSPR4F8G7-V6hOTS52yGDKH7UNAPDu4qnpv4VA0so/s1600/borderTopRight.png);}
.cboxIE6
#cboxBottomCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEe61GjTwqPYcJe3_WGPh2S2Of6Kleru1hp0z-4lPl3c29QRxxnN4_rGfNcJuthcd4ow-ZDohk4LkszZCB9p8AS3isKAkfPErzuJFYdyhFth6yQgUo9qHFtLpY1hRo3_5ClNxfIsKP7mb_/s1600/borderBottomCenter.png);}
.cboxIE6
#cboxBottomRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhex2_UPKHl3REZhWRISs8FRzCRb0zLhDr6N32ZBf5iumWBaUZG344w4KJwcvUB7bzIyFnWBEgum4jPzyWjHNl_W-dG-xPSqGar2imakSMHcomWYfw72hbAL37FgzFPmdwqUsQ6NaKALPO9/s1600/borderBottomRight.png);}
.cboxIE6
#cboxMiddleLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQIJ2p9Rj24fEayoJo1XQduct4huppRgNmg9Vk7H5JQV-_a2OBxXlzc9k8BcCnAtPIj20tmxSAaZklelXKMEE-z4EwI_bq8oYjwrtdlFI-BD966P5lYRTo8esr4IgoyBnNmYpatzRCyTLx/s1600/borderMiddleLeft.png);}
.cboxIE6
#cboxMiddleRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtOOEBIv3XqTFq01ZlHA0lMGluvvoOHs-L7mzygbpq-2-e0efWDk7TzfCdJqUqh-9NaCRo0OxPdVSHLJD_E3GggFficMn9sVvx5bTCxSTW7ZKQQGi1tZEORCW2ex0R4qjrZZCEUHbzFWfD/s1600/borderMiddleRight.png);}
.cboxIE6
#cboxTopLeft,
.cboxIE6
#cboxTopCenter,
.cboxIE6
#cboxTopRight,
.cboxIE6
#cboxBottomLeft,
.cboxIE6
#cboxBottomCenter,
.cboxIE6
#cboxBottomRight,
.cboxIE6
#cboxMiddleLeft,
.cboxIE6
#cboxMiddleRight {
_behavior:
expression(this.src = this.src ? this.src :
this.currentStyle.backgroundImage.split('"')[1],
this.style.background = "none", this.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" +
this.src + ", sizingMethod='scale')");
}
/*-----------------------------------------------------------------------------------*/
/*
Facebook Likebox popup For Blogger By Helper Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe
{
font:
12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe
a,
#subscribe
a:hover,
#subscribe
a:visited {
text-decoration:none;
}
.box-tagline
{
color:
#999;
margin:
0;
text-align:
center;
}
#subs-container
{
padding:
35px 0 30px 0;
position:
relative;
}
a:link,
a:visited {
border:none;
}
.demo
{
display:none;
}
</style>
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script
src="http://code.helperblogger.com/jquery.colorbox.js"></script>
<script
type="text/javascript">
jQuery(document).ready(function(){
if
(document.cookie.indexOf('visited=true') == -1) {
var
fifteenDays = 1000*60*60*24*7;
var
expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie
= "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px",
inline:true, href:"#subscribe"});
}
});
</script>
<!--
This contains the hidden content for inline calls -->
<div
style='display:none'>
<div
id='subscribe' style='padding:10px; background:#fff;'>
<center><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9OEvjjgZ87ewMiijWZQ5Bf7k_TBxWFOcfWFCop6J_WnLjUshZNiODz8gw-Em-VRFvbHr0bU9NdsuVaX_rN-LMlpF-4BwDWY_J_bsFVZeP4cty9avBh8NJp9fRhoHMWbpmvTeQvA33XNlK/s1600/LikeUsOnFacebook.png"
width:300px; height:150px;"/></center>
<center>
<iframe
src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbtsnts&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258"
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:300px; height:258px;"
allowtransparency="true"><!-- Warning: Don't edit
this line,If you edited this line then your gadget may not work
--></iframe></center><p style=" float:right;
margin-right:45px; font-size:4px;" ><a style="
font-size:8px; color:#3B78CD; text-decoration:none;"
href="http://goo.gl/9fXrd">Grab This Gadget »</a>
</p></div>
</div>
Sekarang
gantikan btsnts dengan username facebook
page anda (yang dalam warna merah)
Penyesuaian
(Optional)
Saya
telah menetapkan masa popup ini keluar 7 hari yang bermakna po pup
ini akan muncul hanya sekali dalam 7 hari pelawat melawat.Jika anda
mahu popup ini muncul setiap hari anda hanya perlu menukar * 7
nilai * 1 dalam kod di atas. (yang berwarna warna Kuning)
Kenapa macam tak jadi saja....dkt mana nak masukkan link url facebook
ReplyDelete