Blogger: ใส่สีพื้นหลังและเส้นขอบให้รูปภาพในบทความทุกอัน


วิธีใส่สีพื้นหลังและเส้นขอบให้กับรูปภาพทุกอันในบทความของบล็อกเกอร์ (Add Blogger post image background and border) สามารถทำได้ดังนี้

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'รูปแบบ > แก้ไข HTML > ขยายแม่แบบเครื่องมือ'

ขั้นตอนที่ 2. กด 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหา
]]></b:skin>

ขั้นตอนที่ 3. แทนที่โค้ดที่หาเจอนั้นด้วย
.post-body img {
  padding: 6px;
  background: #f4f2ef;
  border: 1px solid #dddddd;
}

]]></b:skin>

ขั้นตอนที่ 4. เลือกที่ 'บันทึกแม่แบบ' จากนั้นลองเปิดบล็อกดูผลลัพธ์

อธิบายเพิ่มเติม
สามารถแก้ไขโค้ดในขั้นตอนที่ 3 เพื่อให้พื้นหลังและเส้นขอบของรูปภาพตรงตามความต้องการได้ดังนี้
บรรทัดที่ 2 ที่เขียนว่า padding: 6px; คือกำหนดระยะที่้เว้นจากขอบรูปว่าห่างแค่ไหน
บรรทัดที่ 3 ที่เขียนว่า background: #f4f2ef; คือสีของพื้นหลังรูปภาพ
บรรทัดที่ 4 ที่เขียนว่า border: 1px solid #dddddd; คือสีและความหนาของของเส้นขอบรอบรูป

Photoshop: อักษรเงาสะท้อน (Photoshop Text Reflection)

วิธีการใช้โปรแกรม Adobe Photoshop สร้างตัวหนังสือแบบเงาสะท้อน (Photoshop Text Reflection) สามารถทำได้ดังนี้



ขั้นตอนที่ 1. เริ่มสร้างตัวอักษร
เปิดโปรแกรม Photoshop ขึ้นมา แล้วพิมพ์ตัวหนังสือที่ต้องการให้สะท้อนใส่ลงไป จากนั้นตั้งชื่อเลเยอร์ที่มีภาพพื้นหลังใส่อยู่ว่า "BG-Maxlayout" และเลเยอร์ซึ่งมีข้อความตัวหนังสือใส่อยู่ว่า "Text"



ขั้นตอนที่ 2. แต่งรายละเอียด
โดยสามารถตบแแต่งใส่สีให้ตัวอักษรและพื้นหลังได้ตามต้องการ



ขั้นตอนที่ 3. คัดลอกเลเยอร์
สั่งคัดลอกเลเยอร์ "Text" เพิ่มขึ้นมาอีกหนึ่งอัน ด้วยการกดปุ่ม <Alt> บนคีย์บอร์ดค้างไว้พร้อมกับเลือกเลเยอร์ "Text" จากนั้นค่อยลากเมาส์เลื่อนเลเยอร์ขึ้นด้านบน โดยตั้งชื่อเลเยอร์ที่เพิ่มขึ้นใหม่นี้ว่า "Reflect"



ขั้นตอนที่ 4. กลับด้านตัวอักษร
ให้สั่งกลับด้านตัวอักษรซึ่งได้่คัดลอกไว้ โดยให้ไปที่เลเยอร์ "Reflect" แล้วเลือก "Edit > Transform > Flip Vertical"



ขั้นตอนที่ 5. ย้ายตำแหน่งเงาสะท้อน
จากนั้นขยับเลเยอร์ "Reflect" ให้เลื่อนลงมาด้านล่างไปอยู่ใต้ตัวอักษรของเลเยอร์ "Text" โดยเว้นระยะห่างระหว่างกันเล็กน้อย



ขั้นตอนที่ 6. สร้างหน้ากากให้เลเยอร์
ไปที่เลเยอร์ "Reflect" แล้วเลือก "Add Vector Mask" จะพบว่าเกิด "Layer Mask Thumbnail" ปรากฏขึ้นมาด้านข้าง



ขั้นตอนที่ 7. ไล่สีหน้ากากเลเยอร์
ไปที่ "Layer Mask" ของเลเยอร์ "Reflect" จากนั้นให้เลือกที่ "Gradeint Tool" ตั้งค่า Foreground เป็นสีดำและ Background เป็นสีขาวแล้วลากไล่สีจากบนลงล่าง
ซึ่งในตัวอย่างอันนี้ได้ลากไล่สีจากบริเวณตรงกลางของตัวอักษรด้านบนไปจนถึงตรงกลางของตัวอักษรที่กลับหัวดังรูป



