How to Hide or Remove Blogger Navbar

To hide the Blogger Banner :

- Log in to blogger

- On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog's HTML.

- paste the CSS definition in the top of the template code:

...
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Rounders
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 27 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

<!-- Start Insert code between -->

#navbar-iframe {
display: none !important;
}

<!-- End Insert code between -->

/* Variable definitions
====================
<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="mainTextColor" description="Text Color" type="color"
default="#333" value="#333333">
...

Remove the code to show it again.

Step by step in video:


Remove Blogger Navbar - video powered by Metacafe

ของถูกและดีไม่ค่อยมีในโลกครับหรือถ้ามีจริงก็คงจะไม่ค่อยบอกกันเพราะมันจะเสียของ ฮ่าๆๆ แต่คราวนี้ผมคิดว่าไม่บอกคงไม่ได้เพราะจะเสียโอกาศของคนติดเน็ตแบบผมๆ และเพื่อนๆ ที่ขาดการติดต่อกับอินเทอร์เน็ตไม่ได้เลย ผมจึงจะมาขอแนะนำการใช้เน็ตในกรุงเทพฯ กับระบบ Green Bangkok Wi-fi ครับ

Green Bangkok Wi-fi เป็นบริการพิเศษสำหรับชาวกรุงโดยแท้ โดยเป็นการร่วมมือกันของกรุงเทพมหานครกับบริษัท ทรู เพื่อเปิดให้ใช้บริการอินเทอร์เน็ตแบบไร้สายหรือ Wi-Fi ฟรีทั่วกรุงเทพฯ

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

ซึ่งจากการทดสอบของผมแถวๆ เดอะมอบางกะปิ พบว่า (ราวๆ ซอย 130 ห่างจากเดอะมอบางกะปิราว 2-3 กิโลเมตร) สามารถรับสัญญาณได้ประมาณ 1 Mb (ภายในห้องพักชั้น 2) ซึ่งก็เพียงพอในการเข้าชมเว็บต่างๆ ได้ดีครับ


สมัครเข้าใช้งาน online ได้ที่นี่ : http://services.trueinternet.co.th/greenbkk/registration_phase2.php

ก่อนจะใช้งานฟรีได้แน่นอนครับเราจะต้องมี Username และ Password ก่อน ซึ่งในโครงการแรกนั้นต้องไปสมัครขอเอกสารวุ่นวาย แต่สำหรับโครงการสองนี้สมัครออนไลน์ได้แล้วนะครับที่ URL นี้ http://services.trueinternet.co.th/greenbkk/registration_phase2.php
ซึ่งขั้นตอนการสมัครนั้นผมคงจะไม่ต้องอธิบายอะไรมากเพราะมันง่ายซะมากกว่าจ่ายค่าเทรอมของมหาลัยซะอีก ฮ่าๆ

หลังจากสมัครได้แล้วก็อย่าลืมเซฟ Username/Password เก็บไว้ล่ะครับเผื่อวันหน้าหิ้วโน้ตบุ๊กไปไหนต่อไหนจะได้เปิดขึ้นมาใช้งานได้ทันที จากนั้นก็หาจุดเหมาะๆ ที่รับสัญญาณ wi-fi จาก True ให้ได้ ซึ่งวิธีการง่ายๆ คือเปิดใช้งาน wi-fi บนโน้ตบุ๊กของเราแล้วให้มันแสกนหา True wi-fi เท่านี้เองครับ หรือถ้าไม่แน่ใจว่าบริเวณที่เราอยู่นั้นมีสัญญาณ wi-fi ของทรูอยู่หรือไม่ก็ลอง search ได้จากแผนที่นี้ครับ http://www.truewifi.net/th/02hotspots/search.jsp


หาสัญญาณ wi-fi ของทรูให้เจอแบบเหมือนในภาพนี้ครับ

จากนั้นเปิดโปรแกรม Internet Explorer ขึ้นมาแล้วเปิดเข้าเว็บอะไรก็ได้สักเว็บหนึ่งระบบมันก็จะวิ่งไปให้เราลงทะเบียนอัตโนมัติครับ เราก็ป้อน username/divassword ที่ได้สมัครไว้ในขั้นตอนด้านบนนั้นลงไปเท่านี้ก็ได้ใช้อินเทอร์เน็ตฟรีตลอดชีพแล้วจ้า

ปล. ในช่อง username ไม่ต้องป้อน @truewifi นะครับ ตอนแรกลืมอ่านป้อนไปแล้วล็อคอินไม่ผ่านดันลืมว่าเขามีใส่ให้แล้ว เวง จริง ตรู -_-'

การใช้งานโปรแกรม AI RoboForm

       โปรแกรม นี้เป็นโปรแกรมช่วยจำ Password กรอกข้อความในเว็บบอร์ด ซึ่งในการกรอกข้อความครั้งแรกให้ท่านใส่ให้ครบถ้วนและกด save โปรแกรมจะบันทึกข้อมูลของท่านไว้ และครั้งต่อไปถ้าต้องการโพสต์ที่บอร์ดนี้ ท่านสามารถคลิ๊กเพียงครั้งเดียว โปรแกรมจะกรอกข้อมูล ให้ท่านโดยอัตโนมัติ

เป็นขั้นตอนแนะนำ เพื่อที่จะใช้ AI RoboForm
และให้เป็นผู้เชี่ยวชาญง่ายๆ ภายใน เวลาที่น้อยกว่า 5 นาที

คลิกข้างล่าง เพื่อเริ่มต้นการสอนการใช้งาน

ดาวน์โหลดโปรแกรมได้ที่นี่ โปรแกรม

Password Manager: ช่วยจัดการรหัสผ่าน บันทึกข้อมูลข่าวสาร การเข้าใช้, สร้าง และใช้ RoboForm Passcard


Form Filler: ช่วยเติม บรรจุรูปแบบ ข้อมูลข่าวสาร ข้อมูลส่วนตัวของคุณ เพียงคลิกเดียว


Safenotes: ที่เก็บข้อมูลข่าวสาร ที่ปลอดภัยไวต่อความรู้สึกในการทำงาน


Master Password: ป้องกันรหัสผ่านหลัก ทั้งหมดในแฟ้มของคุณ


Search Box: การค้นหา สิ่งใดๆ ใน RoboForm และบนเว็บได้อย่างรวดเร็ว


Password Generator: ช่วยสร้างรหัสผ่านที่ปลอดภัย


โปรแกรมจะให้ใส่ Password เพื่อล็อกอินในการเริ่มต้นการใช้งาน ก็ใส่ตามใจท่านละกัน
โปรแกรมจะถูกติดตั้งในเมนูบาร์ดังภาพ

       เริ่มต้นการใช้งาน ให้ท่านเข้าไปที่หน้าเว็บบอร์ดที่ต้องการจะโพสต์
       กรอกข้อความในบอร์ดให้เรียบร้อยทุกช่อง กด Save ที่เมนูบาร์ด้านบน จะปรากฏหน้าต่างเล็กๆขึ้นมาดังภาพให้ท่านกด Save เช่นเดียวกันโปรแกรมจะจัดเก็บข้อมูลที่ท่านกรอกไว้ทั้งหมด

       ทางที่ดีให้ท่าน Add a Favorite ไว้ด้วยก็ดี เพื่อให้การเข้าถึงเว็บบอร์ดง่ายขึ้นในครั้งต่อไป จากนั้นให้กดส่งข้อความเลย

       ครั้งต่อไปถ้าท่านเข้าไปที่เว็บบอร์ดเดิม(แนะนำให้เข้าจาก Add a Favorite)ที่บันทึกไว้ก่อนหน้า แล้วลากเมาท์ไปที่เมนูบาร์ จะปรากฎหน้าต่างเล็กๆขึ้นมา ให้ท่านคลิ๊กที่ Fill Form
โปรแกรมจะกรอกข้อมูลที่ท่านเคยกรอกไว้โดยอัตโนมัติ จากนั้นก็ส่งข้อความได้เลย

       ท่านสามารถเข้าถึงเว็บบอร์ดที่ท่านโพสต์และบันทึกเก็บไว้ได้จากตัวโปรแกรมในเมนู Login และสามารถโพสต์ แก้ไข หรือลบทิ้งได้จากตรงนี้


ขอให้ทุกท่านสนุกกับการทำงาน ที่ง่ายๆแค่ปลายนิ้วของเรา

Adding a Favicon on Blogger

Blogger is a very popular free Blogging platform, but each free blogs comes with the same exact default favicon that Blogger is using. You can help set your blog apart by getting your very own unique favicon plus there are a lot of benefits with having your own favicon. This post is in response to menopauseprincess. She asked about Blogger blogs having their own favicon.
Creating or finding your favicon
       If want to create your own favicon, you can follow my guide on creating your own favicon. You can also find a free favicon from the 20 free favicon resources I have collected. I’ve used both unique and free favicons, I just try to use a favicon that represents what my website is about or something that is rememberable.
Uploading your favicon
       You will need to find an alternative host for your favicon because Blogger does not host custom favicons. A lot of free file hosting services will not host .ico file types, so these are not good options. If you don’t have your own web hosting account, there is a service called myFavatar that will host your favicon for free. Flickr will allow you to host .ico files also, so if you have an account there already that may be a good choice.
Linking to your favicon
       You will need to do some updates to your templates in order to get your favicon to show up. This part might get tricky, so if you need any additional help please don’t be afraid to ask. To edit your Blogger templates, after you login go to “Layout” –> “Edit HTML”. Now you will need to add the following line of HTML between the start <head> and end </head> tag:
PlatForm

<link rel="shortcut icon" type="image/ico" href="http://example.myfavatar.com/favicon.ico" />

Example
<!-- Start Favicon.ico -->
<link href='http://www.e-shop.ob.tc/favicon.ico' rel='shortcut icon'/>
<link href='http://www.e-shop.ob.tc/favicon.ico' rel='icon'/>
<!-- End Favicon.ico -->

Before Code
<b:skin><![CDATA[/*


       Make sure you update the location of your favicon to the exact web location where you uploaded your favicon. If you do use myFavatar to host your favicon, they will actually provide you with the exact code to paste into your templates.
Testing your new Favicon
       Typically when you save your templates and reload you should be able to see the new favicon. But occasionally there may be settings in your browser that may prevent your favicon from showing up, so you may need to reload or clear your cache in order to see it right away.

วิธีทำลิงค์ Read More... ใน blogger

       ก่อนอื่นของก่อนอื่นต้องมีความรู้ด้าน html บ้างนิดหน่อย ถ้าไม่มีก็ขอให้ทำอย่างระวัง เทมเพลตอาจจะพังได้
       นี่เป็นวิธีใส่ link read more สำหรับบทความยาว ๆ แล้วต้องการจะตัดข้อความสั้น ๆ เพื่อไม่ให้หน้าแรกยาวเกินไปสำหรับคนที่ใช้ blogger แล้วไม่รู้ว่าจะทำยังไง หรือไปอ่าน help center มันแล้วทำตามไม่ได้เช่นผม
       จะมีคำอธิบายสำหรับผู้ที่พอรู้เรื่อง CSS และ HTML ระดับหนึ่ง ไม่แนะนำให้มือใหม่ทำตามอำเภอใจ อาจเจ๊งได้
ก่อนอื่นเลยให้ไปที่หน้าปรับแต่ง template แล้ว
อย่าลืม เลือก edit html ติ๊กที่ expand widget template ด้วยด้านมุมขวาบน ของ Text Box copy ทั้งหมดใส่ text file ไว้เพื่อกันเหนียว (ทำ backup)

1. ไปที่ Template => Edit Template
2. Backup Template อันเก่าไว้ด้วยครับ เผื่อเจ้งขึ้นมาจะได้ทำให้กลับเป็นเหมือนเดิมได้
3. ให้ตื้กที่ Expand Widget Templates เพือเปิด Code แบบเต็ม
4. ใส่ code สีแดงข้างล่างนี่ใส่ไว้ก่อน </head> หลัง </b:skin> ครับ ดังรูป

Code ที่จะนำไปใส่

]]></b:skin>
<b:if cond='data:blog.pageType != "item"'>
<style>#fullpost{ display:none;}</style>
</b:if>
</head>

5. ค้นหาบรรทัดต่อไปนี้ครับ <div style='clear: both;'/> <!-- clear for photos floats -->

<div class='post-body entry-content'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->

Note - <div class='post-body entry-content'> แต่ละ Template อาจจะไม่เหมือนกันนะครับ
แล้วใส่เพิ่มลงไปตามนี้ครับ (สังเกตุสีแดงเอาครับ)ดังรูป

Code ที่จะนำไปใส่

<div class='post-body entry-content'>
<p><data:post.body/></p>
<b:if cond='data:blog.pageType != "item"'>
<p><a expr:href='data:post.url'>Read More</a></p>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->

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

6. ไปที่ Setting => Formatting เลื่อนลงมาล่างสุดจะเห็น Post Template ให้ Copy ข้างล่างนี่ใส่กรอกเข้าไปแล้วเซฟครับ

Code ที่จะนำไปใส่

ส่วนที่จะให้แสดง
<span id="fullpost">
ส่วนที่เหลือ
</span>

เวลาใช้งานตอนเขียนข้อความ ควรอยู่ในโหมด Edit HTML ตามรูป หรือไม่งั้นก็นำเอาโค้ตไปใส่ในช่วงที่ต้องการจะให้ซ่อน

ตัวอย่างการใช้งานจริง

รวมทิป การเขียนบล๊อก Blogger
Tips Blogger & Widget Blogger : http://aboutblogtips.blogspot.com/

รวมการศึกษาหารายได้ผ่านอินเตอร์เน็ต
Proof eBusiness : http://proof-ebusiness.blogspot.com/

รวมการใช้งาน RSS Feeds เพื่อรับข่าวสารสู่เว็บ
How use RSS Feeds : http://rss-informationss.blogspot.com/

วิธีทำ Relate Post หรือ เรื่องอื่นๆที่ใกล้เคียง ใน Blogger in Blog

       การทำ Relate Post คือการใส่ Link ในระหว่างเว็บนั้น มีผลทาง SEO นะครับ ไม่เชื่ออย่าลบลู่ ดูอย่าง บล๊อกของผมนี่สิ เขียนไปแค่ 20 กว่า บทความ แต่พี่กูเกิ้ล มัน อินเด็กไปให้ ตั้ง 66 มันมาจากไหนเยอะแยะละครับ ตอบได้เลยครับ มันก็ไต่ๆ ไปตาม Relate Post นี่แหละครับ เพราะว่า Bot มันชอบมากๆ หากเจอลิงค์ ที่ใกล้ๆ กัน มันก็จะใต่ไปเรื่อยๆน่ะครับ มาลองทำกันเลยนะครับ
1.Log In เข้าไปที่ Blogspot จากนั้นคลิ๊กที่ รูปแบบ -->แก้ไข Html จากนั้น Back Up ไฟล์ ของท่านไว้ก่อน เผื่อมีปัญหาตามมาทีหลังนะครับ จากนั้นคลิ๊กที่ ขยายแม่แบบ ดังภาพ

2.จากนั้น ก๊อปปี้ Javascript ข้างล่างนี้ ไปวางในก่อนจบแทค </ Head>

<!-- Start Code Relate Post -->
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

3.จากนั้นมองหา code ข้างล่างนี้

<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>

4.จากนั้น แทนที่ด้วย code ดังข้างล่างนี้(***ข้อสังเกต ที่เพิ่มไปคือตัวหนังสือสีแดงหนาๆ)

<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:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

5.จากนั้น คลิ๊กบันทึก Template แล้วกลับไปที่หน้า องค์ประกอบของหน้า แล้วทำการเพิ่ม องค์ประกอบของหน้า (add page Element) จากนั้น คลิ๊กเลือกแทบ Html /Javascript แล้วใส่ code ข้างล่างนี้ลงไป

6. แล้วนำ แทบจาวาสคิปส์ดังกล่าว มาวางไว้ที่ ด้านล่างของ blogpost ดังภาพ

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

7.จากนั้นกลับมาที่หน้า แก้ไข Html อึกครั้ง แล้วคลิ๊ก ที่ขยายแม่แบบ จากนั้นค้นหา tag ที่ได้ add ลงไปเมื่อกี้คือ <b:widget id='HTML1' locked='false' title='Relate Post' type='HTML'> จากนั้นเพิ่ม code ตัวหนา ลงไป หรือ กอปปี้ code ดังกล่างข้างล่างนี้ไปแทนทีเลยก็ได้ แต่เปลี่ยน id html1 ให้เป็นของเพื่อนๆด้วย

<b:widget id='HTML1' locked='false' title='Relate Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

8.จากนั้น กด บันทึก template หรือ save ลอง preview ดูที่ blog ของเพื่อนๆ ในหน้าแรกมันจะยังไม่โชว์ Relate Post มันจะโชว์ ที่หน้าบทความในแต่ละ Post

ลองทำดูครับ ช่วยเพิ่ม index ได้พอสมควรนะครับ