Add Digg button to Blogger or Blogspot

       This is a step-by-step guide to automatically place a real-time Digg count and vote button to every single blog post. Digg is a social content website where your readers or you can submit content to. If you have a good story, members will 'digg' the post and write comments. As a blog owner, you may want to make it easy for and encourage your readers to submit and digg your articles.
       Automatic Count and Vote Button

Before you do that though, you would want to take note of the following:-

       1. Your blog should be set to save Post Pages. Post Pages are archived blog posts published to their own web page. Each post will have a unique URL, which is required by Digg for the individual posts to be submitted. To verify or enable it, login to your Blogger Dashboard. Under Settings-> Archiving, set the “Enable Post Pages?” to “Yes” and save the settings.

       2. This template hack will put a Digg button to every post. You are therefore not able to choose which post you want to include or exclude a button. If you would prefer to have a Digg button added only to some posts, read the later part of this article on “Button for selective posts.”

       3. The code reads the URL of the individual blog page and this shall be the URL used for submission of the story to Digg.

       Under “Template”, click the “Edit HTML” tab. Block copy the entire HTML code for your site and save it in a text file. You can also click the "Download Template" link. This is one of the two necessary steps whenever you want to change the template. The second step is of course to “Preview” the new changes, and save the changes only when you are satisfied. The backup you have saved in a text file will come in handy when you accidentally click to save the changes without previewing them. With a backup, you can easily restore the template to the prior state if need be.


       Click the box next to “Expand Widget Templates”. Scroll about two-thirds down the template to look for the code that reads:-
<p><data:post.body/></p>

       If you want the button to show at the top right corner of your post, replace the above code with this.
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url=&quot;<data:post.url/>&quot;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>

       This is what you get:-

       If you would like the button to appear at the end of your post, replace with this following code instead.
<p><data:post.body/></p>
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url=&quot;<data:post.url/>&quot;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>

       The result will be this:-

       If you want to have the button at the top left corner of your post, change the alignment.
<div style='float:left; margin-right:10px;'>
<script type='text/javascript'>
digg_url=&quot;<data:post.url/>&quot;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>

       The outcome is this:-

       Digg has another compact button. If you insert this code:-
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url=&quot;<data:post.url/>&quot;;
digg_skin=&quot;compact&quot;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>

       You will see a compact Digg count button like this:-

       You can also change the background color of the button to blend with your site. For example, a code like this:-
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url=&quot;<data:post.url/>&quot;;
digg_bgcolor=&quot;#BDEDFF&quot;;
digg_skin=&quot;compact&quot;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>

       will give you this:-

       You can insert the color code of your choice into the red portion. For a list of color values to insert, you may refer to the Hexadecimal HTML color code list.

Automatic Count Button in Blog Footer

       [Update] This segment is added in response to user's request to have the Digg button in the Blog footer, i.e., after the labels. If you scroll through your template, you will see this chunk of code which gives the labels in your Blog footer.
<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>

       If you want a Digg button to appear just after the labels, add the appropriate Digg button code right after the above code. For example, if you want the compact Digg button, add this code below the labels code:-
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url=&quot;<data:post.url/>&quot;;
digg_skin=&quot;compact&quot;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>

       The resulting layout is this:-

       Move the Digg button code above the labels if you'd like. Experiment a little. Just remember to preview the template and not to save it unless you are satisfied.

Digg Button in Blog Footer

       If you do not want to see an Automatic Count button, you can also place a link button into the template. This button will appear at the bottom right corner of every post and readers can click it to submit that post to Digg.

Scroll to this part of the template and insert the lines (in red):-
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<div style="float:right; margin-left:10px;">
<a expr:href='"http://digg.com/submit?phase=2&amp;url=" +
data:post.url + "&amp;title=" + data:post.title'
target='_blank'><img border="0" alt="Digg this" src="http://digg.com/img/badges/91x17-digg-button.gif"/></a></div>


       With the code, this is what you will see at the end of every post.

       You can change the position of this button. Go through what we discussed earlier in this article to understand where to place the code if you should want the button to be at the top of the article.

       The button 91x17-digg-button.gif is simply an example. As the following section explains, there are many buttons you can use. To change the button to another design, replace the image URL with that of the new button.

Button for selective posts

       The methods of manually adding a Digg button to selective posts are rather tedious and complicated. The problem is that Blogger does not allow you to simply insert a JavaScript into a blog post. Since this blog is targeted at the majority of us who are not computer experts, I shall suggest a method that I think is simple enough for us.

