Tips and Tricks To Modify Blogspot

ไปอ่านเจอบทความนี้โดยบังเอิญ เขียนโดยBrad Linder"8 steps to a more professional Blogspot blog"...อ่านแล้วน่าสนใจดี ลองมาปรับแต่งกับบล็อกของผมเองก็ไม่รู้ว่าจะเวิร์คหรือเปล่า.ในบล็อกเกอร์นั้นมีของเล่นของตกแต่งในส่วนของWidgetมากมาย บางหัวข้อมีให้เลือกจนตาแฉะเป็นหลักหลายร้อยชิ้น ถ้าเลือกมาแต่งดีๆ ก็สามารถส่งเสริมโหงวเฮ้งให้บล็อกมีสง่าราศีขึ้น.อีกอันหนึ่งที่ทำให้การปรับแต่งมีความยืดหยุ่นมากขึ้น คือwidgetที่เรียกว่า HTML/JAVA Script....ผมบอกก่อนว่า ผมไม่มีความรู้เรื่องโค้ดเรื่องสคริปท์ใดๆเลย อาศัยการคว้านหาผู้ใจดีทั้งหลายที่เขียนบทความ เขียนการตอบกระทู้ตามบอร์ดโดยได้รับความสะดวกสบายจากGoogle.ดังนั้นถ้าหลายท่านคิดว่าผมจะเขียนอะไรแบบลึกลับสุดยอด เสียใจด้วยครับ เขียนไม่ได้แน่ครับ เอาเท่าที่สมองน้อยๆของคนแก่ที่มีอาชีพนอกสายคอมสายโปรแกรมเมอร์คนนี้พอจะเข้าใจ


ก่อนจะทำอะไรกับบล็อกก็ตาม ควรเก็บสำเนาบล็อกให้สม่ำเสมอ(Regular Back Up Your Blogger)
กว่าเราจะเขียนสะสมบทความจนได้หลายสิบหลายร้อยเรื่อง ใช้เวลาไปไม่น้อย ในการหาข้อมูล,ปรับแต่งและสรุปออกมา แต่ทุกอย่างสามารถมลายและสลายไปในพริบตาถ้าเซิร์ฟเวอร์ของบล็อกมันล่มแล้วกู้ข้อมูลไม่ได้ นี่ยังไม่รวมการถูกโจรกรรมบล็อกจากบรรดาแฮ็กเกอร์ทั้งหลาย ดังนั้นมือโปรต้องหมั่นเก็บสำเนาบล็อกตัวเองไว้(ผมไม่รู้ว่าจะหาคำศัพท์ไหนมาใช้แทนคำว่าBack Up)
อันแรกที่ต้องเก็บไว้คือ เทมเพลต(หน้าตา,แบบของบล็อกเรา) เวลาเราเปลี่ยนโค้ดบางอย่างในหน้าEdit HTMLแล้วอาจทำให้เทมเพลตนั้นพิการจนใช้ไม่ได้ หลายๆwidgetอาจเดี้ยง เราอาจต้องกลับมาใช้เทมเพลตเดิม การเก็บสำเนาในรูปไฟล์XMLเป็นสิ่งจำเป็น ผมเคยนั่งแก้โค้ดแล้วลืมแบ็คอัพเทมเพลต แก้เสร็จใช้ไม่ได้ ต้องกลับมาใช้เทมเพลตเดิมแต่กลับลืมเก็บสำเนาไว้ มานั่งโหลดใหม่ ใส่widgetใหม่ โชคดีที่ใส่widgetไม่มากเลยค่อยๆใส่ใหม่ได้ ดังนั้นแบ็คอัพเทมเพลตไว้บ้างก็ดีครับ ก็ใช้เครื่องมือในBloggerนั่นแหละครับ
เริ่มจาก1.เปิดเข้าไปที่หน้า Layout กดเข้าไปที่แท็บ Edit HTML
2.มองหาประโยค"Download Full Template" หลังจากคลิ๊กเข้าไปแล้วจะมีหน้าต่างให้เลือกเก็บไฟล์ ก็เลือกเก็บไฟล์ไว้
3. แค่นี้ก็เสร็จแล้ว


