ต้องขออภัยสำหรับท่านที่แต่งบล้อกเก่งแล้ว ผ่านได้เลยนะคะ

เป็นสมาชิกตั้งแต่: อา. 19 ต.ค. 2551 @ 09.29 น.

            ๑๙ ตุลาคม ๒๕๕๒  เป็นวันครบรอบ ๑ ปีเต็มกับการเข้ามา ณ พื้นที่แห่งการแลกเปลี่ยนเรียรู้แห่งนี้  วันแรกที่ครูอิงเข้ามา  ครูไม่ทราบอะไรเลยจริง ๆ ค่ะ เหมือนเริ่มจากเลข ๐ ครูอิงไม่ทราบแม้แต่ การเรียกใช้เครื่องมือบนกล่องคอมเม้นท์ แต่ ณ วันนี้ครูอิงภูมิใจตัวเองที่สามารถเรียนรู้หลาย ๆ อย่างได้ด้วยตัวเอง ต้องขอบอกว่า ครูอิงหลงใหลการแต่งบล็อก พอ ๆ กับการเขียนบันทึก รักทั้งสองอย่างพอ ๆ กัน และก็รักเสียงเพลงเป็นชีวิตจิตใจ  ปลื้มใจมากที่ตัวเองสามารถทำสิ่งเหล่านี้ได้

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

        (๑) ธีม Theme ที่ทีมงานสร้างมาให้ก็สวย ๆ ทั้งนั้น  แต่ครูอิงก็อยากใส่ภาพที่ตัวเองสร้างที่หัวบล็อกหน่ะ จะทำอย่างไรดีนะ

         ตอบ     ประการแรกครูอิงเริ่มจากการหาโค้ดธีมสำเร็จรูปก่อนค่ะ  ซึ่งก็แน่นอนหละ สมาชิกเก่า ๆ ต้องรู้จักดีแน่นอนหล่ะค่ะ  แต่ขอแนะนำสำหรับสมาชิกใหม่นะคะ ที่นี่ค่ะ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;}

จะได้บล็อกหญิงสาวกับสายฝนที่โปรยลงมา  ตามรูป      sample blog51  

 

 

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

                   ตอบ ไปที่ 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 ค่ะ

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

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

Bg_header117

และภาพในโค้ดสำเร็จที่อาจารย์ศิริพรตั้งไว้ อยู่ที่ประมาณ 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  ลองคลิ๊กไปดูนะคะ

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