Popup Facebook Like Box ඔයාලගෙ Blog එකට දා ගමුද..

ආ කොහොමද යාලුවනෙ ඔන්න කාලෙකින් මන් අද අලුත් පොස්ට් එකක් දාන්න හිතුව දැන් පොස්ට් දාන්නත් කම්මැලි අනෙ.. එත් ඉතින් ඔන්න අද අලුත් දෙයක් අරගන ආව මෙ තමා  අපේ blog එකට Popup Facebook Like Box එකක් දාන විදිය ඔන්න කියවල බලන්නකො කොහොමද වැඩෙ කරගන්නෙ කියල ඈ......

ඉස්සෙල්ලාම ඔයාලගේ Blogger Dashboard එකේ ඒ කියන්නේ Control Panel එකේ Layout කියන Tab කොටසට යන්න. එතනින් ගිහින් බ්ලොග් layout එකේ ඕනිම තැනක තියන Add Gadget කියන තැනක් click කරලා HTML/Javescript Gadget එකක් එකතු කරන්න දෙන්න. 

දැන් ඒ HTML box එකට පල්ලෙහා තියන Code ටික හරියටම Copy කරලා Paste කරන්න. 

වැඩේ හරියටම කරන්න නම් Code ටික හරියටම තියෙන්න ඕනි. 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script><script src="http://olusegun-fapohunda-calculator.googlecode.com/svn/justnaira/autoscroll/www.justnaira.com-jquery-colorbox.js"></script><style>#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%;}#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}.cboxPhoto{float:left;margin:auto;border:0;display:block;}.cboxIframe{width:100%;height:100%;display:block;border:0;}/**/#cboxOverlay{background:#000;opacity:0.5 !important;}#colorbox{/*box-shadow*/-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);box-shadow:0 0 15px rgba(0,0,0,0.4);}#cboxTopLeft{width:14px;height:14px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat 0 0;}#cboxTopCenter{height:14px;background:url(http://2.bp.blogspot.com/-3KW95qDrjH0/TwRGYol22fI/AAAAAAAACM4/lCr80B0MD2U/s1600/%255Bwww.gj37765.blogspot.com%255Dborder.png) repeat-x top left;}#cboxTopRight{width:14px;height:14px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat -36px 0;}#cboxBottomLeft{width:14px;height:43px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat 0 -32px;}#cboxBottomCenter{height:43px;background:url(http://2.bp.blogspot.com/-3KW95qDrjH0/TwRGYol22fI/AAAAAAAACM4/lCr80B0MD2U/s1600/%255Bwww.gj37765.blogspot.com%255Dborder.png) repeat-x bottom left;}#cboxBottomRight{width:14px;height:43px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat -36px -32px;}#cboxMiddleLeft{width:14px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) repeat-y -175px 0;}#cboxMiddleRight{width:14px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) repeat-y -211px 0;}#cboxContent{background:#fff;overflow:visible;}#cboxLoadedContent{margin-bottom:5px;}#cboxLoadingOverlay{background:url(http://3.bp.blogspot.com/-7VRvnW_MUSw/TwRGXjXjloI/AAAAAAAACM0/5K-J5jgkxo4/s1600/%255Bwww.gj37765.blogspot.com%255Dloadingbackground.png) no-repeat center center;}#cboxLoadingGraphic{background:url(http://3.bp.blogspot.com/-xjj51r2lm2M/TwRGaKezqHI/AAAAAAAACNI/lKX9_-YUUdY/s1600/%255Bwww.gj37765.blogspot.com%255Dloading.gif) no-repeat center center;}#cboxTitle{position:absolute;bottom:-25px;left:0;text-align:center;width:100%;font-weight:bold;color:#7C7C7C;}#cboxCurrent{position:absolute;bottom:-25px;left:58px;font-weight:bold;color:#7C7C7C;}#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute;bottom:-29px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png) no-repeat 0px 0px;width:23px;height:23px;text-indent:-9999px;}#cboxPrevious{left:0px;background-position:-51px -25px;}#cboxPrevious.hover{background-position:-51px 0px;}#cboxNext{left:27px;background-position:-75px -25px;}#cboxNext.hover{background-position:-75px 0px;}#cboxClose{right:0;background-position:-100px -25px;}#cboxClose.hover{background-position:-100px 0px;}.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px;right:27px;}.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px;right:27px;}.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}#jnfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666;}#jnfb a,#jnfb a:hover,#jnfb a:visited{text-decoration:none;}.jnbox-title{background:#000;color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;border:20px solid #ddd;/*border-radius*/-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;/*box-shadow*/-webkit-box-shadow:5px 5px 5px #CCCCCC;-moz-box-shadow:5px 5px 5px #CCCCCC;box-shadow:5px 5px 5px #CCCCCC;padding:10px;line-height:25px;font-family:arial !important;}.jnbox-tagline{color:#999;margin:0;text-align:center;}#jnsubs-container{padding:35px 0 30px 0;position:relative;}a:link,a:visited{border:none;}.demo{display:none;}</style><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:"#jnfb"});}});</script><div style='display:none'><div id='jnfb' style='padding:10px; background:#fff;'><h3 class="jnbox-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" ></p></center></h3><center><iframe src="//www.facebook.com/plugins/likebox.php?href=facebook.com%2F(Facebook Page User Name)&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> <p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.freewarehut.blogspot.com">FreewareHut</a></p></div></div>