สำหรับบทความของBradนั้นได้แนะนำ อีก2 ทางเลือกที่น่าสนใจ คือ ทางแรกด้วย การเก็บสำเนาบล็อกแบบออนไลน์กับ BlockBackUpOnline เป็นออนไลน์เซอร์วิสที่คอยแบ็คอัพบล็อกให้วันละครั้ง โดยแบ็คอัพข้อมูลทั้งหมด ไม่ว่าข้อความหรือรูปภาพ สำหรับบริการฟรีนั้นให้พื้นที่ไว้ถึง 5 Mbซึ่งก็เพียงพอกับหลายร้อยกระทู้แล้ว.อีกวิธีหนึ่งนั้นเป็นการใช้โปรแกรมแบ็คอัพไว้ในdesktop เข้าไปดาวน์โหลดโปรแกรมBloggerBackUp ซึ่งใช้กับWindow

ลักษณะของบล็อกที่ดูโปร..โปรเฟสชั่นแนล
1.มีเทมเพลต(หน้าตา)เป็นเอกลักษณ์(Start Your Blogger with Your Own Template)
เมื่อสมัครBloggerแล้ว ในหน้าเทมเพลตนั้นจะมีแบบเทมเพลตมาตรฐานเพียงไม่กี่เทมเพลต แต่การปรับเปลี่ยนนั้นทำได้อิสระพอควรถ้ามีความรู้เรื่องโค้ดHTMLกับCSS.สำหรับใครไม่มีความรู้ ก็ยังพอหาแบบเทมเพลตที่มีการแจกฟรีแล้วหยิบมาใช้ได้ ก็ไม่ผิดกติกา ดังนั้นการแต่งหน้าตาบล็อกให้ดูต่างไปจากแบบเทมเพลตมาตรฐานนั้น ช่วยให้บล็อกดูหน้าตาดีขึ้น แถมการมีเครื่องประดับอย่างwidget ถ้าเลือกดีๆ ก็ช่วยเสริมสง่าราศรีให้บล็อกได้อีก รวมทั้งการตัดแต่งบางส่วนของเทมเพลตก็ช่วยได้.
การมีบล็อกที่มีหน้าตาเฉพาะนั้นช่วยให้คนที่เข้ามาดู ลืมไปว่ากำลังดูบล็อกของฟรีจากblogspot.ถ้าคุณมีความรู้จำกัด การเปลี่ยนเพียงภาพหัวบล็อก(Header),การเปลี่ยนLayoutจากหน้าละสองคอลัมภ์ไปใช้เทมเพลตที่มีสามคอลัมภ์ก็ใช้ได้ หรือแม้แต่การเอาScrolling Sidebarที่อยู่ทางด้านขวามือของจอออกไปเลยก็ใช้ได้
ข้อสำคัญคือ เลือกเทมเพลตจนพอใจก่อนแล้วค่อยมาแต่งบล็อกด้วยwidget เพราะการเปลี่ยนเทมเพลตใหม่นั้นจะทำให้widgetเดิมที่ใส่ไว้ถูกถอดหมด เหมือนการresetเครื่องอย่างนั้น
Brad Linder ได้แนะนำเวปที่มีเทมเพลตให้ตามนี้
*Blogger Buster
* FinalSense
* Blogger Templates
* Blogspot Templates
* Gecko & Fly
* Mashable: 50 Beautiful Blogger Templates

2.เอาแถบป้ายของBloggerออก(Remove Navigator Toolbar)


บล็อกของBloggerนั้นมีลักษณะที่ดูปุ๊ปก็รู้เลยว่าเป็นบล็อกของBloggerจริงๆแล้วไม่ได้เอาแถบนี้ออก เพียงแต่ตั้งคำสั่งไม่ให้แสดงเท่านั้น วิธีที่แนะนำนี้ ใช้ได้เฉพาะBloggerในเวอร์ชั่นใหม่เท่านั้น
วิธีแก้ก็เปิดเข้าไปที่หน้าEdit HTML แล้วคัดลอกคำสั่งนี้ไปแทรกใส่ในส่วนไหนก็ได้ของหน้า
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
สำหรับคนที่เลือกใช้Classic beta template ก็ให้แทนที่#b-navbarด้วย #navbar-iframe(คำสั่งข้างต้น)