First, go to the Digg tools site to select a Digg button that you like. You will see a wide selection of Digg buttons.
DiggDiggDiggDiggDiggDiggDiggDiggDiggDiggDigg

Take note of the image URL. For example, the image URL of this button Digg is
http://digg.com/img/badges/91x17-digg-button.gif

       Write a post and publish it. Next, refresh the page and click on the title of your post. This will bring you to the post page. Take note of the new URL of your story. Insert it into the red portion of this HTML code. If you want a different image, insert the image URL into the blue portion of the code.
<a href="http://digg.com/submit?phase=2&url=URLofyourstory" target="_blank"><img border="0" alt="Digg my article" src="http://digg.com/img/badges/91x17-digg-button.gif"/></a>

       Now, go back to your article and Edit it. Choose the “Edit HTML” mode and not “Compose” mode. Copy the above code and paste it into whichever part of your blog article. “Preview” it, and if you are happy with it, “Publish” it.

       For this article, I have manually inserted the Digg button. If you would like to Digg this article, or just to see how it works, click this button. Add Digg button to Blogger or Blogspot

วิธีการทำ Label cloud


ก่อนทำควรทำการ back up template ไว้ด้วย เดี๋ยวเผื่อมีปัญหาอะไรทีหลัง แก้ไม่ได้ โดยกดไปที่ download อะไรนั่นอะ ที่หน้า edit html วิธีback up









วิธีback up

1. http://www.blogger.com/home
เข้าไปซะ (เหมือนกับกดเข้าตรง Dashboard อะ )

2. เข้าไป edit layout

3. add page elements ตัวที่ชื่อว่า label ซะก่อน


4. ทำการเซฟไว้ซะ

5. ไปตรง edit html
ในส่วนนี้ ไม่ต้องไปกด expand อะไรหรอกนะ เดี๋ยวงง

6. ค้นหาคำว่า ]]></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}

แล้วก็เอาโค้ดพวกนี้ไปใส่ตามหลัง ]]></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>


7. เสร็จแล้วก็ค้นหาคำว่า

<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&gt;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 = &quot;<data:label.name/>&quot;;
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] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; 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>

8. กดเซฟ แล้วเชิญรับชมผลงาน

8.1 สำหรับตัวที่ทำไฮไลท์ไว้ เอาไว้ปรับแต่งค่ามันนะ ว่าจะให้มันแสดงผลยังไง
นี่ เว้บสำหรับโค้ดสี RGB Color Code Chart

var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;

จะพูดถึงวิธีใส่สีนะ
ก็เข้าไปในเว็บที่ว่า มันจะแสดงสีต่างๆ ให้เลือกตามใจ ในที่นี้ เลือกไว้ในใจ 2 สี (อย่าเลือกนอกใจนะ 555+) เอาไว้แก้สำหรับ 2 ตัวนี้

var maxColor = [0,0,255];

var minColor = [0,0,0];

วิธีการก็คือ ให้เราไปก๊อปรหัสสีแบบ rgb มา (9 ตัวอะ)
ก๊อปมาใส่ในวงเล็บปิด [ ] (ปิดจริงๆนะ (ปิดในวิชาเลขน่ะ)) แล้วก็ต้องมีคอมม่าคั่นด้วย (ใครไม่มี ไปคัดมา 200 -*-)
เช่นจะเอา รหัสสี 255 228 225 เราก็ก๊อปมาใส่เป็น

var maxColor = [255,228,225];

อีกอันก็ทำเหมือนกัน ปรับได้ตามใจ เสร็จแล้วกดเซฟ ไม่พอใจ กลับเข้าไปแก้ทีหลังอีกได้นะ
9. ขอขอบคุณ phy3blog

How does your label cloud look?


       Well, if you have a blog then you must surely have been labelling your post.Most of you must have even put up the labels in your sidebar widget.
       So how does your sidebar labels look like? Does it still look like the primitive one below?






       Or perhaps you have upgraded to the more appealing and nice looking label cloud like this one:

       However, there is a new sidebar widget for labels which is really cool.If you still don't have it for your blog, then you must go right ahead.To see how this widget looks like, you can visit my home blog.This widget uses a combination of JavaScript and Flash animation to parse and display your blog labels.

To install this widget, do the following:
Step 1:
       First Of all Goto Your blogger Layout>Page Elements page and add a Labels Widget there..You can Do that using the Add a Page Element Option on that