දැන් Facebook Page User Name කියලා රතු පාටින් දක්වලා තියන තැනට ඔයාගේ Facebook Fanpage එකේ Username එක එතනට දාන්න. 
දැන් Gadget එක Save කරලා ඔයාගේ බ්ලොග් එකේ Preview එකක් බලන්න. එතකොට ඔයාලට Popup Like Box එක වැඩ කරනවා පෙනෙයි.

ඔන්න එහෙනම් වැඩෙ හරිනේ ඔයාලත් කරලම බලන්නකො ඈ ආයෙත් අලුත් පොස්ට් එකකින් හම්බෙමු එහෙනම් ජය වේවා ඔයාලට...  

LinkWithin_බ්ලොග් එකේ අපේ පෝස්ට් කියවන අයට පේන්න අනිත් පෝස්ට් ටික දාගමුද...

 

ඉතින් කොහොමද යාලුවනේ...අද මම කියන්න යන්නෙ අපි අමාරුවෙන් ලියන සටහන ගොඩක් කියවන කට්ටිය අතරට යවාගන්න පාවිච්චි කරන්න පුලුවන් පොඩි ගැජට් එකක් ගැන....
ඒ කියන්නෙ 1පෝස්ට් එකක් කියවනකොට අපේ අනිත් පොස්ට් මොනවද කියල එයාලට පේන්න එව්වගෙ තියන පින්තූරෙකුත් එක්ක දා ගන්නෙ කොහොමද කියල..

මේකට කියන්නෙ LinkWithin කියල...
ගොඩක් කට්ටිය නම කියපු ගමන් දන්නව ඇති... නොදන්න අයටයි මෙ කියන්නෙ...

මම මෙ කියන්න යන්නෙ මෙන්න මෙ වගේ හදා ගන්න හැටි..

මේ ගැජට් එක free එකක් ඒ වගේම මේක අපේ බ්ලොග් එකට දාගන්න ලොකු ගේමක් දෙන්න ඕනත් නෑ. Register වෙන්න ඕනත් නෑ...
ඔයාට කරන්න තියෙන්නෙ බ්ලොග් එකට ලොග් වෙලා මෙතනට (LinkWithin Site).. (එන වින්ඩො එකෙන් SKIP AD කිලික් කරන්න)  ගිහින් ගැජට් එක දාගන්න එක විතරයි....

ඔයාගෙ බ්ලොග් එක Blogger බ්ලොග් එකක්නම් දැම්මට පස්සෙ Layout page එකට ගිහිල්ල Blog Posts කියන Gadget එකට යටින් මේ අලුත් Gadget එක දාන එක තමයි ගොඩක් හොඳ. හැබැයි ඒකෙ default title එක එන්නෙ "You might also like:" කියල...

ඒක සිංහලෙන් දාන්නනම් පහළ තියන code එක Gadget එකේ edit mode එකට ගිහින් ඒකෙ Edit Content කියන ඒකේ Content කියන එකේ උඩින්ම paste කරන්න...
රූපෙ බැලුවොත් පැහැදිළි වෙයි...

 <script>linkwithin_text=' මේ ටිකත් කියවල බලන්න ඈ.. :'</script>

 
ඔන්න එහෙනම් වැඩෙ හරි.. ඔයලත් කරලම බලන්නකෝ...
මම යනෝ ආයෙත් අලුත් පොස්ට්1න් හම්බෙමුකෝ ඈ.....

