Cara Pasang Pop-up Facebook Like

ASSALAMUALAIKUM...

Hari ini aku ingin mengajar cara untuk pasang pop-up Facebook Like di blogspot anda. Opss. Jangan Fikir Pop-up itu semua nya negative. Pop-up yang aku ingin ajarkan ini berbeza dengan popup-popup yang lain yang pernah anda lihat.

facebook fan page,popup facebook,cara pasang pop-up facebook.Facebook plugin tutorial
Facebook Popup Widget

Pop-up yang aku katakan ini ialah seperti di gambar di atas dimana Pop-up tersebut akan memaparkan Facebook Fan Page anda dahulu sebelum isi kandungan blog anda di loading. Secara tidak langsung ini dapat menambahkan Facebook Fan Page Like anda. Pop-up ini juga mempunyai "button close" untuk memudahkan pengunjung menutup aplikasi pop-up tersebut. Sekiranya pelawat blog anda tidak suka tekan "LIKE" mereka boleh klik "button close" dengan segera.

Cara untuk memasang Popup FB Fan Page.

1. Login ke Dashboard blog anda.

2. Klik Design.

3. Klik Add A Gadget.

4. Copy coding dibawah dan paste di Notepad anda dahulu.


<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/AVvXsEgYsZFLoAACUFPgYGaEF0QltlAd18OGDV1Im360aiy1MELFQymZAHHjmcp1Y4Taq_XJwqpY19N5iJGyHV6cdBmPZdsgTVZFrk5254yK-wCRM5LZXhY95xa3dqxrr10awgh7cLbo-GBv2bS9/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf7K-2DEW2fNodvU7kzprWGjabyDPGTCdzk5ye-IwmLH2ctKH64TVTFYu1NC03awAGPKOd0PgPRI9EBPRlRvmLowSq-qRIiAnz4Iraa-ZWpDq0wHh2eJVjA205PxpjmO2YzAPT6FnRcnQX/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYsZFLoAACUFPgYGaEF0QltlAd18OGDV1Im360aiy1MELFQymZAHHjmcp1Y4Taq_XJwqpY19N5iJGyHV6cdBmPZdsgTVZFrk5254yK-wCRM5LZXhY95xa3dqxrr10awgh7cLbo-GBv2bS9/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYsZFLoAACUFPgYGaEF0QltlAd18OGDV1Im360aiy1MELFQymZAHHjmcp1Y4Taq_XJwqpY19N5iJGyHV6cdBmPZdsgTVZFrk5254yK-wCRM5LZXhY95xa3dqxrr10awgh7cLbo-GBv2bS9/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf7K-2DEW2fNodvU7kzprWGjabyDPGTCdzk5ye-IwmLH2ctKH64TVTFYu1NC03awAGPKOd0PgPRI9EBPRlRvmLowSq-qRIiAnz4Iraa-ZWpDq0wHh2eJVjA205PxpjmO2YzAPT6FnRcnQX/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYsZFLoAACUFPgYGaEF0QltlAd18OGDV1Im360aiy1MELFQymZAHHjmcp1Y4Taq_XJwqpY19N5iJGyHV6cdBmPZdsgTVZFrk5254yK-wCRM5LZXhY95xa3dqxrr10awgh7cLbo-GBv2bS9/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYsZFLoAACUFPgYGaEF0QltlAd18OGDV1Im360aiy1MELFQymZAHHjmcp1Y4Taq_XJwqpY19N5iJGyHV6cdBmPZdsgTVZFrk5254yK-wCRM5LZXhY95xa3dqxrr10awgh7cLbo-GBv2bS9/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYsZFLoAACUFPgYGaEF0QltlAd18OGDV1Im360aiy1MELFQymZAHHjmcp1Y4Taq_XJwqpY19N5iJGyHV6cdBmPZdsgTVZFrk5254yK-wCRM5LZXhY95xa3dqxrr10awgh7cLbo-GBv2bS9/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/AVvXsEhcWvm6om7iFU8ERC4SeL1lP03oP53WMvbpBoWYlbm_Aq338QS-E2on9F4AmdioDrJ7jpu_lmpjqAQ1BGOldgj5IMfc5ertQ5UXbmE5QkZ433OQCcFPmG1U364Omg2GOA2cdObL5bo03-ON/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU3-y9B2ILsr62ZYsgKHktQtM-so9Vw0QEeE_IZPvIzJxYGJuTIROs38amRKfBV6xXweNWkZqnhIzjXCKZpJOVMWbd6h6IhyphenhyphenaaCQyEKCbmwcwVgmly0GwXh_SttZPMoUacZk7RNhKxF6OI/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/AVvXsEgYsZFLoAACUFPgYGaEF0QltlAd18OGDV1Im360aiy1MELFQymZAHHjmcp1Y4Taq_XJwqpY19N5iJGyHV6cdBmPZdsgTVZFrk5254yK-wCRM5LZXhY95xa3dqxrr10awgh7cLbo-GBv2bS9/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;'>
<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="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fakupunyerdotcom&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;" >Dapatkan Widget Ini Di <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.akupunyer.com">Aku Punyer Lah!</a> | Get RM100 A Week @ <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.akupunyer.com/2011/08/cara-buat-duit-dengan-klik.html">Blogger Tips</a></p>
</div>
</div>