Choose to sort the labels Alphabetically when prompted.
Step 2:
       After Adding the Label Widget Goto Layout>Edit Html (Do not expand the widget templates for the sake of easy explanation)

You will find some code similar to

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

Immediatly after this line, paste the following section of code:

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'><center>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a
href='http://www.roytanck.com/'>Roy Tanck</a> and <a
href='http://www.bloggerbuster.com'>Amanda
Fazani</a></div>
<script type='text/javascript'>
var so = new
SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf",
"tagcloud", "240", <!-- width="240" -->
"300", "7", <!-- height="300" -->
"#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud",
"<tags><b:loop values='data:labels'
var='label'><a expr:href='data:label.url'
style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/></center>
</div>
</b:includable>
</b:widget>

       Then preview your template. If installed correctly, you should see the tag cloud appear in your sidebar.
       If you want to change the size and colour of the label cloud , just play around with the highlighted numbers in the code and you will do fine.

SEO MiniTools Checking Blog

SEO MiniTools Checking Blog
       พอดีได้ไปเจอเครื่องมือเช็คเว็บไซต์ เห็นว่ามันมีประโยชน์ดีสำหรับผู้ที่หัดทำ SEO ก็เลยนำมาฝากกันครับ คงจะมีประโยชน์บ้างไม่มากก็น้อยแหละ


เอาไว้เช็คลิ้งค์ว่าติดเสิทอยู่ที่ไดบ้าง (ผมว่ามันไม่ค่อยเวิร์คแฮะ)
Link Popularity Check - Enter URL:





เอาไว้เช็คอัตราการโหลดของหน้าเว็บครับ
Load Test - Enter URL (60 sec):





เอาไว้เช้คพวกแทกต่างๆ ที่ใช้อยุ่ในเว็บครับ ทั้ง Title, Description รวมไปถึง Keyword ต่างๆ
Meta Test - Enter URL (60 sec):





เอาไว้ดูบอทครับ ว่าบอทมันเข้ามาเก็บข้อมูลเว็บเรา ในส่วนไหน ตรงไหนไปแล้วบ้าง (มีประโยชน์มากๆ)
Spider View - Enter URL (60 sec):




เอาไว้เช็คคะแนนเว็บ ที่จัดลำดับโดย Google ครับ โดยมีการให้คะแนนอยู่ที่ PR 1-10
Google PageRank - Enter URL:





เอาไว้เช็คอันดับ Traffic ของเว็บเรา ที่จัดลำดับโดย Alexa
Alexa Ranking - Enter URL:



การ promote blog ด้วย MSN Live tools

       เป็นการสร้าง sitemap ให้บอทวิ่งเข้ามาหาบล็อกคุณเหมือนกัน หลักการทำงานก็จะคล้ายๆ กันครับ คือใส่ข้อมูล url บล็อกเรา แล้วก็อ้าง sitemap address ของทาง blogger บอกทิศทางให้เจ้าบอท msn เข้ามาหา
ถ้าใครอ่านบทความแผนการโปรโมทจากบทก่อนๆ มาก็จะเข้าใจได้ไม่ยากครับ สำหรับผู้ที่มาใหม่ก็สามารถย้อนกลับไปหาอ่านได้ที่หัวข้อ Promote Blogs ครับ
เราเริ่มกันเลยดีกว่า
       การโปรโมท blogger โดยใช้ Live Webmaster Tools

1. เข้าเว็บไซต์ http://webmaster.live.com แล้วคลิกที่ Sign in to use the tools ถ้าใครลงทะเบียนของ msn หรือ live ไว้แล้วก็จะเข้าสู่หน้า Website List ให้คลิกที่ Add a site ได้เลยครับ

สำหรับผู้ที่ยังไม่มี account ของที่ Live ก็ให้สมัครก่อนครับ (สามารถใช้เมล์ของ hotmail ในการยืนยันเข้าใช้บัญชีของ Live ได้)

2. หัวข้อ Add a website ตรง Web address เราก็ใส่ url ของบล็อกของเราครับ ส่วน Sitemap ก็เหมือนเดิมเจ้าอะตอมรับจ็อบอีกเช่นเคย ในส่วน Verification ให้ติ๊ก Look for a META tag I'll add to the home page file. ครับ เพราะเราจะใช้ mata tag ในการเรียกบอทอีกนั่นแหละ ในส่วนของ e-mail ก็ใส่เมล์ของเราลงไป กรอกเรียบร้อยแล้วก็ติ๊กช่อง Sign me up for the way cool and at most monthly newsletter for webmasters.
ด้วย จากนั้นคลิก Submit เลย