මතක් කරල LIKE,FOLLW පාරක් එහෙම දාල.. මගෙ බ්ලොග් එකට සෙට් වෙලාම යන්න ඈ... :)

Facebook Comment Box එකක් ඔයාලගෙ Blog එකට දා ගමු...

 

ඔන්න මම දදෙන්න යන්නෙ මම ගොඩාක් කල් හොයපු දෙයක් ඇත්තටම මම මගෙ බ්ලොග් එකට මෙ comment box එක දා ගන්න ගොඩාක් මහන්සි වුනා ඒ වගෙම හැම තැනම හෙවුව.. ඔයාල දන්නවනෙ උත්සහ වන්තයා ජය ගන්නව කියල ඔන්න ඉතින් අන්තිමට මම ජය ගත්ත..

ඇත්තටම දැනට තියන Blogger comment box එකේ comment එකක් දාන්න ගියාම security code වගේ දේවල් අහන නිසා ගොඩක් අය ඒකට කැමති නෑ. 

ඔයාගේ Blog ඒකට Comment අඩු වෙන්න මේකත් එක හේතුවක් තමයි..

ඒක නිසා මම හිතුව ඔයාලටත් මෙක කියල දෙන්න......


ඔන්න එහෙනම් අපි වැඩෙ පටන් ගමු..

මුලින්ම මේකට ඔයාගේ Blogger comment box එක remove කරන්න ඕනේ. මේකට අලුත් User Interface 1 use කරන අයටයි, පරණ ක්‍රමේ use කරන අයටයි ක්‍රම 2 ක් තියනවා..

New Interface Users: dashbord >> settings >> posts and comments >>> Comment Location

Old Interface Users: dashbord >> settings >> comments
(මේක තේරෙන්නේ නැත්නම් www.blogger.com වලට ගිහින් ඔයාගේ blog 1 select කලාම dashboard එකට යනවා..)
මෙතනින් comment location > Hide දෙන්න..





දැන් ඔයාට Template ඒකට යන්න අවශ්‍ය වෙනවා. මේ සදහා.......


New Interface Users: dashbord >>> template >>> Edit Html >>> Proceed

Old Interface Users: Dashbord >> Design >> Edit Html

වලට යන්න..





මෙතැන Expand Widget Templates යන්න click කරන්න..



දැන් Google chrome, firefox use කරන අය Ctrl + f මගින් find වෙත ගොස් <data:Post.body/> ලෙස type කරන්න.

දැන් මේ code 1 එතනට paste කර save කරන්න..


<h3>Post Comment</h3>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:comments expr:href='data:post.url' num_posts='5' width='500'/>




ඔයාට මෙතන මේ තියන code එකේ Post Comment කියලා තියන එකට ඔයාට කැමති විදියකට දෙන්න පුලුවන්....
(මමනම් දාලා තියෙන්නේ "වැඩේ කොහොමද කියල comment එකකුත් දාලා යන්න ඈ" කියලා )



දැන් ඉතින් Save Template දීල ඔයාලගෙ බ්ලොග් එකට ගිහින් බලන්නකො.....

වැඩෙ කොහොමද කියල බලල මට Like,follw පාරක් එහෙම   
...........................................................................................දාන්ඩ ඈ....

Facebook Like Box එකක් ඔයාලගෙ බ්ලොග් එකට දා ගමුද..

ඉතින් කොහොමද කස්ටියට අවුරුදු එහෙම සරුද....
ඔන්න මම අද කියලා දෙන්න යන්නේ මේ වගේ Fb Like Box එකක් කොහොමද ඔයාලගේ Blog එකට දාගන්නේ කියලා.