3.เพิ่มส่วนของ Contact Meกับหน้า About Me
สำหรับการสร้างหน้าAbout Meนั้นก็ง่ายๆเพียงแค่เขียนกระทู้ที่บรรยายอะไรก็ตามที่เราอยากบอกไปหนึ่งกระทู้ แล้วลงวันที่ให้ย้อนหลังไปเป็นปีๆเลยซึ่งกระทู้นี้จะไม่ถูกแสดงในหน้าแรก เราก็เก็บลิ้งค์ที่ออกไปหน้านี้ไว้ หลังจากนั้นก็เข้าไปที่โมดูลHTMLที่sidebarจากนั้นก็สร้างลิ้งค์โดยจะใช้text linkก็ได้ ก็ใช้โค้ดง่ายๆตามนี้
<a href="http://myblog.blogspot.com/2007/01/about-me.html">about me</a>

สำหรับโค้ดของการสร้างContact Boxก็ลองไปใช้บริการจากContactify ซึ่งจะได้โค้ดในการสร้างกล่องข้อความที่ส่งถึงเราโดยที่ไม่แสดงอีเมลล์ของเรา(ปลอดภัยว่างั้นเถอะ)ก็นำโค้ดไปติดในโมดูลของHTMLอีกเหมือนกัน

4.เปลี่ยนLabel listเป็นTag cloud


ทางBloggerเรียกtagว่าLabel คุณสามารถทำให้labelนี้แสดงแบบรายการได้ที่sidebar และแทนที่จะแสดงรายการlabel. เราน่าจะใช้label cloudแทนโดยการใช้สคริปท์ แสดงtagตามตัวอักษร และแสดงขนาดตัวอักษรตามความบ่อยในการถูกเรียกใช้ และเมื่อมีการคลิ๊กที่ตัวtagก็นำไปยังหน้าที่มีคีย์เวิร์ดที่สัมพันธ์กัน.สำหรับสคริปท์นี้ได้มาจากเวปphydeaux3 ซึ่งแนะนำขั้นตอนตามนี้
1.สคริปท์นี้ใช้ได้กับNew Bloggerเท่านั้นและก่อนจะดัดแปลงธีมก็ให้เซฟเทมเพลตเดิมเก็บไว้ก่อน
2.เข้าไปที่หน้าLayoutแล้วเลือกEdit HTML ที่สำคัญคือไม่ต้องติ๊กถูกที่Expand widget
3.ให้ก๊อปปี้โค้ดนี้ไปแปะ โดยหา </b:skin>ก่อนแล้วเอาโค้ดไปแปะก่อนหน้า</b:skin>

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

4.เอาโค้ดส่วนที่สองนี้ไปแปะในตำแหน่งหลัง</b:skin> แต่ก่อนหน้า </head>

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

5.หาคำสั่งประโยคนี้ <b:widget id='Label1' locked='false' title='Labels' type='Label'/> แล้วก๊อปปี้คำสั่งนี้ไปใส่แทน

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

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

บทความหน้าจะเหลืออีก 4 สิ่งที่ควรแต่งเพื่อก้าวสู่bloggerแบบมืออาชีพ

เรามีบริการฟรีบล็อกมากมายแล้วทำไมต้องเฉพาะเจาะจงว่า เริ่มทำบล็อกที่Bloggerก่อน ผมลองพิมพ์คำว่า"blogger is best"ลงในGoogle จะพบบทความที่เขียนโดยAmyDerbyที่ลงในPerformancing.com...."Why Blogger is the Best Blogging Platform for Beginners".....ได้พบข้อดีการเริ่มบล็อกกิ้งที่บล็อกเกอร์หลายข้อ...ลองเข้ามาอ่านดู
นอกจากนี้ยังมีบทความอีกสองบทความที่น่าจะช่วยทำให้เข้าใจข้อดีของBloggerได้มากขึ้น
บทความแรก Niche Blog Hosting: WordPress vs. Blogger....เปรียบเทียบให้เห็นแง่มุมต่างๆระหว่างสองวิธีในการมีบล็อกของตัวเอง
บทความที่สอง Blog Services Review....Blogger....Reviewแง่มุมต่างๆของBlogger


