blogger การติดตั้ง Facebook Comment ที่คอมเมนท์จำแนกตามเนื้อหาในแต่ละหน้า

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMGL3N2hZyeEDBGkbr0joVKPNmqQVeadJT-YGKL8zbceNnV0l6WH3u_fzakQFPERvaFl1QaUEyLB1lZCnUKghdoUrNe5nQAGsNnsU0dYVd-VhHqK6o6PvsPm0v_0zb-pyYmIbY2oIso77S/s1600/3D-Facebook-Logo-HD-Wallpaper_Vvallpaper.Net.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMGL3N2hZyeEDBGkbr0joVKPNmqQVeadJT-YGKL8zbceNnV0l6WH3u_fzakQFPERvaFl1QaUEyLB1lZCnUKghdoUrNe5nQAGsNnsU0dYVd-VhHqK6o6PvsPm0v_0zb-pyYmIbY2oIso77S/s1600/3D-Facebook-Logo-HD-Wallpaper_Vvallpaper.Net.jpg" width="640" /></a></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><br /></div><div style="text-align: left;"><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">Facebook Comment ที่จำแนกตามเนื้อหาแต่ละหน้า จะเป็นกล่องคอมเมนท์ที่แสดงความคิดเห็นของแต่ละบทความแบบแยกส่วนออกจากกัน โดยเป็นแบบที่ผู้สร้างบล็อกส่วนมากใช้กัน ซึ่งสร้างได้ดังนี้</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ขั้นตอนที่ 1.</b><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> เข้าสู่บล็อกของคุณจากนั้นไปที่</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">'แม่แบบ > แก้ไข HTML > ดำเนินการ > ขยายเทมเพลตวิดเจ็ต'</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /></div><hr style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ขั้นตอนที่ 2. </b><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">กดปุ่ม 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหาคำว่า</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><a name='comments'/></span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">จะพบว่าเจอโค้ดแบบเดียวกันอยู่ 2 แห่ง</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">โดยให้สังเกตดูโค้ดหนึ่งในสองแห่งที่หาเจอนั้นจะมีบรรทัดถัดมาถูกเขียนเอาไว้ว่า</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><b:if cond='data:post.allowComments'></span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ซึ่งโค้ดบรรทัดนี้ก็คือเป้าหมายการแก้ไขโค้ดของเราในขั้นตอนถัดไป</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><br /><hr style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ขั้นตอนที่ 3.</b><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> ให้แทนที่โค้ดเป้าหมายซึ่งมีเงื่อนไขตรงตามที่กล่าวมาแล้วในขั้นตอนที่ 2</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ซึ่งถูกเขียนเอาไว้ว่า</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><b:if cond='data:post.allowComments'></span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ด้วยโค้ดกล่องคอมเมนท์ด้านล่างนี้</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id="fb-root"></div><br /><script>(function(d, s, id) {<br />  var js, fjs = d.getElementsByTagName(s)[0];<br />  if (d.getElementById(id)) return;<br />  js = d.createElement(s); js.id = id;<br />  js.src = "//connect.facebook.net/th_TH/all.js#xfbml=1";<br />  fjs.parentNode.insertBefore(js, fjs);<br />}(document, 'script', 'facebook-jssdk'));</script><br /><div style='padding:0px;'><br /><div class="fb-comments" expr:href="data:post.url" expr:title="data:post.title" expr:xid="data:post.id" data-num-posts="10" data-width="470"></div><br /></div><br /></b:if><br /><b:if cond='data:post.allowComments'></span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><br /><hr style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ขั้นตอนที่ 4.</b><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> จากนั้นกดปุ่ม </span><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">'บันทึกเทมเพลต'</span><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> แล้วลองเปิดบล็อกเพื่อดูผลลัพธ์</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><br /><hr style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">อธิบายเพิ่มเติม</b><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">สามารถตบแต่งพื้นหลังหรือเส้นขอบ ได้โดยให้แทนที่โค้ดในบรรทัดที่ 10 นับจากข้างบนสุด ซึ่งเดิมได้เขียนไว้ว่า</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><div style='padding:0px;'></span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ให้เป็นลักษณะใหม่ได้ตามต้องการเช่นลองแทนที่ด้วยโค้ดตัวอย่างข้างล่างนี้</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><div style='padding:0px; background:#ffffff; border:solid 2px #1a356e;'></span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">และนอกจากนี้สามารถแก้ไขความกว้างของช่องใส่ความคิดเห็นนี้ได้โดยเปลี่ยนโค้ด</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">data-width</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ซึ่งเดิมค่าเริ่มต้นได้กำหนดไว้ว่า</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">470</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ให้เป็นขนาดใหม่ได้ตามต้องการ</span><br /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">Credit:>></span>http://tip.maxlayout.com/2012/10/blogger-enable-or-disable-comment.html<br /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span>

blogger การติดตั้ง Facebook Comment ที่คอมเมนท์จำแนกตามเนื้อหาในแต่ละหน้า

Facebook Comment ที่จำแนกตามเนื้อหาแต่ละหน้า จะเป็นกล่องคอมเมนท์ที่แสดงความคิดเห็นของแต่ละบทความแบบแยกส่วนออกจากกัน โดยเป็นแบบที่ผู้สร้างบล็...

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

การยกเลิกการจำกัดเครื่องมือบนแท็บ blogger

