-->
คลิกที่รูป เพื่อเอาโค้ดรูปนี้ไปแปะ

Tech&Tips

ทำปุ่มเมนู CSS ขอบมนโดยใช้รูปเดียว

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





Image

bg
ด้านบนนี้คือตัวอย่างรูป ที่เราจะใช้กัน แต่ผมจะไม่บอกวิธีการทำรูปนะครับ ดาวน์โหลด .psd ไปศึกษาหรือปรับเปลี่ยนกันดูเองนะครับ menubutton.psd

Concept


concept
คอนเซปคือ เราจะใส่แบ็คกราวด์ ใน แท็ก a จัดชิดขวา และจะใส่รูปเดียวกัน ที่ แท็ก span แล้วจัดชิดซ้าย ง่ายๆ แค่นี้เอง มาดู HTML และ CSS กัน

HTML



<ul class="blue">
<li><a class="current" title="home" href="#">home</a></li>
<li><a title="products" href="#">products</a></li>
<li><a title="blog" href="#">blog</a></li>
<li><a title="contact" href="#">contact</a></li>
</ul>

CSS


<ul>- Unorder-List


ul.blue {
	padding: 5px;
	margin: 10px 0;
	list-style: none;
	float: left;
}

อย่าลืมใส่ list-style เป็น none ครับ เพราะไม่งั้นเราจะใส่ แบ็คกรานด์ไม่ได้

<li>- List


ul.blue li {
	float: left;
}
 
ul.blue li a {
	float: left;
	text-decoration: none;
	color: #ccc;
	padding: 4px 15px 0 0;
	margin-right: 8px;
	font: 900 14px "Arial", Helvetica, sans-serif;
}

ใส่ padding ด้านขวา 15 เพื่อเว้นระยะ ระหว่างปุ่ม

<span>- span ที่อยู่ใน link


ul.blue li a span {
	float: left;
	padding-right: 15px;
	display: block;
	margin-top: -4px;
	height: 24px;
}

จะเห็นว่าใส่ margin-top ไว้ -4px นั่นเพราะว่า ส่วนของ a เรามี padding ด้านบนอยู่ 4px ครับ

<Hover>- ตอนที่เอาเมาส์โอเวอร์


ul.blue li a:hover, ul.blue li a.current {
 	color: #0d5f83;
	background: url("images/blue.png") no-repeat top right;
}
 
ul.blue li a:hover span, ul.blue li a.current span {
	background: url("images/blue.png") no-repeat top left;
}

******************************

10วิธีง่ายๆ ช่วยเพิ่ม SEO ให้กับบล็อกของคุณ


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

1. ให้ความสำคัญกับ tags, คำสำคัญ

ให้ความสำคัญกับ tags, คำสำคัญ
tags และ คำสำคัญ(keyword) ถือเป็นสิ่งที่มีความสำคัญในการเรียกบอท หรือ เว็บสไปเดอร์ เข้าเว็บหรือบล็อก โดยบรรดาบอทจาก google, metacrawler, bing จะไล่อ่านจาก head ลงมาก่อน ในการตั้งชื่อ tags, คำสำคัญ(keyword) นั้น เราควรที่จะตั้งให้สั้น และกระชับ และผมมีเทคนิคเล็กๆน้อยในการตั้งชื่อ tags ดังนี้ครับ
อ่านหน่อยในการตั้งชื่อ tags บอทจะถือว่า "blog tip" , "tip blog" อย่าทำ เป็นคำๆเดียวกัน
อ่านหน่อยในการเชื่อมคำจงใช้ - (hyphen) แทนการใช้ _ (underscore)เพราะบอทจะอ่านความหมายเพี้ยน เช่น my-cat บอทจะอ่านว่า my cat แต่ถ้าเราใช้ my_catในการลง tags บอทจะตีความว่า my_cat ซึ่งเป็นคำที่ไม่มีความหมาย
อ่านหน่อยอย่าใส่แทกซ้ำไปซ้ำมาในบทความเดียวกัน เพราะ บอทจะมองว่าเป็นฟลัดข้อความ

2. ใส่คำอธิบายรูปภาพด้วย alt หรือ title

รูปแบบของโค้ด
เอาเมาส์จิ้มยังแสดงคำอธิบายรูป นั่นแปลว่าเรามีความละเอียดในการลงมือเขียนบล็อกครับ
สำหรับเครืองมือลงรูปภาพใน exteen นั้น ก็มีช่องให้ใส่อยู่แล้ว แต่หลายคนก็จะข้ามไป ไม่ได้ให้ความสนใจ

3. หัวข้อสั้นกระชับ และได้ใจความ

