ใส่ Background ให้กับ Link ใน Blogger

<div align="center"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7TfoRCEbrJii_IviuzBUNJKbwUdoBXwEePSILTynXGHLc6N3r-0NqHJw82iFaNPCjXyt-fO-qPh2bJojv4zZr6E1_6yIWhJDO36MACjXIeLdFM8pPRtvdWk6G4R6FGY8leNwaUsXV9n5v/s1600/page_navigation_hack.png" /><br /><br />บทความนี้ก็เป็น trick ง่าย ๆ ในการใส่ลูกเล่นให้กับ LinK ต่าง ๆ ในบทความ หรือในบล็อกของคุณ </div><br /><div align="center">สำหรับตัวอย่างสามารถดูได้จากลิงค์ด้านล่าง</div><div align="center"><br /></div><div align="center"><br /></div><br /><br /><br /><div align="center"><b><u>วิธีติดตั้ง</u></b></div><div align="left"><br /></div><div align="center">Log in เข้าไปที่ blogger และไปที่ แผงควบคุม >>รูปแบบ >> แก้ไข HTML</div><br /><br /><br /><div align="left"><b>กรณีที่ 1</b> ถ้าต้องการให้ LINK ของทั้งบล็อกมีพื้นหลัง</div><div align="left"><br /></div><div align="left">1.1 CSS ที่กำหนดแท็ก a หรือลักษณะลิงค์ต่างๆ ของบล็อก จะมีลักษณะคล้ายกับโค้ดต่อไปนี้</div><br /><br /><div align="left"><u>ตัวอย่างโค้ดที่กำหนดลักษณะของ Link ใน Blogger</u></div><code>a{color:#6F0000;text-decoration:none;text-shadow:0.5px 0.5px 0.5px #ffffff}</code><br /><br />หรือบางบล็อกอาจจะเป็น<br /><code>a:link { <br /> color:$linkcolor; <br /> text-decoration:none; <br /> }</code><br /><br />หรือ<br /><code>a, a:visited { <br /> color: #B2265D; <br /> text-decoration: none; <br /> }</code><br /><br />ซึ่งแต่ละ Template ก็จะแตกต่างกันไป แบบไม่ตายตัว<br /><br /><br /><br />1.2 การใส่ background ให้กับแท็ก a ทำโดย<br /><br />ค้นหาโค้ด <b>]]></b:skin></b> และวางโค้ดต่อไปนี้<b><u>ก่อนหน้า</u></b>โค้ดดังกล่าว<br /><br /><code>a<b><span style="color: #ff0080;">[href^="http://"]</span></b> { <br />background: url(http://upic.me/i/dr/linkbg.gif) center right no-repeat; <br />padding-right: 15px; <br />}</code><br /><br />บันทึกแม่แบบก็จบขั้นตอนครับ<br /><br /><br /><b>หมายเหตุ</b> โค้ด <b><span style="color: #ff0080;">[href^="http://"]</span></b> ที่เติมเข้าไปจะทำให้ Link ที่ขึ้นต้นด้วย <b>http://</b> มีพื้นหลังทั้งหมด<br />ถ้าหากต้องการให้ Link ที่ขึ้นต้นด้วย <b>http://www</b> มีพื้นหลัง ก็ให้แก้โค้ดเป็น <b><span style="color: #ff0080;">[href^="http://<span style="color: red;">www</span>"]</span></b> ซึ่งจะทำให้ Link ที่มีพื้นหลังเป็น Link ที่ขึ้นต้นด้วย <b>http://www</b> เท่านั้น <br /><br /><br /><br /><br /><b>กรณีที่ 2</b> หากต้องการให้ Link มีพื้นหลังเฉพาะในส่วนบทความเท่านั้น<br /><br />ก่อนอื่นเราจะต้องหาโค้ดให้พบก่อนว่า โค้ด CSS ที่กำหนดลักษณะในส่วนของบทความในบล็อกของเรานั้นเป็นอย่างไร <br /><br />ซึ่งสมมติว่าเราพบว่าโค้ด CSS ที่กำหนดลักษณะในส่วนของบทความในบล็อกของเราเป็น<br /><br /><code><b><span style="color: red;">.post</span></b> { <br /> background: #FFFFFF; <br /> margin: 0px 0px 10px 0px; <br /> padding: 10px 10px 10px 10px; <br /> border: 1px solid #C0C0C0; <br /> }</code><br /><br /><br />ก็ให้เติมชุดโค้ดต่อไปนี้ลงไปก่อนหน้าโค้ด <b>]]></b:skin></b> เหมือนในกรณีที่ 1 <br /><br /><code><b><span style="color: red;">.post</span></b> <b><span style="color: #ff0080;">a[href^=http://www]</span></b> { <br />background: url(http://upic.me/i/dr/linkbg.gif) center right no-repeat; <br />padding-right: 15px; <br />}</code><br /><br /><br /><b>หมายเหตุ</b> สำหรับบาง template ก็อาจจะพบโค้ด CSS ที่กำหนดลักษณะในส่วนของบทความคล้ายกับโค้ดต่อไปนี้<br /><br /><b>.post-content</b> หรือ <b>.post-body</b> หรือ <b>.post-box</b> หรือ <b>.entry</b> เป็นต้น<br /><br /><br /><b>ปล.</b> หากท่านใดหาโค้ดไม่เจอโปรดสอบถาม และแจ้งบล็อกของท่านเอาไว้ผมสามารถช่วยแนะนำให้ได้ด้วยความยินดีครับ

ใส่ Background ให้กับ Link ใน Blogger

บทความนี้ก็เป็น trick ง่าย ๆ ในการใส่ลูกเล่นให้กับ LinK ต่าง ๆ ในบทความ หรือในบล็อกของคุณ สำหรับตัวอย่างสามารถดูได้จากลิงค์ด้านล่าง วิธีติดต...