3. จากนั้นเราจะได้เห็นข้อมูลสรุปของเราพร้อมกรอบเมต้าแทก ให้เราก็อปปี้ไว้

4. ให้เปิดเว็บบราวเซอร์ใหม่อีก 1 หน้า ลอคอินเข้าที่เว็บ blogger.com เข้าไปในส่วนของ Dashboard > Layout > Edit HTML
แล้ววาง meta tag ที่ได้จากข้อ 3 ไว้ใต้ <head> เหมือนเดิมเลยครับ จากนั้นก็เซฟให้เรียบร้อย

5. ให้เรากลับมาที่หน้าสรุปข้อมูลบล็อกที่เราค้างไว้เมื่อข้อ 3 ให้คลิก OK เพื่อยืนยันก็เป็นอันเสร็จสิ้นการทำ Sitemap ของ Live และถ้าคุณมีบล็อกอื่นๆ ที่ต้องการจะเรียกบอทอีก ก็แค่คลิกที่ Add a site แล้วทำตามขั้นตอนที่ 2 ได้เลยครับ

6. เมื่อเราทำ Sitemap แล้วจากนั้นเราก็เรียกบอทให้เข้ามาทาง Sitemap ที่เราทำ โดยการเข้าเว็บ http://search.msn.com/docs/submit.aspx และทำการกรอกข้อมูล url ของบล็อกเราแล้วคลิก ส่ง URL

จากนี้เจ้า MSN Bot ก็จะรีบวิ่งหน้าตั้งมาดูบล็อกของเราโดยทันที จบแล้ว!!!!

การ promote blog ด้วย yahoo tools

       ร้าน aStore ที่ดีควรจะต้องมีชื่อ / ลิ้งค ์/ สินค้า แสดงอยูในผลลัพท์การค้นหาของ Search Engine ชื่อดังอย่าง google.com, yahoo.com และ MSN ถ้าร้านของคุณได้ติดอินเด็กอยู่ในทำเนียบ Search Engine ของเว็บเหล่านี้ รับรองครับ ยังไงซะ สินค้าของคุณขายออก แน่ๆ
       คราวนี้เราจะมาใช้เครื่องมือของ yahoo กันบ้าง หลักการโปรโมทก็จะคล้ายๆ กันครับ แค่กรอกชื่อ url ของบล็อกเราแล้วคลิก Submit แค่นั้นเอง

การโปรโมท blogger โดยใช้ Yahoo! Site Explorer
              ใช้ yahoo ช่วยอีกแรง คุณรู้ไหมว่า เสิทเอนจิ้นที่ yahoo นั้นของแรงไม่แพ้ของ google เลยนะ
       1. ก่อนอื่นจะต้องมี account ของ yahoo ในการเข้าสู่ระบบก่อน ถ้ายังไม่มีก็ สมัคร yahoo account เลยครับ
       2. เมื่อสมัครได้แล้วคุณก็ลอคอินเข้าระบบไป จากนั้นก็เข้ามาที่ http://submit.search.yahoo.com/free/request ที่นี่ก็จะมีช่องให้กรอก url ของเว็บไซต์ หรือบล็อกของเรา
       3. หัวข้อ Submit a Website or Webpage เราก็กรอก url ของบล็อกของเราลงไป แล้วคลิก Submit URL หน้าเพจจะฟ้องว่า Success แปลว่าเรียบร้อยแล้วครับ ทีนี้ให้เราคลิก Back กลับมาที่หน้าเดิม
       4. หัวข้อ Submit Site Feed ให้เรากรอก url feed ของบล็อกของเราลงไปด้วยครับ ซึ่งทาง blogger ก็ได้มีเตรียมไว้ให้แล้วนั่นก็คือ เจ้าอะตอม atom.xml นั่นแหละครับ เมื่อกรอกเสร็จแล้วก็คลิก Submit Feed เลย

       5. จากนั้นเราจะถูกพามาที่หน้า Yahoo! Site Explorer ให้คลิกที่ Authenticate ทางขวามือ

       6. เลื่อนสกอร์บาร์ลงมาด้านล่างจะเห็นหัวข้อ To add a META tag to your home page, ตรงข้อ 1 จะมีเมต้าแทกในกรอบสี่เหลี่ยม ให้เราก็อปปี้ไว้ครับ

       7. ให้เปิดเว็บบราวเซอร์ใหม่อีก 1 หน้า ลอคอินเข้าที่เว็บ blogger.com ในส่วนของ Dashboard ให้คลิกที่ Layout

       8. ตรงเมนูให้คลิกที่ Edit HTML

       9. ให้นำ meta tag ที่เราก็อปปี้ไว้เมื่อข้อ 7 นำมาวางไว้ใต้ <head> ดังรูปครับ (วางไว้ใต้เมต้าแทกของกูเกิ้ล จากบทที่4 นั่นแหละครับ) จากนั้นคลิก SAVE TEMPLATE ให้เรียบร้อย


       10. ให้เรากลับมาที่หน้า Yahoo! Site Explorer ตรงข้อ 7 อีกครั้ง แล้วคลิก Ready to Authenticate เพื่อยืนยัน

