วิธีแยกแต่ละ Post บน Blogger ออกจากกัน

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

สอนทำบล็อก

ในที่นี้ผมจะยกตัวอย่างแม่แบบที่มีชื่อว่า Minima เนื่องจากเป็นแม่แบบมาตารฐานที่ส่วนใหญ่เราจะใช้เป็นแม่แบบเริ่มต้นในการสร้างบล็อกครั้งแรก และต้องขออภัยที่ไม่สามารถยกตัวอย่างโค้ดให้ดูได้ในแต่ละ template เพราะว่า Template ที่สร้างขึ้นมานั้นมากมายเหลือเกิน แต่ผมก็จะพยายามเขียนเป็นหลักการที่สามารถปรับใช้ได้กับทุกแม่แบบครับ


วิธีติด Google Adsense
 วิธีดำเนินการ 

ขั้นที่ 1 ก่อนอื่นผมเขียนบทความขึ้นมา 2 บทความก่อน แล้วให้ดูว่าเมื่อไม่มีการกำหนดพื้นหลัง หรือยังไม่ได้จัดการให้แต่ละบทความแยกจากกันนั้นเป็นอย่างไร

สอนทำบล็อก

จากรูปจะเห็นว่าทั้ง 2 บทความนั้นไม่ได้แยกจากกันและยังติดกันอยู่

ขั้นที่ 2  Log in เข้าไปที่ blogger >>  ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML

จากนั้นค้นหาโค้ด

#main-wrapper {

ซึ่งสำหรับ Templates Minima ผมพบโค้ด

#main-wrapper {
width: 410 px;
float: $startSide;
word-wrap: break-word;              /* fix for long text breaking sidebar float in IE */
overflow: hidden;                         /* fix for long non-text content breaking IE sidebar float */
}


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

#main-wrapper {
background:#C3EDEA;                  /*พื้นหลังสีฟ้า*/
border: 1px solid #565656;        /* เส้นขอบสีเทาเข้ม ทึบ */
padding-right:10px;
padding-left:10px;

width: 410 px;
float: $startSide;
word-wrap: break-word;           /* fix for long text breaking sidebar float in IE */
overflow: hidden;                       /* fix for long non-text content breaking IE sidebar float */
}


เมื่อบันทึกแม่แบบแล้วผลที่ได้จะเป็นดังรูป


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

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


ขั้นที่ 3 ค้นหาโค้ด

.post {

และสำหรับ template ในตัวอย่างนี้ผมพบโค้ดเป็น

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}


จากนั้นผมลองเพิ่มโค้ดสีแดงลงไปเช่นเดียวกับขั้นที่ 2 และ ลบโค้ดสีม่วงทิ้งไปเนื่องจากเป็นการกำหนดค่าเส้นขอบซ้ำซึ่งจะได้โค้ดเป็น

.post {
background:#C3EDEA;                  /*พื้นหลังสีฟ้า*/
border: 1px solid #565656;         /* เส้นขอบสีเทาเข้ม ทึบ */
padding-right:10px;
padding-left:10px;

margin:.5em 0 1.5em;
padding-bottom:1.5em;
}


ผลที่ได้เป็นดังนี้ครับ


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

ปรากฎว่าผลที่ได้ยังซ้อนกันอยู่ระหว่างพื้นหลังในส่วนของ #main-wrapper  กับ  .post ดังนั้นผมจะกลับไปลบโค้ดที่กำหนดพื้นหลังและเส้นขอบในส่วนของ #main-wrapper ออก โค้ดทั้งสองส่วนจะได้เป็น

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}


และ

.post {
background:#C3EDEA;                  /*พื้นหลังสีฟ้า*/
border: 1px solid #565656;         /* เส้นขอบสีเทาเข้ม ทึบ */
padding-right:10px;
padding-left:10px;

margin:.5em 0 1.5em;
padding-bottom:1.5em;
}


ซึ่งสุดท้ายแล้วผลที่ได้ก็จะเป็นไปตามที่เราต้องการครับ

สอนทำ blogspot


บทสรุป

การแยกกล่องบทความหรือแต่ละ post ใน Templates Minima ทำได้โดยใส่พื้นหลังให้กับ Class Post เท่านั้น