อ่านเพิ่มเติม »

วิธีเปลี่ยน background ของ blogger

<br /><a class="hackublog" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVVjdBFz29oDXst1Y77ZdJCtHYbRMM76T2zCzLC8l87FJfJiE4LtfXqqHGZ5-5tUT6mnuUE66o6tzo2M7OY_Eh1rBXzcqHLTG1nV8PBS1WLYhl7gPVqMhmOP87XbgvkEgirHF-EfAIUQNy/s1600-h/Background%5B5%5D.jpg"><img alt="Background" border="0" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPAGbE0SwiXpunXI7wEMJ4YYSUOMRQKqBc-R1kuGSKVXDqvw4nJx-yv8Lgl6mXnqVyyjNJ96XbDx-vKOFDUkuunwy3HIBnMPkGSILw3ssLuBI-SzulTo6MY9ZL2xyFSrOeR99uvrD-FjDI/?imgmax=800" style="border: 0px currentColor; display: block; float: none; margin-left: auto; margin-right: auto;" title="Background" width="239" /></a> <br /><br />บทความนี้จะสอนให้ตกแต่งพื้นหลังของ template ด้วยภาพที่คุณชื่นชอบ ซึ่งเพื่อความชัดเจนอาจจะสอนยาวสักหน่อย ขอเข้าเรื่องเลยครับผม<br /><br /><b>ขั้นตอนการเปลี่ยน</b><br /><br />1. เตรียมภาพที่ต้องการทำเป็นพื้นหลังและ นำไปฝากไว้ที่ free file host ที่รู้จักเช่น <br /><blockquote>http://upic.me<br />http://www.sigmirror.com</blockquote>เป็นต้น และเมื่อฝากภาพเสร็จแล้วให้คัดลอก URL ของภาพเก็บไว้ก่อน<br /><br />2. loggin เข้า blogger >> ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ค้นหาโค้ด (กด Ctrl+F ช่วยค้นหา)<br /><br /><code>body { <br />background: <span style="color: green;">***ตรงนี้แต่ละคนอาจเจอโค้ดไม่เหมือนกัน***</span> ;<br />}</code><br /><br />โค้ดนี้จะเป็น CSS โค้ดที่บอกภาพที่จะใช้เป็นพื้นหลัง<br /><br />3. กรณีที่ใครต้องการใส่สีที่ต้องการ (ไม่ใช้ภาพ) เป็นพื้นหลังก็ให้เปลี่ยนโค้ดเป็น<br /><br /><code>body { <br />background-color:<b><span style="color: red;">ใส่โค้สีที่ต้องการ</span></b>;<br />}</code><br /><br /><b>เช่น</b> ถ้าต้องการให้พื้นหลังเป็นสีเทาก็แก้เป็น<br /><br /><code>body { <br />background-color: <b><span style="color: red;">#AAAAAA</span></b> ;<br />}</code><br /><br />แล้วทำการแสดงตัวอย่างดูก่อนว่าพึงพอใจหรือไม่ ถ้าชอบแล้วก็บันทึกจบขั้นตอนครับ<br /><br />4. กรณีที่ต้องการใส่ภาพที่มีขนาดพอดีกับ template ก็ให้ใช้โค้ดนี้ครับ<br /><br /><code>body { <br />background-image: url( <b><span style="color: red;">URL ของรูปจากข้อ 1</span></b> ) ;<br />}</code><br /><br /><br />5. กรณีที่ต้องการใส่รูปที่มีขนาดเล็กกว่า template อาจใช้โค้ดใดโค้ดหนึ่งต่อไปนี้<br /><br />5.1 โค้ดนี้แปลว่าให้ภาพมีการปรากฎซ้ำๆ จนพอดีกับ template ครับ<br /><br /><code>body { <br />background-image: url( <b><span style="color: red;">URL ของรูปจากข้อ 1</span></b> ) ;<br />background-repeat: repeat ;<br />}</code><br /><br /><br />5.2 โค้ดนี้แปลว่าให้ภาพมีการปรากฎซ้ำๆ ตามแนวนอน จนพอดีกับ template ครับ<br /><br /><code>body { <br />background-image: url( <b><span style="color: red;">URL ของรูปจากข้อ 1</span></b> ) ;<br />background-repeat: repeat-x ;<br />}</code><br /><br />5.3 โค้ดนี้แปลว่าให้ภาพมีการปรากฎซ้ำๆ ตามแนวตั้ง จนพอดีกับ template ครับ<br /><br /><code>body { <br />background-image: url( <b><span style="color: red;">URL ของรูปจากข้อ 1</span></b> ) ; <br />background-repeat: repeat-y ;<br />}</code><br /><br /><br />6. กรณีที่ต้องการกำหนดตำแหน่งตายตัวก็ให้เพิ่มโค้ดต่อไปนี้เพิ่มเข้าไปครับ<br /><br /><code>body { <br />background-image: url( <b><span style="color: red;">URL ของรูปจากข้อ 1</span></b> );<br />background-position: <b><span style="color: red;">top left</span></b>;<br />}</code><br /><br />ซึ่งตำแหน่งที่กำหนดสามารถปรับเปลี่ยนโค้ดสีแดงด้วยโค้ดต่อไปนี้ตามความต้องการครับ<br /><br /><code>top center; <br />top right; <br />center left; <br />center center; <br />center right; <br />bottom left; <br />bottom center; <br />bottom right;</code><br /><br />แต่ถ้าไม่ต้องการตำแหน่งข้างต้นอาจใช้โค้ดจัดแนวตามแกน x และ แกน y ดังนี้<br /><br /><code>body { <br />background-image: url( <b><span style="color: red;">URL ของรูปจากข้อ 1</span></b> ); <br />background-position: <span style="color: red;"><b>x</b><span style="color: black;">%</span><b> y</b><span style="color: black;">%</span><b> </b></span>;<br />}</code><br /><br />หรือ<br /><br /><code>body { <br />background-image: url( <b><span style="color: red;">URL ของรูปจากข้อ 1</span></b> ); <br />background-position: <b><span style="color: red;">x</span></b> px <span style="color: red;"><b>y</b></span> px ;<br />}</code><br /><br /><br />7. และถ้าหากต้องการให้พื้นหลังอยู่กับที่ไม่เคลื่อนที่ตามการเลื่อนของหน้าบล็อก ก็ให้เพิ่มโค้ด<br /><br /><code>background-attachment: fixed; </code> <br /><br />เพิ่มลงไปซึ่งจะได้เป็น<br /><br /><code>body { <br />background-color: <b><span style="color: red;">#AAAAAA</span></b>; <br />background-image: url(<b><span style="color: red;">URL ของรูปจากข้อ 1</span></b>); <br />background-repeat: <b><span style="color: red;">no-repeat</span></b>; <br />background-position: <b><span style="color: red;">center center</span></b>; <br />background-attachment: <b><span style="color: red;">fixed</span></b>;<br />}</code><br /><br />โค้ดสีแดงสามารถปรับเปลี่ยนได้ตามความต้องการตามที่ได้กล่าวมาครับ<br /><br />หมายเหตุ บางครั้งโค้ดเหล่านี้อาจถูกเขียนรวมกันเป็นบรรทัดเดียว เช่น จากโค้ดในข้อ 7. เขียนใหม่เป็น<br /><br /><code>body {<br />background-color: <b><span style="color: red;">#AAAAAA</span></b>; <br />background-image: url(<b><span style="color: red;">URL ของรูปจากข้อ 1</span></b>)<b><span style="color: red;"> no-repeat </span></b> <b><span style="color: red;">center center </span></b> <b><span style="color: red;">fixed</span></b>; <br />}</code><br /><br />หากอ่านแล้วยังมีข้อสงสัยอยู่สอบถามที่กล่องความคิดเห็นด้านล่างได้เลยครับผม