จบบทเรียนการโปรโมทบล็อกด้วย yahoo site explorer ครับ

การใช้ Meta Tag เรียก Bot

       วันนี้มีข้อมูลดีดีมาฝากกันอีกเช่นเคยครับสำหรับคนทำบล็อกฟรีด้วย Blogger อย่างเราๆ เทคนิคนี้อาจจมีคนรู้แล้วก็ได้นะครับ แต่หลายคนมักมองข้ามมันไปว่า มันจำเป็นด้วยหรือ? ถ้าให้ผมตอบก็ จำเป็นมากๆ เลยครับ จุดเล็กๆ น้อยๆ ที่เราเองมักจะมองข้ามไปเนี่ยแหละสำคัญ ถึงแม้พวกเสิทรุ่นใหญ่อย่าง Google, Yahoo, MSN เหล่านี้ ตัวบอทมันจะมองข้ามเหล่า Meta Tag ตรงนี้ไป แต่สำหรับบอทเว็บเสิทรุ่นเล็กๆ ที่มีอยู่ให้เกลื่อนในอินเตอร์เน็ตนั้นมันจะมองตรงนี้ครับ
เพราะฉะนั้นเป็นไปไม่ได้เลยที่เหล่าพลพรรครักบล็อกเกอร์อย่างเราๆ จะมองข้ามไป ไม่พูดพร่ำทำเพลงละ มาดูกันเลยครับผม

การใช้ Meta Tag ให้ถูกใจน้อง Bot
       - Current Page Title Tag:
<TITLE>"คีเวิร์ดของ title ไม่ควรเกิน 60 ตัวอักษร"</TITLE>

       - Current Meta Description Tag:
<meta name="Description" content="คีเวิร์ดของ description ไม่ควรเกิน 150 ตัวอักษร">

       - Current Meta Keywords Tag:
<META NAME="Keywords" CONTENT="ห้ามมีคีเวิร์ดซ้ำซ้อนกันเกิน 5 คำ">

       - Current IMG ALT Text Tag:
<IMG SRC="ชื่อรูปภาพที่เป็นคีเวิร์ด" ALT="ควรใช้คีเวิร์ดอธิบายว่าสิ่งนี้เป็นรูปอะไร">

       - Current Link Title Text Tag:
<A HREF="ชื่อลิ้งค์ที่เป็นคีเวิร์ด" TITLE="ควรใช้คีเวิร์ดอธิบายว่าลิ้งค์นี้ลิ้งค์ไปที่อะไร">

วิธีการวาง Meta Tag

       ก็เหมือนกับการวาง Meta ลงบนเว็บไซต์ทั่วๆ ไปนั่นแหละครับ สำหรับบล็อกเกอร์อย่างเราก็วางลงที่เดิมเลย Layout > Edit HTML แล้ววางโค๊ดดังกล่าวลงภายใต้เฮ้ดนั่นเอง โดยอ้างเป็น

<head>
<meta content='เดสกิปชั่นของบล็อก อธิบายไปเลย' name='description'/>
<meta content='คีเวิร์ด,คีเวิร์ด,คีเวิร์ด,คีเวิร์ด และก็ คีเวิร์ด' name='keywords'/>
</head>

