බ්ලොග් එකට Pop Up වෙන FaceBook Like Box එකක් දාමු.

ඔන්න යාලුවනේ ගෙනාවා Blog එකක් කරන අපේ යාලුවන්ට ටිකක් වැදගත් වෙන Post එකක්. FaceBook කියන්නේ ඔයාගේ Blog එකට ලේසියෙන්ම  Traffic ගන්න පුලුවන් තවත් හොද ක්‍රමයක්නේ. ඒ නිසා Facebook Like Box එකක් අනිවාරෙන්ම තිබිය යුතු අංගයක් වෙනවා. දැන් මේ ලිපියෙන් කියන්න යන්නේ ඔයාගේ Blog එකට Pop Up වෙන Facebook Like Box එකක් Blog එකට දාගන්න විදිහකුයි. Pop Up වෙන Like Box එකක් දැම්මම  ඔයාගේ සයිට් එකට එන කට්ටියගේ අවදානය ඒ වෙත යනවනේ. ඒක ඔයාගේ FaceBook Page එකේ Like ප්‍රමාණය වැඩි කරගන්නත් හොද ක්‍රමයක්නේ. මේ දැන් කියන්න යන ක්‍රමයෙන් ලේසියෙන්ම Facebook Pop Up  වන Like Box  එකක් Blog එකට දාගන්න පුලුවන්. Template එක Edit කරන්නත් අවශ්‍ය නෑ. Widget එකක් හරහා තමයි වැඩේ වෙන්නේ. ඔයාගේ Blog එකේ Like Box එකක් නැත්නම් අනිවා දාගන්න.

හරි මෙහෙමයි වැඩේ කරගන්නේ.

*  ඔයාගේ Blogger Account එකට ලොග් වෙලා Dashboard >> Layout වෙත ගිහින් Add a Gadget ක්ලික් කරන්න.

*  ඊට පස්සෙ HTML / Javascript ක්ලික් කරන්න.

* ඊට පස්සෙ පහත දීලා තියන Like Box වලින් කැමති එකක Code එක කොපි කරගෙන දාගන්න.

FaceBook Pop Up Like Box Style 1

Code එක

<link rel="stylesheet" type="text/css" href="http://dl.dropboxusercontent.com/s/wt4ulsj3cvct3fi/lightbox-style-popup-facebook-likebox-widget-02.css" /><script src="http://dl.dropboxusercontent.com/s/7bcjeubaenpmbf9/facebook-colorbox-v1.3.19.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=false') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="All Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="All Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/24workpng1" alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a> <!-- This contains the hidden content for inline calls --> <div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>
<center>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/podipodidhewal&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe></center>

</div>
</div>

Note :-
* රතු පාටින් තියන " https://www.facebook.com/podipodidhewal " වෙනුවට ඔයාගේ Facebook Page එකේ URL එක දෙන්න.

* Receive all updates via Facebook. Just Click the Like Button Below = මේක වෙනුවට ඔයාට කැමති ඕණ එකක් දෙන්න.

FaceBook Pop Up Like Box Style 2

Code එක

<style type="text/css">
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWrKUKg3yM6j4Vogrb2j9bv69NwVxam1gzxkHfP0IMBnr9Ez4gDv2sKgo3bosm3Y0zzQTaHSDDpNHITUNb6AirDm9KKK5JRmvp9cfc4ETqAueJdus0yZ-Jyjxfq72gmGhE-Az1f6mGTMEr/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style> <script type="text/javascript"> //<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}

value = String(value);

return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}

// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]> </script><a href="http://myblog-widgets.blogspot.com/" rel="dofollow" target="_blank" title="My Blog Widgets"><img src="https://bitly.com/24workpng1" alt="My Blog Widgets" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://myblog-widgets.blogspot.com/" rel="dofollow" target="_blank" title="My Blog Widgets"><img src="https://bitly.com/24workpng1" alt="My Blog Widgets" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://myblog-widgets.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"><img src="https://bitly.com/24workpng1" alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a> <script type="text/javascript"> jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}

});
</script>

<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='fanbox'>
<div id='fanclose'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?

href=https://www.facebook.com/podipodidhewal&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
</center>
</div>
</div>

Note :-

 * රතු පාටින් තියන " https://www.facebook.com/podipodidhewal " වෙනුවට ඔයාගේ Facebook Page එකේ URL එක දෙන්න.

එහෙනම් යාලුවනේ අපි යනවා. තවත් අලුත් ලිපියකින් හමුවෙමු.

Post එක කියවලා නිකන්ම යන්නේ නැතුව Comment එකක් එහෙම දාලාම යන්න. අමතක නොකර Facebook Page එකටත් පොඩි " LIKE " එකක් දාගෙනම යන්න.