ข้อแรก ใช้ฟรี ไม่มีข้อผูกมัด
ถ้าลองสมัครดูแล้วเข้าไปใช้ เพียงแค่มีอีเมลล์ของจีเมลล์ก็ใช้ได้แล้ว แค่สามขั้นตอนก็ใช้งานบล็อกได้เลย แถมยังติดแผ่นโฆษณาAdsenseได้ บางบล็อกให้ใช้ฟรีจริงแต่เราติดAdsenseไม่ได้ อย่างไรก็ตามการอ่านและทำความเข้าใจในส่วนข้อตกลงการใช้งาน(TOS:Terms Of Service)ก็เป็นสิ่งจำเป็น นอกจากนี้ทางBloggerก็ไม่เคยออกกฏจำกัดจำนวนบล็อกต่อชื่อการใช้ บางคนมีบล็อกในBloggerเป็นหลักร้อยก็มี

ข้อที่สอง ใช้ง่ายแม้จะไม่มีความรู้ด้านไฮเทค
ในBloggerเวอร์ชั่นใหม่นี้ การปรับแต่งหน้าตาก็ทำได้ง่ายเพียงใช้วิธีลากแล้ววาง(Drag and Drop)ในส่วนที่เป็นwidget แต่จริงๆแล้วการปรับแต่งเทมเพลตยังต้องใช้โค้ดHTMLบ้าง

ข้อที่สาม ทำบล็อกเสร็จก็โชว์ได้ในGoogle...Google loves Blogger blogs!!!
อย่าลืมว่าBloggerนั้นมีเจ้าของคือGoogle ดังนั้นบล็อกในBloggerย่อมถูกเจ้าบอทเข้ามาเก็บข้อมูลได้เร็วกว่าเวปไซด์หรือบล็อกที่คุณทำเอง และที่แน่ๆBloggerสามารถตั้งให้คุณSubmitบล็อกที่สร้างไปในGoogleได้เลยแทบจะอัตโนมัติเลย มีตัวอย่างมาแล้วว่า มีคนทำบล็อกเองก็มีอันดับดีอยู่แล้ว พอทำบล็อกใหม่ในBloggerในเรื่องเดียวกันบล็อกใหม่นี้ได้อันดับแซงหน้าบล็อกเดิมในเวลาไม่ถึงหนึ่งอาทิตย์ บางคนทำบล็อกในBloggerแล้วอันดับบล็อกดีกว่าบล็อกตัวเอง

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

ข้อที่สี่ หาบริการเสริมได้มากมาย
ข้อนี้ผมเขียนเพิ่มให้ครับ ด้วยความที่Bloggerมีคนใช้เยอะ การพัฒนาลูกเล่นไม่ว่าจากBloggerเองหรือจากแหล่งอื่นๆ หาได้ไม่ยากและมีให้เลือกมาก แทบจะบอกได้เลยว่าBloggerก็เหมือนเป็นOpen Sourceกลายๆไปแล้ว.ก่อนหน้านี้ใครๆก็บอกว่าบริการหนึ่งที่Bloggerไม่มี ก็คือการโชว์สถิติการเข้าชมบล็อก ต้องอาศัยเวปอื่นแจกโค้ดเข้ามาแปะในบล็อก แต่เดี๋ยวนี้มีบริการของGoogleที่เรียกว่า"Analytics"ที่สมัครด้วยอีเมลล์ของgmail แล้วจะได้โค้ดไปแปะในบล็อก เราจะได้เห็นสถิติมากมายที่เก็บอย่างมืออาชีพ แถมมันยังฟรีด้วยครับ

ข้ออื่นๆ....เอาไว้ได้อะไรเพิ่มเติมมาแล้วค่อยเขียนเพิ่มแล้วกัน

