Timer එකක් සහිත Facebook Pop Up Like Box එක Blog අඩවියට එක්කර ගනිමු.
බ්ලොග් අඩවියක් පවත්වාගෙන යන අය තමන්ගෙ බ්ලොග් අඩවිය
අලංකාරවත්ව හා කිසියම් පිළිවෙලක් සහිතව කරගෙන යාමට විවිධ Widget
බ්ලොග් අඩවියට එකතු කරගනු ලබනවා...
ඒ අතරින් තරමක් වෙනස් Widget එකක් බ්ලොග් අඩවියට එකතු කරගත හැකි වුවහොත්
තවත් අපූරුයි නේද?
එවැනි අපූරු Widget එකක් තමයි අද Cyber Teach Zone විසින් ඔබ වෙත
ගෙන එන්නේ...
මේක Facebook Pop Up Like Box එකක්...Timer එකක් සහිත වීම
මෙහි ඇති විශේෂත්වයයි...මෙම Widget එක මගින් තමන්ගෙ බ්ලොග් අඩවිය අලංකාරවත්
වනවා පමනක් නොව තමන්ගෙ බ්ලොග් අඩවියේ Facebook Fan Page එකේ
Like ප්‍රමාණයද මේ හරහා විශාල ලෙස වැඩිකර ගැනීමට පුලුවන්...
මේ සදහා තත්පර 10 ක කාලයක් බ්ලොග් අඩවියට පැමිනෙන පුද්ගලයින්ට ලබාදේ...
මුලින්ම ඔබගේ බ්ලොග් අඩවියේ Template එක Edit කරගත යුතු වනවා...
මේ සදහා Template Click කර Edit Html Click කරන්න...
දැන් Html Code එක තුළ Click කර Ctrl+F Press කර පැමිනෙන
Search Box එකේ <head> යනුවෙන් Type කර Enter කරන්න...
දැන් <head> එකට පහලින් පහත Code එක Copy කර Paste කරන්න...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
Save Template Click කරන්න...
දැන් Layout Click කරන්න...
Add a Gadget මත කරන්න...
එයින් Html/JavaScript මත Click කරන්න...
එහිදී පැමිනෙන Box එක තුළ පහතින් දැක්වෙන Code එක Copy කර Paste කරන්න...
#makingdifferentpopup{
position: fixed;
top:100px;
z-index:9999;
display:none;
padding:0px;
right:600px;
border:10px solid rgba(82, 82, 82, 0.7);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
border-radius:8px 8px 8px 8px;
width:400px;
height:360px;
overflow:hidden;
}
#makingdifferentpopup span{
font-size:20px !important;
font-weight:bold !important;
}
#makingdifferentpopup h1{
background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNA7e2dO1PVkm2LvcRIWVLQ9zdNENC18UIHYhWKKrYyoh27LU9Ir_9PRiJYJrU0-QjGJqpgiGryYQoyB1ecOQ0YkFv5z5QlIhgA2jFKUTVSrsCY4loor8-A83bleWb4_q0eGLxv5ZyfpF8/s1600/%255Bwww.gj37765.blogspot.com%255Dh1.png) 98% no-repeat;
border:1px solid #3b5998 !important;
color:#FFFFFF !important;
font-size:20px !important;
font-weight:700 !important;
padding:5px !important;
margin:0 !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
overflow:hidden !important;
}
.htmlarea{
font-size:12px !important;
font-weight:normal !important;
height:265px !important;
padding:1px !important;
background:#fff !important;
border-bottom:2px solid #ddd;
overflow:hidden !important;
}
#mdfooter{
text-align:left;
background:#F2F2F2 !important;
height:56px !important;
padding:10px 10px 10px 10px !important;
overflow:hidden !important;
}
#mdclose{
float:right;
background-color:#eee !important;
border:1px solid #ccc !important;
color:#111 !important;
font-weight:bold !important;
padding:5px 8px 5px 8px !important;
text-decoration:none !important;
display:inline-block !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
outline:none !important;
position:relative !important;
font-size:18px !important;
margin:1px !important;
}
#mdclose:active{
top:1px;
left:1px;
}
.grabthis{
bottom:80px;
font:8px "lucida grande",tahoma,verdana,arial,sans-serif;
position:absolute;
right:6px;
text-align:right;
z-index: 99999;
}
.grabthis a{
color: #000;
text-decoration:none;
}
.grabthis a:hover{
text-decoration:underline;
}
</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function makingdifferent_ppopup() {
var sec = 10
var timer = setInterval(function() {
$("#mdfooter span").text(sec--);
if (sec == 0) {
$("#makingdifferentpopup").fadeOut("slow");
clearInterval(timer);
}
},1000);
var mdwh = jQuery(window).height();
var mdpph = jQuery("#makingdifferentpopup").height();
var mdfromTop = jQuery(window).scrollTop()+50;
jQuery("#makingdifferentpopup").css({"top":mdfromTop});}
jQuery(window).fadeIn(makingdifferent_ppopup).resize(makingdifferent_ppopup)
//alert(jQuery.cookie('sreqshown'));
//var mdww = jQuery(window).width();
//var mdppw = jQuery("#makingdifferentpopup").width();
//var mdleftm = (mdww-mdppw)/2;
var mdleftm = 500;
//var mdwh = jQuery(window).height();
//var mdpph = jQuery("#makingdifferentpopup").height();
//var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
jQuery("#makingdifferentpopup").animate({opacity: "1", left: "0" , left: mdleftm}, 0).show();
jQuery("#mdclose").click(function() {
jQuery("#makingdifferentpopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>
<div id="makingdifferentpopup">
<h1>Join us on Facebook</h1>
<div class="htmlarea">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fcyberteachzone&width=400&colorscheme=light&show_faces=true&border_color=%23fff&stream=false&header=false&height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe>
<div class="grabthis">
</div>
</div>
<div id="mdfooter">
Please wait..<span>10</span> Seconds
<a href="#" id="mdclose" onclick="return false;">Cancel</a>
</div>
</div>
මෙම Code එක තුළ ඇති cyberteachzone යන කොටස ඉවත් කර ඔබගේ
facebook Fan Page එකේ User Name එක Replace කරන්න...
දැන් සියල්ලම Save කරගත යුතුයි...
දැන් බ්ලොග් අඩවිය View කර බලන්න...ඔබට Facebook Pop Up Likebox
එක දර්ශණය වේ...
Tags:
Blogger
