How
to add a face book pop up like box for your Blog
අද වන විට ශ්රී ලංකාවේ වෙබ් හා බ්ලෝග් ලිවිමේ හා පවත්වා ගෙන යාම දැනට හොද තත්වයක් තියේනවා. අද වෙනකොට ශ්රී ලංකාවේ වෙබ් හා බ්ලෝග් සයිට් 13 000කට වඩා වැඩි ප්රමානයක් තියේනවා. ඉතින් , ඒ තරමටම ශ්රී ලංකාවේ වෙබ් හා බ්ලෝග් ප්රසිද්ධයි.
ඉතින් , මේ වෙබ් හා බ්ලෝග් කරන අය , තමන්ගේ වෙබ් හා බ්ලෝග් සයිට් වලට එක එක විධියේ ගැජට් එකතු කරනවා.
ඉතින්, මේ Facebook Pop Up Like Box එක කියන්නේ ඔයාලගේ වෙබ් හෝ බ්ලෝග් සයිට් එකේ FB Page එකට Likes වැඩි කරගන්න භාවිතා කරන්න පුලුවන් හොදම ක්රමයක්.
මේ Facebook Pop Up Like Box වර්ග 2ක් තියේනවා.
ඒ Timer එකක් ඇතුව හා Timer එකක් නැතුව යන ආදි ලෙස වේ.
Timer එකක් තියේන Facebook Pop Up Like Box එක.
ඉතින් , මේ වෙබ් හා බ්ලෝග් කරන අය , තමන්ගේ වෙබ් හා බ්ලෝග් සයිට් වලට එක එක විධියේ ගැජට් එකතු කරනවා.
ඉතින්, මේ Facebook Pop Up Like Box එක කියන්නේ ඔයාලගේ වෙබ් හෝ බ්ලෝග් සයිට් එකේ FB Page එකට Likes වැඩි කරගන්න භාවිතා කරන්න පුලුවන් හොදම ක්රමයක්.
මේ Facebook Pop Up Like Box වර්ග 2ක් තියේනවා.
ඒ Timer එකක් ඇතුව හා Timer එකක් නැතුව යන ආදි ලෙස වේ.
Timer එකක් තියේන Facebook Pop Up Like Box එක.
මේ Facebook Pop Up Like Box එකේ වම් පැත්තේ පහලින් Timer එක බලා ගන්න පුලුවන්.
හරි , ඔයාලටත් මේ වගේ Timer එකක් තියේන Facebook Pop Up Like Box එකක් තමන්ගේ බ්ලෝග් එකට දා ගන්න ඕන නම් , මේ පහල විධියට කරන්න.
1.) මුලින්ම මේ පහල Code එක Copy කරගන්න.
<style type='text/css'>
#trickslankapopup{
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;
}
#trickslankapopup span{
font-size:20px !important;
font-weight:bold !important;
}
#trickslankapopup h1{
background:#6d84b4 url(http://code.trickslanka.com/image/facebook/%5Bwww.trickslanka.com%5Dh1.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;
}
#tlfooter{
text-align:left;
background:#F2F2F2 !important;
height:56px !important;
padding:10px 10px 10px 10px !important;
overflow:hidden !important;
}
#tlclose{
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;
}
#tlclose: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 trickslanka_ppopup() {
var sec = 15
var timer = setInterval(function() {
$("#tlfooter span").text(sec--);
if (sec == 0) {
$("#trickslankapopup").fadeOut("slow");
clearInterval(timer);
}
},1000);
var tlwh = jQuery(window).height();
var tlpph = jQuery("#trickslankapopup").height();
var tlfromTop = jQuery(window).scrollTop()+50;
jQuery("#trickslankapopup").css({"top":tlfromTop});}
jQuery(window).fadeIn(trickslanka_ppopup).resize(trickslanka_ppopup)
//alert(jQuery.cookie('sreqshown'));
//var tlww = jQuery(window).width();
//var tlppw = jQuery("#trickslankapopup").width();
//var tlleftm = (tlww-tlppw)/2;
var tlleftm = 500;
//var tlwh = jQuery(window).height();
//var tlpph = jQuery("#trickslankapopup").height();
//var tlfromTop = (jQuery(window).scrollTop()+tlwh-tlpph) / 2;
jQuery("#trickslankapopup").animate({opacity: "1", left: "0" , left: tlleftm}, 0).show();
jQuery("#tlclose").click(function() {
jQuery("#trickslankapopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>
<div id="trickslankapopup">
<h1>Join us on Facebook</h1>
<div class="htmlarea">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/SevenNetWebSiteOfficialPage&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">
By <a href="http://www.AllSevenNet.blogspot.com/" target="_blank">Seven Net</a> / <a href="http://allsevennet.blogspot.com/2013/09/FB-Pop-Up-Like-Box-WithOrWithout-Timer.html" target="_blank">+ Get This !!</a>
</div>
</div>
<div id="tlfooter">
Please wait..<span>10</span> Secofrands
<a href="#" id="tlclose" onclick="return false;">Close</a>
</div>
</div>
<!!-- End Facebook Pop Up Like Box Codes. --!!></!!--></!!-->
2. ) දැන් , ඔබේ බ්ලෝග් එකේ Layout වලට යන්න.
3. ) ඊට පස්සේ , පැත්තකින් තියේන Add a Gadget කියන එක ක්ලික් කරන්න.
4. ) දැන් එන මෙනු එකේ පොඩ්ඩක් පහලට ගිහින් , HTML/JavaScript කියන එක ක්ලික් කරන්න.
5. ) දැන් , එන බොක්ස් එකේ , ලොකු කොටුව ඇතුලේ , අපි අර කලින් Copy කර ගෙන ආපු Codes ටික Paste කරන්න. ( Title එකට කැමති නම් නමක් දෙන්න , නැත්නම් නිකන්ම තියේන්න දෙන්න. )
6. ) දැන් Save එක ක්ලික් කරන්න.
7. ) මේකේ https://www.facebook.com/SevenNetWebSiteOfficialPage කියල තියේන එක විතරක් අයින් කරලා , ඔයාගේ බ්ලෝග් එකේ FB Page එකේ Link එක දෙන්න. ( අයින් කල යුතු Code එක විතරක් නිල් පාටින් පෙන්වා ඇත. )
var sec = 15 ලෙස පෙන්වා තියේන්නේ Facebook Pop Up Like Box එක පවතින කාලය වේ. ( තත්පර වලින්. ) [ මෙයද නිල් පාටින්ම පෙන්වා ඇත. ]
අපි මෙහිදි , මෙම Facebook Pop Up Like Box එක තත්පර 15කට සිමා කර ඇත. ඔබට ඕන නම් , එහි තිබේන 15 , කැමති තත්පර ගණනකට වෙනස් කල හැක. ( තත්පර 15ක් නම් ඉතා හොදයි. )
8. ) මේ Timer එක තියේන Facebook
Pop Up Like Box එක ඔයාගේ සයිට් එකේ පෙන්වන්නේ නැති නම් , එසේ විමට හේතුව වෙන්නේ , මේ පහල තියේන Code එක ඔයාගේ සයිට් එකේ නැති නිසයි.
ඒ නිසා , මේ පහල Code එක Copy කර ගෙන , සයිට් එකේ Template කියන එකට යන්න.
ඒ නිසා , මේ පහල Code එක Copy කර ගෙන , සයිට් එකේ Template කියන එකට යන්න.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
ඊට පස්සේ Key Board එකේන් Ctrl + F කියන 2ක ඔබන්න. දැන් , පොඩි කොටුවක් එවි.
අන්න එකේ </head> කියල ටයිප් කරලා , Enter එක ඔබන්න.
දැන් , ඒ </head> කියන Code එක පාට වෙලා පෙනේවි.
අන්න , ඒ </head> එකට උඩින් , අර කලින් Copy කරන් ආපු Code එක Paste කරන්න.
දැන් , ටෙම්ප්ලේට් එක Save කරන්න.
දැන් , ආපහු සයිට් එක Open කරල බලන්න.
දැන් , Timer එකත් එක්ක Facebook Pop Up Like Box එක බලා ගන්න පුලුවන්.
Timer එකක් නැති Facebook Pop Up Like Box එක
හරි , දැන් එක දැක්කනේ..
ඉතින් , ඒ වගේ Timer එකක් නැති Facebook Pop Up Like Box එකක් ඔබේ බ්ලෝග් සයිට් එකට දා ගන්න ඕන නම් , මේ පහල විධියට කරන්න.
1.) මුලින්ම මේ පහල Code එක Copy කරගන්න.
<!!-------
Facebook Pop Up Like Box Without Timer By Seven Net -
www.AllSevenNet.blogspot.com -------!!>
<style type="text/css">
* html #Trickstoostylepopupdiv {
position:absolute;
overflow:hidden;}
#Trickstoostylepopupdiv {
display:block;
top:0px;
left:0px;
width:100%;
height:100%;
position:fixed;
background-color:none;
margin:0;
overflow-y:hidden;}
#Trickstoostylepopup {
background-color: #fff;
overflow:none;
overflow:hidden;}
.Trickstoostylepopup {
width:333px;
overflow:hidden;
height:375px;
position:fixed;
top:45%;
left:50%;
margin-top:-210px;
margin-left:-200px;
border: 10px solid #999;
padding: 20px;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto;
overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<div id="Trickstoostylepopupdiv">
<div id="Trickstoostylepopup" class="Trickstoostylepopup">
<center>
<h3 class="title">
<a href="https://www.facebook.com/SevenNetWebSiteOfficialPage" target="_blank">Like Us Now !!
<img src="https://lh6.googleusercontent.com/-o4_pF2W6178/Ud-uksiX-sI/AAAAAAAABLQ/AMsZjEEoOKM/w291-h93-no/Like+Us+On+FB.jpg" /></a>
</h3>
</center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/SevenNetWebSiteOfficialPage& width=300&colorscheme=light& show_faces=true& border_color=%23ffffff& stream=false&header=false& height=250" scrolling="no" frameborder="0" style="border:none;
overflow:hidden;
width:300px;
height:216px;" allowtransparency="true">
</iframe>
</center>
<div style=" float:left;
margin-left:0px;
font-size:9px;
cursor:pointer;" >
<a style=" font-size:9px;
color:#3B78CD;
text-decoration:none;" onmouseup="document.getElementById('Trickstoostylepopupdiv')
.style.display='none'">
<img src="https://lh4.googleusercontent.com/-FAY9AKcE7fE/Ud_JY_Or9qI/AAAAAAAABOM/MZnT6mX7lB0/w98-h37-no/Close+%2528+FB+Pop+Up+Box++2.jpg" />
</a>
<a href="http://allsevennet.blogspot.com/2013/09/FB-Pop-Up-Like-Box-WithOrWithout-Timer.html" target="_blank">
<img src="https://lh6.googleusercontent.com/-WeGeofp6z1M/Uf0-0OAF7oI/AAAAAAAABXo/ALmhIKEqOvc/w105-h33-no/Get+This.jpg"/></a>
</div>
</div>
</div>
<style type="text/css">
* html #Trickstoostylepopupdiv {
position:absolute;
overflow:hidden;}
#Trickstoostylepopupdiv {
display:block;
top:0px;
left:0px;
width:100%;
height:100%;
position:fixed;
background-color:none;
margin:0;
overflow-y:hidden;}
#Trickstoostylepopup {
background-color: #fff;
overflow:none;
overflow:hidden;}
.Trickstoostylepopup {
width:333px;
overflow:hidden;
height:375px;
position:fixed;
top:45%;
left:50%;
margin-top:-210px;
margin-left:-200px;
border: 10px solid #999;
padding: 20px;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto;
overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<div id="Trickstoostylepopupdiv">
<div id="Trickstoostylepopup" class="Trickstoostylepopup">
<center>
<h3 class="title">
<a href="https://www.facebook.com/SevenNetWebSiteOfficialPage" target="_blank">Like Us Now !!
<img src="https://lh6.googleusercontent.com/-o4_pF2W6178/Ud-uksiX-sI/AAAAAAAABLQ/AMsZjEEoOKM/w291-h93-no/Like+Us+On+FB.jpg" /></a>
</h3>
</center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/SevenNetWebSiteOfficialPage& width=300&colorscheme=light& show_faces=true& border_color=%23ffffff& stream=false&header=false& height=250" scrolling="no" frameborder="0" style="border:none;
overflow:hidden;
width:300px;
height:216px;" allowtransparency="true">
</iframe>
</center>
<div style=" float:left;
margin-left:0px;
font-size:9px;
cursor:pointer;" >
<a style=" font-size:9px;
color:#3B78CD;
text-decoration:none;" onmouseup="document.getElementById('Trickstoostylepopupdiv')
.style.display='none'">
<img src="https://lh4.googleusercontent.com/-FAY9AKcE7fE/Ud_JY_Or9qI/AAAAAAAABOM/MZnT6mX7lB0/w98-h37-no/Close+%2528+FB+Pop+Up+Box++2.jpg" />
</a>
<a href="http://allsevennet.blogspot.com/2013/09/FB-Pop-Up-Like-Box-WithOrWithout-Timer.html" target="_blank">
<img src="https://lh6.googleusercontent.com/-WeGeofp6z1M/Uf0-0OAF7oI/AAAAAAAABXo/ALmhIKEqOvc/w105-h33-no/Get+This.jpg"/></a>
</div>
</div>
</div>
2.
) දැන් , ඔබේ බ්ලෝග් එකේ Layout වලට යන්න.
3. ) ඊට පස්සේ , පැත්තකින් තියේන Add a Gadget කියන එක ක්ලික් කරන්න.
4. ) දැන් එන මෙනු එකේ පොඩ්ඩක් පහලට ගිහින් , HTML/JavaScript කියන එක ක්ලික් කරන්න.
5. ) දැන් , එන බොක්ස් එකේ , ලොකු කොටුව ඇතුලේ , අපි අර කලින් Copy කර ගෙන ආපු Codes ටික Paste කරන්න. ( Title එකට කැමති නම් නමක් දෙන්න , නැත්නම් නිකන්ම තියේන්න දෙන්න. )
6. ) දැන් Save එක ක්ලික් කරන්න.
7. ) මේකේ තැන් 2ක අපේ FB Page එකේ ලින්ක් එක තියේනවා.
අන්න ඒ තැන් 2කේම https://www.facebook.com/SevenNetWebSiteOfficialPage කියන ටික විතරක් අයින් කරල , ඔබේ සයිට් එකේ FB Page එකේ ලින්ක් එක දාන්න. ( අයින් කල යුතු Codes 2ක විතරක් නිල් පාටින් පෙන්වා ඇත. )
ඒ වගේම like Us Now!! කියන තැනටත් , ඔබ කැමති ඕනැම දෙයක් දැමිය හැක.
( මෙයද නිල් පාටින්ම පෙන්වා ඇත. )
මම හිතනවා මේ Facebook Pop Up Like Box 2න්, 1ක් ඔබේ බ්ලෝග් සයිට් එකට දා ගන්න ඇති කියල.
ඉතින්, ඒ නිසා අනිවා Comment එකකුත් දාන්න.
3. ) ඊට පස්සේ , පැත්තකින් තියේන Add a Gadget කියන එක ක්ලික් කරන්න.
4. ) දැන් එන මෙනු එකේ පොඩ්ඩක් පහලට ගිහින් , HTML/JavaScript කියන එක ක්ලික් කරන්න.
5. ) දැන් , එන බොක්ස් එකේ , ලොකු කොටුව ඇතුලේ , අපි අර කලින් Copy කර ගෙන ආපු Codes ටික Paste කරන්න. ( Title එකට කැමති නම් නමක් දෙන්න , නැත්නම් නිකන්ම තියේන්න දෙන්න. )
6. ) දැන් Save එක ක්ලික් කරන්න.
7. ) මේකේ තැන් 2ක අපේ FB Page එකේ ලින්ක් එක තියේනවා.
අන්න ඒ තැන් 2කේම https://www.facebook.com/SevenNetWebSiteOfficialPage කියන ටික විතරක් අයින් කරල , ඔබේ සයිට් එකේ FB Page එකේ ලින්ක් එක දාන්න. ( අයින් කල යුතු Codes 2ක විතරක් නිල් පාටින් පෙන්වා ඇත. )
ඒ වගේම like Us Now!! කියන තැනටත් , ඔබ කැමති ඕනැම දෙයක් දැමිය හැක.
( මෙයද නිල් පාටින්ම පෙන්වා ඇත. )
මම හිතනවා මේ Facebook Pop Up Like Box 2න්, 1ක් ඔබේ බ්ලෝග් සයිට් එකට දා ගන්න ඇති කියල.
ඉතින්, ඒ නිසා අනිවා Comment එකකුත් දාන්න.
Courtesy Seven Net @ www.AllSevenNet.blogspot.com
No comments:
Post a Comment