การนำ Logo ของบลอคมาใส่แทนชื่อ Blog Title
posted on 23 Mar 2009 12:57 by insideun in Designไม่รู้มีใครเขียนเกี่ยวกับเรื่องนี้ไปบ้างรึยัง.. พอดีว่าบางทีที่อั๋นเข้าไปตามเวปไซต์ต่าง.. ต่าง.. จะเห็นว่าบางเวปเค้าจะมีโลโก้อยู่ทางด้านบน ทางซ้ายของเวป บางเวปเค้าทำออกมาก็เท่ห์ดูดี ก็เลยอยากมีกับเค้าบ้าง ก็อยากจะเอามาลงในบลอคของเรา แต่ความอยากมันมีมากกว่านั้น เพราะไอโลโก้ของที่อื่นเค้าเนี่ย.. มันสามารถคลิ๊กแล้วกลับไปยังหน้าแรกได้เลยด้วยนะ ลองผิดลองถูกอยู่พักใหญ่ ลองเอาโค๊ดไปใส่ในส่วนของ css ดู มันก็ไม่ได้แห๊ะ.. สุดท้ายมาเจอวิธีการ ที่แบบว่าง่ายแสนง่าย แบบว่าคาดไม่ถึงว่ามันจะง่ายขนาดนี้ เลยอยากเอาวิธีมาให้ใครที่สนใจได้ลองทำกันดู
ตัวอย่าง: สังเกตดูได้จากโลโก้ในส่วนเฮทของอั๋น ถ้าลองเอาเมาส์ไปวาง มันจะเปลี่ยนเป็น Link Selest ที่สามารถคลิ๊กได้ (เขียนถูกป่าววะ)
วิธีการแสนง่าย เพียงแค่นำรูปที่เราต้องการจะมาแสดงเป็นโลโก้บลอคของเรามาอัพโหลดแล้วนำ url ของภาพมาใส่ที่โค๊ดตามนี้
ให้เปลี่ยนส่วนสีแดงเป็น url ของภาพที่เราต้องการ ส่วนสีน้ำเงิน ให้เปลี่ยนเป็นข้อความที่เราอยากให้แสดง เวลาที่เมาส์ไปสัมผัส หรืออาจจะเรียกอีกอย่างหนึ่งว่า Description ของภาพนั่นเอง
หลังจากนั้นให้นำโค๊ดที่ได้มาใส่ในส่วนของ Headings ของบลอค เข้าไปที่ Settings ดังภาพ
แล้วใส่โค๊ดในช่อง Blog Title (สีแดง) กดเซฟ เท่านี้เราก็จะได้โลโก้ของบลอคเราที่สามารถคลิ๊กกลับมายังหน้าแรกได้ทันทีแล้ว..
อ่อ.. ไอโลโก้แบบนี้ มันจะมาแทนที่ Blog Title ที่เป็นข้อความที่เราใส่ไปยังไงละ ทำให้ออกมาเป็นรูปภาพนี่ก็ดูดีไปอีกแบบหนึ่งนะ สวยด้วย อ่อ ฝากถึงใครที่เซทใน css ในส่วนของ header h1 ชื่อบลอค แล้วใส่ display : none ดังภาพ ก็ให้ไปลบออกด้วยนะจ๊ะ ไม่อย่างนั้นมันจะไม่แสดงนะจ๊ะ
เท่านี้ก็เป็นอันเสร็จ ลองเอาไปทำกันดูนะจ๊ะ จะสวยจะงามก็แล้วแต่ไอเดียและเทคนิคของแต่ละคน ว่าจะให้โลโก้ของตัวเองออกมายังไง ก็ลองวาดลองตกแต่งตามสบาย ใครไม่เข้าใจ ก็ ems หลังไมค์มาได้เล๊ยยย..
#1 By photohandmade on 2009-03-23 13:37