สร้างหัวบล็อก

(๑) อยากใส่ภาพที่หัวบล็อกหน่ะ จะทำอย่างไรดีนะ

ประการแรกครูอิงเริ่มจากการหาโค้ดธีมสำเร็จรูปก่อนค่ะ  ซึ่งก็แน่นอนหละ สมาชิกเก่า ๆ ต้องรู้จักดีแน่นอนหล่ะค่ะ  แต่ขอแนะนำสำหรับสมาชิกใหม่นะคะ ที่นี่ค่ะhttp://gotoknow.org/blog/blog-css/170598 เลือกมาเลยค่ะ ธีมใดก็ได้ เช่นครูอิงเลือก ธีมนี้

div#subtitle {background:#4F94CD;}

div#ribbon{background:#36648B;}

div#page-wrapper {background-image: none;}

div#page{background-image:url(http://gotoknow.org/file/siriporn5633/suiren-4.jpg);}

body{background-image:url(http://gotoknow.org/file/siriporn5633/rosekbbgfn1.gif);}

div#title{font-size: big; color:#836FFF; background:#F0FFFF; background-image:url(http://gotoknow.org/file/siriporn5633/58.gif);background-repeat:no-repeat;background-position:bottom;   height:220px;}

(๒) 

 เอ๊ะ ได้โค้ดสำเร็จมาแล้วจะเอาไปใส่ที่ไหนหล่ะเนี่ย ง้ง  งง

                   ตอบ ไปที่ Tab ชื่อเมนูของฉัน คลิ๊กที่จัดการบล็อก เลือกบล็อกที่เราจะตกแต่งนะคะ (ใครที่มีบล็อกเดียวก็สบ้าย สบาย ไม่ต้องเลือก) คลิ๊กที่ตกแต่ง ค่ะ คลิ๊กที่ แก้ไข CSS ที่ตกแต่งมาเอง ครูอิงก็ copy โค้ดทั้งหมด Paste ลงไปในกรอบสี่เหลี่ยม คลิ๊ก บันทึก css  แค่นี้ก็สำเร็จแล้วหล่ะค่ะ ก็จะได้บล็อกแบบข้างบน แต่เป็นรูปครูอิง และเป็นชื่อบล็อกของครูอิงค่ะ

              (๓) จะทำยังไงดีน้า  ครูอิงอยากเปลี่ยนหัวบล็อกหน่ะ  อยากเปลี่ยนด้านข้างทั้งสองด้านด้วย  ครูอิงก็นำบล็อกมาศึกษา และแยกส่วนค่ะ เอาเฉพาะหัวบล็อกก่อนนะคะ ลองผิดลองถูกอยู่นาน 

              ตอบ ได้การแล้วค่ะ นี่คือโค้ดหัวบล็อกค่ะ

div#title{font-size: big; color:#836FFF; background:#F0FFFF; background-image:url(http://gotoknow.org/file/siriporn5633/58.gif);background-repeat:no-repeat;background-position:bottom;   height:220px;}

              ทุกอย่างสามารถเปลี่ยนได้ทั้งหมดค่ะ ไม่ว่าจะเป็นขนาดตัวอักษร สีตัวอักษร แต่วันนี้ครูอิงขอแค่เปลี่ยนภาพก่อนค่ะ ซึ่งครูอิงจะเปลี่ยนเฉพาะ ตัวอักษรสีแดงค่ะ ตามขั้นตอน ดังนี้ค่ะ

                 ๑) เลือกภาพที่ต้องการนำมาเปลี่ยนเป็นหัวบล็อก ภาพที่เลือกจะต้องเป็นภาพในเน็ตนะคะ  ถ้าเป็นภาพที่อยู่ในเครื่องคอมฯของเรา เราต้องเอาขึ้นไฟล์อัลบั้มก่อนนะคะ เพื่อให้รูปนั้นมี URL คือที่อยู่ของภาพนั่นเองค่ะ  เช่น ครูอิงเลือกภาพนี้ ซึ่งเป็นภาพที่ครูอิงทำขึ้นเองด้วยโปรแกรม Paint แล้วนำมาขึ้นไฟล์อัลบั้มไว้ค่ะ 

                  ๒) ตอนแรกครูอิงก็หา  URL ของภาพไม่เป็นค่ะ  มันน่าขำมั้ยคะ  สำหรับคนที่เป็นแล้ว แต่สำหรับครูอิง ศึกษาอยู่ตั้งนานค่ะ จึงได้ข้อสรุป คือ ให้คลิ๊กขวาที่รูปนะคะ เลื่อนเม้าท์ไปล่างสุด คลิ๊กที่ Properties ก็จะเจอ (URL) ของภาพค่ะ สำหรับ(URL)ภาพนี้ของครูอิงคือส่วนนี้ค่ะhttp://gotoknow.org/file/ruschadawon/preview/untitled302.JPG    

                  ๓) ครูอิงนำ (URL) ที่ได้นี้ไปใส่แทน ตัวอักษรสีแดงในวงเล็บนะคะ

div#title{font-size: big; color:#836FFF; background:#F0FFFF; background-image:url(http://gotoknow.org/file/ruschadawon/preview/untitled302.JPG );background-repeat:no-repeat;background-position:bottom;   height:220px;} คลิ๊กบันทึก CSS ค่ะ

      (๔) เอ  ทำไงดีหล่ะ ภาพหัวบล็อกครูอิงหน้าผากหายไปอ่ะ  เพราะอะไรน้า

            ตอบ  เพราะความสูงของภาพต่างกันค่ะ ภาพหัวบล็อกที่ทีมงานตั้งไว้

และภาพในโค้ดสำเร็จที่อาจารย์ศิริพรตั้งไว้ อยู่ที่ประมาณ 220  px ค่ะ ครูอิงจึงค่อย ๆ ปรับขนาดค่ะ  คือเปลี่ยนตัวเลขที่  height:220px  จาก 220  เป็น 450  ถ้ายังไม่พอดี ก็เพิ่มขึ้น ลดลงได้ตามความต้องการค่ะ สำเร็จเสร็จสรรพ ครูอิงจึงได้หัวบล็อกดังที่เห็นนี่แหละค่ะ

             บันทึกหน้าครูอิงจะเล่าประสบการณ์ การแต่งภาพพื้นหลังของบล้อก นะคะ

ไปดูภาพหัวบล็อกได้ที่นี่ค่ะ http://www.bloggang.com/viewdiary.php?id=jiujik&month=08-2008&date=08&group=13&gblog=63

http://www.bloggang.com/viewdiary.php?id=jiujik&group=23  ลองคลิ๊กไปดูนะคะ

ครูอิงชอบตั้งหลายแบบค่ะ เช่น