Tatacara Buat FB Fanpage Pop Up Like Tanpa Pemasa

As-Salam. Salah satu cara untuk blog anda menerima trafik tinggi adalah menerusi Facebook. Ada banyak cara yang boleh anda gunapakai, tetapi yang paling bagus ialah mendapat trafik daripada mereka yang benar-benar berminat dengan blog anda sahaja. Mereka inilah pembaca setia blog anda, dan bukan singgah secara random hanya kerana kata kunci atau ayat umpan tertentu.

Salah satu cara untuk anda dapatkan pembaca sebegini adalah dengan menggunakan Facebook (FB) Fanpage. Entri kali ini, saya ingin berkongsi bagaimana anda boleh dapatkan pengikut atau pembaca yang benar berminat dengan blog anda menerusi Pop Up LIKE versi tanpa pemasa. Agak berlainan dengan versi sebelum ini dari segi cara ia mengendalikan pengunjung ke blog anda.

Dalam versi FB Fanpage Pop UP Like (versi melekat) yang saya kongsikan sebelum ini, ia tidak ambil kira pengunjung berulang ke blog anda. Jadi kali ini, dengan menggunakan cookies di dalam pelayar internet anda, versi pop up ini akan detect samada pengunjung tersebut adalah pengunjung berulang atau tidak, jika ya, maka fungsi ini tidak akan keluar - dalam jangkamasa tertentu.

Tatacara Buat FB Fanpage Pop Up Like Tanpa Pemasa

Versi ini adalah seperti yang ditunjukkan kat atas ni. Ia simple, kemas dan punyai butang tutup (x). FB Fanpage Pop Up Like ini tiada pemasa - memberikan sepenuh kebebasan untuk pengunjung samada mahu sukakan blog anda atau tidak. Ia cuma akan memeriksa data cookie yang terkandung di dalam pelayar internet untuk periksa samada pengunjung adalah pengunjung berulang ke blog anda.
 
Cara ini tidak memaksa pengunjung blog anda untuk sukakan fanpage blog anda. Ia juga tidak menyakitkan hati kerana ia akan muncul sekali dalam masa seminggu atau sebulan (tak pasti) bagi mereka yang menjadi pembaca atau pengunjung setia blog tersebut.

Berminat nak pasang? Ok, anda hanya perlu salin kod HTML yang saya sedikan di bawah ini dan letakkan dalam blog anda. Anda boleh masukkan kod ini menerusi Add a Gadget - Add HTML/Javascript dan letakkan di bahagian bawah sidebar blog anda.

Kod HTML FB Fanpage LIKE Tanpa Pemasa

