เฟชบุ๊ค ไลค์ป๊อบอัป Facebook Like Popup Box

วิธีทำ เฟชบุ๊ค ไลค์ ป๊อบอัป สำหรับ บล็อก หรือ เว็บไซต์ เพื่อให้สมาชิกใหม่ที่เข้าเว็บเรา ได้กดไลค์ กดแชร์ ไปยังแฟนเพจเฟชบุ๊ค ป๊อบอัป จะเด้งเตือนเพียงเดือนละครั้ง ข้อดีคือไม่ขึ้นถี่จนทำให้น่ารำคาญ แต่ถ้าหากเราล้างคุ้กกี้ใหม่ก็จะเห็นทุกครั้งครับ คัดลอกโค้ดด้านล่างนี้ไปใช้ได้เลยครับ

วิธีทำ
>>คัดลอกโค้ด
>>Gadget
>>HTML/จาวาสคริปต์ แล้ววางโค้ด (โดยไม่ต้องตั้งชื่อ)
>>บันทึก

<!-- Facebook Popup Widget START --><!-- Brought to you by www.JasperRoberts.com - www.TheBlogWidgets.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#JasperRoberts {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#TheBlogWidgets {
float:right;
cursor:pointer;
background:url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/TheBlogWidgets.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style>

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {

// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);

if (value === null || value === undefined) {
options.expires = -1;
}

if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}

value = String(value);

return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}

// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(10000).fadeIn('medium');
$('#TheBlogWidgets, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>

<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='JasperRoberts'>
<div id='TheBlogWidgets'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=https://www.facebook.com/continuemusic&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
<span style="color:#a8a8a8;font-size:8px;" id="linkit">Powered by <a rel="nofollow" style="color:#a8a8a8;font-size:8px;" href="http://jasperroberts.com">Jasper Roberts Consulting</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://www.theblogwidgets.com">Widget</a></span></center>
</div>
</div>
<!-- Facebook Popup Widget END. Brought to you by www.JasperRoberts.com - www.TheBlogWidgets.com -->


เพิ่มเติม  Facebook Like Popup Box for Blog.
1.ให้แก้ไข https://www.facebook.com/continuemusic ตรงส่วนนี้ให้เป็นชื่อแฟนเพจของเรา

2.ในโค้ดข้างบน ป๊อบอัป จะเด้งเมื่อเปิดเว็บได้ 10 วินาที แล้ว หากต้องการให้มันขึ้นมาไวกว่า 10 วินาที ให้แก้ไขตรงส่วนนี้นะครับ .delay(10000)
แก้ไขเป็นวินาที ที่อยากให้แสดง ตามความเหมาะสม
1 วินาที = 1000
10 วินาที = 10000
20 วินาที = 20000
60 วินาที = 60000

3.หากต้องการให้ ป๊อบอัป เด้งทุกครั้งที่มีการเปิดหน้าเว็บใหม่ ให้เอาโค้ดตัวนี้ออกนะครับ
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

ขอบคุณ : http://www.theblogwidgets.com


โฆษณาระดับหน้าเว็บ ของ Google AdSense

   โฆษณาระดับหน้าเว็บ เป็นโฆษณารุ่นใหม่ของ Google AdSense เป็นรูปแบบโฆษณาบนอุปกรณ์เคลื่อนที่ จะแสดงโฆษณาในเวลาที่เหมาะสมในรูปแบบที่ถูกต้องโดยอัตโนมัติ

ประโยชน์ของโฆษณาระดับหน้าเว็บ
-ได้รับการเพิ่มประสิทธิภาพโฆษณา และใช้งานง่าย

-การตั้งค่าที่เรียบง่าย ซึ่งต้องการเพียงให้คุณวางโค้ดโฆษณาระดับหน้าเว็บเพียงครั้งเดียวในแต่ละหน้าที่ต้องการให้แสดงโฆษณา

-การจัดการอย่างง่าย ซึ่งช่วยให้คุณเลือกได้ว่าจะแสดงหรือเปลี่ยนแปลงการตั้งค่าของโฆษณาเหล่านี้ในบัญชี AdSense หรือไม่ โดยไม่ต้องเปลี่ยนแปลงโค้ดบนเว็บไซต์

-โฆษณาเพิ่มเติมบนเว็บไซต์ ซึ่งไม่นับรวมในขีดจำกัดจำนวนโฆษณา AdSense ต่อหน้า

-รูปแบบโฆษณาระดับหน้าเว็บใหม่ล่าสุด ซึ่งจะพร้อมให้คุณเปิดใช้ในอนาคตได้เสมอ

-อ่านคู่มือการติดตั้งโค้ดโฆษณา >>

-ดูวิดีโอการติดตั้งโค้ดโฆษณา



AdSense’s next generation ads: Page-level ads

URL ภาพจาก YouTube

การดึงภาพจาก Thumbnail YouTube หรือ ภาพสแนปชอตของวิดีโอจาก  YouTube
วิธีหา URL ภาพนิ่ง หรือภาพตัวอย่างจาก  YouTube โดยใช้ไอดี ID จาก URL ของ YouTube เพื่อแสดง ภาพนิ่ง หรือภาพตัวอย่างจาก  YouTube ที่เป็นไฟล์ภาพสกุล JPG

บล็อกเกอร์สามารถใช้ภาพนิ่ง หรือภาพตัวอย่างจาก  YouTube ให้เกิดประโยชน์ได้ โดยไม่ต้องอัปโหลดภาพใหม่ให้เสียเวลา และไม่ต้องเปลืองพื้นที่จัดเก็บไฟล์ภาพ

วิธีทำ
>> คัดลอก ID Video
>> https://img.youtube.com/vi/ใส่ ID Videoที่นี่/sddefault.jpg
>> https://img.youtube.com/vi/c8Gw4ZH2JQ4/sddefault.jpg
>> เสร็จแล้วครับ คลิกดูภาพ >> https://img.youtube.com/vi/c8Gw4ZH2JQ4/sddefault.jpg

URL ของภาพ เพียงใส่ ID Video ลงไปแทนที่
ขนาดภาพ Default (120x90)
https://img.youtube.com/vi/ใส่ ID Videoที่นี่/default.jpg

ขนาดภาพ Medium Quality (320x180)
https://img.youtube.com/vi/ใส่ ID Videoที่นี่/mqdefault.jpg

ขนาดภาพ High Quality (480x360)
https://img.youtube.com/vi/ใส่ ID Videoที่นี่/hqdefault.jpg

ขนาดภาพ Standard Definition (640x480)
https://img.youtube.com/vi/ใส่ ID Videoที่นี่/sddefault.jpg

ขนาดภาพ Maximum Resolution(1920x1080)
https://img.youtube.com/vi/ใส่ ID Videoที่นี่/maxresdefault.jpg

**URL นี้ใช้ได้เช่นกันครับ
https://i.ytimg.com/vi/ใส่ ID Videoที่นี่/maxresdefault.jpg

ตัวอย่าง
เพลงสั่งน้ำตาไม่ได้ - เอิ้นขวัญ วรัญญา 【Lyric Version】
ตัวอักษรสีแดงคือ ID Video

URL จาก YouTube เวลาแชร์
https://youtu.be/c8Gw4ZH2JQ4

URL จาก YouTube ในเบราเชอร์
https://www.youtube.com/watch?v=c8Gw4ZH2JQ4

โค้ดสำหรับฝัง
<iframe width="560" height="315" src="https://www.youtube.com/embed/c8Gw4ZH2JQ4?rel=0" frameborder="0" allowfullscreen></iframe>

URL ภาพ คือ
https://img.youtube.com/vi/c8Gw4ZH2JQ4/default.jpg
https://img.youtube.com/vi/c8Gw4ZH2JQ4/mqdefault.jpg
https://img.youtube.com/vi/c8Gw4ZH2JQ4/hqdefault.jpg
https://img.youtube.com/vi/c8Gw4ZH2JQ4/sddefault.jpg
https://img.youtube.com/vi/c8Gw4ZH2JQ4/maxresdefault.jpg


**หากไม่ปรากฎภาพในขนาดที่เลือกจะเป็นเช่นนี้ครับ 

วิธีอัปโหลดรูปภาพลงในบทความของบล็อก

ขั้นตอนการอัปโหลดภาพลงบทความ
>>ไปที่ บทความใหม่  หรือ แก้ไข
>>คลิก แทรกรูปภาพ (ที่แท็บข้างบนตามภาพประกอบที่(1))
>>คลิก เลือกไฟล์ ภาพ (ตามภาพประกอบที่(2))
>>คลิก เลือกภาพจากคอมพิวเตอร์ แล้วคลิก OPEN
>>คลิก เพิ่มรายการที่เลือก (ตามภาพประกอบที่(3))
>>คลิกที่รูปภาพ จะมีแท็บใต้ภาพขึ้นมา (ตามภาพประกอบที่(4)) ท่านสามารถปรับขนาดภาพ,เลื่อนตำแหน่งภาพ,เพิ่มคำอธิบายใต้ภาพ ได้ตามเหมาะสมและความสวยงาม
>>เสร็จแล้วก็คลิก เผยแพร่ (หรืออัปเดต)เป็นอันเสร็จครับ

วิธีแทรกรูปภาพลงในBlog วิธีทำง่ายๆ ตามขั้นตอนดังรูปภาพ (คลิกที่รูปภาพเพื่อขยาย)

เสร็จแล้วก็คลิกเผยแพร่ (หรืออัปเดต)เป็นอันเสร็จครับ

ตั้งค่าบทความให้อยู่อันดับแรกเสมอ

วิธีการตั้งค่าบทความให้อยู่อันดับแรกเสมอ
วันนี้มีวิธีตั้งค่าให้บทความที่เราต้องการให้อยู่บนสุดแรกสุดของบล็อก ตลอดไป แม้ว่าจะมีบทความใหม่ๆเขียนขึ้นมาทุกวันก็ตามที

วิธีง่ายๆดังนี้
ไปที่ >>บทความ >>แก้ไข >>เผยแพร่เมื่อ 
>>ตั้งค่าเวลาและวันที่ 
>>คลิกเลือกเวลาและวันที่ (ตั้งวันตามปฏิทินล่วงหน้าเป็นปีถัดไป)
>>เสร็จสิ้น
>>อัปเดต บทความ

อธิบายเพิ่มเติม
บทความจะเรียงอันดับเวลาและวันที่ บทความใหม่ที่เราเผยแพร่ล่าสุดมักจะอยู่แรกสุด บนสุดเสมอ
เราก็สามารถแก้ไขที่วันที่ตามปฏิทินให้เป็น วัน ,เดือน หรือ ปีถัดไปได้ เพื่อบทความจะได้อยู่อันดับแรก

ถ้าหากเราต้องการให้บทความอยู่วันที่ก่อนสุดก็ได้เช่นกัน โดยตั้งค่าวันตามปฏิทินย้อนไปหลายๆเดือนได้เช่นกัน

เริ่มเขียนบล็อก Blogger

เริ่มต้นการใช้งานบล็อก สำหรับบล็อกเกอร์มือใหม่ ที่ต้องการมีบล็อกเป็นของตัวเอง เอาไว้บันทึกเรื่องราวต่างๆ หรือสิ่งต่างๆที่อยากบอกให้คนอื่นรู้ ขายสินค้า สื่อธุรกิจ ฯลฯ

บล็อกก็จะเป็นเหมือนเว็บไซต์ทั่วๆไปที่เราคุ้นเคยกันดี และสามารถทำให้ทุกอย่างเหมือนเว็บไซต์ได้
ยกเว้นส่วนที่ลงท้ายด้วย .blogspot.com เท่านั้นเอง

เว็บไซต์ Website กับ เว็บบล็อก Blog ต่างกันอย่างไร?
ตอบสั้นๆง่ายๆ เป็นที่สังเกตุ
Website ลงท้ายด้วย .com เช่น www.sanook.com
Blog ลงท้ายด้วย .blogspot.com เช่น www.webblog2u.blogspot.com


ข้อดีสำหรับบล็อก [Blog]
* ที่สำคัญคือใช้งานฟรี
* หนึ่งบัญชี (อีเมล www.yourmail@gmail.com)สามารถเปิดได้เป็น100 บล็อก
* หนึ่งบล็อกสามารถเขียนบทความได้มากกว่า1,000 บทความ
* สามารถสร้างรายได้ด้วย ติดโฆษณา Google Adsense
*ฯลฯ
และด้วยเหตุผลดีๆอีกมายมาก จึงปฏิเสธไม่ได้ ว่าจะไม่ใช้บล็อกเกอร์(Blogger)เขียนบทความ
ฉะนั้นเรามา เริ่มเขียนบล็อก Blogger กันเลยครับ

เริ่มต้นยังไง
  1. ต้องมีอีเมลของกูเกิล www.ชื่ออีเมล@gmail.com
  2. เตรียม บทความ เช่นสินค้า ภาพ รายละเอียดของสินค้า
  3. ไปที่ www.blogger.com
  4. ลงชื่อเข้าใช้
  5. ที่ด้านบนซ้าย ให้คลิกบล็อกใหม่
  6. ป้อนชื่อ ซึ่งจะใช้เป็นชื่อเรื่องหลักของบล็อก
  7. เลือกที่อยู่ของบล็อก (URL) ซึ่งผู้อ่านจะใช้ในการเข้าดูบล็อก
  8. เมื่อมีชื่อและที่อยู่ของบล็อกแล้ว ให้เลือกเทมเพลต จากนั้นคลิกสร้างบล็อก
  9. ให้คลิกโพสต์ใหม่ เมื่อต้องการสร้างโพสต์ใหม่
  10. พิมพ์บทความ
  11. คลิกบันทึก
คู่มือการเริ่มต้นใช้งานบล็อกเกอร์ และบล็อกเกอร์ความช่วยเหลือ 
คลิกที่นี่เลยครับ https://support.google.com/blogger/



วันนี้