Timmer එකක් සමග Facebook Page Pop-up Like Box එකක් ඔයාගෙ බ්ලොග් එකට එකතු කරගනිමු.

ඔයාලා මගේ සයිට් එකට එනකොටම දකින්න ඇතිනෙ Facebook Fan Page Like box එක. ඔන්න ඉතින් අපි ඒක තමයි දාන්න යන්නෙ. ඔයාගෙ Facebook Page එකට Likes ගන්න හොඳම ක්‍රමයක් තමයි මේක. ඉතින් Page එකට Like කරලා තියෙන අයට ඔයා දාන ලිපි Facebook එකේදි පෙන්නන්න පුළුවන් . ඉතින් වෙන්නෙ Traffic එක වැඩිවෙන එක විතරයි. හොඳයි නේද? බලමු කොහොමද කරන්නෙ කියලා.
අපි අපේ බ්ලොග් එකට එන අයට කරදරයක් නොවෙන විදිහට Timer එකක් දාල හදමු. එතකොට අදාළ වෙලාවෙන් පස්සෙ බොක්ස් එක close වෙනවා.


1. මුළින්ම මේ  මුළු කෝඩ් එකම කොපි කරගන්න.  (ctrl+c)

<style type='text/css'> #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/AVvXsEgH-bLusIyc7PQwg2mD_l1-U3xnaFhTKob3_tfxAIaKPAlaX9s7HIq9rHeX4GjdsEuK4S5UrJhyphenhyphen8mHmvZEMMzjG_LQkENo6hA816xmrOJVa4XV81vs6zb0kUAESz5cRJ8pDIjstLZxrFxZt/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=https://www.facebook.com/GadgematicLanka ;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://webgadgematiclanka.blogspot.com/" target="_blank">Gadgematic Lanka</a> / <a href="http://webgadgematiclanka.blogspot.com/2014/02/timmer-facebook-page-pop-up-like-box.html" target="_blank">+Get This!</a> </div> </div> <div id="mdfooter"> Please wait..<span>10</span> Seconds <a href="#" id="mdclose" onclick="return false;">Cancel</a> </div> </div> <!-- End popup -->

2. දැන් බ්ලොග් එකේ Layout වලට යන්න.

3. දැන් පැත්තෙන් තියෙන Add a gadget කියන එක ක්ලික් කරන්න. එන බොක්ස් එකේ ටිකක් පල්ලෙහාට ගිහින් HTML/JavaScript දෙන්න.

4. දැන් එන බොක්ස් එකේ Title කියන එක හිස්ව තියලා, යටින් තියෙන ලොකු කොටුවේ අර කොපි කරගත්ත ඒවා Paste (ctrl+v) කරන්න.

5. දැන් ඒකෙ පහත ඒවා වෙනස් කරගන්න. (වෙනස් කරන්න ඕනෙ ඒවා රතු පාටින් දක්වලා තියෙන්නෙ.)

var sec = 10 මේ කියන්නෙ box එක පෙන්නන වෙලාව. තත්පර 10 හොඳයි. ඒත් ඔයා කැමති වෙලාවක් දාගන්න.

https://www.facebook.com/GadgematicLanka  මේක වෙනුවට ඔයාගෙFacebook Page එකේ ලින්ක් එක දාන්න.

 Join us on Facebook කියන තැනට ඔයා කැමති වාක්‍යයක් යොදන්න. 

6. දැන් Save කරන්න.

7. බ්ලොග් එකේ Template ටැබ් එකට ගිහින් Edit Html දෙන්න. දැන් කීබෝඩ් එකේ Ctrl+F දෙක ඔබලා එන පොඩි බොක්ස් එකේ </head> කියලා ටයිප් කරන්න. දැන් </head> කියන එක Highlight වෙලා තියේවි. ඒකට උඩින් පහත තියෙන code ටික කොපි කරලා Paste කරලා Save Template දෙන්න. 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

දැන් මෙය 100% ක් සාර්ථකයි. ප්‍රශ්නයක් තියෙනවා නම් කමෙන්ට් එකක් දාන්න.

*ඔන්න එහෙනම් මම ගියා.යාළුවොන්ටත් පේන්න Facebook එකට Share පාරකුත් දාලා යමුද?

මේ ගැන ඔයාලගෙ අදහස් මොනවද?