ถ้าเราสนใจที่จะทำ SEO ในการใส่ h1, h2, h3, h4 เราควรจะเลือกใช้คำที่สั้นกระชับ ใน exteen เรา ส่วนที่มีการแทรก h1 ก็คือส่วนของ ชื่อบล็อก ซึ่งถ้าเราสนใจในส่วนนี้ ก็ควรจะใช้คำที่แสดงถึงเนื้อหาในเว็บบล็อกของเราเอง สั้นๆ แต่กระชับ หรือใช้ชื่อเฉพาะของเราก็ได้ ในกรณีที่เราต้องการจะสร้างแบรนด์ หรือให้คนจดจำชื่อบล็อกของเรา
อ่านหน่อยหัวข้อต่างๆ เราไม่ควรจะพล่ามยาวนัก เพราะส่วนอธิบายตรงนั้นควรจะเป็นเนื้อหาที่คุมด้วยแท็ก p มากกว่า
อ่านหน่อยการตั้งหัวข้อต่างๆอย่าตั้งยาวมาก นอกจากจะไม่มีประโยชน์ แล้ว ยังสร้างความหงุดหงิดให้คนอ่าน ยังทำให้เปลืองพื้นที่
อ่านหน่อยสำหรับ exteen แทก h2 คือ ส่วนที่นำไปใช้ใน title bar ด้านบนของเว็บเบราเซอร์ รวมถึงชื่อใน url address ด้วย ดังนั้นถ้าอยากให้ url address ของคุณไฮโซ ก็จงใส่บางคำ บางตัวที่เป็นภาษาอังกฤษบ้าง แต่อย่าลืมว่า ต้องสั้น กระชับ ได้ใจความ
อ่านหน่อยในการตั้งหัวข้อ ผมรู้ว่าหลายคนขี้เกียจ! ในการเน้นประโยคที่เป็นหัวข้อ ควรใช้แท็ก h3, h4 ครอบประโยค แทนที่จะใช้ strong เหมือนที่ทำกันเป็นนิสัย (ใน exteen คือวิธีครอบข้อความแล้วกดปุ่มตัวหนา) เพราะบอทให้ความสำคัญของ h1, h2, h3, h4 มากกว่า strong นั่นเอง

4. ใส่คำอธิบายให้กับคำย่อ ด้วย acronym, abbr

ขอยกตัวอย่างของคำย่อนะครับ css, html คำต่อไปนี้ถ้าคนในวงการเดียวกัน เขียนบล็อก ทำเว็บ ก็จะเข้าใจความหมายไปในการเดียวกันใช่ไหมครับ แต่ถ้าคำต่อไปนี้ละ id, ครม ซึ่งถ้าผมไม่รู้ผมก็อาจจะตีความคำว่า ครม ไปได้สองทางคือ คณะรัฐมนตรี หรือ คูณร่วมมาก(ซึ่งไม่มีนะ) ก็ได้
ตัวอย่างคำที่ขีดเส้นใต้ด้วยเส้นสีเขียวพอเอาเมาส์วางก็จะมีคำอธิบายประกอบด้วย
วิธีการใช้ก็ง่าย
ส่วน acronym ก็ใช้ในทำนองเดียวกันครับ เพียงแต่ว่า ie6 มันไม่รู้จัก acronym เว็บเบราเซอร์ตัวอื่นๆ เขารู้จักหมด!

5. รู้จักการแบ่งช่องไฟ, เว้น วรรคประโยค

เรียนภาษาไทยมาแล้ว คงจะรู้จักช่องไฟนะครับ การเขียนประโยคยาวโดยไม่รู้จักการเว้นช่องไฟที่ดี มันส่งผลเสียต่อการทำ SEO ยกตัวอย่างกันดีกว่า
ตัวอย่างที่ไม่ดีในการเว้นวรรค, ช่องไฟ
อย่าทำในบทความนี้เป็นการนำเสนอการทำseoให้กับบล็อกของคุณ โดยวิธีง่ายๆต่อไปนี้ได้แก่ การให้ความสำคัญกับtags,การใส่คำอธิบายให้กับรูปภาพคำย่อ และลิงค์
ที่บอกว่าไม่ดีเพราะ มันติดกันเป็นพรื้ดดครับ ลองนึกภาพเวลาที่เราเซิร์ชหาจากกูเกิ้ล เราจะใส่คำสำคัญลงไปใช่ไหม ซึ่งคำสำคัญส่วนใหญ่จะเป็นคำสั้นๆ กระชับ ดังนั้นการที่เราใส่ข้อความยาวเป็นพรื้ดแบบนี้ จะทำให้มันไม่เกาะคำสำคัญ จากข้างบนควรแก้เป็น
ในบทความนี้เป็นการนำเสนอ "การทำseo" ให้กับบล็อกของคุณ โดยวิธีง่ายๆต่อไปนี้ ได้แก่ การให้ความสำคัญกับtags, การใส่คำอธิบายให้กับรูปภาพ คำย่อ และลิงค์