මුලින්ම මේ link එකට යන්න.(ආ ඊට කලින් කියන්න ඔන මෙක කරන්න නම් ඔයාලට facebook page එකක් තියෙන්න ඔන...)   Get Like Box Code... හරි දැන් ඕකේ ඔය Facebook Page URL කියන එකට ඔයගේ fb page එකේ නම දෙන්න. (http://www.facebook.com/****** ) තව ඔයාලට අවශ්‍ය විදිහට ඕකේ වෙනස්කම් කරගන්න. ඔයාලට ඕන විදිහට පෙනුම හදාගත්තට පස්සේ Get Code කියන එක click කරන්න. දැන ලැබෙන Popup Box එකේ IFRAME කියන එක Click කරන්න. දැන් ඔය Code එක copy කරගන්න......

හරි දැන් Blogger Dashboard > Layout යන්න.

දැන් Sidebar කොටසේ Add a Gadget click කරන්න.

දැන් ලැබෙන Window එකේ HTML/JavaScript යන්න Click කරන්න.

දැන් ලැබෙන Window එකේ ඔයාලා Copy කරගත් Code එක Paste කරගෙන Save කරන්න.

දැන් වැඩේ හරි දැන් ඔයාලගෙ බ්ලොග් එකට ගිහින් බලන්නකො වැඩෙ කොහොමද කියල....

ඔන්න එහෙනම් මතක් කරල Like,Follw පාරක් එහෙම දාලම යන්න ඈ.... 

Twitter Bird කෙනෙක් ලෙසියෙන්ම බ්ලොග් එකට එකතු කරගන්න...

ඉතින් කොහොමද යාලුවනේ.. ඔන්න මම අද වෙනස්ම දෙයක් දෙන්න යන්නෙ...
මම අද ඉදල ඔයාලට blog වැඩ කැල්ලි ටිකක් දෙන්න හිතුව.... ඔන්න එහෙනම් මගේ පලවෙනි බ්ලොග් වැඩකැලි පෝස්ට් එක.....

මුලින්ම මම ලස්සන Twitter කුරුල්ලෙක් ඔයාලගෙ බ්ලොග් එකට දාන හැටි කියල දෙන්න යන්නෙ...
මගෙ Blog එක පුරා මෙයා පියාබනවා ඔයාලා දකින්න ඇතිනෙ.(දැක්කෙ නැත්නම් Blog එකෙ වට පිට බලන්න).
මෙයා Blog එකෙ එහෙ මෙහෙ පියාබනවා. Blog එකෙ තැන තැන වහලා ඉන්නවා. මෙ වගෙ කුරුල්ලෙක් දා ගත්තම Blog එකට අමුතුම ලස්සනක් වගේම අමුතුම ගතියක් එනවා.
ඒ වගේම
follow me කරගන්න පුලුවන්......


එහෙනම් බලමු වැඩෙ කරන්නෙ කොහොමද කියල..

මුලින්ම මෙක Copy කරගන්න...

 <!-- Twitter Bird Widget for Blogger by Help World --> <script type="text/javascript" src="https://helpworld.googlecode.com/svn/trunk/tripleflap.js"> </script> <script type="text/javascript"> var twitterAccount = "samantha indika"; var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> "; tripleflapInit(); </script> <span style="font-size:11px;position:absolute;"><a title='Blogger Widget by Help World' href="http://www.helpworld.cc.cc" target='_blank'>www.helpworld.cc.cc</a></span> <!-- Twitter Bird Widget for Blogger by Help World -->                
 

ඊට පස්සෙ ඔයාලගෙ බ්ලොග් එකට ගිහින්  Design එකෙ Edit HTML කියන එකට ගහින් Ctrl + F තද කරන්න.
එතකොට  Search Bar එකක් මතු වෙනවා. එකෙ </body> කියලා ගහලා Enter කරන්න.එතකොට පහලින් තියන Pictures වගෙ වින්ඩො එකක් ලැබෙයි...අලුත් කස්ටියගෙ මෙ වින්ඩො එක ටිකක් විතර වෙනස් වෙයි එහෙම වුනා කියල වෙනසක් නෑ....





එකෙ </body> කියන තැනට උඩින් අර Copy කර ගත්ත එක Paste කරන්න. එකෙ කහ පාටින් තියන samantha indika කියන එක වෙනුවට ඔයාලට Twitter Account එකක් තියනවා නම් එ නම දාන්ඩ. ඔයාලට Twitter Account එකක් නැත්නම් ඔය නමම තිබ්බ කියල අවුලක් වෙන්නෙ නැහැ...
ඊට පස්සෙ දැන් "Save Template" කියලා දීලා ඔයාලගෙ Blog එක පැත්තෙ ගිහින් බලනකොට පොඩි නිල් පාට කුරුල්ලෙක් Blog එක පුරා රවුම් ගහනවා දකී.......

ඔන්න එහෙනම් වැඩෙ ඉවරයි මෙක ඔයාලත් දාලා... වැඩෙ කොහොමද කියල කියන්නකෝ...



ඔන්න එහෙනම් මම යනවෝ..... මතක් කරල Like,Follw පාරක් එහෙම දාල යන්න  ඈ....