<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmLOCVCd2DEVXW3yM-imy8LqgzRcCylvXSYQYFQycAwqsFs5H9_nXIs-Q0Y9PcB2ula8SNGctHzGvRYGka8XtlpLo5efQMJ8DXb-qm2LOELW7IKtGmmQf3pB-se3rH04pAanbWCcwXncpo/s1600/%25E0%25B8%25A0%25E0%25B8%25B2%25E0%25B8%259E%25E0%25B8%25A7%25E0%25B8%25B2%25E0%25B8%2594%25E0%25B9%2584%25E0%25B8%25A1%25E0%25B9%2588%25E0%25B8%25A1%25E0%25B8%25B5%25E0%25B8%258A%25E0%25B8%25B7%25E0%25B9%2588%25E0%25B8%25AD.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="372" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmLOCVCd2DEVXW3yM-imy8LqgzRcCylvXSYQYFQycAwqsFs5H9_nXIs-Q0Y9PcB2ula8SNGctHzGvRYGka8XtlpLo5efQMJ8DXb-qm2LOELW7IKtGmmQf3pB-se3rH04pAanbWCcwXncpo/s1600/%25E0%25B8%25A0%25E0%25B8%25B2%25E0%25B8%259E%25E0%25B8%25A7%25E0%25B8%25B2%25E0%25B8%2594%25E0%25B9%2584%25E0%25B8%25A1%25E0%25B9%2588%25E0%25B8%25A1%25E0%25B8%25B5%25E0%25B8%258A%25E0%25B8%25B7%25E0%25B9%2588%25E0%25B8%25AD.png" width="640" /></a></div><div style="text-align: center;"><br /></div><br /><br /><br /><br /><div style="text-align: left;"><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">บทความนี้เป็นตัวอย่างการแก้ไขช่องใส่ Gadget โดยการตั้งค่า "Show Add Element" และ "Max Widgets"</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ตามปกติแล้วบล็อกเกอร์ที่สร้างขึ้นใหม่ซึ่งยังไม่ได้สั่งแสดงเครื่องมือหน้าเว็บนั้นจะเป็นแบบนี้</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /></div><div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8QB6bB5Tx75uIP8QZdBSuIZA_p06CmQgyIPD3phZWw1pFTSGEqU0wgAluRCWXLfydg_f4DkKL9IZVao_M59cBtbOhGpixAg6Hd6rnNwx_Vmvv8acWSYcT3ML5YyqSo0GlxASO2-4Q7m0/s640/blogger-add-gadget-edit-maxwidgets-001.png" imageanchor="1" style="border: none; color: #0099ff; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8QB6bB5Tx75uIP8QZdBSuIZA_p06CmQgyIPD3phZWw1pFTSGEqU0wgAluRCWXLfydg_f4DkKL9IZVao_M59cBtbOhGpixAg6Hd6rnNwx_Vmvv8acWSYcT3ML5YyqSo0GlxASO2-4Q7m0/s1600/blogger-add-gadget-edit-maxwidgets-001.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; background-color: #f4f2ef; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; padding: 6px; position: relative;" /></a></div><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">พอเราสั่งให้แสดงหน้าเว็บบนแท็บด้านบนโดยเลือกที่</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">หน้าเว็บ > แสดงหน้าเว็บเป็น > แท็บด้านบนสุด</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ก็จะเป็นแบบด้านล่างนี้</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><br /><div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDdsrfzzMyA8lkbrRenWNbvbMWNsqSG_SW2YnIUOHA7LES3NE6w0Vb9Bn5GtfQ6WpQ1ejTXpscSvVJnTCCVbbTFNZZr3X9Wg6fdt1ywMiRgtO1R7M55jk5uXNph4u7h3k2B3ceN7PIw1A/s640/blogger-add-gadget-edit-maxwidgets-002.png" imageanchor="1" style="border: none; color: #0099ff; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDdsrfzzMyA8lkbrRenWNbvbMWNsqSG_SW2YnIUOHA7LES3NE6w0Vb9Bn5GtfQ6WpQ1ejTXpscSvVJnTCCVbbTFNZZr3X9Wg6fdt1ywMiRgtO1R7M55jk5uXNph4u7h3k2B3ceN7PIw1A/s1600/blogger-add-gadget-edit-maxwidgets-002.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; background-color: #f4f2ef; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; padding: 6px; position: relative;" /></a></div><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ซึ่งจะพบว่าช่องสำหรับ 'เพิ่ม Gadget' ที่เคยมีอยู่ได้หายไป</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">โดยเราสามารถเรียกคืนช่องสำหรับใส่ Gadget ให้เป็นดังรูปด้านล่างได้ด้วยวิธีดังต่อไปนี้</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><br /><div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB7fjkeL1CUEjgfMQzOKX67PeJ2ojj8TSF-uzua6pmZbLAwyBkDdydi_r6Lf7pB8hcf2AsB-1Ia-vTFihJgI6OCRbF2veY4qhoZOKmUY1CK6UGvLjyphhr6DrUmv94TqJWSJvN1eexh-4/s640/blogger-add-gadget-edit-maxwidgets-003.png" imageanchor="1" style="border: none; color: #0099ff; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB7fjkeL1CUEjgfMQzOKX67PeJ2ojj8TSF-uzua6pmZbLAwyBkDdydi_r6Lf7pB8hcf2AsB-1Ia-vTFihJgI6OCRbF2veY4qhoZOKmUY1CK6UGvLjyphhr6DrUmv94TqJWSJvN1eexh-4/s1600/blogger-add-gadget-edit-maxwidgets-003.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; background-color: #f4f2ef; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; padding: 6px; position: relative;" /></a></div><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><hr style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ขั้นตอนที่ 1.</b><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> เข้าสู่บล็อกของคุณจากนั้นไปที่</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">'แม่แบบ > แก้ไข HTML'</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ขั้นตอนที่ 2.</b><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> สั่งค้นหา</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'></span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ขั้นตอนที่ 3.</b><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> แทนที่โค้ดที่หาเจอนั้นด้วย</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><b:section class='navbar' id='navbar' showaddelement='yes'></span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ขั้นตอนที่ 4.</b><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> จากนั้นกดปุ่ม </span><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">'บันทึกเทมเพลต'</span><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> ก็เสร็จแล้ว</span><br /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span>

การยกเลิกการจำกัดเครื่องมือบนแท็บ blogger

บทความนี้เป็นตัวอย่างการแก้ไขช่องใส่ Gadget โดยการตั้งค่า "Show Add Element" และ "Max Widgets" ตามปกติแล้วบล็อกเกอร์ที่ส...

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

การทำให้ลิงก์ทุกอันในบล็อกเปิดหน้าต่างเพิ่มขึ้นมาใหม่

<div style="text-align: center;"></div><div style="text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDZqFvsj-Cl6DSq1VEwd6Q0n0zjTJv05w8Hr9RjASDc631ddzK40ixb-hJo-dWfVPzE9ZOBBWByOuik_YS_E5cNGWKT-uOnX9oBWUKIZfa1PIogE4w0bcOA1Qsogi6E3Xf7knmosEbCeJ7/s1600/%E0%B8%A0%E0%B8%B2%E0%B8%9E%E0%B8%A7%E0%B8%B2%E0%B8%94%E0%B9%84%E0%B8%A1%E0%B9%88%E0%B8%A1%E0%B8%B5%E0%B8%8A%E0%B8%B7%E0%B9%88%E0%B8%AD.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="372" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDZqFvsj-Cl6DSq1VEwd6Q0n0zjTJv05w8Hr9RjASDc631ddzK40ixb-hJo-dWfVPzE9ZOBBWByOuik_YS_E5cNGWKT-uOnX9oBWUKIZfa1PIogE4w0bcOA1Qsogi6E3Xf7knmosEbCeJ7/s1600/%E0%B8%A0%E0%B8%B2%E0%B8%9E%E0%B8%A7%E0%B8%B2%E0%B8%94%E0%B9%84%E0%B8%A1%E0%B9%88%E0%B8%A1%E0%B8%B5%E0%B8%8A%E0%B8%B7%E0%B9%88%E0%B8%AD.png" width="640" /></a></div><br /></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><br /></div><div style="text-align: left;"><br /></div><div style="text-align: left;"><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">การทำให้ลิงก์ทุกอันในบล็อกเปิดหน้าจอขึ้นมาใหม่ (Make All Links Open In A New Window) ทำได้ดังนี้</span><br /><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ขั้นตอนที่ 1.</b><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> เข้าสู่บล็อคของคุณจากนั้นไปที่</span><br /><span class="Apple-style-span" style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">'แม่แบบ > แก้ไข HTML</span><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><span class="Apple-style-span" style="font-weight: normal;"><span class="Apple-style-span" style="color: red;">'</span></span></b><br /><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><span class="Apple-style-span" style="font-weight: normal;"><br /></span>ขั้นตอนที่ 2.</b><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> กดปุ่มคีย์บอร์ด Ctrl + F แล้วค้นหา</span><br /><span class="Apple-style-span" style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><head></span><br /><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ขั้นตอนที่ 3.</b><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> แทนที่โค้ดที่หาเจอด้วย</span><br /><span class="Apple-style-span" style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><head></span><br /><span class="Apple-style-span" style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><base target='_blank'/></span><br /><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ขั้นตอนที่ 4.</b><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> เลือกที่ </span><span class="Apple-style-span" style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">'บันทึกแม่แบบ' </span><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ก็ใช้ได้แล้ว</span><br /><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span></div><div style="text-align: left;"><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span></div><div style="text-align: left;"><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span></div><div style="text-align: left;"><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">Credit:</span>http://tip.maxlayout.com/2009/11/blogger_04.html</div>

การทำให้ลิงก์ทุกอันในบล็อกเปิดหน้าต่างเพิ่มขึ้นมาใหม่

การทำให้ลิงก์ทุกอันในบล็อกเปิดหน้าจอขึ้นมาใหม่ (Make All Links Open In A New Window) ทำได้ดังนี้ ขั้นตอนที่ 1.  เข้าสู่บล็อคของคุณจากนั้นไปท...

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

การกำหนดเงื่อนไขในการแสดงผล blogger