บทความนี้เป็นเพียงแนวทางในการทำให้แต่ละ post แยกออกจากกันเท่านั้น ไม่ใช่วิธีที่เป็นสูตรสำเร็จ หากคุณต้องการปรับแต่งบล็อกของคุณเอง ควรจะทำความเข้าใจโค้ด Templates ของคุณเสียก่อนว่ามีการวางองค์ประกอบอย่างไร ซึ่งผมแนะนำให้อ่านบทความ รู้จัก กับโครงร่างของโค้ด Template ใน Blogger เพื่อเป็นแนวทางในการศึกษา แล้วจึงดำเนินการแก้ไขตามแนวทางที่ทำให้ดูเป็นตัวอย่างข้างต้น

บทความต่อไปผมจะนำเสนอ การแยกแต่ละ widget บน sidebar ออกจากกัน อย่าลืมติดตามอ่านกันต่อนะครับ สวัสดีครับ

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

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

  1. ครับ นั่นเป็นเพราะแม่แบบใหม่ของ Blogger ออกมาเป็นอย่างนั้นครับ แต่บทความนี้ใช้สำหรับปรับแต่งแม่แบบที่ดาวน์โหลดมาใช้หรือใช้แม่แบบดั้งเดิม(รุ่นเก่า) จะใช้วิธีนี้ครับ

  1. ถ้าเป็น แม่แบบ ตัวใหม่ของ คุณเกิ้ล จะต้องค้นหา โค๊ส ไหนหรอคับ พี่ HackBlog
    ปล.ผมหัดแต่ง blog ด้วยแม่แบบใหม่ของ คุณเกิ้ล เอง แล้วคับ ไม่อยาก เอาของคนอื่นมาใช้ เวลาแก้ไขจะได้นึกออก ขอบคุณคับพี่

  1. @Deathless2: ลองใช้ firebug ช่วยดูโค้ดก็จะทราบครับ
    http://www.hackublog.com/2010/06/using-firebug-tweak-blogger-layout.html
    ถ้าจะให้พี่ช่วยดูต้องบอกบล็อกเป็นราย ๆ ไปครับ เพราะแม่แบบรุ่นใหม่เองก็ใช้โค้ดต่างกัน

  1. http://the-cartoonsonline.blogspot.com/ นี่คับพี่ พยายามจะหัดใช้ เครื่องมือที่พี่ว่า แต่ (งงคับ)
    ปล.ขอบคุณด้วยความนับถืออีกครั้งคับพี่ ขอบคุณมากคับ

  1. พี่HackBlog ขอถามอีก1อย่างนะคับ วิธีการ เอา แถบเครื่องมือ ที่เขียนว่า รายงานการระเมิด ที่อยู่ตรงบยสุดของBlog ออกยังไงหรอคับ
    ปล.ขอบคุณคับพี่

  1. @Deathless2: ตอบคำถามที่ 2 ให้ก่อนนะครับ ใช้โค้ด
    #navbar-iframe{display:none;}
    ครับ

  1. @Deathless2 : ตามมาตอบข้อแรกให้ครับ

    ลองค้นหาโค้ด
    .post-outer, .inline-ad {
    border-top: 1px solid #222222;
    margin: 0 -15px;
    padding: 15px 15px;
    }

    และเปลี่ยนเป็น

    .post-outer, .inline-ad {
    border-top: 1px solid #222222;
    margin: 10px 0 10px 0; /* ค่า margin ปรับเพิ่ม-ลดตามต้องการ*/
    padding: 15px;
    background: #fff; /*ค่าสีของ background ปรับได้ตามใจชอบ*/
    }


    ส่วนแม่แบบที่น่้องใช้เขาใส่พื้นหลังให้รูปภาพด้วยครับ โค้ดคือ
    .post-body img {
    padding: 8px;
    background: #222222;
    border: 1px solid transparent;
    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
    box-shadow: 0 0 0 rgba(0, 0, 0, .2);
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    }

    อาจจะแก้เป็น
    .post-body img {
    border:none;
    }

    นี่แบบคร่าว ๆ ครับ ต้องลองปรับแต่งไปเรื่อย ๆ ครับแล้วจดโค้ดแต่ละตำแหน่งไว้กันลืมด้วยครับ

  1. สวัสดีครับคุณ Mr.Hackublog ผมเคยถามที่บทความ วิธีสร้างพื้นที่สำหรับ Add Gadgets ที่ Blogger Header ตัวใหม้ครับ ไม่รู้ว่าทำผิดกดอะไรหรือเปล่าหรือเพราะผมทำลิ้งไว้ ผิดพลาดตรงไหนผมก็ขอโทษด้วยครับ และปัญหาเดิม ๆ ของผมคือหาโค๊ดไม่เจอครับ เทมเพลตที่ผมใช้ผมทำเองครับโดยใช้โปรแกรม artisteer โค๊ดบางตัวที่คุณ Mr.Hackublog บอกไว้มันไม่มีครับ เรื่องภาษา HTML หรือครับผม ใช่เดาเอาครับ ผมก็อยากจะทำแบบที่ Mr.Hackublog สอนไว้ให้ได้นะครับ ทั้งเรื่อง Add Gadgets ที่ Blogger Header และ ในบทความนี้ครับ ช่วยดูให้ผมด้วยนะครับ ขอบคุณครับ naropano.blogspot.com
    สุดท้ายถ้าผมได้ทำอะไรที่ผิดไปก็ขออภัยด้วยครับ

  1. @ naro : ไม่ได้ผิดอะไรนะครับ จำได้ว่าไม่ได้ลบครับ อาจจะ Comment ไว้ที่บทความอื่น แต่ช่างมันเถอะครับ เดี๋ยวขอดูโค้ดให้สักครู่ครับ

  1. @Naro : ผมดูโค้ดให้แล้วครับถ้าคุณต้องการทำตามบทความนี้ให้ค้นหาโค้ด

    .art-Post
    {
    position:relative;
    z-index:0;
    margin:0 auto;
    min-width:1px;
    min-height:1px;
    }

    เมื่อพบแล้วเติมพื้นหลังลงไปจะได้เป็น

    .art-Post
    {
    position:relative;
    z-index:0;
    margin:0 auto;
    min-width:1px;
    min-height:1px;
    background:ใส่โค้ดสีหรือภาพที่ต้องการ(ใส่ให้ถูกหลัก css) ;
    }

    ถ้าต้องการให้ เป็นขอบโค้ง ๆ ก็อาจจะใส่โค้ด

    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;

    เพิ่มลงไป

    ลองทำดูครับ สงสัยยังไงมาถามใหม่ได้ครับ ส่วนอีกอันหนึ่งที่จะทำถามเพิ่มที่บทความที่ต้องการได้เลยครับเดี๋ยวตามไปตอบให้ครับ เอาทีละอย่างจะได้ไม่งงครับ

  1. โค้ดที่แนะนำ

    .art-Post
    {
    position:relative;
    z-index:0;
    margin:0 auto;
    min-width:1px;
    min-height:1px;
    background:#D4DDD5;
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
    }

  1. ขอบคุณมากครับ และขอบคุณบทความดี ๆ ที่นำมาให้อ่านครับ ทำได้แล้วครับ แต่สีตัวอักษรสีเดียวกับพื้นหลังเลยครับ จำได้ว่าเคยอ่านเกียวกับการเปลี่ยนสีไรนี้ละครับ เดี๋ยวลองหาอ่านครับ ขอบคุณอีกทีครับ

  1. ขอบคุณมากมาย
    แต่ยังงงอยู่ เพราะมึนกับ html

  1. http://xn--72czau2dl2ac9cd1p.blogspot.com/

    อยากทำบล็อคหน้าตาคล้ายๆแบบนี้ต้องทำยังไงบ้างครับ
    1.มีหน้าแรกแล้วก็ตัวเลือกหน้าต่างๆ ซึ่งหน้าแรกลูกล็อคไว้
    2.แบ่งหนังเป็นบล็อคๆแยกจากกัน แล้วกดไปหน้าบทความนั้น

  1. ทำแล้วครับ แต่ชื่อหัวข้อโพส มันลั้นขอบไปบรรทัดนึง แก้ตรงไหนครับ

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

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

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