เมื่อเซฟแล้วก็จะได้ดังรูปตัวอย่างครับ


       เดสกิปชั่นของบล็อกที่ทำการวางลงไปในโค้ดควรเป็นประโยคเดียวกันกับที่อยู่ใน Blog Description ของเรานะครับ วิธีเช็คก็เข้าไปที่ Layout แล้วคลิก Edit ที่ Page Header ข้างในจะมีให้กรอกข้อมูล Title กับ Blog Description ถ้าข้อมูลตรงนี้ไม่มีให้กรอกลงไปด้วยนะครับ ดังรูปตัวอย่าง

       เมื่อน้องบอทเข้ามาเยี่ยมเยียนบล็อกเราแล้วชอบใจ มันก็จะเก็บ indexed ไปเป็นที่ระลึกได้หน้าตาออกมาอย่างนี้ครับ

       เพื่อนๆ รู้กันอย่างนี้แล้ว ก็กลับไปนับเคาะ Keyword ตัวอักษรกันดูเลยนะครับว่า บล็อกที่ทำอยู่น้องบอทเค้าจะถูกใจไหมนะ

Create a Blogger Tag Cloud Widget

       Installation:
              If you already have a Labels page element installed, skip to step 2.
Step 1: Install the Labels page element by browsing to your template settings:

       Click “Add a Page Element” in the column you wish:

       Then find the Labels page element and click “Add to Blog”:

Step 2: Replace the Labels page element widget code with the custom tag cloud code above.
       First navigate to your templates source under your template settings:

       Then check off “Expand Widget Templates”:

       Search for the Label page element you are replacing by searching for widget code. It will look something like this
<b:widget id='Label1′ locked='false' title='Tags' type='Label'>

       but id and title maybe different, so use your browser’s search tool and look for type=’Label’.
Delete the Label widget code from the start to the end marked by
</b:widget>

       and replace with the custom Tag Cloud code from below..
Code:
<b:widget id='TagCloud' locked='false' title='Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
<script type="text/javascript">
/*
Simple Blogger Tag Cloud Widget
by Raymond May Jr.
http://www.compender.com
Released to the Public Domain
*/
//Variables:
var max = 150; //max css size (in percent)
var min = 50; //min css size (...)
var showCount = 1; // show counts? 1 for yes
var minCount = 1; // what is the minimum count for a Tag to be shown? 1 for all.

//Begin code:
var range = max - min;

//Build label Array
var labels = new Array();
<b:loop values='data:labels' var='label'>
labels.push("<data:label.name/>");
</b:loop>

//URLs
var urls = new Array();
<b:loop values='data:labels' var='label'>
urls.push("<data:label.url/>");
</b:loop>

//Counts
var counts = new Array();
<b:loop values='data:labels' var='label'>
counts.push("<data:label.count/>");
</b:loop>

//Number sort funtion (high to low)
function sortNumber(a, b)
{
return b - a;
}

//Make an independant copy of counts for sorting
var sorted = counts.slice();

//Find the largest tag count
var most = sorted.sort(sortNumber)[0];

//Begin HTML output
for (x in labels)
{
if(x != "peek" &amp;&amp; x != "forEach" &amp;&amp; counts[x] >= minCount)
{
//Calculate textSize
var textSize = min + Math.floor((counts[x]/most) * range);
//Show counts?
if(showCount == 1)
{
var count = "(" + counts[x] + ")";
}else{
var count = "";
}
//Output
document.write("<span style='font-size:" + textSize + "%'><a href='" + urls[x] + "'>" + labels[x] + count + "</a></span> " );
}
}
</script>
</div>
</b:includable>
</b:widget>

       Possibly related posts: (automatically generated)

25 Tips for Marketing Your Blog

