อย่างที่เคยเห็นกันครับ ความสวยของหน้าตาเพจ มักจะแปรผกผันกับ การ programe หรือ ระยะเวลาโหลด รวมถึง seo ก็เช่นกันครับ แต่สิ่งที่เข้ามาเติมช่องว่างนี้ก็คือ css ครับ อาจจะไม่ได้มากแต่ก็พอบรรเทาลงบ้างก็ยังดี ใช่มั้ยครับ
คุณๆคงจะเคย link ทำแปลกๆที่ทำด้วย css กันใช่ไหมครับ คือจริงๆมันไม่แปลกอะแหละ แต่วิธีการทำของมันแปลกมากกว่า ตัวอย่างเช่นเ
<a class="galbtsuiv" href="http://www.crystalxp.net/galerie/en.2.12.cat.9.html">Next Page </a>
เห็นมั้ยครับว่า ไม่มี รูปภาพอยู่เลย (นั่นเพื่อที่จะให้ Spider สนใจlinkของเรามากขึ้นครับ)
เอาหล่ะครับ ประเด็นมันอยู่ที่แล้วจะทำทำไมหล่ะ ในเมื่อออกมาเหมือนกันกับการใ่ส่รูป โดยไม่มี <img /> เลย? เหตุผลแรกก็คือป้องกันรูปที่เราอุส่าออกแบบมาอย่างตั้งใจ โดยมิให้โดนขโมยไปง่ายๆ และอีกอย่างก็คือ SEO ในเมื่อ Search Engine ไม่ค่อยจะชอบลิงค์ที่ทำกับ รูปสักเท่าไหร่ เราเลยหาวิธีที่จะทำให้มันเป็น Text แล้วใส่รูปเข้าไปโดย css ครับ
เอาหล่ะครับ ถึงวิธีการเขียน css กันสักทีครับ ก่อนอื่น จะขอเอา มาจากตัวอย่างเลยนะครับ
อันนี้ผมไปเห็นมาจาก www.crystalXP.net ครับ(เว็บ เขาสวยมากครับ) อย่างcode เหมือนที่บอกไว้ข้างบนเลยครับ
<a class="galbtsuiv" href="http://www.crystalxp.net/galerie/en.2.12.cat.9.html">Next Page </a>จากโค๊ดนี้ เขาจะเขียน css ไว้อย่างนี้ครับ
.galbtsuiv {
background:transparent url(/_design/img/v2/suivant.gif) no-repeat scroll center top;
color:#031B48;
display:block;
font-family:Arial,Tahoma,Verdanan,Sans-serif;
font-size:9pt;
font-weight:bold;
margin-top:10px;
padding-top:34px;
text-align:center;
text-decoration:none;
width:100px;
}ลองตัดส่วนที่ไม่จำเป็นออกไปนะครับ ก็จะเหลือ
.
galbtsuiv {
background:transparent url(/_design/img/v2/suivant.gif) no-repeat scroll center top; /* รูปในที่ใช้แสดง ใน link ครับ */
color:#031B48; /* สี ตัวอักษรของ link ข้างล่าง*/
display:block; /* กำหนดแสดงเป็น บล๊อก */
padding-top:34px; /* ไว้ระยะข้างใน 34px เพื่อที่จะให้ link แสดงรูป */
text-align:center; /* จัดตัวอักษรไว้ตรงกลาง บล๊อก */
width:100px; /* ขนาดความกว้าง 100 px อันนี้ต้องกำหนดไว้นะครับ ไม่งั้น display:block ก็ ไม่แสดงออกมา */
}จะเห็นว่าไม่ยากเลยใช่ไหมครับ ลองเอาไปทำกันดูนะครับ หลังจากนี้ link ของเราก็จะไม่ใช่ html tag <img> แล้วหล่ะ