หลายคนบ่นว่า อยากทำบทความที่โชว์แค่สามสี่บรรทัดแล้วมีลิ้งค์ให้กดออกไปยังบทความเต็ม ผมลองเข้าไปหาอ่านตามบล็อกต่างๆและในเวปบอร์ดของThaiseoboard.com(กระทู้แรก,กระทู้ที่สอง)...ต้องขอบคุณคุณBall6847ที่ช่วยเขียนโค้ดแก้ให้

สำหรับบล็อกของผมนั้น ลองใช้การแก้ตามบทความที่เขียนในeblogtemplate ลองเข้าไปตามที่ลิ้งค์ไว้ให้แล้วก็อปโค้ดมาแก้ตาม ณ วันที่เขียนบล็อกนี้ยังใช้ได้อยู่ ถ้าใครลองเอาไปใช้แล้ว โค้ดนี้ใช้ไม่ได้แล้ว ก็ช่วยเขียนคอมเม้นท์บอกด้วยครับ จะได้ไปค้นหาวิธีใหม่อีก
ขั้นที่1.ทำการดัดแปลงเทมเพลตก่อน(Modify template code)
ก่อนที่จะทำการแก้ไขใดๆในส่วนของEdit HTML ให้เก็บไฟล์เทมเพลตไว้ก่อน


จุดสำคัญคือ อย่าลืมกดเลือกที่ Expand Widget Templates ซึ่งอยู่ในหน้า Layout แล้วเลือกตรงแท็บ Edit HTML จะเห็นช่องให้ติ๊กตามรูป

รูปนี้เอามาจากกระทู้ของคุณBall6847
จากนั้นลองหา <:data:post.body/> จากนั้นลองมองขึ้นไปสักสองสามบรรทัดจะมีโค้ดตัวนี้อยู่ใกล้ๆกัน <div class=’post-header-line-1′/> และ <div class=’post-header-line’> แสดงว่าใช่บรรทัดที่เราต้องการแล้ว ก็ให้วางโค้ดต่อไปนี้ก่อนถึงบรรทัดนี้ <:data:post.body/>
ค้ดลอกโค้ดนี้ไปลงครับ

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

จะได้ตามรูปนี้ครับ



จากนั้นให้คัดลอกโค้ดอีกชุดหนึ่งตามตัวอย่างข้างล่างนี้ ไปวางถัดจากประโยคนี้ <:data:post.body/> เหมือนกัน

<b:if cond='data:blog.pageType != "item"'><br />
<a expr:href='data:post.url'>Read more...</a>
</b:if>
</b:if>

จะได้ตามภาพนี้


ดังนั้นจะได้ภาพรวมเป็นตามภาพนี้


หลังจากเรียบร้อยถึงตรงนี้แล้วก็ทำการกดเซฟเทมเพลตไว้ให้เรียบร้อย.
ขั้นที่ 2.เพิ่มแท็กในแบบหน้าเทมเพล็ต(Add Class tag in Default Post template)
จากนั้นก็ไปเปิดหน้า Setting แล้วเลือกแท็บ Formatting แล้วให้เลื่อนไปดูตรงข้างล่างสุดของหน้านี้ เข้าไปที่"Post template" เพื่อเพิ่มโค้ดลงไปในช่องนั้น คัดลอกโค้ดนี้ไปใช้เลยครับ

<span class="fullpost">

</span>

ดูตามรูปนี้ครับ


ขั้นที่ 3 ลองเขียนบทความใหม่(Create New Post)
เมื่อลองเขียนบทความใหม่จะได้ภาพตามขั้นตอน


ผลเวลาเราโพสจะได้ตามนี้



ในส่วนของผมเอง ผมปรับโค้ดเล็กน้อย แทนที่คำว่า"Read More"ด้วย"กดเข้าไปอ่านต่อ"



ผมยกเครดิตให้เวปeblogtemplateครับ
สำหรับการเขียนกระทู้ไหนที่ไม่ต้องการให้แสดงตามดังนี้ ก็ให้ลบ<span class="fullpost">และ</span> ออกไปก็กลับไปสู่การเขียนแบบปกติ.สำหรับกระทู้เดิมก่อนจะใช้โค้ดนี้นั้น ต้องค่อยๆแก้ทีละกระทู้ ทีละบทความเอง