With so many blogs being created every day, it’s a mystery to many bloggers how to make their blog stand out. There are many types of blogs or purposes for blogs and a certain number of tactics are applicable to just about all of them.Some companies choose to hire a blog consultant, but others like to try things internally. For those “DIY” companies and individuals interested in practical tips for marketing and optimizing a business blog, try out the following list of blog marketing and optimization tips:
  1. Decide on a stand alone domain name www.myblog.com or directory of existing site www.mysite.com/blog. Sub domain is also an option blog.mysite.com. Avoid hosted services that do not allow you to use your own domain name!
  2. Obtain and install customizable blog software - WordPress and Moveable Type are my favorites.
  3. Customize blog look and feel templates - aka design.
  4. Research keywords and develop a glossary - Keyword Discovery, WordTracker, SitePoint, SEOBook Keyword Research.
  5. Optimize the blog:
    • Template optimization - RSS subscription options, social bookmark links, HTML code, Unique title tags, URLs, Sitemap
    • Add helper plugins specific to WordPress or MT
    • Create keyword rich categories (reference your keyword glossary)
  6. Enable automatic trackback and ping functionality.
  7. Create Feedburner Pro account and enable feed tracking.
  8. Setup a Google account for Sitemap, validate and prep for future submission.
  9. Identify authoritative blogs, web sites and hubs for outbound resource links and blogroll.
  10. Format archived posts, related posts.
  11. Enable statistics for tracking - Google Analytics, ClickTracks.
  12. Submit RSS feed and Blog URL to prominent RSS and Blog directories / search engines.
  13. Engage in an ongoing link building campaign.
  14. If podcast or video content are available, submit to Podcast and Vlog directories.
  15. Submit blog url to paid directories with categories for blogs - Yahoo, BOTW, bCentral, WOW, JoeAnt.
  16. Optimize and distribute a press release announcing blog.
  17. Request feedback or reviews of your blog in relevant forums, discussion threads. If you have a resourceful post that will help others, point to it.
  18. Research and comment on relevant industry related blogs and blogs with significant centers of influence.
  19. Post regularly. If it’s a news oriented blog, 3-5 times per day. If it’s an authoritative blog, 3-5 times per week, but each post must be unique and high value.
  20. Monitor inbound links, traffic, comments and mentions of your blog - Google Alerts, Technorati, Blogpulse, Yahoo News, Ask Blogs and Feeds.
  21. Always respond to comments on your blog and when you detect a mention of your blog on another blog, thank that blogger in the comments of the post.
  22. Make contact with related bloggers on AND offline if possible.
  23. When making blog posts always cite the source with a link and don’t be afraid to mention popular bloggers by name. Use keywords in the blog post title, in the body of the post and use anchor text when you link to previous posts you’ve made.
  24. Use social networking services, forums and discussion threads to connect with other bloggers. If they like your stuff, they will link to you.
  25. Remember when web sites were a new concept and the sage advice to print your web address everywhere you print your phone number? The same advice applies for your blog.
    =============
  26. If your blog’s goal is to promote you as an authority, interview other prominent bloggers in your industry. Your own credibility will improve by association.
  27. Build out your online networks through services such as MyBlogLog, Twitter and Facebook and leverage them to promote particularly useful content on your blog.
  28. Once your blog has 1000 or more subscribers, show your Feedburner badge
  29. Host images with Flickr making sure to include an anchor text link in the image description back to the post where the image is used.
  30. Use your blog to gain press/media credentials at relevant industry conferences and use the event to create content, connections and increase your knowledge.

This post was originally published on June 15, 2006 and has continued to receive many inbound links. As time changes, so do some tactics, so we’ve added a few tactics (after original 25) that have emerged in their usefulness. What would you add to this list?

How to embed Comment Form in Blogger Blog?

       Blogger blogging platform is getting better and better. With more refined features, Blogger is appealing to wider audience. Much demanded, expected feature of embedded comment form has been live for a while.


       While it only involves few clicks to get going with this feature in default blogger template, things are little different - if you are using 3rd party customized Blogger template. Here is the procedure to embed comment form in your Blogger blog for making life easy for your visitors while they comment.

1.Login into your Blogger account using http://draft.blogger.com and NOT using http://www.blogger.com

2. Click on 'settings' > 'comments' and check for options next to 'Comment Form Placement'. Select the option 'Embedded below post'.

3.Then click on 'save settings' button and check your blog for the embedded comment form.

Still don’t see embedded comment form? This happens when you are using a modified blogger template. To make embedded form appear in modified template we need to check options suggested by Amanda.

METHOD ONE
Go to settings > Layout > Edit HTML and look for the following code.

       <p class='comment-footer'>
              <b:if cond='data:post.allowComments'>
              <a expr:href='data:post.addCommentUrl'
              expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
              </b:if>
       </p>

Replace the above code with the following:

       <p class='comment-footer'>
              <b:if cond='data:post.embedCommentForm'>
              <b:include data='post' name='comment-form'/> <b:else/>
              <b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl'
              expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
              </b:if></b:if>
       </p>

       Either of above 3 methods should do the trick of adding embedded comment form in your Blogger blog. However, if it does not work - try out default Blogger template and perform above steps!

Categories

