โฆษณาพับเก็บได้ การทำโฆษณาแบบพับเก็บได้(close)บนหน้าเว็บนั้นสามารถทำได้หลายวิธี และหลายแบบด้วยกัน เช่นรูปภาพ หรือ Flash ซึ่งในปัจจุบันเป็นที่นิยมกันอย่างแพร่หลาย
ขั้นตอนการทำมีดังนี้
1. เตรียมรูปภาพ โดยอาจจะวาด หรือเขียนปุ่มปิดไว้ในรูปด้วยโปรแกรมให้เรียบร้อย
2. จากนั้นวาด Layer ลงในเว็บเพจ 1 Layer พร้อมตั้งชื่อ " ads " ดังภาพ
3. จากนั้นนำรูปภาพที่เตรียมไว้วางใส่ลงไปใน Layer โดยใช้ Hotspot สร้างส่วนที่จะให้ผู้ใช้กดปุ่มปิดหน้าต่าง และใช้ Hotspot สร้างส่วนที่จะให้ผู้ใช้ click แล้ว link ไปยังเว็บไซต์ที่ต้องการ
4. เลือกเครื่องมือ Behaviors (Shift+F3) ใช้ Action เครื่องมือ Show-Hide Layers สั่งให้ซ่อน Layer " ads "
* ถ้า Show-Hide Layers ไม่ขึ้นให้เลือกที่จุด Hotspot ที่เราสร้างไว้ตอนแรกก่อน
5. จากนั้นให้สังเกตุที่เครื่องมือ Behaviorsสถานะของ Mouse อยู่ที่ onMouseOver ให้เราทำการเปลี่ยนเป็น onClick ดังภาพ
* ถ้าไม่มีให้เลือกให้ไปแก้ที่โค้ดแทนก็ได้
* ถ้าไม่มีให้เลือกให้ไปแก้ที่โค้ดแทนก็ได้
6. กดปุ่ม F12 บนคีบอร์ด เพื่อแสดงผลกับบราวเซอร์ จะได้ผลลัพท์
โค้ดเมาส์มีดาวร่วง
<script type="text/javascript">
// <![CDATA[
var colour="#f0f";
var sparkles=50;
/****************************
* Tinkerbell Magic Sparkle *
* (c) 2005 mf2fm web-design *
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
เทคนิคการทำ Searh Engine
1. ใส่ Keyword ใน Title ของหน้าเว็บ
5. การเขียนเว็บด้วยภาษาง่าย ๆ ไม่ใช่โค๊ดที่สลับสับซ้อน
โค้ดเมาส์มีดาวร่วง <script type="text/javascript">
// <![CDATA[
var colour="#f0f";
var sparkles=50;
/****************************
* Tinkerbell Magic Sparkle *
* (c) 2005 mf2fm web-design *
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
เทคนิคการทำ Searh Engine 1. ใส่ Keyword ใน Title ของหน้าเว็บ
การใส่ Key Word ในหน้าเว็บไซต์ในส่วนของแท็ก จะช่วยทำให้ Search Engine รู้ว่าเว็บไซต์หน้านั้นๆ ของคุณ มีข้อมูลเกี่ยวกับอะไร ซึ่งข้อมูลนี้จะแสดงอยู่ในตำแหน่งบนด้านบนสุดของบราวเซอร์ ซึ่งตำแหน่งนี้ถือเป็นปัจจัยที่สำคัญส่วนหนึ่ง
2. การใส่ Key Word ที่ต้องการในส่วนด้านบนของเว็บไซต์และการเน้นด้วยตัวหนา
การเน้น Key Word ที่ต้องการในหน้าเว็บไซต์ด้านบน และมีการเน้น key word ภายในหน้าเว็บไซต์ด้วย ตัวหน้า หรือการใช้แท็ก จะเป็นการเน้นให้ Search Engine รู้ว่า นี้คือคำที่เราต้องการเน้นและให้ความสำคัญเป็นพิเศษ ซึ่ง Search Engine จะให้ความสำคัญและน้ำหนักกับ Key Word เหล่านี้
3. หลีกเลี่ยงการออกแบบเว็บไซต์ด้วย Flash หรือรูปภาพเยอะ ไม่มีตัวหนังสือ
เพราะ Google จะอ่านจากโค๊ดของหน้าเว็บไซต์ ซึ่งหากเว็บไซต์คุณ มีแต่ภาพ และยิ่งเป็น Flash ด้วยแล้วละก็ Google จะไม่รู้จักเว็บไซต์คุณเลยว่าเกี่ยวกับอะไร คุณควรปรับเปลี่ยนเพิ่ม ตัวหนังสือเข้าไปในเว็บไซต์ เพื่อให้ Google ได้รู้จักเว็บไซต์อของคุณ
4. หลีกเลี่ยงใช้ออกแบบเว็บไซต์ด้วยเฟรม
เพราะการออกแบบเว็บไซต์ด้วย เฟรม จะทำให้ Search Engine จะไม่สามารถทราบได้ถึงข้อมูลที่มีอยู่ในเนื้อหาในหน้านั้นๆ เพราะเนื้อหาในหน้านั้น ๆได้ถูกแบ่งออกเป็นส่วนๆ โดยการใช้เฟรม ดังนั้นคุณควรหลีกเลี่ยงซะ (การใช้เฟรม คือ การออกแบบหน้าเว็บที่มีหน้าเว็บหลาย ๆส่วนประกอบเข้าด้วยกันในหน้าเดียว)
5. การเขียนเว็บด้วยภาษาง่าย ๆ ไม่ใช่โค๊ดที่สลับสับซ้อน
การออกแบบเว็บไซต์ โดยมี code ที่สั้นและกระชับเป็นปัจจัยสำคัญที่ทำให้เว็บไซต์คุณง่ายต่อการค้นหาของ Search Engine อย่าใช้ code ฟุ่มเฟือยจนเกินไป ไม่ใช้ table มากเกินไป ลดการใช้ JavaScript และ CSS เท่าที่จำเป็นเท่านั้น นอกจากนี้ คำค้นหาสำคัญๆ ควรอยู่ส่วนบนๆของเว็บเพจให้มากที่สุด
6. ควรตั้งชื่อไฟล์รูปภาพ และใส่คำอธิบายให้กับภาพ
คุณควรตั้งชื่อไฟล์รูปภาพที่ตรงกับ Keyword ที่คุณต้องการ และควรใส่คำอธิบายภาพ โดยใช้แท็ก คำอธิบาย เพื่อทำให้ Search Engine รู้ว่าภาพที่คุณใส่เข้าไปในเว็บไซต์คุณคือภาพอะไร และเกี่ยวกับอะไร ซึ่งจะมีผลต่อการค้นหาของ Search Engine ด้วย
7. ใส่ คีย์เวริด์ ให้หนาแน่น ภายในหน้าเว็บไซต์
การที่ในหน้าเว็บไซต์ของคุณมี Key Word ที่ซ้ำๆ หลายๆ คำในหน้านั้นๆ (Key Word Density) นั่นหมายถึงหน้าๆ นั้นของคุณมีข้อมูลและเรื่องราวที่เกี่ยวกับคำๆนั้น ซึ่ง Search Engine ให้ความสำคัญกับส่วนนี้ เช่นกัน ซึ่งควรจะมีการซ้ำๆ กันของ Key Word ในหนึ่งหน้าเว็บ ไม่ควรเกิน 20% ซึ่งหากใส่มากเกินไปจะกลายเป็นการ Key Word Spamming ซึ่งอาจจะทำให้เว็บไซต์คุณโดนบล็อกไปเลย
8. ขนาดไฟล์ HTML ของหน้าเว็บไซต์ไม่ควรเกิน 32K
ถ้าหน้าเว็บไซต์ของคุณ มีขนาดใหญ่จนเกินไป จะทำให้ Search Engine ไม่สามารถเก็บข้อมูลของหน้าเว็บไซต์คุณได้ ดังนั้นในการออกแบบ ควรไม่ให้มีขนาดไฟล์ HTML ไม่เกิน 32K
9. แลกลิงค์กับเว็บไซต์อื่นๆ
การแลกลิงค์กับเว็บไซต์อื่นๆ และมีเว็บไซต์อื่นๆ ลิงค์มาหาคุณเยอะๆ เป็นการแสดงว่า เว็บไซต์คุณเป็นที่รู้จักจาก ซึ่ง Google จะให้คะแนนของเว็บไซต์คุณ โดยเป็นค่า Page Rank (PR)โดยจะมีการให้คะแนนเอาไว้มีค่าตั้งแต่ 1-10 คะแนน โดยเว็ปเพจใดที่ google เห็นว่าเป็นเว็ปเพจที่ “ สำคัญ ” ซึ่งหากเว็บไซต์คุณมีค่า Page Rank สูงก็จะมีผลต่ออันดับในการแสดงใน google โดยเราสามารถทราบค่า PR ของเว็บไซต์เราได้ โดย download และ install google toolbar (http://toolbar.google.com) หลังจากนั้นคุณจะสามารถดูคะแนน PR ของคุณที่จัดโดย google ได้
10. ทำ Site Map ให้กับเว็บไซต์ของคุณ
Site Map ก็คือแผนที่เว็ปไซด์ของคุณ ว่าเว็ปไซด์คุณมีหน้าเว็ปต่างๆ อยู่ที่ไหนบ้าง หน้าไหน link ไปสู่หน้าไหน เป็นการรองรับให้ทุกๆ หน้าของเว็ปไซด์คุณถูกเข้าถึงได้ทั้งหมด ซึ่งจะทำให้ Google สามารถทราบได้ว่าในเว็บไซต์ของคุณมีหน้าเว็บอะไรบ้างทั้งหมด
สวยครับ
ตอบลบ