<span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">โดยจะกล่าวถึงโครงสร้างทั่วไปสำหรับวิธีกำหนดเงื่อนไขให้คำสั่งต่างๆ เพื่อ ซ่อนหรือแสดงเครื่องมือบางอย่างในหน้าที่กำหนด หรือเปลี่ยนแปลงลักษณะพื้นหลังรวมทั้งรายละเอียดในหน้าต่างๆ ของบล็อกนั้น</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ซึ่งถ้าหากเข้าใจบทความนี้แล้วก็จะช่วยให้ควบคุมเครื่องมือและลักษณะต่างๆ ของบล็อกได้สะดวกยิ่งขึ้น โดยสามารถทำได้ดังนี้</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><br /><hr style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: center;"><b>ลักษณะของเงื่อนไขเบื้องต้น</b></div><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">โดยทั่วไปแล้วเงื่อนไขสำหรับการแสดงผลของ Blogger นั้นจะมีลักษณะคือ</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><b:if cond='เงื่อนไข'></span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">คำสั่ง<br /></b:if></span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ความหมายคือ</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ถ้าหน้าที่ผู้เข้าชมกำลังเปิดอยู่นั้นตรงกับ </span><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">'เงื่อนไข'</span><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> ที่เลือกไว้</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ก็จะเกิดการทำงานตาม</span><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> </span><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">คำสั่ง</span><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> </span><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ที่เรากำหนด</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><br /><hr style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: center;"><b>ประเภทของเงื่อนไขที่ทำงานเมื่อตรงตามสิ่งที่เราระบุ</b></div><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">มีผลคือคำสั่งเหล่านั้นจะทำงานก็ต่อเมื่อ ระบบตรวจสอบแล้วพบว่าเงื่อนไข 'ตรง' กับสิ่งที่เราเลือกไว้ ซึ่งมีหลายชนิดดังนี้</span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><br /><div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><b>1. Index (list) pages</b><br />ทำงานเมื่อเปิดรายการบทความ รวมทั้งการเปิดหน้าแรก  การเข้าใช้ป้ายกำกับและคลังบทความของบล็อก<br /><span style="color: red;"><b:if cond='data:blog.pageType == "index"'></span><br /><br /><b>2. Post (item) pages</b><br />ทำงานเมื่อเปิดเนื้อหาบทความแบบเต็ม<br /><span style="color: red;"><b:if cond='data:blog.pageType == "item"'></span><br /><br /><b>3. Static pages</b><br />ทำงานเมื่อเข้าสู่หน้าเว็บอิสระของบล็อก<br /><span style="color: red;"><b:if cond='data:blog.pageType == "static_page"'></span><br /><br /><b>4. Archive pages</b><br />ทำงานเมื่อเข้าสู่คลังบทความของบล็อก<br /><span style="color: red;"><b:if cond='data:blog.pageType == "archive"'></span><br /><br /><b>5. Homepage</b><br />ทำงานเมื่อเปิดหน้าแรก<br /><span style="color: red;"><b:if cond='data:blog.url == data:blog.homepageUrl'></span><br /><br /><b>6. Specific page/URL</b><br />ทำงานเมื่อ URL ตรงตามระบุ<br /><span style="color: red;"><b:if cond='data:blog.url == "PUT_URL_HERE"'></span><br /><br /><b>7. Post and static pages</b><br />ทำงานเมื่อเปิดเนื้อหาบทความแบบเต็มหรือเข้าสู่หน้าเว็บอิสระ<br /><span style="color: red;"><b:if cond='data:blog.url == data:post.url'></span><br /><br /><b>8. Label-search pages</b><br />ทำงานเมื่อเลือกใช้ป้ายกำกับ<br /><span style="color: red;"><b:if cond='data:blog.searchLabel'></span><br /><br /><b>9. First post</b><br />ทำงานเมื่อเป็นบทความอันแรก<br /><span style="color: red;"><b:if cond='data:post.isFirstPost'></span><br /><br /><hr /><div style="text-align: center;"><b>ประยุกต์</b><b style="text-align: start;">ให้</b><b style="text-align: start;">เงื่อนไขทำงานก็ต่อเมื่อไม่ตรงตามสิ่งที่ระบุ</b></div><br />มีผลคือคำสั่งเหล่านั้นจะทำงานก็ต่อเมื่อ ระบบตรวจสอบแล้วพบว่าเงื่อนไข 'ไม่ตรง' กับสิ่งที่เราเลือกไว้<br />ทำได้โดยเปลี่ยนจากโค้ดในบรรทัดกำหนดเงื่อนไขจาก == ให้เป็น != เช่น<br /><br />ให้คำสั่งนั้นทำงานเมื่อ 'เปิด' เนื้อหาบทความแบบเต็ม เขียนว่า<br /><span style="color: red;"><b:if cond='data:blog.pageType == "item"'><br />คำสั่ง<br /></b:if></span><br /><br />ให้คำสั่งนั้นทำงานเมื่อ 'ไม่ได้เปิด' เนื้อหาบทความแบบเต็ม<br />หรือก็คือคำสั่งจะทำงานในหน้าอื่นๆ ทั้งหมดแต่ยกเว้นเฉพาะขณะเปิดบทความแบบเต็ม เขียนว่า<br /><span style="color: red;"><b:if cond='data:blog.pageType != "item"'><br />คำสั่ง<br /></b:if></span><br /><br /><hr /><div style="text-align: center;"><b style="text-align: start;">เงื่อนไข</b><b>ที่สลับการทำงานเมื่อต่างจากสิ่งที่ระบุ</b></div><br />ทำได้โดยใช้ <span style="color: red;"><b:else/> </span>คั่นระหว่างคำสั่ง<br />มีผลคือถ้าคำสั่งที่อยู่เหนือ <span style="color: red;"><b:else/> </span>ไม่ทำงานก็จะให้คำสั่งที่อยู่ใต้อ <span style="color: red;"><b:else/> </span>ทำงานแทน<br /><br />ตัวอย่างเช่น<br /><span style="color: red;"><b:if cond='data:blog.pageType == "item"'></span><br /><span style="color: red;">คำสั่งที่ 1</span><br /><span style="color: red;"><b:else/></span><br /><span style="color: red;">คำสั่งที่ 2</span><br /><span style="color: red;"></b:if></span><br />ความหมายคือเมื่อเปิดหน้าเนื้อหาบทความแบบเต็มจะทำให้ 'คำสั่งที่ 1' ทำงาน แต่เมื่ออยู่ในหน้าอื่นๆ จะทำให้ 'คำสั่งที่ 2' ทำงานแทน<br /><br /><hr />Credit: http://tip.maxlayout.com/2012/11/targeting-specific-pages-urls-with-conditional-tags.html</div>

การกำหนดเงื่อนไขในการแสดงผล blogger

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

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

กำหนดค่าแท็ก Meta

