web Category

url ที่ใส่ตอนคอมเม้นท์ของคนที่คอมเม้นท์บล็อกเวิร์ดเพรส(wordpress)

จะถูกใส่แท็ก rel เป็น “nofollow” โดยปริยาย

<a title="Article" href="http://example.com/article" rel="nofollow">

Article Example</a>

addthis_url = ‘http%3A%2F%2Fcallmebird.com%2Fweblog%2Fstrip-nofollow-tag-from-comment-urls-wordpress’;
addthis_title = ‘%E0%B8%96%E0%B8%AD%E0%B8%94+%26%238220%3Bnofollow%26%238221%3B+%E0%B8%AD%E0%B8%AD%E0%B8%81%E0%B8%88%E0%B8%B2%E0%B8%81+URL+%E0%B8%82%E0%B8%AD%E0%B8%87+comment+%28wordpress%29+-+comment%2Cnofollow%2Curl%2Cwordpress%2Cgoogle%2Cgoogle+rank%2Crank%2Cfollow%2Crel%2Ccomments’;
addthis_pub = ‘callmebird’;

http://www.lonniebest.com/FormatCSS/
http://www.codebeautifier.com/

addthis_url = ‘http%3A%2F%2Fcallmebird.com%2Fweblog%2Fcss-formatter’;
addthis_title = ‘%E0%B9%80%E0%B8%84%E0%B8%A3%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%87%E0%B8%A1%E0%B8%B7%E0%B8%AD%E0%B8%88%E0%B8%B1%E0%B8%94%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B9%81%E0%B8%9A%E0%B8%9A+css’;
addthis_pub = ‘callmebird’;

Using an image as a link (2)

In: style sheet

จากตอนที่แล้ว http://callmebird.com/weblog/using-image-as-link
วันนี้มีอีกวิธีนึง จะเขียนไว้กันลืม
ใช้แท็ก <a> เหมือนเดิม

<a class="imagelink" href="#">xxx.com</a>

addthis_url = ‘http%3A%2F%2Fcallmebird.com%2Fweblog%2Fusing-image-as-link-2′;
addthis_title = ‘Using+an+image+as+a+link+%282%29′;
addthis_pub = ‘callmebird’;

เป็นที่ทราบกันดีว่าถ้าคุณนำข้อมูลใส่เข้าไปบนอินเทอร์เน็ตนั่นก็หมายความว่าคุณยอมรับ
ที่จะเผยแพร่ข้อมูลนั้นต่อสาธารณ เพียงแค่ใช้ ชื่อหรืออีเมล ของบุคคลที่คุณต้องการสืบค้น
เสิร์ชด้วยกูเกิลคุณก็จะพบกับข้อมูลมากมาย
วิธีที่จะช่วยให้เว็บไซท์ หรือ บางเพจของเว็บไม่ให้ถูกค้นเจอด้วย search engine
1.ใส่ robots meta tag ในเพจที่ไม่ต้องการให้ search engine เก็บข้อมูลไปทำ index

<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">

addthis_url = ‘http%3A%2F%2Fcallmebird.com%2Fweblog%2Fprevent-robots-googlebot’;
addthis_title = ‘%E0%B8%9B%E0%B9%89%E0%B8%AD%E0%B8%87%E0%B8%81%E0%B8%B1%E0%B8%99+robots+%E0%B8%A1%E0%B8%B2%E0%B9%80%E0%B8%81%E0%B9%87%E0%B8%9A%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5′;
addthis_pub = ‘callmebird’;

การสร้าง element เพื่อบรรจุข้อความในเว็บบ่อยครั้งที่เรา
ไม่สามารถคาดการณ์ได้ล่วงหน้าว่าข้อความจะมีความยาวเท่าไหร่
ถ้าหากใช้ height กำหนดความสูงให้กับ element ก็จะเกิดปัญหา
เมื่อข้อความใน element นั้นยาวเกินกว่าที่ element นั้นจะบรรจุไว้ได้
ส่งผลกระทบต่อ element อื่น ๆ ในหน้าเว็บ เพราะความสูงยังคงเท่าเดิม
ไม่ได้ขยายไปพร้อม ๆ กับตัวอักษรที่ล้นออกไป ทำให้เกิดปัญหา
ข้อความซ้อนทับกัน

