บันทึกการ หาเงินออนไลน์ : ตอน ทำ Pop Up Facebook Like Box ให้กับ Blog ของเรา

Create One Time Facebook Like Pop Up for Our Fan Page

     ขั้นเวลา ก่อนที่หนังสือ อ่าน สรุปใจความ แปล & แชร์ เรื่องแรกจะมาไวๆ นี้ วันนี้สิ่งที่จะลองนำเสนอ คือ อยากจะทำให้เหมือนเวปของเทพๆ ทั้งหลาย ที่เอาไว้แชร์ความรู้ประสบการณ์ให้กับคนอื่นๆ 

     หลายท่านคงจะเขียนเห็นเวปใหญ่ๆ ดังๆ เขาจะมี Pop Up เด้งขึ้นมาเพื่อให้ผู้เข้าชมกด "Like" แฟนเพจของเราก่อนที่จะเข้าไปอ่านเนื้อหาใน Blog (อิๆๆๆ แอบคาดหวังว่าจะมีคนมา Like Fan Page ของเรามากขึ้น

     โดยที่เมื่อทำเสร็จแล้ว หากเป็นการเข้ามา Blog ของเราเป็นครั้งแรกจะมี Pop Up ให้ทำการ "Like" ก่อน แต่ถ้าหาก Like ไปแล้ว หรือเคยเข้ามาใน Blog ของเรามาแล้ว Blog จะเก็บคุกกี้ (Cookies) เอาไว้ เมื่อเรามาเข้า Blog ในครั้งต่อไป จะไม่มีการแสดงขึ้นมา
     เอาล่ะมาดูหน้าตากันว่าจะออกมาแบบไหน ดังรูปด้านล่าง

Step by Step เริ่มต้นกันเลยดีกว่า

     หากถามว่าเอามาจากไหน ตอบได้เลยครับ มั่วคำถาม ไปถามคุณครูเกิลฯ มาจนได้มาเป็นหน้าตาแบบนี้ ด้วยคำถามและได้คำตอบจากคุณครูเกิ๊ลฯ มาแบบนี้ load facebook like box before enter to blogger (ลองคลฺีกดูกันเอานะ คุณครูตอบได้หมด แต่ต้องรู้จักตั้งคำถามนะ)

Step 1 : เข้าไปที่ Blog ของเราแล้วไปที่ Layout แล้วเลือก Add ฟ Gadgets แบบ "html/javascript"

Step 2 : จากนั้นให้ทำการ Add Code ข้างๆ นี้ไปใส่ใน Gadget ของเรา

<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/AVvXsEiLzAo8qumLzw0bV_BXqubf-XTMNczyWKRjxiaZiArZyLlGoWNm1HwJwGjo0DsJoEr4ctNJjAqAVvg__wJpmheyzE5R8cGJ_iUgt0UtvzCi3bSSY0To9Ja4eoY2MavZXtXpNUNYc0LlgGFK/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpDgHQTI12aqpmmvs_Fs0UPSib2Zm3BB61v9w0YdOXpY57tLrLQmZiBRzr4q64euTdH7hSEu0yckPtjsddsn16iUpSZ1A8CQhxKUNhRp1u6ydD4NJAFa17o5Xz5x9IJZZLYLttAaiTdiTs/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLzAo8qumLzw0bV_BXqubf-XTMNczyWKRjxiaZiArZyLlGoWNm1HwJwGjo0DsJoEr4ctNJjAqAVvg__wJpmheyzE5R8cGJ_iUgt0UtvzCi3bSSY0To9Ja4eoY2MavZXtXpNUNYc0LlgGFK/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLzAo8qumLzw0bV_BXqubf-XTMNczyWKRjxiaZiArZyLlGoWNm1HwJwGjo0DsJoEr4ctNJjAqAVvg__wJpmheyzE5R8cGJ_iUgt0UtvzCi3bSSY0To9Ja4eoY2MavZXtXpNUNYc0LlgGFK/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpDgHQTI12aqpmmvs_Fs0UPSib2Zm3BB61v9w0YdOXpY57tLrLQmZiBRzr4q64euTdH7hSEu0yckPtjsddsn16iUpSZ1A8CQhxKUNhRp1u6ydD4NJAFa17o5Xz5x9IJZZLYLttAaiTdiTs/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLzAo8qumLzw0bV_BXqubf-XTMNczyWKRjxiaZiArZyLlGoWNm1HwJwGjo0DsJoEr4ctNJjAqAVvg__wJpmheyzE5R8cGJ_iUgt0UtvzCi3bSSY0To9Ja4eoY2MavZXtXpNUNYc0LlgGFK/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLzAo8qumLzw0bV_BXqubf-XTMNczyWKRjxiaZiArZyLlGoWNm1HwJwGjo0DsJoEr4ctNJjAqAVvg__wJpmheyzE5R8cGJ_iUgt0UtvzCi3bSSY0To9Ja4eoY2MavZXtXpNUNYc0LlgGFK/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLzAo8qumLzw0bV_BXqubf-XTMNczyWKRjxiaZiArZyLlGoWNm1HwJwGjo0DsJoEr4ctNJjAqAVvg__wJpmheyzE5R8cGJ_iUgt0UtvzCi3bSSY0To9Ja4eoY2MavZXtXpNUNYc0LlgGFK/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/AVvXsEiqT502by6wmGrT555vVscGESUao0_sqZn-qrf3ZU56ATQ8_HDt-1zeqYB2OnFeAA_A3zKV_ZjIojnmnJ7hxvbk_8W3izf0TMaNQirh6qZXNH-5JQNRtxmJlB0sY14zXXGqyhNNfQ2TTP0C/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhylYF2Rqmdg95atDRCbBnqNcbXcp6OY2_j3_vwk4XlEi1RyQU4dJ0cW0MqFw-OXjSVE2xSSJf7fmHHxQyLCn7LrJ7wKRdJuQDqhJ9jiBTi8aTcSVD22TLLK4e7Dswl3MIfZp9goh0VB8tA/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/AVvXsEiLzAo8qumLzw0bV_BXqubf-XTMNczyWKRjxiaZiArZyLlGoWNm1HwJwGjo0DsJoEr4ctNJjAqAVvg__wJpmheyzE5R8cGJ_iUgt0UtvzCi3bSSY0To9Ja4eoY2MavZXtXpNUNYc0LlgGFK/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%2Fspiceupyourblog&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.spiceupyourblog.com">Blog Gadgets</a> Via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a></p>
</div>
</div>

Step 3 : จุดที่ต้องแก้ไข

• เปลี่ยน Receive all updates via Facebook. Just Click the Like Button Below เป็นคำที่เราต้องการ (หรือจะไม่เปลี่ยนก็ได้นะ
• เปลี่ยน spiceupyourblog เป็นชือ่ Fanpage ของเรา

Step 4 : จัดการบันทึกซะ เป็นอันเสร็จเรียบร้อย ลอง View Blog ดูเอานะครับ

     แค่นี้ก่อนสำหรับวันนี้ หวังว่าคงจะพอแก้ขัดระหว่างรอบทความ แปล & แชร์ กันนะครับ และก็คงจะช่วยให้เรามี Social Signal เข้า Blog ของเรามากขึ้นด้วย เพื่อ หาเงินออนไลน์ แบบ Passive Income

Notes : ขอบคุณ  spiceupyourblog.com สำหรับข้อมูลดีๆที่เอามาใช้ปรับแต่ง Blog ของเรา