วิธีเปลี่ยน background ของ blogger

บทความนี้จะสอนให้ตกแต่งพื้นหลังของ template ด้วยภาพที่คุณชื่นชอบ ซึ่งเพื่อความชัดเจนอาจจะสอนยาวสักหน่อย ขอเข้าเรื่องเลยครับผม ขั้นตอนการเป...

อ่านเพิ่มเติม »

4 วิธีในการปรับแต่ง Blogger Post Title

<div style="text-align: center;"><table border="0" cellpadding="2" cellspacing="0" style="width: 620px;"><tbody><tr><td valign="top" width="369"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHitAwAWQFo_yCtS-cDmGIzJsrYoTj0Cq71iT0FAOnssEvuPzhlY8n19F3xBZh9w_00t1N7x_OXwoV_q2g-zg5blG3puhdvAb7w95qHHkF4S3xMsfgY9OlC3N5jvGkyMhf1N764_k4zrZQ/s1600-h/POST_TITLE%5B3%5D.gif"><img alt="สอนทำบล็อก วิธีทำ blogger และ blogspot" border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjViRD6VYENXDYjXsVT3wp4DyKxzo5MTgMSTKWzg-E6D2o5GilkUJKfU6qnMmbX-LlEr208mC8vlxGMqbbFUKo5MSJce5LK9YxY4_VOCfSkvdYUr7U5KMfKbEHhi3fkiFCJsn8C104TPs5P/?imgmax=800" style="border: 0px currentColor; display: block; float: none; margin-left: auto; margin-right: auto;" title="สอนทำบล็อก วิธีทำ blogger และ blogspot" width="260" /></a> </td><td valign="top" width="251"><br />พอดีมีสมาชิกบางท่านถามผมมาว่าถ้าต้องการใส่ icon ให้กับ Blogger Post title ต้องทำอย่างไร การอธิบายให้เข้าใจด้วยข้อความสั้น ๆ คงไม่เพียงพอที่จะทำให้ทำตามได้ง่าย ๆ บทความนี้ผมจึงเขียนทุก ๆ วิธีที่เราสามารถปรับแต่ง Blogger Post title รวมถึงใส่ icon หรือ รูปภาพลงไปในหัวเรื่องของบทความ ซึ่งรวมทั้งสิ้นมี 4 วิธี และผมจะนำเสนอจากง่ายไปยากดังนี้</td></tr></tbody></table></div><div align="center"><b>ขั้นเตรียมการ</b></div><div align="center">ก่อนอื่นคุณจะต้องเตรียมรูปภาพหรือไอคอนขนาดที่ต้องการ (อย่าให้ใหญ่มาก ประมาณ 16x16 หรือ 24x24) </div><div align="center">สมมติในที่นี้ผมเตรียมภาพด้านล่างเอาไว้</div><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJkFtEvki60OUQkM97UJn9YDTt0C-7RyGX90Mm8R3IftjzO8Z5-IwvXVYN2sNnKrVEkyXe3JrgY0UPVOHczl2xLVLT81UYmjXNAhNaB7Q4MEznlhwW0Fo06pHlQOn5niw7Saek0RzgwZ-Z/s1600-h/paperpencil-45%5B3%5D.png"><img alt="วิธีใช้งาน blogger และ blospot" border="0" height="45" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEhh5m4lSBp2sl_K9M7yzRQO40x0TUzfpVbvAS00E7xokaSQDDjUhfcb12M8gjth0e1x5_Bkql2xep0lC1EPRMMQS_DisaBVwHYujGxCJPUpwSVNd9GFmqo_eGDXiDo67wkuUi4ZrT2KJK/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="วิธีใช้งาน blogger และ blospot" width="45" /></a><br /><div align="center">URL ของภาพ</div><blockquote>http://upic.me/i/5f/paperpencil.png</blockquote><div align="center">โค้ดของภาพนี้คือ</div><blockquote><img border="0" src="http://upic.me/i/5f/paperpencil.png"/></blockquote><br /><hr /><hr /><br /><div align="center"><b>วิธีที่ 1</b> <b>ใส่ Icon ให้ Post Title </b></div>วิธีนี้ทำได้ง่ายมาก เพียงแค่คุณได้เตรียมรูปภาพหรือ icon ที่ไม่ใหญ่โตจนเกินไปแล้วนำโค้ดไปวางลงไปในหัวเรื่องขณะที่เขียนบทความหรืออาจจะเขียนบทความไปแล้ว และทำการเอาโค้ดไปเพิ่มภายหลังก็ได้ วิธีทำดูจากรูปด้านล่างครับ <br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_TIsolOOdYWT5TLGR6GlTeDljmtuwQg7hZ7-PmZXytkyzJHlQS6LoIUKiWlvdirZ_FWwjlINdBI-DRSch0kwSGebfebYRiPOPM2Ud1g-DtkCmlWgKkwWph6FZZq1CepEwrtb4WRew6ITT/s1600-h/2010-05-26_001208%5B10%5D.png"><img alt="สอนทำบล็อก" border="0" height="255" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjieMAdB8J80dTSOAZLMhOVGEycRdNOy07C9awU0ZPeTIC9purlYgzvz7QcCNyZefITVdvQ9egIjvKkuIQaVD2I0xYz_9ngNdQVO_4Q3oQAK_FmVaUSCiRpJVM3V9EfWQ-JlAlDn0hyrR-i/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="สอนทำบล็อก" width="562" /></a><br /><div align="center">ผลที่ได้</div><div align="center"><br /></div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVVtD9EkTpZVf9yN7krYYs9WVEvtnlL3JzyUKRJG9eTmKVBCv7fFGBrMrLaWhk-6nVlzPsfZglpRBSInHwlbEHkCUyTP-7AwPAzmOkkuX3hPl02Z05Zkd45lGs03G6_QEM7sEZTyR6s1mh/s1600-h/2010-05-26_001255%5B4%5D.png"><img alt="วิธีปรับแต่ง blogger" border="0" height="114" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVc-XLhHlZ1ylK6qiWzQ-xIb6YarSvUdXOBDyVzLQ-IPjWbE4mIx1m2p-evxhZJWrUkWOjMG0fZSmfJALHwhiihlxGfx0aDhiVevSuUS_uJPkDufCweNCqkftAxMLOheB1DkMsk1qc15Rh/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="วิธีปรับแต่ง blogger" width="500" /></a><br /><b>หมายเหตุ</b><br />(1) ถ้าคุณวางโค้ดไว้ด้านหลัง Title iconก็จะอยู่ด้านหลังของ Title <br />(2) วิธีการนี้มีข้อดีคือสามารถใช้ icon ที่แตกต่างกันในแต่ละบทความได้ แต่มีข้อเสียคือไม่สามารถปรับตำแหน่งของรูปได้ <br /><br /><br /><hr /><hr /><br /><br /><div align="center"><b>วิธีที่ 2 ใส่ Icon ให้ Post Title</b></div><div align="center">วิธีนี้ก็เป็นการใส่ icon ให้กับ Post Title เช่นเดียวกับวิธีที่ 1 แต่มีความยืดหยุ่นมากขึ้น</div><div align="center">ก่อนอื่นให้ Login และไปที่ แผงควบคุม >> รูปแบบ(การออกแบบ) >> แก้ไข HTML >>และขยายแม่แบบเครื่องมือ</div><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW8TZwRKS5SeyXmNs6BvePZjdNNKZld9IoDmKIoqmWimwAMHsOfQqjQu3EfUXQwkQn4ugyk08YlMhVesio-P2b5MRnJC1wXF4FnkDqqdQPhrUctLmODqrpCvR2mdXkYpykV0CpvCfCYtqn/s1600-h/Image.png"><img alt="วิธีทำบล็อก" border="0" height="124" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr3LzhO_8aXDhowhrqMYeJ_3SdAu9gl3bY1Mxc-yJYOFUpejVrffZBCCT0f9aCZmr1tw7y11FTosftS-lJPM5wbinl1L27raFwYXlR2PYtkfNzqN4eQHB2ywfio1-zz4BdEeP1g6q_1wWz/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="วิธีทำบล็อก" width="467" /></a><br /><br /><div align="center">จากนั้นให้ค้นหาโค้ด</div><blockquote><a expr:href="data:post.url"><data:post.title/></a> </blockquote><div align="center">ซึ่งคุณจะพบชุดโค้ดในบริเวณนั้นเป็น</div><blockquote><b><span style="color: red;"><b:if cond='data:post.url'></span><br /> <span style="color: #8000ff;"><a expr:href="data:post.url"></span><span style="color: green;"><data:post.title/></span><span style="color: #ff0080;"></a></span></b><br /><b:else/> <br /> <data:post.title/> <br /></b:if></blockquote><div align="center">ถ้าคุณวางโค้ดของรูปที่เตรียมไว้คือ</div><blockquote><img border="0" src="http://upic.me/i/5f/paperpencil.png"/></blockquote><div align="center">(1) <span style="color: red;"><b><u>ถัดจาก</u></b>โค้ดสีแดง</span>รูปภาพหรือ icon จะปรากฎที่ด้าน<b><u>บน</u></b>ของ Title</div><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUxDO9ewfrLrI0cczq0OI88u4zvL06a16FKeVXc6gIV_UPGQexFEBRojd2BG599YeXqN9Io21rZJ5vkmAue1d3k5yKPXxNZc-KaB-mAR2vBJrCWQ6HC4466IOaxxTCtp8pUGIHidC_iSUK/s1600-h/2010-05-26_003826%5B3%5D.png"><img alt="แต่ง blogspot" border="0" height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPkL33dkXfhlrwCS1HhTxtjrHWR7etkPZdQLmJOKgBMs6tzRJc1OuZfgf0dPlGtky9_N9nc35MBTNp54bXigd4tOrLXPC2ofhQYp0oRcd7sHvF-UYDaDU0LxQS9UR-lUUbpkxx60kARywq/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="แต่ง blogspot" width="242" /></a><br /><br /><div align="center">(2) <span style="color: #8000ff;"><b><u>ถัดจาก</u></b>โค้ดสีม่วง</span>รูปภาพหรือ icon จะปรากฎที่ด้าน<b><u>ซ้าย</u></b>ของ Title</div><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitAd9UCHrOHHNA0BceULWFP4gGLeGeMtirdPfTZs92j_0Ue1RxFAoyXDN6FUW5zmqKEEOrR0SnCrGGRHJ5Pk3vN4IUHrrbS3DYQK5fl9PjZr2A-gYkaTiYDhS2IyxEJGV1D4QbXq1Z1enJ/s1600-h/2010-05-26_003730%5B3%5D.png"><img alt="สอนการทำ blogger" border="0" height="56" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3B7z2JaTWyTu1juyCNqsywyxqQe4JH0o5gubSCvzj9BIu5glBsR3Y6gBpw31eAcKEIdFFkGVfR9zY2VgjpbQR-73aYr1P7Ka0WkpQYSCVOAT1z6JbY5j_wR9sf5r-8UuDAPjTmjyRlGTm/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="สอนการทำ blogger" width="242" /></a><br /><br /><div align="center">(3) <span style="color: green;"><b><u>ถัดจาก</u></b>โค้ดสีเขียว</span>รูปภาพหรือ icon จะปรากฎที่ด้าน<b><u>ขวา</u></b>ของ Title</div><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9kuuvSFTUv_7w1xLcNmNfnNiwgj5s1Ep40b6KVNqN2mFGxaEEL1qqbc6RejsgOCpK_Bz0fqm1OpIgCTI9DyTOORZ-4L3kbMSy4hQMJ6Eo8g6YelP_Jzvrgq3rYnyBxdkoPWnrbbOziosl/s1600-h/2010-05-26_003913%5B3%5D.png"><img alt="สอนทำ blogspot" border="0" height="55" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF-5iDmL0BdKsWW5Ah0LZu6N8D-icQvm75peCKY-Y017PT2Dh9mN3RdVGutKOmM_SyR6kg3jhksG75h1s1aDAj7v-v2rvczZDQOiyZ__T0xSPEzZi12L1vhUlKFkrAk8jW01d_vtXD6LVd/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="สอนทำ blogspot" width="242" /></a><br /><br /><div align="center">(4) <span style="color: #ff0080;"><b><u>ถัดจาก</u></b>โค้ดสีชมพู</span>รูปภาพหรือ icon จะปรากฎที่ด้าน<b><u>ล่าง</u></b>ของ Title</div><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjrwdKVrmJRCSGIyb-Juig72HK2-mB7hLKSLNPPBZ9i965V8Qob5EYNkYwI5s5vdWzM1NnjPPdfyDexO_ZUKoGPNlmWuRxBQRs8xr6SDhhEOxpD0uRKtgY43m1wv5PHLqf82D_rNnn4K2Q/s1600-h/2010-05-26_003953%5B3%5D.png"><img alt="วิธีสร้าง blog" border="0" height="79" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiThzAVXg_U6Y0T4jspt2BI0jq-e0TTnBKtD1cFP2Rirp9T6rLDl9crC6i91C4oYf1pyF4lBxtCaOqJdFS1-WRJac1tMXg8VvsdqRQO_GwsVJuzyZeckp9XNK_c8yAoei79n8rx2-doqjM1/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="วิธีสร้าง blog" width="242" /></a><br /><br /><div align="center">นี่คือตัวอย่างการวางโค้ดให้ปรากฎทางซ้ายของ Title</div><br /><blockquote><b><span style="color: red;"><b:if cond='data:post.url'></span><br /> <span style="color: #8000ff;"><a expr:href="data:post.url"></span></b><br /><img border="0" src="http://upic.me/i/5f/paperpencil.png"/> <br /><b><span style="color: #8000ff;"></span><span style="color: green;"><data:post.title/></span><span style="color: #ff0080;"></a></span></b><br /><b:else/> <br /> <data:post.title/> <br /></b:if></blockquote><br /><div align="center">วิธีนี้มีข้อดีคือยืดหยุ่นกว่าวิธีแรกแต่มีข้อเสียคือยังไม่สามารถกำหนดตำแหน่งได้มากกว่า 4 ตำแหน่ง ที่ได้กล่าวมาแล้ว</div><br /><br /><hr /><hr /><br /><br /><div align="center"><b>วิธีที่ 3 การกำหนด ตำแหน่งของ icon ของ Title ด้วย CSS</b></div><div align="center">วิธีนี้อาศัยหลักการกำหนด CSS 3 อย่างคือ Background, padding และ Height</div><br />3.1 ขั้นแรกให้ทุกคนเข้าไปที่เมนู แก้ไข HTML และ<b><u>พยายาม เน้นครับว่าให้พยายาม</u> </b>ค้นหาโค้ดที่มีลักษณะคล้ายกับโค้ดต่อไปนี้ <br /><blockquote>.post h1{ <br /><span style="color: teal;">/* ตรงบริเวณนี้แต่ละ Template จะพบไม่เหมือนกัน */</span><br />}</blockquote><div align="center">หรือ</div><blockquote>.post h2{ <br /><span style="color: teal;">/* ตรงบริเวณนี้แต่ละ Template จะพบไม่เหมือนกัน */</span><br />}</blockquote><div align="center">หรือ</div><blockquote>.post h3{ <br /><span style="color: teal;">/* ตรงบริเวณนี้แต่ละ Template จะพบไม่เหมือนกัน */</span><br />}</blockquote>ถ้าไม่พบชุดโค้ดดังกล่าวให้สังเกตว่าชุดโค้ดใดที่กำหนด Post title ซึ่งส่วนใหญ่จะมี Keyword คำว่า Post , Title หรือคำว่า H1,H2 ปะปนอยู่กับชื่อ Class หรือ id นั้น ๆ ด้วย (ถ้าคุณหาไม่พบโปรดแจ้งขอความช่วยเหลือที่บทความนี้) <br /><br /><div align="center">เอาล่ะไม่ว่าคุณจะพบโค้ดแบบไหนแนวทางการปรับแต่งต่อไปก็จะคล้าย ๆ กัน ซึ่งใน Template ที่ผมทำให้ดูในตัวอย่างพบโค้ดดังนี้</div><br /><blockquote>.post h3 { <br /> margin:.25em 0 0; <br /> padding:0 0 4px; <br /> font-size:140%; <br /> font-weight:normal; <br /> line-height:1.4em; <br /> color:$titlecolor; <br />}</blockquote><br /><div align="center">ในที่นี้ผมจะลองใส่ Background ให้ Title ด้วยภาพที่เราเตรียมเอาไว้โดยไม่ได้ปรับแต่งอะไร</div><blockquote>.post h3 { <br /> <b><span style="color: #ff0080;">background:url(http://upic.me/i/5f/paperpencil.png) 0px 0px no-repeat;</span></b><br /> margin:.25em 0 0; <br /> padding:0 0 4px; <br /> font-size:140%; <br /> font-weight:normal; <br /> line-height:1.4em; <br /> color:$titlecolor; <br />}</blockquote><div align="center">ผลที่ได้</div><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRbA2ifD9mdWAj1gc3tzktBvX9_sFmg5VRumBX6Zx5xJHXTmP47QCdWac5wBkBUM-kK20qxtKcDoBEaREY7G7TqFm5LrUNaVlWsMFyGGmXVZx9PGadop546agKJhzRJaoGTC3zcc595mzr/s1600-h/2010-05-26_010257%5B4%5D.png"><img alt="วิธีแต่งบล็อก" border="0" height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIlFCvHmB_kmvZs92-lK8r4a34ElRmX-djPo9gaDiUL_DhNi8oIRDqveEYWtEHEy_7bVn9nf2tTJqACv_Z2UI4YlcTPt3DrEzJWJEOHyKoMvdCFm2fYDMwJnZuHMscFlHMYccXXNlBx2LR/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="วิธีแต่งบล็อก" width="325" /></a><br /><br /><div align="center">จะเห็นว่ารูปกับ Title มันทับกันอยู่ ต่อไปผมจึงจะทำให้ Title ขยับไปทางขวาอีก 40px เพื่อให้ Title ไม่ทับกับพื้นหลัง</div><br /><blockquote>.post h3 { <br /> <b><span style="color: #ff0080;">background:url(http://upic.me/i/5f/paperpencil.png) 0px 0px no-repeat;</span></b><br /><b><span style="color: #ff0080;"> padding-left</span></b><br /> margin:.25em 0 0; <br /> <span style="color: blue;">padding:0 0 4px;</span><br /> font-size:140%; <br /> font-weight:normal; <br /> line-height:1.4em; <br /> color:$titlecolor; <br /> <b><span style="color: #ff0080;">padding-left:40px;</span></b><br />}</blockquote>สังเกตว่าผมเพิ่มค่า <b><span style="color: #ff0080;">padding-left:40px;</span></b> ที่บรรทัดสุดท้ายเพราะว่าโค้ดเดิมนั้นมีค่า <span style="color: blue;">padding:0 0 4px;</span> อยู่แล้วผมจึงไม่อยากไปปรับแก้ของเก่า และเพื่อให้ง่ายต่อการอธิบายครับ <br /><br /><div align="center">เมื่อดูผลลัพธ์ที่ได้ดีขึ้นเป็นกองเลยครับ </div><div align="center"><br /></div><div align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWStuDdrtdcpJdgsq9d2Xi8FlDvc-ONkr9qK0iHXMad5C6irybJdN65NqsR4QjaRfKHQrmD9ODpv-CuJ5wniAoI07r1o2G0M2-_3An8_n_qgQG5X3FY1A6jcLp8ZaMSdxS7JhZFrMB8rEs/s1600-h/2010-05-26_010641%5B4%5D.png"><img alt="สอนสร้าง blog" border="0" height="91" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit9S68HFcSCUjFF1P8oD7QfmPzc7qyv9twA75FWGUzz_cu-EjOjLq4NNnkzTGLDaa9qJD-215mpoGfFey5Gr1cyNAye5pIJmCI-VH0_dIr6fcnZ_0LZGZ1NXaeZj0_4nYGZDvhDXqjWABO/?imgmax=800" style="border-width: 0px; display: inline;" title="สอนสร้าง blog" width="405" /></a> </div><div align="center"><br /></div><div align="center">ในกรณีที่คุณใช้<b><u>รูปภาพที่ใหญ่</u></b>เกินไปภาพที่ปรากฎอาจจะ<u><b>ขาดหาย</b></u>ไปได้ เช่น</div><div align="center"><br /></div><div align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4k9YTh65SiPOGpVTFyMBYujTzQkNGuPBbQGvczoXY-_Wf2ntO8P2MwnKDhMDJ_n8jnZwaaB_o7SGKOdXE1uh9TjC17PRbm-LKP-GYekfitNefMcdXh_z-t42qJWFlZIyVNXUmFN6GitjH/s1600-h/2010-05-26_011700%5B5%5D.png"><img alt="ทำบล็อก" border="0" height="85" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Xp4p2K-kmo8kODsK__uUKEMyoNllpcZtMngt6HyIV1mPfAmmUEjJhFjPshotXT2dC2MDn7-CINR8DZRZhRtHvw3rwEJbETygrJFixsWqw9QuGCuxWKcH4Vk2z3YFQM2z9BYG99qy00ry/?imgmax=800" style="border-width: 0px; display: inline;" title="ทำบล็อก" width="409" /></a> </div><div align="center"><br /></div><div align="center">วิธีแก้ไขคือเพิ่มโค้ดความสูงเข้าไปให้พอดีกับความสูงของภาพ และอาจจะเพิ่มค่า padding ให้มากขึ้นอีก เช่น</div><br /><blockquote>.post h3 { <br /><b><span style="color: #ff0080;"> background:url(http://upic.me/i/0n/paperpencil45.png) 0px 0px no-repeat;</span></b><br /> margin:.25em 0 0; <br /> padding:0 0 4px; <br /> font-size:140%; <br /> font-weight:normal; <br /> line-height:1.4em; <br /> color:$titlecolor; <br /> <b><span style="color: #ff0080;">padding-left:60px;</span></b><br /> <b><span style="color: #ff0080;">padding-top:15px;</span></b><br /> <b><span style="color: #ff0080;">height:40px;</span></b><br />}</blockquote>โปรดสังเกตว่าผมได้เพิ่มความสูงเป็น <b><span style="color: #ff0080;">height:40px; </span></b>เพราะภาพที่ผมใส่เข้าไปใหม่นี้มีขนาด 40x40 และได้เพิ่มค่า <span style="color: #ff0080;">padding-top:15px;</span> เพื่อให้ Title ลอยอยู่ระดับเดียวกับรูปภาพ ผลที่ได้เป็นดังภาพด้านล่าง <br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4xxGiSOgwGPDegeWLN6SgFwr6tCWA9-GEnmEetvw_joE4vblErbaWqskd2k9fDf2DiLssgAPdrf3kZUh-9rAyvHDjAgT1ikCM90jqRw9PK1a7bKV3cwVfoGF7TYfbs_WSsfKat6DIpDXU/s1600-h/2010-05-26_012356%5B4%5D.png"><img alt="เขียนบล็อก" border="0" height="98" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT70PX9cU2PToOxQTRituJDsdW0RPwJV9tKz65PyHdIGZz7JCKkrQKenJlh3Ktb1iMVWQTib9uAXqschvXz5vw4Oxjyzr4mdiNJmKyn9K_slIWr2CbGNN2KPRzEPRVxPe1GkNj-KGqP5ws/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="เขียนบล็อก" width="325" /></a><br /><br /><br /><br /><hr /><hr /><br /><br /><br /><div align="center"><b>วิธีที่ 4 การใส่ Background ให้กับ Title</b></div><br /><div align="center">วิธีนี้ทำได้คล้ายคลึงกับวิธีที่ 3 ต่างกันตรงที่เราจะ<u>ไม่ใช้</u> icon ขนาดเล็กมาเป็น Background </div><div align="center">แต่จะใช้สีหรือรูปภาพมาเป็น background แทน</div><br /><div align="center">การเริ่มต้นให้ทำเช่นเดียวกับวิธีที่ 3 ซึ่งจะพบในตัวอย่างนี้โค้ดเป็น (โค้ดที่คุณพบอาจจะแตกต่างจากนี้ตามที่ได้อธิบายไปแล้ว)</div><blockquote>.post h3 { <br /> margin:.25em 0 0; <br /> padding:0 0 4px; <br /> font-size:140%; <br /> font-weight:normal; <br /> line-height:1.4em; <br /> color:$titlecolor; <br />}</blockquote><br /><div align="center"><u>กรณีที่ 1</u> ถ้าต้องการใส่พื้นหลัง Title ด้วยสี</div><br /><div align="center">สมมติในที่นี้ผมต้องการใส่พื้นหลังให้หัวข้อเป็น<b><u>สีดำ</u></b> สูง <b><u>25px</u></b> และมีเส้นขอบหนา 1 px <span style="color: #ff8000;"><b><u>สีแสด</u></b></span></div><div align="center">ดังนั้นเมื่อปรับแต่งโค้ดแล้วจะได้โค้ดเป็น</div><br /><blockquote>.post h3 { <br /><b><span style="color: #ff0080;"> margin:5px 0 10px 0; /*ปรับแต่งค่า margin ใหม่ */ <br /> padding:5px 0 5px 10px; /*ปรับแต่งค่า padding ใหม่ */</span></b><br /> font-size:140%; <br /> font-weight:normal; <br /> line-height:1.4em; <br /> color:$titlecolor; <br /><span style="color: #ff0080;"><b> height:25px; /*ความสูงของ Title 25px*/ <br /> background:#000</b></span><a href="http://upic.me/i/b5/wrfppt31441503.gif%29*/;"><span style="color: #ff0080;"><b>;</b></span></a><span style="color: #ff0080;"><b> /*พื้นหลังสีดำ*/ <br /> border:1px solid #FF5D00; /*เส้นขอบสีแสด*/</b></span><br />}</blockquote><br /><div align="center">และเมื่อแก้โค้ดและบันทึกแล้วจะได้ผลลัพธ์เป็น</div><div align="center"><br /></div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkP6QuPgOFS9LJpXmZFfRcPSb_XrGeqejiivlMUA9WYvmc8F9D6ZTi4ge46dO4NSCUvl7V5i9aY3V4GQ-GzOa-pyfV-5Ox7OA_jSi1rFM1-hfi-FqOfb8raueVnrokTfdsxTH-awBGomVt/s1600-h/2010-05-26_015752%5B4%5D.png"><img alt="แต่ง blogger" border="0" height="79" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvtx3716Q7ahegsx7HI9UbvksTd6HDMCVKmT84GCZ0EVeF5dCmqkEgZp6kHBAL8qHkPAFR59sUpIbKFC-mPo0H8L_251OD9LqEpfPSnTl1oaXs8SROyFD5kTvAne9MaHeD6YPas9rW-o7e/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="แต่ง blogger" width="564" /></a><br /><br /><div align="center"><br /></div><div align="center"><u>กรณีที่ 2</u> ใส่พื้นหลัง Title ด้วยรูปภาพ </div><div align="center"><br /></div><div align="center">และในกรณีคุณต้องการให้ Title มีรูปภาพสวย ๆ ก็จะต้องเตรียมภาพพื้นหลังที่มีความสูงไม่มากนัก </div><div align="center">เช่นในที่นี้ผมเตรียมภาพขนาด 470 คูณ 35 px ดังรูปด้านล่าง</div><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-updJ8vP7LtI89TSfnQ-w-sMvuwZugwpeRmPSJ8iftODUgjo5ZLdA6oxepF31sZit7yHUYcMkFE0qA0Qu4Y-jl9mJnurFqh7A1MZz4KEdNHYx8toidKJpjlgkKcjSrGiqpXRgQ5dXESD6/s1600-h/WrfpPT314415-03%5B4%5D.gif"><img alt="แต่ง title ของบล็อก" border="0" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilCplFR9B1eS_HTEmdplJQEp5yLtfyCJGhYX_nZHT5wZc8HIH0NkMiAD4Y_1P6Jj4crcyr33oUb4JxIYRBY-i3apsQCyQ7W4N86tAbGyv9GvFZ3GQuMFGY2WrG7eQDzH1C2IaB15vM-u_l/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="แต่ง title ของบล็อก" width="320" /></a><br /><div align="center">โค้ดที่เราจะเพิ่มเข้าไปจากโค้ดเดิมมีดังนี้</div><br /><blockquote>.post h3 { <br /><b><span style="color: #ff0080;"> margin:5px 0 10px 0; /*ปรับแต่งค่า margin ใหม่ */ <br /> padding:8px 0 2px 10px; /*ปรับแต่งค่า padding ใหม่ */</span></b><br /> font-size:140%; <br /> font-weight:normal; <br /> color:$titlecolor; <br /><b><span style="color: #ff0080;"> height:25px;/*จะใส่ความสูงให้เท่ากับภาพพื้นหลังหรือตามที่ต้องการก็ได้*/ <br /> background: <span style="color: green;">#000</span> url(<span style="color: #8000ff;">http://upic.me/i/b5/wrfppt31441503.gif</span>) 0px 0px repeat-x; </span></b>}</blockquote><div align="center">โค้ด <span style="color: #8000ff;">http://upic.me/i/b5/wrfppt31441503.gif </span>เปลี่ยนเป็นรูปภาพของคุณเองได้ตามใจชอบ </div><div align="center">ส่วนโค้ด <b><span style="color: green;">#000</span></b> คือโค้ดสีดำซึ่งจะมองเห็นในกรณีที่รูปภาพไม่เต็มพื้นที่ที่กำหนด</div><br /><div align="center">ผลลัพธ์ที่ได้</div><div align="center"><br /></div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRpNUFGk-NAgcA35FEpr-AHoXRkKESHqAR9yuWm9Yy7P9Rrf8svtJfoGTEBeUYnQKyvHi-g0Y5PWZh5i-YuCSllRZ8KaLb_Zu0EUrWugnWgy6hrOUYU9EeBd08AKBkJxJ_IlJo6blaN6Zu/s1600-h/2010-05-26_021238%5B5%5D.png"><img alt="วิธีใช้ blogger" border="0" height="78" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdpBoGYaxhaKmoi2MORM0_jYMvKGHgPLbxjaS7DSccpQ-pFU3UqUHb0pTdLJ5Ax_TnVQYDHheRJsqAMyPZXQ-3ghFCbTIS7xydLiN8Ku2cXCsZpky6SRZzmET4DT3GLTeADd9h7sR9OKfw/?imgmax=800" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto;" title="วิธีใช้ blogger" width="557" /></a><br />ลองทดสอบทำด้วยตัวเองดูนะครับ ซึ่งถ้ากลัวความผิดพลาดก็ให้ Backup แม่แบบก่อนทุกครั้ง สำหรับบทความนี้ก็มีความยาวมากแล้วผมจึงขอจบเพียงเท่านี้ สงสัยประการใดโปรดสอบถาม และถ้าคิดว่าบทความนี้มีประโยชน์ก็อย่าลืมบอกต่อนะครับ ขอบคุณครับ    

4 วิธีในการปรับแต่ง Blogger Post Title

พอดีมีสมาชิกบางท่านถามผมมาว่าถ้าต้องการใส่ icon ให้กับ Blogger Post title ต้องทำอย่างไร การอธิบายให้เข้าใจด้วยข้อความสั้น ๆ คงไม่เพียงพอที่...

อ่านเพิ่มเติม »