addthis_url = ‘http%3A%2F%2Fcallmebird.com%2Fweblog%2Fcss-min-height-cross-browser’;
addthis_title = ‘CSS+min-height+%E0%B9%81%E0%B8%9A%E0%B8%9A+cross-browser’;
addthis_pub = ‘callmebird’;

CSS hacks

In: style sheet

การที่เราจะเขียนเว็บไซต์ที่ใช้ style sheet โดยเฉพาะแบบ tablelessให้ cross browser
มาสักเว็บนึง เป็นเรื่องที่ยากลำบาก เพราะ web brower รุ่นเก่า มาตรฐานการ render จะต่าง
จาก web browser รุ่นใหม่ แม้กระทั่งยี่ห้อเดียวกัน แต่ต่างรุ่น ก็แสดงผลต่างกัน เช่น IE6 กับ
IE7 ที่แสดงผลบางอย่าง ไม่เหมือนกัน ดังนั้น เพื่อให้บรรลุวัตถุประสงค์(ทำเว็บ cross browser)
เราก็ต้องอาศัย การ hack css เข้าช่วย

addthis_url = ‘http%3A%2F%2Fcallmebird.com%2Fweblog%2Fcss-hacks’;
addthis_title = ‘CSS+hacks’;
addthis_pub = ‘callmebird’;

Using an image as a link

In: web design

<a href="http://www.pageresource.com">

<img src="xxx.jpg" border="0" alt="" />

</a>

ที่มา : http://www.pageresource.com/html/image3.htm

addthis_url = ‘http%3A%2F%2Fcallmebird.com%2Fweblog%2Fusing-image-as-link’;
addthis_title = ‘Using+an+image+as+a+link’;
addthis_pub = ‘callmebird’;

ลาก่อน password(s)

In: web

สมมติว่าคุณต้องการใช้บริการเว็บต่าง ๆ คุณจะต้องผ่านด่านการกรอกข้อมูล และตั้งรหัส ซ้ำแล้วซ้ำเล่า ดูรูปประกอบ

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

addthis_url = ‘http%3A%2F%2Fcallmebird.com%2Fweblog%2Fgoodbye-passwords’;
addthis_title = ‘%E0%B8%A5%E0%B8%B2%E0%B8%81%E0%B9%88%E0%B8%AD%E0%B8%99+password%28s%29′;
addthis_pub = ‘callmebird’;

เคยสงสัยหรือป่าว เวลาตัด template เว็บ มันจะมีข้อความตัวอย่างมาแบบนี้
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla [...]

ทำ div ให้เป็น link

In: web design

ตัวอย่างคำสั่งที่ทำให้ <div> สามารถกลายเป็น link ได้ อีกทั้งเมื่อเอาเมาส์ไปโอเวอร์ก็ให้ cursor เป็นรูปมือ มีดังนี้

 

<div style="cursor: pointer; cursor: hand;" onclick="window.location = ‘/process/enterprise/training/change_index.shtml’;">

BlahBlah</div>

เพียงแค่นี้ ไม่ว่าจะเป็น div หรือ อะไรก็ตามก็สามารถเป็น link ได้หมด

addthis_url = ‘http%3A%2F%2Fcallmebird.com%2Fweblog%2Fdiv-to-link-with-hand’;
addthis_title = ‘%E0%B8%97%E0%B8%B3+div+%E0%B9%83%E0%B8%AB%E0%B9%89%E0%B9%80%E0%B8%9B%E0%B9%87%E0%B8%99+link’;
addthis_pub = ‘callmebird’;

About this blog

callmebird is Bird's weblog. Bird is blogger who spend life for programming and web technology. This weblog provide web technology article for anyone who love web programming and web design.

Flickr PhotoStream

    panorama

Sponsors