ไปอ่านเจอบทความนี้โดยบังเอิญ เขียนโดย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แบบมืออาชีพ
Labels: Tips andTricks