6. ใส่คำอธิบาย link

เราสามารถเพิ่มคำอธิบายให้กับลิงค์ได้ ด้วยการเพิ่ม title ลงไปในปีกกาของแท็ก a ตามรูปแบบโค้ดตัวอย่างนี้ครับ
ลองเอาเมาส์จิ้มระหว่างสองลิงค์นี้ดู
แต่งsidebarให้สวยแบบมีสไตล์ ไม่ได้ใส่ title
แต่งsidebarให้สวยแบบมีสไตล์ อันนี้ใส่ title
ผมแทรกเพิ่มไปแค่ title="แต่งsidebarให้สวยแบบมีสไตล์" เพียงเท่านั้นเอง ซึ่งก็ไม่ยากเย็นอะไรเลย
และอีกเทคนิคหนึ่ง คือการใช้คำที่สื่อความหมายว่า สิ่งที่เราลิงค์ไปนั้นคืออะไร เช่น
เทคนิคแต่งบล็อก1 กับ แต่งsidebarให้สวยแบบมีสไตล์ อันไหน make sense กว่ากันครับ เป็นlink เดียวกันแท้ๆ
และจงอย่าลืมเพิ่ม target="_blank" ลงไปด้วยนะครับ เพื่อให้เปิดลิงค์ในหน้าใหม่ แทนการเปิดทับหน้าเดิม

7. อัพเดตบล็อกอย่างต่อเนื่อง

อัพเดตบล็อกอย่างต่อเนื่องการอัพเดตบล็อกอย่างต่อเนื่อง นอกจากจะได้แฟนบล็อกเป็นมนุษย์แล้ว บอททั้งหลายก็จะจำโดเมนเราไว้ในลำดับต้นๆ ประโยชน์ของความสม่ำเสมอในการอัพบล็อก จะทำให้มีเรื่องให้ผู้ติดตามได้อ่านเยอะๆแล้ว บางทีเราก็จะได้คำสำคัญ, tags หรือเนื้อหาในบทความใหม่ๆ ให้บอทได้เข้ามาดูดเรื่อยๆ นอกจากนี้เรายังอาจจะได้แตกประเด็น หรือค้นพบตัวเองก็ได้ครับว่า บล็อกของเราควรจะเขียนเรื่องอะไร ถึงจะดึงดูดผู้อ่านเข้ามาอ่าน และให้ความคิดเห็น
บล็อกผมเป็นตัวอย่างที่ไม่ดีในแง่นี้ ฮ่าๆ ดองจนไม่รู้จะดองยังไงแล้ว เข้ามาเชค ems ทุกสัปดาห์ แต่ไม่คิดจะอัพบล็อก !

8. เข้าสังคมกับเขาบ้าง

social bookmark
เดี๋ยวนี้มันมีเทคโนโลยีในการสูบเว็บโดยที่ไม่จำเป็นต้องมานั่งคลิ้ก นั่งพิมพ์ url address เข้าเว็บนั้น เข้าเว็บนี้ ให้เมื่อยแ้ล้ว สิ่งเหล่านี้เราเรียกว่า social bookmark ซึ่งใน exteen ผมก็ได้เห็นการเพิ่มส่วนนี้ตรงปุ่มโปรโมตบล็อกผ่าน tweeter แถวๆปุ่มคอมเมนต์ ซึ่งก็สะดวกดีครับ เราไม่ต้องสนใจแต่บอทกูเกิ้ลอย่างเดียวอีกต่อไป เว็บไซต์ในแนวที่เน้นดึงบทความด้วย RSS ในปัจจุบันก็เยอะครับไม่เขียนข่าวเอง เอาแต่ดึง
ตัวอย่างของเว็บ webdesignerwall
ตัวอย่างจากพันทิป ใครเคยใช้บ้างหว่า...

9. ย่อ/ลดขนาด รูปภาพที่ไม่จำเป็นลงบ้าง

