เครื่องมือสำหรับ “ออกแบบแม่แบบ” ด้วยตนเอง ใหม่! จาก blogger

สอน blogger


หลังจากทีมงาน blogger ได้สร้างGadget หน้าเว็บ ออกมาได้ไม่นาน ตอนนี้ก็ได้พัฒนาการเครื่องมือสำหรับการออกแบบแม่แบบของ blogger ให้ยืดหยุ่นมากขึ้น โดยให้ผู้ใช้สามารถปรับแต่งแม่แบบได้ด้วยตนเอง ไม่ว่าจะเป็นการเลือก Theme การออกแบบโครงร่างของหน้าว่าจะมี 2  หรือ 3 คอลัมน์ หรือหลายคอลัมน์ ซึ่งทำได้โดยการคลิกเพียงไม่กี่ครั้ง  การปรับความกว้างของ Template และ sidebar เพียงแค่คลิกเดียวเป็นต้น  ความสามารถทั้งหลายนี้ผู้ใช้สามารถทำได้โดยไม่ต้องมีความรู้เรื่อง HTML และ CSS เลย


วีดีโอแนะนำเครื่องมือ "ออกแบบแม่แบบ"




สำหรับการใช้งานเครื่องมือนี้ก็คล้ายคลึงกับการใช้งานเครื่องมือเดิม ๆ ที่มีอยู่ ซึ่งผมจะอธิบายทีละส่วนดังนี้


การใช้ เครื่องมือออกแบบแม่แบบ ทำได้โดย Log in เข้าไปที่ draft.blogger และไปที่ แผงควบคุม >>รูปแบบ  >>  องค์ประกอบของหน้า >> คลิกที่ “เครื่องมือออกแบบแม่แบบ”

วิธีทำ blogger 

เมื่อคลิกที่ “เครื่องมือออกแบบแม่แบบ” แล้วเราจะพบเครื่องมือสำหรับออกแบบแม่แบบอยู่ 4 อย่างด้วยกัน ได้แก่  1. แม่แบบ  2. พื้นหลัง  3. รูปแบบ  และ 4. ขั้นสูง


สอนทำบล็อก 



1. การใช้งานเครื่องมือแม่แบบ

การใช้เครื่องมือแม่แบบทำได้โดย คลิกที่ข้อความ แม่แบบ >> จากนั้นเลือกรูปแบบที่ต้องการ >> และเลือก theme ที่ต้องการ เมื่อแสดงตัวอย่างเป็นที่น่าพอใจแล้ว ให้คลิกที่ปุ่ม “ใช้กับบล็อก” เพื่อยืนยัน  

สอนแต่งบล็อก

2. การใช้งานเมนูพื้นหลัง การใช้งานเครื่องมือ “พื้นหลัง” สามารถใช้เพื่อเปลี่ยนภาพพื้นหลังของบล็อก และเลือกสี Theme ของบล็อกได้ตามความต้องการได้ด้วย 

สอน blogspot

2.1 วิธีเปลี่ยนภาพพื้นหลังทำได้โดย คลิกที่ “ภาพพื้นหลัง” และเลือกถาพตามต้องการ และกดปุ่ม “ใช้กับบล็อก” เพื่อยืนยัน

สอนสร้างบล็อก

ทำบล็อก


2.2 การเลือกสี Theme ของบล็อก คลิกที่สี Theme ที่ต้องการโดย อาจจะคลิกเลือกจาก Theme สำเร็จรูปหรือเลือกจาก Theme ที่แนะนำ

 สอนสร้าง blog

สอนทำ blog

3. การใช้งานเครื่องมือ “รูปแบบ” : คุณสามารถใช้เครื่องมือนี้เพื่อกำหนดจำนวน คอลัมน์ รูปแบบคอลัมน์ ความกว้างของคอลัมน์ รวมถึงการกำหนดคอลัมน์ให้กับส่วนท้ายของหน้าได้ด้วย

วิธีทำบล็อก

3.1 การใช้งานเครื่องมือ “การออกแบบเนื้อความ” : เครื่องมือนี้ใช้กำหนดรูปแบบคอลัมน์ของ template ของคุณ ซึ่งทำได้ง่ายดายโดยการคลิกเลือกรูปแบบที่ต้องการ ดูตัวอย่าง เมื่อเป็นที่พอใจแล้วก็กดปุ่ม “ใช้กับบล็อก” เพื่อยืนยัน 