<br /><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><br /></div><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span style="background-color: white;">เข้าสู่แผงควบคุมของ Blogger ของคุณ -> รูปแบบ -> แก้ไข HTML.Now เลื่อนลงไปยังตำแหน่งที่คุณเห็นด้านล่างรหัส:</span></div><pre style="background-image: url(http://cdn.premiumbloggertemplates.com/wp-content/themes/pbt/images/precodebg.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border: 1px solid black; font-size: 16px; height: 60px; line-height: 20px; overflow: auto; padding: 5px 5px 5px 35px; width: 657px; word-wrap: normal;"><pre style="background-color: #151515; background-image: url(http://cdn.premiumbloggertemplates.com/wp-content/themes/pbt/images/precodebg.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border: 1px solid black; height: 60px; overflow: auto; padding: 5px 5px 5px 35px; width: 657px; word-wrap: normal;"><meta content='<span style="color: #009900; font-weight: bold;">DESCRIPTION HERE</span>' name='description'/><br /><meta content='<span style="color: #009900; font-weight: bold;">KEYWORDS HERE</span>' name='keywords'/></pre></pre><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span style="background-color: white;">เปลี่ยน<span style="font-weight: bold;">รายละเอียดที่นี่</span> , <span style="font-weight: bold;">KEYWORDS ที่นี่</span>เป็นด้านล่าง</span></div><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span style="background-color: white;">รายละเอียดที่นี่: เขียนคำอธิบายบล็อกของคุณ<br />ที่นี่คำสำคัญ: เขียนคำหลักของบล็อกของคุณคั่นด้วยเครื่องหมายจุลภาค</span></div><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span style="background-color: white; font-family: arial; font-size: 21px; font-weight: bold;">วิธีการกำหนดค่า Favicon:</span></div><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span style="background-color: white;">เข้าสู่แผงควบคุมของ Blogger ของคุณ -> รูปแบบ -> แก้ไข HTML.Now เลื่อนลงไปยังตำแหน่งที่คุณเห็นด้านล่างรหัส:</span></div><pre style="background-image: url(http://cdn.premiumbloggertemplates.com/wp-content/themes/pbt/images/precodebg.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border: 1px solid black; font-size: 16px; height: 50px; line-height: 20px; overflow: auto; padding: 5px 5px 5px 35px; width: 657px; word-wrap: normal;"><pre style="background-color: #151515; background-image: url(http://cdn.premiumbloggertemplates.com/wp-content/themes/pbt/images/precodebg.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border: 1px solid black; height: 50px; overflow: auto; padding: 5px 5px 5px 35px; width: 657px; word-wrap: normal;"><link href='<span style="color: #cc33cc; font-weight: bold;">YOUR-FAVICON-URL</span>' rel='shortcut icon' type='image/vnd.microsoft.icon'/></pre></pre><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span style="background-color: white;">ตอนนี้แทนที่ " <span style="font-weight: bold;">ของคุณ-favicon-URL</span> "ที่มีอยู่ของคุณ Favicon / url</span></div><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span style="background-color: white; font-family: arial; font-size: 21px; font-weight: bold;">การกำหนดค่าการเลื่อนเนื้อหาเด่น:</span></div><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span style="background-color: white;">เข้าสู่แผงควบคุมของ Blogger ของคุณ -> รูปแบบ -> แก้ไข HTML.Find <span style="font-weight: bold;"><-! แนะนำ Slider เนื้อหาเริ่ม -></span> . ตอนนี้เลื่อนลงช้าและคุณสามารถเห็นความสำคัญในแต่ละรหัสสไลด์ระหว่าง<span style="font-weight: bold;"><ชั้น div = 'FP-ภาพนิ่ง รายการ '></span>และ<span style="font-weight: bold;"></ div></span> .</span></div><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span style="background-color: white;">ตอนนี้แทนที่</span></div><ul style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><li><span style="background-color: white;">" <span style="font-family: arial; font-weight: bold;">นี้จะเริ่มต้นให้ความสำคัญกับการโพสต์ชื่อ X</span> "ที่มีชื่อโพสต์ของคุณโดดเด่น</span></li><li><span style="background-color: white;">" <span style="font-family: arial; font-weight: bold;">#</span> "กับ URL ที่คุณโพสต์ที่โดดเด่น</span></li><li><span style="background-color: white;">" <span style="font-family: arial; font-weight: bold;">ไปที่แก้ไข html ของ Blogger และค้นหาเหล่านี้ sentences.Now แทนที่ประโยคเหล่านี้มีรูปแบบ descriptions.This ของคุณเองโดย Bloggerized Lasantha บัญดารา - Premiumbloggertemplates.com</span> " ด้วยคำอธิบายของคุณเลื่อน</span></li><li><span style="background-color: white;"><span style="font-family: arial; font-weight: bold;">ที่อยู่ภาพเลื่อน</span>ที่มีการเลื่อนภาพของคุณ</span></li></ul><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span style="background-color: white;">เพื่อ <ins>สไลด์ที่โดดเด่นในแต่ละ</ins>.</span></div><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span style="background-color: white; font-family: arial; font-size: 21px; font-weight: bold;">วิธีการเปลี่ยนชื่อแท็บแท็บเครื่องมือ</span></div><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span style="background-color: white;">หากคุณต้องการที่จะเปลี่ยนชื่อแท็บของแท็บเครื่องมือแล้วหานี้</span></div><pre style="background-image: url(http://cdn.premiumbloggertemplates.com/wp-content/themes/pbt/images/precodebg.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border: 1px solid black; font-size: 16px; height: 120px; line-height: 20px; overflow: auto; padding: 5px 5px 5px 35px; width: 657px; word-wrap: normal;"><pre style="background-color: #151515; background-image: url(http://cdn.premiumbloggertemplates.com/wp-content/themes/pbt/images/precodebg.gif); background-position: 0% 0%; background-repeat: no-repeat repeat; border: 1px solid black; height: 120px; overflow: auto; padding: 5px 5px 5px 35px; width: 657px; word-wrap: normal;"><ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'><br /><li><a href='#widget-themater_tabs-1432447472-id1'><span style="color: #cc33cc; font-size: 21px;"><span style="font-weight: bold;">Popular</span></span></a></li><br /><li><a href='#widget-themater_tabs-1432447472-id2'><span style="color: #009900; font-size: 21px;"><span style="font-weight: bold;">Tags</span></span></a></li><br /><li><a href='#widget-themater_tabs-1432447472-id3'><span style="color: #ff6600; font-size: 21px;"><span style="font-weight: bold;">Blog Archives</span></span></a></li><br /></ul></pre></pre><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span style="background-color: white;">ตอนนี้เปลี่ยนชื่อ " <span style="font-weight: bold;">ยอดนิยม</span> "," <span style="font-weight: bold;">แท็ก</span> "และ" <span style="font-weight: bold;">บล็อก</span><span style="font-weight: bold;">เก็บ</span> "เท่าที่คุณต้องการ</span></div><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span style="background-color: white; font-family: arial; font-size: 21px; font-weight: bold;">วิธีการเพิ่มโลโก้ส่วนหัว</span></div><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span style="background-color: white;">คุณสามารถเพิ่มโลโก้ส่วนหัวสำหรับแม่แบบนี้ได้อย่างง่ายดายใน " <span style="font-weight: bold;">องค์ประกอบของหน้าเว็บ</span> "ส่วน (วิธีการเริ่มต้นของ Blogger). ขนาดภาพโลโก้จะต้อง<span style="font-weight: bold;">384px กว้าง</span>และ<span style="font-weight: bold;">ความสูง 62px</span> .</span></div><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span style="background-color: white;">ถ้าคุณมีปัญหา regrading แม่แบบนี้ใด ๆ ที่แสดงความคิดเห็นด้านล่าง</span></div><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span style="background-color: white; font-weight: bold;">ที่สำคัญ!:</span></div><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span style="background-color: white;">กรุณาอย่าลบเครดิตส่วนท้าย ผมใช้เวลาหลายชั่วโมงในการสร้างแม่แบบบล็อคนี้ เพื่อให้คุณสามารถใช้มันสำหรับบล็อกของคุณ ทั้งหมดที่ฉันถามคือเครดิตอยู่เหมือนเดิม</span></div><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span style="background-color: white; font-size: 21px; font-weight: bold;">ใบอนุญาต:</span></div><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span style="background-color: white;">แม่ Blogger ฟรีนี้ได้รับอนุญาตภายใต้ครีเอทีฟคอมมอนส์ 3.0 ใบอนุญาตซึ่งอนุญาตให้ใช้ส่วนบุคคลและเชิงพาณิชย์ทั้งสอง<br />แต่เพื่อตอบสนองความ 'ลักษณะ' ประโยคของใบอนุญาตคุณจะต้องเพื่อให้การเชื่อมโยงที่ส่วนท้ายเหมือนเดิมที่ให้เครดิตเนื่องจาก ผู้เขียน สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการอนุญาตให้คุณสามารถเยี่ยมชม URL ด้านล่าง:</span></div><div style="font-family: Georgia, 'PT Sans', Arial, Georgia, serif; font-size: 16px; line-height: 20px;"><span class="goog-text-highlight" style="-webkit-box-shadow: rgb(153, 153, 170) 2px 2px 4px; background-color: white; box-shadow: rgb(153, 153, 170) 2px 2px 4px; box-sizing: border-box; position: relative;">http://creativecommons.org/licenses/by/3.0/</span></div>

กำหนดค่าแท็ก Meta

เข้าสู่แผงควบคุมของ Blogger ของคุณ -> รูปแบบ -> แก้ไข HTML.Now เลื่อนลงไปยังตำแหน่งที่คุณเห็นด้านล่างรหัส: <meta content=' DESC...

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

การแทรกเครื่องมือแบบหลายคอลัมน์ไว้ระหว่างปุ่มเลือกหน้าและบทความ