ขั้นตอนที่ 8. ตรวจสอบผลงาน
โดยจะพบว่าความเข้มของเงาสะท้อนในเลเยอร์ "Reflect" ที่มีอยู่จะค่อยๆจางลง ซึ่งถ้ารู้สึกว่ายังไม่ดีพอก็สามารถลาก "Gradeint Tool" ไล่สีทับลงไปที่  "Layer Mask"  อันเดิมได้เรื่อยๆ จนกว่าจะพอใจ เมื่อเสร็จแล้วก็กดบันทึกผลงานได้เลย

Blogger: ดาวน์โหลดเทมเพลทหรือธีมบล็อกมาเก็บไว้


หากต้องการดาวน์โหลดเทมเพลทหรือธีมของบล็อกเกอร์มาเก็บไว้ในเครื่องของเราเองก่อน เพื่อป้องกันความเสียหายจากความผิดพลาดในการ 'แก้ไขแม่แบบ' ให้เลือกดังนี้
การออกแบบ > แก้ไข HTML > ดาวน์โหลดแม่แบบฉบับเต็ม

จากนั้นเมื่อต้องการนำแม่แบบอันนั้นกลับมาใช้อีกครั้งก็ให้ไปที่
การออกแบบ > แก้ไข HTML > อัปโหลดแม่แบบจากไฟล์ในฮาร์ดไดรฟ์ของคุณ
แล้วเลือกไฟล์ที่ได้เก็บเอาไว้นั้นแล้วกดปุ่ม 'อัปโหลด'

Blogger: ย้ายช่องใส่ความเห็นมาไว้เหนือรายการความคิดเห็น


ถ้าไม่ชอบที่ตำแหน่งของกล่องใส่ข้อคิดเห็น (Comment Form) ของ Blogger ที่ปกติแล้วจะวางอยู่ข้างใต้ความคิดเห็นที่มีผู้โพสต์ไว้ก่อนแล้วก็สามาถย้ายกล่องใส่ข้อคิดเห็นของบทความใน Blogger มาวางไว้เหนือรายการความคิดเห็น (Move Blogger Comment Form Above Comment Blocks) ได้ดังนี้

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'การออกแบบ > แก้ไข HTML > ขยายแม่แบบเครื่องมือ'

ขั้นตอนที่ 2. กด 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหา
<b:if cond='data:post.embedCommentForm'>
ซึ่งจะพบโค้ดลักษณะเหมือนด้านล่างนี้ โดยให้สั่งลบทิ้งไปทั้งหมด
      <p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>

      </p>

ขั้นตอนที่ 3. กด 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหา
<data:post.numComments/> <data:commentLabelPlural/>:
ซึ่งจะพบโค้ดลักษณะเหมือนด้านล่างนี้
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
      </h4>
โดยแทนที่โค้ดทั้ง 3 บรรทัดที่ได้หาเจอนั้นด้วยโค้ดข้างล่างนี้
           <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
      </h4>
 
      <p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>
      </p>

ขั้นตอนที่ 4. เลือกที่ 'บันทึกแม่แบบ' จากนั้นลองเปิดบล็อกดูผลลัพธ์

อธิบายเพิ่มเติม
เมื่อคุณได้แก้ไขตามที่กล่าวมาแล้วจะพบว่าฟอร์มสำหรับใส่ความคิดเห็นจะย้ายมาอยู่ข้างบนเหนือรายการความคิดเห็นแล้ว แต่คุณจะพบว่ามีพื้นที่ว่างมากเกินไปคั่นอยู่ระหว่าง 'ฟอร์มใส่ความคิดเห็น' กับ 'รายการความคิดเห็น' ซึ่งสามารถแก้ได้โดยทำตามบทความในลิงก์นี้
http://tip.maxlayout.com/2011/12/blogger-remove-space-below-comment-form.html

Blogger: ลดพื้นที่ว่างใต้กล่องใส่ข้อคิดเห็น


วิธีลดขนาดพื้นที่ว่างซึ่งอยู่ข้างใต้กล่องใส่ข้อคิดเห็นของบล็อกเกอร์ (Remove Space Below Blogger Comment Form)

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'รูปแบบ > แก้ไข HTML > ขยายแม่แบบเครื่องมือ'

ขั้นตอนที่ 2. กด 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหาโค้ดว่า
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
โดยจะพบว่าในโค้ดมีการกำหนดความสูงไว้ว่า
height='410'
ซึ่งสามารถปรับขนาดได้ตามต้องการ

ขั้นตอนที่ 3. กด 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหาโค้ดว่า
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
โดยจะพบว่าในโค้ดมีการกำหนดความสูงไว้เช่นเดียวกับขั้นตอนที่ 2 ที่เขียนว่า
height='410'
ซึ่งให้สามารถปรับขนาดเหมือนกับขั้นตอนที่ 2

ขั้นตอนที่ 4. เลือกที่ 'บันทึกแม่แบบ' จากนั้นลองเปิดบล็อกดูผลลัพธ์
สมัครสมาชิก: ความคิดเห็น (Atom)