5. Gantikan koding berwarna hijau dengan koding Facebook Like Box anda. Boleh didapati di Facebook Plugin.

6. Paste kan koding yang telah diedit dengan Facebook Fan Page itu di ruangan Add A Gadget tadi.

7. Klik Save. Selesai.

Senang je bukan? Apa tunggu lagi jom la cuba sekarang. Harap korang tidak tukar sebarang koding yang lain kecuali seperti yang disebutkan di Langkah 5 supaya widget ini berfungsi dengan jayanya. Terima kasih.

P/S : Sekiranya ada sebarang masalah boleh tinggalkan komen dibawah ok.
Cara Pasang Pop-up Facebook Like Cara Pasang Pop-up Facebook Like Reviewed by OH Buletin on 3:37 AM Rating: 5

19 comments:

  1. thanks sangat bro!! berguna ni...aku dah berjaya..awak patut letak guide di sana ( ctrl+f search akupunyerdotcom ) baru senang

    ReplyDelete
  2. Assalamualaikum bro mcm mna nak buat dia bergerak kalau kita scroll kebawah dia pun ikut kebawah mcm mna tu,..

    ReplyDelete
  3. cane xnak bg entry transparetnt slagi xtekan butang like @ x ??

    ReplyDelete
    Replies
    1. yg tu sy tak pasti..tp mostly visitor tak suka web yg mcm tu.. yg mcm tu selalunya guna teknik Samseng Facebook

      Delete
  4. salam tuan, untuk wordpress bagaimana pula...sbb tiada button klik design dan klik add a gadget

    ReplyDelete
    Replies
    1. sorry bro..utk WP sy tidak tahu..hehe..sy tak pena guna WP lg..

      Delete
  5. Klu nak kuarkan facebook like tu dekat home jer cmner yer

    ReplyDelete
    Replies
    1. yg tu sy tak berapa pasti..tp en anon cuba rujuk disini : http://www.733blog.com/2012/03/how-to-have-linkwithin-gadget-show-only.html

      mungkin cara ni dapat membantu encik anon sedikit sebanyak..

      Delete
  6. tq.. jadik.. jadik.. tima kasih banyak.

    ReplyDelete
  7. koding Facebook Like Box yg mne satu ye?xphm la..hehe

    ReplyDelete
    Replies
    1. koding FB Likebox tu leh tgk sini https://developers.facebook.com/docs/reference/plugins/like-box/

      nnt dh siap akan keluar koding html.koding tu la ganti di step no 5 tu.

      Delete
  8. kenapa saya punya tak keluar complete ya? :(

    ReplyDelete
    Replies
    1. ade salah buat kot..hehe.cube check balik coding

      Delete

Powered by Blogger.