Bloggang.com : chengake : wrist band เท่ๆ ใครว่าทำเองยาก

wrist band เท่ๆ ใครว่าทำเองยาก

วันนี้จะมาลองหัดทำ Wrist Band ดูสักตั้ง ไม่รู้ว่าตกเทรนไปแล้วหรือยังหนอ ใครไม่เคยเห็นไปดูที่นี่ได้ www.thaiblogger.org

ขั้นตอนการจัดสร้าง

1. อันดับแรกเราก็ต้องเลือกรูปที่จะในมาทำเป็น wrist band ก่อน โดยใช้โปรแกรมประเภท Photoshop สร้างขึ้นมาก่อน

ซึ่งรูปที่ใช้ก็ไม่ควรจะซับซ้อนเกินไป มิฉะนั้นจะยากในขึ้นตอนหลัง

2. เสร็จเรียบร้อยคุณก็จัดการส่งรูปภาพนี้ไปฝากไว้ใน Host ฝากรูปก่อน อาจจะเป็นที่ Bloggang.com เอง หรือ ที่อื่นๆ ก็ได้ ตามวิธีนี้ ขั้นตอนการใส่รูปเข้า Bloggang

3.เพิ่ม style ของ tag <div> ไว้ในส่วน script area ภายใน <style> ตามโค๊ดด้านล่างนี้

div.ComeBackDemocratLeft {
    position:absolute;
    left:0px;
    top:0px;
    overflow:visible;
    height:150px;
    width:150px;
    background-image:url(//www.bloggang.com/data/fulllove/picture/1182695918.gif);
    background-repeat:no-repeat;
    background-position:0px 0px;
    background-color:transparent;
    margin:0;
    padding:0;
    color:#000;
    font-family:helvetica,verdana,arial,tahoma,sans-serif;
    z-index:1000000000;
    border:0px none;
    float:none;
}

ให้คุณระบุตามนี้ทั้งหมด ยกเว้นขนาดของรูปภาพ และตำแหน่ง url ของไฟล์ที่เก็บรูปภาพไว้ ที่ผมมารค์ไว้เป็นตัวแดงไว้นั่นแหละ ในที่นี้รูปภาพของผมขนาด 150x150 pixel

4.เพิ่มโค๊ดด้านล่างนี้ ต่อจากข้อ 3 ไว้ในส่วน script area เช่นกัน

<div class="ComeBackDemocratLeft">
<img src="//www.bloggang.com/data/fulllove/picture/1182695918.gif" width="150" height="150" border="0" usemap="#CBLeft">
</div>
<map name="CBLeft">
<area shape="poly" coords="150,0,0,150,0,106,106,0" href="//fulllove.bloggang.com/" target="_blank" alt="ทวงคืนประชาธิปไตย เผด็จการจงบรรลัย">
</map>

ให้สังเกตุที่ชื่อ class ComeBackDemocratLeft ซึ่งจะเหมือนที่เราระบุใน <div> ของ style sheet ตามข้อ 3 เลยนะครับ

ส่วน tag <map> นี่ก้อใช้สำหรับให้ผู้ใช้ สามารถคลิ๊ก แล้วไปยัง link ที่เราต้องการได้ ถ้าไม่ต้องการให้ไปที่ใด ก็ไม่จำเป็นต้องใช้ก็ได้ครับ

ขอให้สนุกกับการเป็น Blogger นะครับ

Create Date : 24 มิถุนายน 2550

Last Update : 24 มิถุนายน 2550 22:35:20 น.

2 comments

Counter : 1528 Pageviews.

โอ้โห แจ่มมาก ๆ ขอบคุณมาก ๆ นะคะ

โดย: aump IP: 203.156.190.141 วันที่: 25 มิถุนายน 2550 เวลา:15:35:43 น.

ต้องลองทำดูก่อนค่ะ
ตอนนี้ยังไม่ค่อยเข้าใจเท่าไหร่

อยากทำเป็นมั่ง

โดย: mrs.postman

วันที่: 30 กรกฎาคม 2550 เวลา:15:38:51 น.