<style> /* ColorBox Core Style: The following CSS is consistent between example themes and should not be altered. */ #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;} /* User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:#000;opacity:0.5 !important;} #colorbox{ box-shadow:0 0 15px rgba(0,0,0,0.4); -moz-box-shadow:0 0 15px rgba(0,0,0,0.4); -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4); } #cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVc6xxXduagYL3RE2dnmhQqlyxqbnWuwcpXEvVDZDuPP1qLZNG_K2iMeTk78GMUVhcz_r9YKgndeniYbDRlmpaIDFxnE94wTM6gQ2xmW0MUJs95wm4x7jdNoKZ0R1rwbvVEbNmFmiqGcBv/s1600/controls.png) no-repeat 0 0;} #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsAeDMSthyphenhyphenOWedw2Br-amKbE87zEnvmL2PHArNjgV-mwbMwlR1JVe29Y295KqV6arewWV3dpN8S7DMFzVrRORzNBdeXor069mdW7GX05r-pFiIALARri_tZdDYHHQoHsTXSJ-FCjvp6nIy/s1600/border.png) repeat-x top left;} #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVc6xxXduagYL3RE2dnmhQqlyxqbnWuwcpXEvVDZDuPP1qLZNG_K2iMeTk78GMUVhcz_r9YKgndeniYbDRlmpaIDFxnE94wTM6gQ2xmW0MUJs95wm4x7jdNoKZ0R1rwbvVEbNmFmiqGcBv/s1600/controls.png) no-repeat -36px 0;} #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVc6xxXduagYL3RE2dnmhQqlyxqbnWuwcpXEvVDZDuPP1qLZNG_K2iMeTk78GMUVhcz_r9YKgndeniYbDRlmpaIDFxnE94wTM6gQ2xmW0MUJs95wm4x7jdNoKZ0R1rwbvVEbNmFmiqGcBv/s1600/controls.png) no-repeat 0 -32px;} #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsAeDMSthyphenhyphenOWedw2Br-amKbE87zEnvmL2PHArNjgV-mwbMwlR1JVe29Y295KqV6arewWV3dpN8S7DMFzVrRORzNBdeXor069mdW7GX05r-pFiIALARri_tZdDYHHQoHsTXSJ-FCjvp6nIy/s1600/border.png) repeat-x bottom left;} #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVc6xxXduagYL3RE2dnmhQqlyxqbnWuwcpXEvVDZDuPP1qLZNG_K2iMeTk78GMUVhcz_r9YKgndeniYbDRlmpaIDFxnE94wTM6gQ2xmW0MUJs95wm4x7jdNoKZ0R1rwbvVEbNmFmiqGcBv/s1600/controls.png) no-repeat -36px -32px;} #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVc6xxXduagYL3RE2dnmhQqlyxqbnWuwcpXEvVDZDuPP1qLZNG_K2iMeTk78GMUVhcz_r9YKgndeniYbDRlmpaIDFxnE94wTM6gQ2xmW0MUJs95wm4x7jdNoKZ0R1rwbvVEbNmFmiqGcBv/s1600/controls.png) repeat-y -175px 0;} #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVc6xxXduagYL3RE2dnmhQqlyxqbnWuwcpXEvVDZDuPP1qLZNG_K2iMeTk78GMUVhcz_r9YKgndeniYbDRlmpaIDFxnE94wTM6gQ2xmW0MUJs95wm4x7jdNoKZ0R1rwbvVEbNmFmiqGcBv/s1600/controls.png) repeat-y -211px 0;} #cboxContent{background:#fff; overflow:visible;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK6EHm_D1od-ut93KkkynHLcswiMQ6ODoyJWtmd2Ma_z5uen_ZLi-NzXHDNlA0kU_tn3nR3Aeetpf4n7zaAdQ2StGsHveiv1xC5ZFfg6W9vQ4NXUvSilbmiMdKzpQGAK82SvhT1ttNIgLo/s1600/loading-background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdWz8OeQOpmH9kIuVriq5KmeMepOHyzrLTX9_z6MmZeeOv8aGD1Y7eBJ2605U-3gKJexYxVm-W9USj0l0aCV33r37AgCdueoIhNbIc-VJD8DID5KmIyItYRCAxhFGcMqA5mtUnM440R0_q/s1600/loading.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVc6xxXduagYL3RE2dnmhQqlyxqbnWuwcpXEvVDZDuPP1qLZNG_K2iMeTk78GMUVhcz_r9YKgndeniYbDRlmpaIDFxnE94wTM6gQ2xmW0MUJs95wm4x7jdNoKZ0R1rwbvVEbNmFmiqGcBv/s1600/controls.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;} /*-----------------------------------------------------------------------------------*/ /* Facebook Likebox popup For Blogger /*-----------------------------------------------------------------------------------*/ #subscribe { font: 12px/1.2 Arial,Helvetica,san-serif; color:#666; } #subscribe a, #subscribe a:hover, #subscribe a:visited { text-decoration:none; } .box-title { color: #3B5998; font-size: 20px !important; font-weight: bold; margin: 10px 0; border:1px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; box-shadow: 5px 5px 5px #CCCCCC; padding:10px; line-height:25px; font-family:arial !important; } .box-tagline { color: #999; margin: 0; text-align: center; } #subs-container { padding: 35px 0 30px 0; position: relative; } a:link, a:visited { border:none; } .demo { display:none; } </style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script> <script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -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> <!-- This contains the hidden content for inline calls --> <div style='display:none'> <div id='subscribe' style='padding:10px; background:#fff;'> <center> <!-- LETAKKAN KOD FB FANPAGE BLOG ANDA --> <iframe src="//www.facebook.com/plugins/likebox.php?href=URL-FACEBOOK-FANPAGE&width=350&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:258px;" allowtransparency="true"></iframe> <!-- TAMAT KOD FB FANPAGE --> </center> <center> <p style="float:right; font-size:9px;" > Powered By | <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.hasrulhassan.com">OHBlogger Malaysia</a> </p> </center> </div> </div>
Pastikan anda telah tukarkan bahagian kod Facebook dengan kod HTML kepunyaan anda sendiri. Anda boleh variasikan ia dengan merujuk pada entri saya yang ini - Cara Mudah Letak FB Like Fanpage.

Atau boleh sahaja gunakan kod di atas, dengan tukarkan NAMA-FANPAGE-BLOG-ANDA itu dengan kepunyaan anda.

Siap. Save dan lihat hasilnya. In Sha Allah, di lain entri, saya akan kongsikan satu lagi versi untuk anda gunapakai.

Selamat mencuba.