<div style="text-align: center;"><span id="goog_346005419"></span><img height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihJYg3Ug5LgbXfl3MqwuC4kYrQrxVIe4vVIPVauQMo3fRGp3s7NuSbU30mLjpx9dekr12Java3bZBP6oFYil0krEtFSybOJLLz44ChtyarKyGVk0OQdawMoA9N_Yp525x0KzNzQaF6MdU/s640/blogger-multi-column-between-page-navigation-and-post-001.png" width="640" /><span id="goog_346005420"></span></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;">บทความนี้จะอธิบายวิธีแทรกช่องใส่เครื่องมือ Gadget แบบหลายคอลัมน์ไว้ระหว่างปุ่มเลือกหน้ากับบทความ รวมทั้งการปรับขนาดของคอลัมน์เครื่องมือเหล่านั้น และการเพิ่มจำนวนคอลัมน์</span><br /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;">ซึ่งบทความนี้สามารถแบ่งได้เป็น 2 สว่นคือ</span><br /><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;" /><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;">ส่วนที่ 1 คือ</b><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;"> ขั้นตอนที่ 1-6 เป็นการสร้างช่องเครื่องมือ Gadget แบบสองคอลัมน์ โดยสำหรับผู้ที่ไม่ชอบความยุ่งยากก็สามารถหยุดอยู่แค่ขั้นตอนที่ 6 นี้ก็พอแล้ว ซึ่งพอจบขั้นตอนดังกล่าวจะได้บล็อกในลักษณะแบบนี้</span></div><div style="text-align: center;"><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;"><br /></span></div><div style="text-align: center;"><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;"><br /></span></div><div style="text-align: center;"><img height="189" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwmk2y8t9np_ZK7A2guNuABZ_fnXxhjNYrm6Snu9dbutbIvdcmryQFDRBJV5MSgLwF4-W19f1lYmmTsSTv4g6SG6D8JwNzxEyuJB5LnfD3aX2DUQUHda0vWZxabK1dGYfQlOHX5SHO25k/s1600/blogger-multi-column-between-page-navigation-and-post-006.png" width="640" /></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><br /></div><div style="text-align: center;"><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;">ส่วนที่ 2 คือ</b><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;"> ขั้นตอนที่ 7-10 จะเป็นวิธีปรับแต่งรายละเอียดของช่องใส่เครื่องมือนี้</span></div><hr style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: center;"><b>อธิบายเพิ่มเติม</b></div><div style="text-align: center;"><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;">ในตามปกติแล้วเมื่อเริ่มสร้างบล็อกขึ้นมาด้วยเทมเพลทพื้นฐาน ที่ไม่ใช่เทมเพลทแบบ Dynamic ก็จะพบว่าในหน้าเมนู 'รูปแบบ' มีลักษณะคล้ายแบบนี้</span><br /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;"><br /></span><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;"><br /></span></div><div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtxbSmo_NZOvCuVf2aQhwvEuocaGWCLs5ngnPLvVlxn6b0liVeNBdnKbP7xpgiKt3TPt8NG5Kuo_O7XIyVKjTO9djwKVe4EAa1reWyOBiEl3XRqYvXj6qNTVTOChfiloD9-HMUtnAynEI/s1600/blogger-multi-column-between-page-navigation-and-post-002.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; background-color: #f4f2ef; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; padding: 6px; position: relative;" /></div><div style="text-align: center;"><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;">โดยหลังจากเปิดใช้แถบปุ่มเลือกหน้า (Page Navigation) โดยใช้คำสั่ง</span><br /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;">หน้าเว็บ > แสดงหน้าเว็บเป็น > แท็บด้านบนสุด</span><br /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;">ก็จะพบว่าเมนู 'รูปแบบ' จะกลายเป็นดังนี้</span><br /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;"><br /></span><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;"><br /></span></div><div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: center;"><img border="0" height="340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirq12N7cOBJ4cQ7F6OyipEU8Yw91dH4manu_rUfsM5XjSJBXEsOxCrKWV7i6JZTzPD4t2DdF6ti-qyw1MSl2gbK6nwJz51QRc5W4nJjxmXOBoPteIKNTgRtlAy6K9sjIodgZKnVl2ty2w/s1600/blogger-multi-column-between-page-navigation-and-post-003.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; background-color: #f4f2ef; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; padding: 6px; position: relative;" width="640" /></div><div style="text-align: center;"><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;">ซึ่งบทความนี้มีจุดสนใจในบริเวณพื้นที่ระหว่างแถบปุ่มเลือกหน้าและบทความ เหมือนในกรอบข้างล่างนี้</span><br /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;"><br /></span></div><div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIerUe-eXQ_Yysc25LdWCMheeiajgnB9yB5r6TQLIqINiI7yNbbz4d7lHJMkNG-84XSNr4dptWzXAlYaYm73zPMADwRcmyWHTkvxYzYZ-WAhPKV9gOwDUVzJ-j0Q99vVS-VIyrGQ5UAJQ/s1600/blogger-multi-column-between-page-navigation-and-post-004.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; background-color: #f4f2ef; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; padding: 6px; position: relative;" /></div><div style="text-align: center;"><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;"> ดังนั้นเป้าหมายในการเพิ่มช่องใส่เครื่องมือ Gadget แบบหลายคอลัมน์ก็จะเป็นดังภาพข้างล่างนี้</span><br /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;"><br /></span></div><div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4gixhSfP1TVICO1Tv88oAqAlYQiwl-11VeNEP9uQ8hV1R0_Qc4yCFBxgFXo-1CbtZ43ru0kSDuWmmCVAilu8BYkFh92vjhPcjtCQbTfgVbFBumjdUcARcIcIYZSyXpkKepexkVo5v2as/s1600/blogger-multi-column-between-page-navigation-and-post-005.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; background-color: #f4f2ef; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; padding: 6px; position: relative;" /></div><div style="text-align: center;"><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;">ซึ่งวิธีแทรกเครื่องมือ Gadget แบบหลายคอลัมน์ดังกล่าวสามารถทำได้ดังนี้</span></div><hr style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><div style="text-align: left;"><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ขั้นตอนที่ 1.</b><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> เข้าสู่บล็อกของคุณจากนั้นไปที่</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">'แม่แบบ > แก้ไข HTML'</span><br /><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><hr style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ขั้นตอนที่ 2.</b><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> สั่งค้นหา</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">/* Widgets</span><br /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">แล้วแทนที่โค้ดที่หาเจอด้วย</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">/*</span><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> </span><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">Widgets</span><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> Main Above</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">----------------------------------------------- */</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><!-- Main Above Style Start --></span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">.main-above-outer {</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">  overflow: hidden;</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">}</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">div#main-above-1.main.section,</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">div#main-above-2.main.section {</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">  margin: 0;</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">  padding: 5px 5px 0;</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">}</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">div#main-above-1.main.section .widget,</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">div#main-above-2.main.section .widget {</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">  margin: 0;</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">  padding: 10px;</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">  border: solid 1px #c0c0c0;</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">  background-color: #ffffff;</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">}</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><!-- Main Above Style End --></span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"></span><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">/* Widgets</span><br /><hr style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ขั้นตอนที่ 3.</b><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"> สั่งค้นหา</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">    </span><br /><div class="region-inner main-inner"></div><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"></span><br /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">แล้วแทนที่โค้ดที่หาเจอด้วย</span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><!-- Main Above Area Start --></span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">    </span><br /><div class="main-above-outer"></div><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"></span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">    </span><br /><div style="float: left; width: 50%;"></div><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"></span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">      <b:section class="main" id="main-above-1" showaddelement="yes"></b:section></span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">    </span></div><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">    </span><br /><div style="float: right; width: 50%;"></div><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"></span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">      <b:section class="main" id="main-above-2" showaddelement="yes"></b:section></span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">    </span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">   </span><br /><div style="clear: both;"></div><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"></span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">    </span><br /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><!-- Main Above Area End --></span><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /></span><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">    </span><br /><div class="region-inner main-inner"></div><span style="background-color: white; color: red; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"></span><br /><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><hr style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ขั้นตอนที่ 4. </b><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">กดปุ่ม 'บันทึกเทมเพลต' </span><br /><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><hr style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;" /><b style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ขั้นตอนที่ 5. </b><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">จากนั้นไปที่ปุ่มหัวข้อ 'รูปแบบ' ที่อยู่ด้านซ้ายมือของเมนูบล็อก</span><br /><div style="text-align: center;"><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;"><br /></span></div><div class="separator" style="background-color: white; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: center;"><img border="0" height="189" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwmk2y8t9np_ZK7A2guNuABZ_fnXxhjNYrm6Snu9dbutbIvdcmryQFDRBJV5MSgLwF4-W19f1lYmmTsSTv4g6SG6D8JwNzxEyuJB5LnfD3aX2DUQUHda0vWZxabK1dGYfQlOHX5SHO25k/s1600/blogger-multi-column-between-page-navigation-and-post-006.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; background-color: #f4f2ef; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; padding: 6px; position: relative;" width="640" /></div><div style="text-align: center;"><br style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;" /><span style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: start;">แล้วจะเห็นว่าบริเวณข้างบนเหนือส่วน 'บทความบล็อก' จะมีช่องสำหรับใส่เครื่องมือ Gadget หรือ Widget เพิ่มขึ้นมาอีกสองอันโดยแบ่งควมกว่างกันฝั่งละครึ่งของคอลัมน์อันเดิมหรือก็คือ 50% โดยสามารถกดที่ปุ่ม 'เพิ่ม Gadget' ของช่องเหล่านั้นเพื่อเพิ่มเครื่องมือได้ตามต้องการ</span></div><div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px; text-align: center;"></div><div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><hr /><b>ขั้นตอนที่ 6.</b><br />ถ้าลองใส่เครื่องมือ Gadget ลงไปในช่องคอลัมน์ที่สร้างขึ้นมาใหม่ฝั่งละหนึ่งอันก็จะมีลักษณะดังนี้</div><div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="243" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNaMUSnNloIU3vJU46zLNq4IkhhdLK6gGPN1EWLp44NFmwsuQhOUOjBSGAGA5kySJZmh0DxPYiEt4Fjk8E1sXq2LcPsUCbd-CcRFPb2LgZh8ycD935XVD7fAWPBJBqZXegUjRxD56q_40/s1600/blogger-multi-column-between-page-navigation-and-post-007.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; background-color: #f4f2ef; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; padding: 6px; position: relative;" width="640" /></div></div><div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><div><hr /><div style="text-align: center;"><b>อธิบายเพิ่มเติม</b></div><br />เนื้อหาต่อจากนี้จะเป็นวิธีการตบแต่ง ปรับขนาด และเพิ่มลดจำนวนคอลัมน์ของ Gadget อันนี้ ซึ่งอาจจำเป็นสำหรับบางคน แต่สำหรับผู้ที่ไม่ต้องการประยุกต์ก็ให้หยุดอ่านอยู่แค่เพียงขั้นตอนที่ 6 ข้างบนนี้ก็พอแล้วครับ</div><div>เนื้อหาต่อจากนี้จะเป็นวิธีเพิ่มจำนวนคอลัมน์<br />โดยสำหรับผู้ไม่ชำนาญการแก้ไขสคริป แนะนำว่า<br />ก่อนเริ่มแก้ไขในขั้นตอนนี้หลังจากนี้<br />สำหรับผู้ที่ได้ทดลองเอา Gadget ต่างๆ เช่น<br />ข้อความ, HTML/Javascript เป็นต้น<br /><div>ใส่ลงไปในช่องที่สร้างไว้ด้วยวิธีในขั้นตอนที่ผ่านมานั้นแบบภาพในขั้นตอนที่ 6 ก็ควรไปที่หน้าจอ<br />'รูปแบบ'<br />แล้วกดลากย้ายเครื่องมือที่ได้ลองเพิ่มลงไปเหล่านั้น ไปฝากไว้ที่บริเวณแถบด้านข้างหรือบริเวณส่วนท้ายของบล็อกก่อน</div><div class="separator" style="clear: both; text-align: center;"><img border="0" height="404" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsIJuAbos3ds-EOkn2ORP2TKg_0_fJPi8rZgYYL-h0hGbtvoViKdvhtLA2iyLZe43Nf-OuAp-D8s7NoDzk4vYqqG_12v3QVM5Uf96mH_B03Y4ZVpb9qlAMQXFFoAVBGmVHticKs5unGng/s1600/blogger-multi-column-between-page-navigation-and-post-008.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; background-color: #f4f2ef; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; padding: 6px; position: relative;" width="640" /></div><br />โดยพอแก้ไขเสร็จแล้วค่อยลากกลับมาใส่อีกทีหนึ่งจะดีกว่า เพราะโค้ดของเครื่องมือเหล่านั้นจะไปถูกเขียนปนอยู่รวมกับโค้ดในขั้นตอนที่ 3 ซึ่งบางคนอาจดูแล้วสับสนได้ จึงควรทำให้บริเวณกล่อง Gadget ที่เพิ่มลงไปไม่มีเครื่องมือแสดงอยู่แบบในรูปนี้<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4HGNt3VIDuN4QiFNhAtkOB8c6Asm41zx6d69s9yTO4Z25fUQRgWRlA6b0OL6QogIfEPQvlOrqc-tTYzKnoRppqOjZDrE5ZcI3qVZYbwkCwZCkL5mljqnLFWNrWb-tUVaOGMrDKqUKyxI/s1600/blogger-multi-column-between-page-navigation-and-post-009.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; background-color: #f4f2ef; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; padding: 6px; position: relative;" width="640" /></div><br />หรืออาจลบเครื่องมือที่ได้เพิ่มลงไปเหล่านั้นทิ้งไปก่อนเพื่อให้เมนู 'รูปแบบ' มีลักษณะกลับไปคล้ายขั้นตอนที่ 5 อีกครั้งก็ได้เช่นกัน<br /><div><br /></div><hr /><b>ขั้นตอนที่ 7. </b>วิธีตบแต่งลักษณะกล่อง Gadget</div></div><div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><b>ระยะห่างระหว่างกล่อง Gadget</b><br />กำหนดจากโค้ดในขั้นตอนที่ 2 บรรทัดที่ 11 ซึ่งเขียนว่า<br /><span style="color: red;">  padding: 5px 5px 0;</span><br /><br /><b>ลักษณะของกล่อง Gadget</b><br />กำหนดจากโค้ดในขั้นตอนที่ 2 บรรทัดที่ 16-19 ซึ่งเขียนว่า<br /><span style="color: red;">  margin: 0;</span><br /><span style="color: red;">  padding: 10px;</span><br /><span style="color: red;">  border: solid 1px #c0c0c0;</span><br /><span style="color: red;">  background-color: #ffffff;</span><br />โดยสามารถแก้ไขสีและเส้นขอบ รวมทั้งช่องว่างจากขอบกล่อง Gadget ได้ตามต้องการ<br /><br /><b>ลักษณะพื้นฐานของกล่อง Gadget</b><br />ถ้าหากต้องการให้กล่อง Gadget อันนี้ใช้การตบแต่งปรับไปตามลักษณะพื้นฐานของแต่ละบล็อก ซึ่งส่วนใหญ่มักจะถูกตั้งไว้ให้เหมือนกับลักษณะของแถบด้านข้างหรือ Sidebar ก็สามารถทำได้โดยเปลี่ยนโค้ดสำหรับแทนที่ในขั้นตอนที่ 2 เป็นโค้ดข้างล่างนี้ เพื่อล้างการตบแต่งที่ผมใส่ไว้ทิ้งไป<br /><span style="color: red;">/*</span><span style="color: red;"> </span><span style="color: red;">Widgets</span><span style="color: red;"> Main Above</span><br /><br /><span style="color: red;">----------------------------------------------- */</span><br /><span style="color: red;"><!-- Main Above Style Start --></span><br /><span style="color: red;">.main-above-outer {</span><br /><span style="color: red;">  overflow: hidden;</span><br /><span style="color: red;">}</span><br /><span style="color: red;"><br /></span><span style="color: red;">div#main-above-1.main.section,</span><br /><span style="color: red;">div#main-above-2.main.section {</span><br /><span style="color: red;">  margin: 0;</span><br /><span style="color: red;">  padding: 0 0;</span><br /><span style="color: red;">}</span><br /><span style="color: red;"><br /></span><span style="color: red;">div#main-above-1.main.section .widget,</span><br /><span style="color: red;">div#main-above-2.main.section .widget {</span><br /><span style="color: red;">  margin: 0 0 0;</span><br /><span style="color: red;">}</span><br /><span style="color: red;"><!-- Main Above Style End --></span><br /><br /><span style="color: red;">.main-outer {</span></div><div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><hr /><b>ขั้นตอนที่ 8.</b> วิธีปรับสัดส่วนความกว้างกล่อง Gadget<br /><br />บางคนต้องการให้กล่อง Gadget ทั้งสองใบนี้มีความกว้างไม่เท่ากัน ก็สามารถปรับเปลี่ยนได้โดยแก้ไขโค้ดในขั้นตอนที่ 3 ในบรรทัดที่ 4 และ 6 โดยตรงจุดนี้จะเป็นตัวควบคุมความกว้างของกล่อง</div><div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;">ซึ่งโค้ดบรรทัดที่ 4 ซึ่งใช้ควบคุมขนาดของกล่องด้านซ้ายคือ</div><div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><div style="color: #333333;"><span style="color: red;">    </span></div><div style="color: #333333; float: left; width: 50%;"></div><div style="color: #333333;"></div><div style="color: #333333;">และเช่นเดียวกันโค้ดบรรทัดที่ 6 ซึ่งใช้ควบคุมขนาดของกล่องด้านซ้ายก็คือ</div><div style="color: #333333;"><span style="color: red;">    </span></div><div style="color: #333333; float: right; width: 50%;"></div><div style="color: #333333;"></div><div style="color: #333333;"><br /></div><div style="color: #333333;">โดยค่าที่ใช้กำหนดขนาดของกล่องทั้งสองใบก็คือตัวเลขที่เขียนว่า 50% ซึ่งสังเกตได้ว่ารวมกันทั้งสองใบก็จะได้ 100% ทำให้ใช้พื้นที่เต็มแถวพอดี เพราะการทำให้ผลรวมเกินกว่า 100% จะทำให้กล่อง Gadget</div><div style="color: #333333;">ถูกดันไปอยู่คนละแถวกัน</div><div style="color: #333333;"><br /></div><div class="separator" style="clear: both; color: #333333; text-align: center;"><img border="0" height="243" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1lsGxUvVAxgYI0mjW_Njgznjux1lSvdYqMhAKAz0nSAu4bYJC0hHnRcD4pJbSLUY7umq6ZsAI2TmtrMhOkO9NDiacvdaAgIjzIxKdvB64NoEEPFrEU_CNqK9ty2YfmYpWroGJQqSIvoE/s1600/blogger-multi-column-between-page-navigation-and-post-010.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; background-color: #f4f2ef; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; padding: 6px; position: relative;" width="640" /></div><div style="color: #333333;"><br /></div><div style="color: #333333;">ตัวอย่างเช่น ถ้าปรับให้กล่องทางซ้ายมีความกว้าง 75% แต่ว่ากล่องทางขวายังคงเป็น 50% เหมือนเดิมทำให้ผลรวมเกินกว่า 100% ก็จะเป็นดังรูปนี้</div><div style="color: #333333;"><br /></div><div class="separator" style="clear: both; color: #333333; text-align: center;"><img border="0" height="333" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2tfXYl-QiqMB56VOJ165qE1aJFu2IiTiWrUeOyrPAr70pbcQT5PsF-q6_QM7bC97MYrf9p36p_Y4wMeJw2EFlfyULBUWkstGvdLprsoeJOz474dom0ysEq__Tltt6U9lU-MzYZnlFyM0/s1600/blogger-multi-column-between-page-navigation-and-post-011.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; background-color: #f4f2ef; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; padding: 6px; position: relative;" width="640" /></div><div style="color: #333333;"><br /></div><div style="color: #333333;">ดังนั้นเพื่อให้กล่องทั้งสองใบอยู่ในแถวเดียวกัน จึงตั้งค่าให้กล่องทางซ้ายใช้พื้นที่ 75% และกล่องทางขวาใช้พื้นที่ 25% ซึ่งบวกได้ 100% เหมือนเดิม ซึ่งจะทำให้การแบ่งพื้นที่ของกล่อง Gadget เปลี่ยนกลายเป็นแบบข้างล่างนี้</div><div style="color: #333333;"><br /></div><div class="separator" style="clear: both; color: #333333; text-align: center;"><img border="0" height="243" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEzyZSSu_IVUeOLvgEFfJhSJLL_hCSZRqome7sodNKva92Kws5wPuplLVPoRN6Wl-giSUINvlkEuaHrWGHuEePxoGICEan8ifLVAZrto1pqeM53a8XmyGdpSgeyOfWQPDSNXnbw1iam04/s1600/blogger-multi-column-between-page-navigation-and-post-012.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; background-color: #f4f2ef; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; padding: 6px; position: relative;" width="640" /></div><div style="color: #333333;"><br /></div><div style="color: #333333;">สามารถทำได้ด้วยการเปลี่ยนโค้ดสำหรับใช้แทนที่ในขั้นตอนที่ 3 เป็นแบบข้างล่างนี้</div><span style="color: red;"><!-- Main Above Area Start --></span><br style="color: #333333;" /><span style="color: red;">    </span><br /><div class="main-above-outer"></div><span style="color: red;"></span><br /><span style="color: red;">    </span><br /><div style="float: left; width: 75%;"></div><span style="color: red;"></span><br /><span style="color: red;">      <b:section class="main" id="main-above-1" showaddelement="yes"></b:section></span><br /><span style="color: red;">    </span></div><br style="color: #333333;" /><span style="color: red;">    </span><br /><div style="float: right; width: 25%;"></div><span style="color: red;"></span><br /><span style="color: red;">      <b:section class="main" id="main-above-2" showaddelement="yes"></b:section></span><br /><span style="color: red;">    </span><br /><span style="color: red;">   </span><br /><div style="clear: both;"></div><span style="color: red;"></span><br /><span style="color: red;">    </span><br /><span style="color: red;"><!-- Main Above Area End --></span><br style="color: #333333;" /><span style="color: red;"><br /></span><span style="color: red;">    </span><br /><div class="region-inner main-inner"></div><span style="color: red;"></span><br /><div><hr /><div style="text-align: center;"><div style="text-align: left;"></div></div><div><div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><b>ขั้นตอนที่ 9.</b> วิธีเพิ่มจำนวนคอลัมน์สำหรับใส่กล่อง Gadget<br /><br />ถ้ารู้สึกว่าคอลัมน์สำหรับใส่กล่อง Gadget มีแค่สองอันมันน้อยไป ก็ใส่เพิ่มอีกได้<br />ซึ่งวิธีคือให้คัดลอกโค้ดที่มีอยู่แล้วนำไปวางต่อจากโค้ดเดิม จากนั้นก็ปรับหมายเลขและขนาดให้รวมกันได้ 100%<br /><br />ตัวอย่างวิธีการเพิ่มจำนวนคอลัมน์เช่น ถ้าผมต้องการให้จากเดิมที่มีอยู่ 2 คอลัมน์ให้กลายเป็น 3 คอลัมน์ก็ทำได้โดยปรับโค้ดในขั้นตอนที่ 2 และ 3 ใหม่ดังนี้</div><div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><br /><b>ปรับจุดที่หนึ่ง</b><br />แก้ไขโค้ดขั้นตอนที่ 2 ซึ่งแบบเดิมเขียนไว้ว่า<br /><span style="color: red;">div#main-above-1.main.section,</span><br /><span style="color: red;">div#main-above-2.main.section {</span><br />ให้กลายเป็นโค้ดใหม่ดังนี้<br /><span style="color: red;">div#main-above-1.main.section,</span><br /><span style="color: red;">div#main-above-2.main.section,</span><br /><span style="color: red;">div#main-above-3.main.section {</span><br /><br /><b>ปรับจุดที่สอง</b><br />แก้ไขโค้ดขั้นตอนที่ 2 ซึ่งแบบเดิมเขียนไว้ว่า<br /><span style="color: red;">div#main-above-1.main.section .widget,</span><br /><span style="color: red;">div#main-above-2.main.section .widget {</span><br />ให้กลายเป็นโค้ดใหม่ดังนี้<br /><span style="color: red;">div#main-above-1.main.section .widget,</span><br /><span style="color: red;">div#main-above-2.main.section .widget,</span><br /><span style="color: red;">div#main-above-3.main.section .widget {</span><br /><br /><b>ปรับจุดที่สาม</b><br />แก้ไขโค้ดขั้นตอนที่ 3 ตรงโค้ดกล่อง Gadget ซึ่งเดิมเขียนไว้ว่า<br /><span style="color: red;">    </span><br /><div style="float: right; width: 50%;"></div><span style="color: red;"></span><br /><span style="color: red;">      <b:section class="main" id="main-above-2" showaddelement="yes"></b:section></span><br /><span style="color: red;">    </span></div></div></div><br />โดยคัดลอกโค้ดดังกล่าว จากนั้นก็เปลี่ยนหมายเลขลำดับให้กลายเป็นแบบใหม่ โดยเพิ่มเลขจำนวนลงไปจากเลข 2 กลายเป็นเลข 3 ซึ่งเขียนได้ว่า<br /><span style="color: red;">    </span><br /><div style="float: right; width: 50%;"></div><span style="color: red;"></span><br /><span style="color: red;">      <b:section class="main" id="main-above-3" showaddelement="yes"></b:section></span><br /><span style="color: red;">    </span><br />จากนั้นก็แล้วนำโค้ดที่แก้ไขแล้วไปวางต่อท้ายจากของเดิมเป็นดังนี้<br /><span style="color: red;">    </span><br /><div style="float: right; width: 50%;"></div><span style="color: red;"></span><br /><span style="color: red;">      <b:section class="main" id="main-above-2" showaddelement="yes"></b:section></span><br /><span style="color: red;">    </span><br /><span style="color: red;">    </span><br /><div style="float: right; width: 50%;"></div><span style="color: red;"></span><br /><span style="color: red;">      <b:section class="main" id="main-above-3" showaddelement="yes"></b:section></span><br /><span style="color: red;">    </span><br /><br /><b>ปรับจุดที่สี่</b><br />ขณะนี้กล่องทั้ง 3 ใบจะมีการแบ่งสัดส่วนเป็น 50%, 50%, 50% ตามลำดับ<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOJ5t_oKNMHc25dgwKAJjhFebCEcudRzkYh_pw8ouIQjDfo6WTXioZRuoA76QiCy-OZnG6ZpczNe-NzWkP8o7vYmPHncUn_qwiZcd9lB66gflup-nVWnUVQJCq1YYnBr2RUnn2gSfrWog/s640/blogger-multi-column-between-page-navigation-and-post-013.png" imageanchor="1" style="border: none; color: #0099ff; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOJ5t_oKNMHc25dgwKAJjhFebCEcudRzkYh_pw8ouIQjDfo6WTXioZRuoA76QiCy-OZnG6ZpczNe-NzWkP8o7vYmPHncUn_qwiZcd9lB66gflup-nVWnUVQJCq1YYnBr2RUnn2gSfrWog/s1600/blogger-multi-column-between-page-navigation-and-post-013.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; background-color: #f4f2ef; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; padding: 6px; position: relative;" /></a></div><br /><br />แต่ผมต้องการให้แบ่งเป็น 3 ส่วนจึงแก้ไขการแบ่งสัดส่วนเป็น 33%, 34%, 33% ตามลำดับ จะได้ผลดังนี้<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl87CPXx2fZPfyC1rsgD-k0eYj8UfPlAix-wvA5TF_fd0U4W_eWznelT2groYnPMLPqlwy17D7A5gnxOv6t3ZS_OVsd1uE8Lee3Wc9Ee39vL2wKq1tfPC0XFmrE5-d6sBw8PGYH4DDNyQ/s640/blogger-multi-column-between-page-navigation-and-post-014.png" imageanchor="1" style="border: none; color: #0099ff; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl87CPXx2fZPfyC1rsgD-k0eYj8UfPlAix-wvA5TF_fd0U4W_eWznelT2groYnPMLPqlwy17D7A5gnxOv6t3ZS_OVsd1uE8Lee3Wc9Ee39vL2wKq1tfPC0XFmrE5-d6sBw8PGYH4DDNyQ/s1600/blogger-multi-column-between-page-navigation-and-post-014.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; background-color: #f4f2ef; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; padding: 6px; position: relative;" /></a></div><br />หรืออาจลองปรับการแบ่งสัดส่วนเป็น 75%, 25%, 100% ก็จะได้ผลดังนี้<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnU6pk9P3D6iX13vV_j6pt_M-y3xMw56iwB5oh7eW6J_ITfi6DoLYxZ1qxFRuqHVNjiza7EoTxfDwfFFxyS0o7fdMnAKpWT4Dw3r7bBAbthSY6bSwWQ7narPHzxRkT3bhXZJvQlkAmBOs/s640/blogger-multi-column-between-page-navigation-and-post-015.png" imageanchor="1" style="border: none; color: #0099ff; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnU6pk9P3D6iX13vV_j6pt_M-y3xMw56iwB5oh7eW6J_ITfi6DoLYxZ1qxFRuqHVNjiza7EoTxfDwfFFxyS0o7fdMnAKpWT4Dw3r7bBAbthSY6bSwWQ7narPHzxRkT3bhXZJvQlkAmBOs/s1600/blogger-multi-column-between-page-navigation-and-post-015.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; background-color: #f4f2ef; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; padding: 6px; position: relative;" /></a></div><br />ซึ่งถ้าใช้วิธีนี้ก็จะเพิ่มจำนวนกล่องได้เรื่อยๆ<br />เช่น ตัวอย่างการแบ่งสัดส่วนแบบสี่กล่องใบละ 25% ดังนี้<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkvjdlFl1WZejaPNkFCo1sIYV92QLKVnrU6Z1RPCKxQGwQ3P3U7JkrAMHiwnDps4qv8wDnyqXiK9XqwttSsNSBWs9zJPe6SBF_mraybLL5nQMAtfRC6mzHpGw1tnJYmXPmMQ_xcichPbs/s640/blogger-multi-column-between-page-navigation-and-post-016.png" imageanchor="1" style="border: none; color: #0099ff; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkvjdlFl1WZejaPNkFCo1sIYV92QLKVnrU6Z1RPCKxQGwQ3P3U7JkrAMHiwnDps4qv8wDnyqXiK9XqwttSsNSBWs9zJPe6SBF_mraybLL5nQMAtfRC6mzHpGw1tnJYmXPmMQ_xcichPbs/s1600/blogger-multi-column-between-page-navigation-and-post-016.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; background-color: #f4f2ef; background-position: initial initial; background-repeat: initial initial; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px; padding: 6px; position: relative;" /></a></div><br /><hr /><div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><b>ขั้นตอนที่ 10.</b> สามารถซ่อนการแสดงผลกล่อง Gadget นี้ให้มองเห็นแค่ในหน้าแรกหรือหน้าบทความก็ได้<br /><br />โดยแทนที่โค้ดที่เขียนว่า<br /><span style="color: red;">]]></span></div><br />ด้วยโค้ดแบบใดแบบหนึ่งดังนี้<br /><br /><b>ทำให้ผู้ชมมองไม่เห็นขณะอยู่ในหน้าแรก</b><br /><span style="color: red;">]]></span><br /><b:if cond="data:blog.pageType == "index""><br /><style><br>.main-above-outer {<br>display: none;<br>}<br></style></b:if><div style="background-color: white; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 20px;"><span style="color: red;"></span></div><br /><b><br /></b><b>ทำให้ผู้ชมมองไม่เห็น</b><b>ขณะ</b><b>อยู่ในหน้าบทความ</b><br /><div><span style="color: red;">]]></span></div><br /><b:if cond="data:blog.pageType != "index""><br /><style><br>.main-above-outer {<br>display: none;<br>}<br></style></b:if><div><span style="color: red;"></span></div><br /><br />หรืออาจดูกำหนดเงื่อนไขในการแสดงผลแบบอื่นได้ที่ลิงก์นี้ครับ<br /><a href="http://tip.maxlayout.com/2012/11/targeting-specific-pages-urls-with-conditional-tags.html" style="border: none; color: #33aaff;">http://tip.maxlayout.com/2012/11/targeting-specific-pages-urls-with-conditional-tags.html</a>

การแทรกเครื่องมือแบบหลายคอลัมน์ไว้ระหว่างปุ่มเลือกหน้าและบทความ

บทความนี้จะอธิบายวิธีแทรกช่องใส่เครื่องมือ Gadget แบบหลายคอลัมน์ไว้ระหว่างปุ่มเลือกหน้ากับบทความ รวมทั้งการปรับขนาดของคอลัมน์เครื่องมือเหล่า...

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