25 Tips for Marketing Your Blog (1) 7 Tips (2) 7 ขั้นตอนง่ายๆ ที่จะทำให้ Search Engine (1) Add Adsense inside Blogger (1) Add Copy To (1) Add Favicon (1) Add Favicon on Blog (1) Adding a Favicon on Blogger (1) AdSense in the Middle or Anywhere of Blogger (1) Adsense Parser to blogger (1) Affiliate Programs (1) AI RoboForm (1) Amazon (2) Amazon Associate (1) Amazon Associates (2) Auto Slider to Blogger (1) Automatically Refresh Your Blog (1) Best Adsense Secrets (1) Best Adsense Tips (1) Best Adsense Tips And Secrets (1) Blog (2) Blog and Make Money (1) Blog Tips (4) blog to make money (1) Blogads.com (1) Blogger (1) Blogger Dummies (1) Blogger Guide (1) blogger hack (1) Blogger Hacks (1) Blogger Help (1) Blogger Instructions (1) Blogger Make Me Rich (3) Blogger Tag (1) Blogger Tips (2) Blogger Tricks (1) Blogging (1) Blogs Tools (3) Boost Traffic (1) Change Template (2) Change the Width of Your Blog (1) cloud (1) Cloud Widget (1) Comments Below Posts (1) Complete SEO Guide For Blogger|Blogspot (1) Create a Blogger Tag Cloud Widget (1) Crispads.com (1) CSS (1) Customization Blogger (1) Customization Quotes in Blogger (1) Customize (2) Customizing Comments Below Posts (1) Digg (1) Digg Button (1) Disable Your computer might be at risk (1) Embed Adsense add unit in Left or Right corner of post content (1) Favicon on Blogger (1) fill forms (1) Footer (1) form filler (1) form filling software (1) Google Adsense (1) How Add META TAGS to Blogger (1) How Add META TAGS to Blogger(blogspot) blogs (1) How To Add 728×90 leaderboard Adsense ads between Header and Post Section in blogger (1) How to Add Adsense ads inside Blogger blog posts or between blog posts (1) How To Add Adsense Parser to blogger (1) How To Add Different Meta Tags to Different Blogger Posts (1) How To Add One Click Sitemaps Submitter to blogger (1) How to blog to make money (2) How to Embed Adsense add unit in Left or Right corner of post content (1) How To Insert Adsense Ads In Blogger Post (1) How To Make Money With Adsense (1) How To Make Money With Adsense Without Your Website (1) How to put AdSense in the Middle or Anywhere of Blogger posts (1) How To Refresh Your Blog (1) How To Remove AdSense Ads from the Homepage (1) How To Remove Low paying Adsense Ads (1) How To Use Adsense Section (1) How To Use Adsense Section Targeting on Blogger (1) Insert Ads In Blogger Post (1) Insert Adsense In Blogger Post (1) JavaScript (1) Keyword (1) label (1) Label cloud (1) Labels (1) Link in Footer (1) Make the Blog Wider (1) Meta Tag (1) meta tags (2) Mootools Featured Posts Auto Slider (1) Move To to (1) Newer + Older Posts (1) newerPageTitle (1) nextprev (1) Numbered Page Blog (1) Numbered Page Navigation Hack For Bloggers (1) olderPageTitle (1) password management (1) password manager (1) Poly Wi-Fi (1) Posts Auto Slider (1) Promote Blog (2) Quotes in Blogger (1) Read More (1) Read More in blogger (2) ReadMore blogger (1) Refresh Your Blog (1) Relate Post (2) Relate Post Widget (1) Remove AdSense Ads from the Homepage (1) Remove Blogger Navbar (1) Remove the NavBar (1) RoboForm (1) Search Engine Friendly (1) Search Engine Optimization (1) SEO (8) SEO (Search Engine Optimization) (2) SEO เคล็ดลับ โปรโมท (1) Slider to Blogger (1) Successful Blogging (1) Tag Blogger (1) Template (1) Tip Adsense (2) Tips (3) Tips Ads (1) Tips Adsense (3) Tips and Tricks (1) Tips for Marketing (1) widget (1) widget label (1) XP Tweaks (1) Your Blog (1) ขั้นตอนการทำ SEO (2) เคล็ดลับ (1) เคล็ดลับ โปรโมท (1) โปรโมท (2) โปรโมทเวบ (1) เรื่องอื่นๆที่ใกล้เคียง ใน Blogger (1) วิธีการทำ Label cloud (1) วิธีทำ Relate Post (1) วิธีทำลิงค์ Read More... ใน blogger (1) วิธีทำเว็บให้น่าใช้งาน (1) วิธีลับในการหาข้อมูลจาก Google (1) เว็บให้ดัง (1)
 
Copyright © 2009 Blogger Template Designed by All about Blogger Tips