สืบเนื่องมาจากบทความแรกที่ผมต้องการแก้โค้ดในเทมเพลต เพื่อให้มีการดึงเอาหัวข้อกระทู้ที่โพสให้ไปโชว์ในTitle Tag ซึ่งแสดงเป็นแถบบนสุดของหน้าจอ ตรงซ้ายมือเรา.ทำให้ต้องมีการเขียนตัวอย่างโค้ด โดยปกติในการเขียนนั้นถ้าลงคำสั่งโค้ดแบบนั้นจะไม่มีการแสดงออกมาให้เห็น
ผมจึงต้องหาวิธีเลี่ยง ก็ได้ไปเจอบทความของคุณmeomeeเขียนในsiamblogspotไว้ ซึ่งผมได้ลองทำดูแล้วได้ผลดีเลย โดยเฉพาะการให้เปลี่ยน < และ > ตามรูปแล้วแปะลงบนเนื้อความตรงๆเลย




ทำให้ได้ตัวอย่างเนื้อความที่นำไปแปะตามนี้



ยังมีวิธีอื่นที่ได้ผลอีกในบล็อกคุณเอกก็ลองไปอ่านดูครับ

หากโค้ดที่ต้องการแสดงผลนั้นยาว ก็สามารถกำหนดให้แสดงโค้ดโดยมีความสูง ความกว้างเท่าไหร่ โดยใช้ style height, width ตลอดจน overflow property ได้

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> 
   <title> Show Code </title> 
   <meta content="Show Code" name="iake" />
</head> 
<body> 
  <div id="content"></div> 
</body> 
</html>

ดังตัวอย่างข้างต้นนั้น ได้กำหนด height = 100 pixels width = 250 pixels และ overflow เป็น auto.

อ่านมาจากบอร์ดThaiseoเลยลองเข้าไปที่บล็อกหลักของwebtalk
เหตุผลของการปรับไตเติ้ลไปตามหัวข้อโพสนั้นก็เพื่อผลทางการค้นหา SEO
ให้Keywordมีความสัมพันธ์กับบล็อก หวังผลให้อันดับในSearch Engineดีขึ้น
แม้ตอนนี้จะไม่รู้ว่าจริงๆ Title Tagที่ปรากฎKeywordที่สัมพันธ์กับเนื้อหาบล็อกแล้วจะได้อันดับดี
ผมก็ยังจะเปลี่ยนtilte tagไปตามหัวข้อกระทู้ ดูเข้าท่ากว่า


วิธีการให้เข้าไปที่ Layout แล้วเลือกตรง edit HTML ให้หาดูตรง Headerว่ามีข้อความนี้:

<title><data:blog.pagetitle/></title>

แก้เป็น:
<!-- Start Widget-based: Changing the Blogger Title Tag -->
<b:if cond='data:blog.pageType == "item"'>
<b:section id='titleTag'>
<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='comments' var='post'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='main' var='top'><title><b:loop values='data:posts' var='post'><b:include data='post' name='post'/></b:loop> ~ <data:blog.title/></title></b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='status-message'/>
<b:includable id='feedLinks'/>
<b:includable id='nextprev'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='post' var='post'><data:post.title/></b:includable>
</b:widget>
</b:section>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<!-- End Widget-based: Changing the Blogger Title Tag -->


อีกวิธีหนึ่งก็เปลี่ยนเป็น:
<title> <data:blog.pageName/> | <data:blog.title/> </title>

ผมลองเปลี่ยนแล้วก็ได้ผลอยู่ อย่างบล็อกนี้ที่แสดงในTitle tagก็เป็นผลจากคำสั่งอันที่สองนี้ ส่วนอันแรกกับอันสุดท้ายลองใส่แล้วมันฟ้องว่าerror ไม่ยอมให้เซฟเทมเพลต

อีกโค้ดหนึ่งที่เห็นแปะให้ใช้กัน

</b:includable></b:includable></b:includable></b:includable></b:includable></b:includable></b:includable></b:includable></b:widget></b:section></b:if>