วิธีทำ blogger


3.2 การใช้งานเครื่องมือ “การออกแบบส่วนท้าย” : เครื่องมือนี้เป็นเครื่องมือสำหรับการกำหนดคอลัมน์ให้กับส่วนท้ายของหน้าบล็อก ซึ่งทำได้เช่นเดียวกับ 3.1

สร้าง blogger


3.3 การใช้งานเครื่องมือ “การปรับความกว้าง” : คุณสามารถปรับความกว้างของแม่แบบ และ sidebar จากเครื่องมือนี้เพียงแค่เลื่อน slider ให้ตรงกับค่าตัวเลขที่ต้องการเท่านั้น 


วิธีทำ blogspot 


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


สอน blogger

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

ปล. อยาลืมนะครับว่าเครื่องมือเหล่านี้จะไม่มีใน blogger.com แต่ จะมีใน draft.blogger.com เท่านั้น

ตอนนี้มีความคิดเห็น : 38 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ขอบคุณสำหรับเนื้อหาดีดีครับ

  1. ขอบคุณ ๆ thongchai เช่นกันครับแล้วแวะมาเยี่ยมกันบ่อย ๆ นะครับ

  1. ยังหาไม่เจอปุ่มเข้าไปที่ไหนกำลังเีขียนบล็อกให้สวยขึ้น

    และการเปิด ช่องคอมเมนให้เห็นทำอย่างไร
    ขอบคุณ

  1. เข้าไปจาก http://draft.blogger.com/ ครับ ตามที่ได้อธิบายในบทความครับ

  1. ส่วนการเปิด comments และการตั้งค่าอื่น ๆ เขียนบทความไว้แล้วครับ
    แต่ผมคิดว่า comments ในบล้อกมันเปิดอยู่แล้วแต่ที่คุณยังไม่เห็นกล่อง comments เพราะยังไม่ได้คลิกเข้าไปอ่านบทความ (คลิกที่ชื่อบทความ)

  1. หา เครื่องมือออกเเบบเเม่แบบไม่จอคับ

  1. @ คุณ moonboy : เข้าไปจาก http://draft.blogger.com/ ครับ ตามที่ได้อธิบายในบทความครับ
    เอ...ผมว่าในบทความก็ระบุไว้ชัดเจนนะครับ

  1. ขอบคุณมากครับผม

  1. ขอบคุณสำหรับเนื้อหาดีๆค่ะ

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

  1. หาเครื่องมือออกแบบแม่แบบไม่เจอเหมือนกันค๊ะ (เข้าไปในแผงควบคุมในdraft.blogger แล้วค๊ะ)ไม่ปรากฎ รูปแบบหรือองค์ประกอบของหน้าเลยค๊ะ มีแต่เขียนว่าทำให้ blogger ในแบบร่าง เป็นแผงควบคุมเริ่มต้นของฉัน ทำเครื่องหมายในช่องแล้วก็ยังมิได้มีอะำไรเปลี่ยนแปลงเลยค๊ะ พยายามทำทุกอย่างแล้วก็ไม่เห็นมีรูปแบบตามแบบเลยค๊ะ อย่าดุนะหาไม่เจอจริงๆค๊ะ แต่ก็ยังอยากหัดทำค๊ะ ขอบคุณค๊ะ

  1. @ mukimuki : พอเจอแผงควบคุมแล้วคลิกข้อความคำว่า "การออกแบบ" อีกครั้งครับ ^ ^

  1. หากต้องการใส่ related post สำหรับบทความนั้นๆ จะต้องทำอย่างไรคะ

  1. M@blE : เลือกจาก Link นี้ครับ http://www.hackublog.com/search/label/Related%20Post

  1. ขอบคุณค่ะ

  1. อยากแก้ไขสีพื้นหลังตรงส่วนท้ายสุดของหน้าบล๊อค ไม่อยากให้มีสี แต่ไม่มีให้ปรับใน "เครื่องมือออกแบบเทมเพลตบล็อกเกอร์" สามารถแก้ไขที่ HTML ได้มั้ย แล้วต้องเข้าไปแก้ตรงโค้ดไหนค่ะ

  1. @ Joy : ค้นหาโค้ดนี้ในแม่แบบครับ
    .footer-outer {
    color:#858585;
    background: transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -goog-ms-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
    -goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
    box-shadow: 0 0 0 rgba(0, 0, 0, .15);
    }

    แล้วแก้เป็น

    .footer-outer {
    color:#858585;
    background: transparent url() repeat scroll top left;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -goog-ms-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
    -goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
    box-shadow: 0 0 0 rgba(0, 0, 0, .15);
    }

    มันคือเอาภาพพื้นหลังออกไปนั่นเองครับ

  1. ลองหาโค้ดที่จะแก้สีตรงfooter แล้วค่ะ แต่หาโค้ดนี้ไม่เจอ #footer-wrapper
    เจอแต่ <Variable name="post.footer.text.color" description="Footer Text Color" type="color" default="#999999" value="#999999"/>
    <Variable name="post.border.color" description="Border Color" type="color" default="#dddddd" value="#dddddd"/>

    แล้วก็

    <Group description="Footer" selector=".footer-outer">
    <Variable name="footer.text.color" description="Text Color" type="color" default="#cccccc" value="#858585"/>
    <Variable name="footer.widget.title.text.color" description="Gadget Title Color" type="color" default="#aaaaaa" value="#aaaaaa"/>
    </Group>

    <Group description="Footer Links" selector=".footer-outer">
    <Variable name="footer.link.color" description="Link Color" type="color" default="#99ccee" value="#858585"/>
    <Variable name="footer.link.visited.color" description="Visited Color" type="color" default="#77aaee" value="#747070"/>
    <Variable name="footer.link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#747070"/>

  1. ไม่เจอโค้ดตามที่อ.hack บอกเลยค่ะ เจอแต่

    .footer-outer {
    color:$(footer.text.color);
    background: $(footer.background);

    -moz-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);
    -webkit-border-top-left-radius: $(footer.border.radius.top);
    -webkit-border-top-right-radius: $(footer.border.radius.top);
    -webkit-border-bottom-left-radius: $(footer.border.radius.bottom);
    -webkit-border-bottom-right-radius: $(footer.border.radius.bottom);
    -goog-ms-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);
    border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);

    -moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
    -goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
    box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
    }

  1. เจอโค้ตนี้ค่ะ

    default="transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left" value="transparent none no-repeat scroll top left"/>

    ลองเอา URL ข้างในออกแล้วแต่ภาพสีเทาตรงfooter ก็ยังอยู่ค่ะ

  1. ลองเปลี่ยน
    .footer-outer {
    color:$(footer.text.color);
    background: $(footer.background);

    เป็น
    .footer-outer {
    color:$(footer.text.color);
    background:none;

    ครับ ผมมองเห็นโค้ดได้บางส่วนเท่านั้นครับเพราะผมเข้าไปดูเองไม่ได้ อาจจะได้หรือไม่ได้ลองแก้ดูอีกทีครับ

  1. ทำได้แล้วค่าาาาาาาาาาาาาา ขอบคุณนะค่ะ เฮ้อทำไม HTML มันไม่มีแบบตายตัวเลยนะ งง!! อยากลบส่วนท้ายออกแต่เห็นอ.hackบอกว่ามันไม่ควรลบถ้าไม่จำเป็นเราก็ควรให้เครดิตเขาหน่อยใช่ป่าว แต่ปรับสีให้กลืนกับพื้นหลังคงไม่ว่ากัน ^_^

  1. ทำโดยเอาโค้ดที่อ.hack ให้เปลี่ยนตอนแรกนะแหละ ไปวางแทนโค้ดอันเก่า .footer-outer {
    color:$(footer.text.color);
    background: $(footer.background);
    ที่มันมีอยู่ทั้งแผงเลย พอเซฟมันก็หายไปเฉยๆ ดูซิบทจะง่ายก็ง่ายซะ @_@

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

  1. สวัสดีครับ
    อยากเรียนถามว่าถ้าเปลี่ยน Template แล้ว พอสั่ง Preview ก็เห็นเป็นภาพใหม่
    จึงสั่ง save แต่พอกลับไปที่ blog อีกครั้งก็พบว่า Template ยังเหมือนเดิมไม่เปลี่ยนครับ
    ไม่ทราบว่าต้องทำอย่างไร หรือผมไปล็อค Template เก่าไว้ตรงไหนให้ไม่สามารถเปลี่ยนได้
    จะเป็นไปได้ไหมครับ
    ขอบคุณครับ
    ปล.ผมมีบล็อคไทยอีกบล็ิอคหนึ่งสามารถเปลี่ยนได้แต่บล็อคที่เปิดอยู่ที่ต่างประเทศแก้ไม่ได้ครับ

  1. ทำไมของเราใช้ "เครื่องมือออกแบบแม่แบบ" ไม่ได้อะ

  1. สวัสดีครับ อ.hackublog
    อยากทราบวิธีขยายความกว้าง Template Awesome Inc. ของ Blogger คือ ผมต้องการทำ blog เกี่ยวกับบทความต่างๆ ต้องการที่จะขยายความกว้าง outer, header, main, slidebar, footer เพื่อให้ผู้อ่า่นเลือกอ่านได้ง่ายๆ ไม่ทราบว่ามีวิธีัปรับอย่างไรครับ
    ขอบคุณครับ

    ตอนนี้เจอแล้วครับ อยู่ที่ code ข้างล่างนี้ ถ้าไม่ได้อ่าน blog ของอาจาีรย์คงหาไม่เจอครับ
    ขอบพระคุณความรู้ของ อ.hackublog ที่ทำให้มีความรู้


    <b:template-skin>
    <b:variable default='930px' name='content.width' type='length' value='1000px'/>
    <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
    <b:variable default='360px' name='main.column.right.width' type='length' value='210px'/>

  1. คือว่าอยากทราเกี่ยวกับการขยายบล็อกให้กว้างขึ้นคะเพราะเนื่อหาที่เขียนมันไม่พอเนื้อที่ความกว้างมันสั้นไปนะคะ
    ลองเข้าไปปรับความกว้างแล้วแต่มันก็กินพื้นที่ของช่องบล็อกอีกทางหนึ่งซึ่งจะทำให้อีกฝั่งแคบ จึงอยากจะขยายหน้าบล็อกทั้งหมดให้กว้างขึ้นทั้งหมดนะคะให้เต็มหน้าจอเลยก็ยิ่งดีแต่ยังไม่มีวิธีเลยคะใครพอจะมีวิธีบ้างใหมคะช่วยแนะนำด้วยนะคะ

  1. ช่วยให้ผมอธิบายวิธีการปรับปรุง blog ให้เพื่อนฟังได้รวดเร็วครบถ้วน

  1. รบกวนด้วยครับคือผมอยากเปลี่ยนภาพพื้นหลังของbloggerเป็นภาพของผมเข้าไปแก้หน้าhtmlตรงไหนครับ
    เเบบที่ผมใช้เหมือนตัวอย่างนั้นละครับขอบคุณครับ
    e-mail aod2004114@hotmail.com

  1. ขอบคุณสำหรับ ความรู้ของบทความนี้มากๆเลยนะค่ะ^^

  1. มีวิธีที่เราจะสามารถใส่โคท ของ widget เข้ามาที่ xml template ได้มั้ยครับ
    คือผมอยากแค่อัพโหลด xml เสร็จก็ได้ widget ที่พร้อมใช้งานเลยน่ะครับ โดยที่เราไม่ต้องเข้าไปแก้ไขเพิ่มเติมที่เมนู layout เลย

  1. ขอบคุณมากๆค่ะ พยายามทำอยู่นานแต่ว่าไม่เป็นซักที อ่านบทความนี้เริ่มเห็นทางสว่างแล้วค่ะ

  1. Mr.Hackublog ผมอยากได้คำสั่งสวยๆอะ มีให้บ้างมะครับเเม่เเบบ HTML

  1. แอดเฟสผมมาได้ที่ Nitiwat Drink นะครับMr.Hackublog
    จะได้สอนผมสะดวก = =

  1. ขอบคุณที่แนะนำ..

  1. หน้าสร้างเวปใหม่ผมหายทำไงครับ

  1. หน้าสร้างเวปใหม่ผมหายทำไงครับ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel