ඔයාගෙ බ්ලොග් එකටත් facebook pop - out like box එකක්..

දැන් ලoකාවෙ බ්ලොග් කලාව හරි ප්‍රසිද්ධයි නේ.ඒක ගොඩක් හොදයි.මොකද ඒකෙන් තමන්ගෙ දැනුම වැඩි වෙනව වගේම අනිත් අයටත් හොද දැනුමක් ලබා ගන්න පුලුවන්.මාත් බ්ලොග් කලාවෙ ආරම්භයේ තමයි තාම ඉන්නෙ.හැමදාම මොකක් හරි එකක් අත්හදා බලනව.මගේ බ්ලොග් එකත් එක්ක දිගටම හිටපු කෙනෙක් නම් දන්නව ඇති මේ කෙටි කාලෙට මම templete කොච්චර මාරු කරාද කියලා. බ්ලොග් කරන අයට මම කියන්නෙ නිතරම අලුත් දේවල් අත්හදා බලන්න. එතකොට තමයි දේවල් ඉගෙන ගන්න පුලුවන්. 

හරි දැන් මාතෘකාවට බහිමුකෝ.කට්ටිය දන්නවනේ facebook pop - up like box එක.මේ ඒක නෙමෙයි.මේ  pop - out like box එක.මගේ බ්ලොග් එකේ දකුණු පැත්තෙ උඩ තියෙන්නෙ.හරි බලමු ඒක  බ්ලොග් එකට දා ගන්න හැටි.

1.මුලින්ම පහල code  එක කොපි කරගෙන

click here to copy the code

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style type="text/css">
img, a { border: 0; }
#on { visibility: visible; }
#off { visibility: hidden; }
#facebook_div { width: 196px;
height: 340px;
overflow: hidden; }
#facebook_right {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 196px;
height: 353px;
position: fixed;
right: -200px; }
#facebook_right img {
position: absolute;
top: -2px;
left: -35px; }
#facebook_right iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
left: -2px;
top: -3px; }
#facebook_left {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 196px;
height: 353px;
position: fixed;
left: -200px; }
#facebook_left img {
position: absolute;
top: -2px;
right: -35px; }
#facebook_left iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
right: -2px;
top: -3px; }
</style>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#facebook_right").hover(function () {
jQuery(this)
.stop(true, false)
.animate({ right: 0 }, 500); }, function () {
jQuery("#facebook_right")
.stop(true, false) .animate({ right: -200 }, 500); });
});
</script> <br /> <div id="on"> <a href="http://www.jobsmag.in/" rel="dofollow" target="_blank" title="Jobsmag.in"><img src="http://img1.blogblog.com/img/blank.gif" alt="Jobsmag.in" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www.jobsmag.in/" rel="dofollow" target="_blank" title="Indian Education Blog"><img src="http://img1.blogblog.com/img/blank.gif" alt="Indian Education Blog" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><div id="facebook_right" style="top: 10%;">
<div id="facebook_div">
<img alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6NvXOgwyTPIvnkeNTU0W4MnLoRkHYlmrkelvBPIeY0oM5cBlA2NP7j_nneZDLQAuFMwIHxdV3cm05kPxhoDBOOCxXU4AEfFo4g8TXLc93HAN22R3DXZ1TYhp6zXk-QkRtOr1s7JGx0bsB/s1600/NBTfacebook_right.png" />
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages/Nelums-blogspot/190752611132541?ref=tn_tnmn&amp;
width=200&amp;
height=346&amp;
colorscheme=light&amp;
show_faces=true&amp;
border_color&amp;
stream=false&amp;
header=false" style="border: none;
height: 346px;
overflow: hidden;
width: 200px;">
</iframe>
</div>
</div></div>
 
2. දැන් blog එකේ dashboard එකට යන්න.
3. layout > Add a gadet > HTML java script එකට past කරන්න.
4.දැන් ඔය රතු පාටින් තියෙන එකට  ඔයාගෙ fb page එකේ url එක දෙන්න.
5.දැන් ඉතින් save කරන්න.

එච්චරයි..එහෙනම් මම ගියා.