ขนาดของรูปภาพมันเกี่ยวอะไรกับการทำ SEO ในฐานะของคนเขียนบล็อกอย่างเดียวที่ exteen อาจจะไม่เกี่ยว เพราะเราไม่ต้องรับผิดชอบเรืองข้อมูลภายในโฮสต์ แต่ถ้าเราออกไปเขียนบล็อกภายใต้โฮสต์ของตัวเอง มันก็เกี่ยวขึ้นมาทันทีเลยครับ มันเกี่ยวในเรื่องของ Transfer rate ของแต่ละเดือน ตัวอย่างเช่น ไฟล์ avatars ก็แล้วกัน
ขนาดไฟล์ภาพ avatar ขนาด128x128
ถ้าเราช่วยโลกร้อน(น่าจะเกี่ยวนะ) ด้วยการลดขนาด avatars ลงครึ่งนึง
ขนาดไฟล์ภาพ avatar ขนาด64x64
จะประหยัดแบนวิดท์ หรือ Data transfer rate(แล้วแต่จะเรียก) ลงไปได้ต่อครั้ง 3kb ซึ่งอาจจะดูจิ๊บจ๊อย ลองมองอย่างนี้นะครับ ถ้ามีคนเข้ามาอ่านบล็อกเราอย่างน้อยวันละ 1000 ครั้ง(ผมไม่นับในกรณีที่เป็น cache ไฟล์ในครื่องนะครับ) จาก3kbคูณด้วย 1000 ก็จะเป็น 3000kb ก็คือ พื้นที่ในการ Transfer หายไปเฉยๆ 3MB ต่อวัน เดือนนึงๆ ถ้าคิดในฐานเดียวกันมีขาจรเข้ามาชม แบนด์วิทช์ก็จะหายไปเฉพาะเรื่องของ avatars ตัวเดียว 90MB ! ซึ่งเอาตรงนั้นให้บอท หรือคนวิ่งเข้า-ออกบล็อกเราดีกว่าจริงไหม

10. รู้จักการโยงบทความภายในบล็อก และนอกบล็อก

เทคนิคนี้เราอาจจะเรียกว่าเป็นการเพิ่ม บทความที่เกี่ยวข้อง, relate link หรือ relate article เป็นการเชื่อมโยงบทความแต่ละบทความที่เกี่ยวข้องกัน โดยเป็นการโฆษณาบล็อกของเราเองไปในตัว ใน cms เช่น wordpress, joomla, drupal ก็มีเครื่องมือเชือมโยงบทความเข้าด้วยกันอยู่แล้ว หรือใช้วิธีการทำ site map ภายในบล็อกของเราเองก็ช่วยได้เยอะเลยครับ
สำหรับการโยงบทความ ถ้าเราสนใจที่จะเพิ่มเรตจากบอท เราก็ต้องทำ relate article จากบทความในบล็อกของเราก่อน ส่วนนอกบล็อกของเรา เราอาจจะไม่ต้องทำก็ได้ แต่จริงๆแล้ว ทำไว้ก็ดีคนอ่านจะได้มีบทความที่เกี่ยวข้องไว้อ่านเพิ่มเติม

********************************


วิธีทำ Banner เลื่อน ขึ้น-ลง ตาม Scroll Bar


         ในการทำ Tip นี้ ต้องอาศัย Technology 2 อย่างด้วยกัน นั้นคือ CSS และ JavaScript การนำไปใช้นั้นศึกษาจากโค้ดด้านล่างนี้ได้เลยคับ

  • โค้ดส่วนแรกจะเป็นโค้ด CSS และ JavaScript ให้นำไปวางไว้ใน Tag ของ <Head></Head>:
    •  
<!--โค้ด CSS-->
<style type="text/css">
#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 150px;
visibility: hidden;
z-index: 100;
}
</style>
<!-- สิ้นสุดการแก้ไขรูปแบบของกรอบข้อความ -->
 
<!--โค้ด JavaScript-->
<script type="text/javascript">

var persistclose=0 // ให้ใส่เป็น 0 หรือไม่ก็ 1 (โดย 0 หมายถึง เมื่อกดปิดแล้ว กด REFRESH กรอบข้อความจะขึ้นมาอีก แต่ถ้า 1 กรอบข้อความจะไม่ขึ้นมาอีกแล้ว)
var startX = 10 // ตำแหน่งแสดงกรอบข้อความ นับจากด้านซ้าย
var startY = 10 // ตำแหน่งแสดงกรอบข้อความ นับจากด้านบน

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

var verticalpos="fromtop"

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}

function staticbar(){

var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}

if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
  • โค้ดส่วนที่สอง จะอยู่ใน Tag <Body></Body>:
<div id="topbar">
<a href="" onClick="closebar(); return false"><img src="winclose.gif" border="0" width="16" height="14" /></a>
<!-- ใส่ข้อความที่คุณต้องการลงไปด้านล่างนี้ได้เลยครับ -->
จะมีข้อความขึ้นตรงนี้ครับ อาจนำไปทำเป็นพื้นที่โฆษณาใน WEB คุณได้นะครับ
<!-- สิ้นสุดการใส่ข้อความ-->
</div>

********************************

สมัครสมาชิก: บทความ (Atom)