บันทึกการ หาเงินออนไลน์ ของลุงกบ : มาทำลิงค์ภายในโฟสของ Blogger / Blogspot กันเถอะ

ทำลิงค์ภายในโฟสของ Blogger / Blogspot กันเถอะ

Table of Contents คุยกันก่อน ทำไมถึงต้องทำลิงค์ภายในโฟส? วิธีการทำลิงค์ภายในโฟส

คุยกันก่อน

สวัสดีกันอีกครั้งครับ ช่วงนี้จะวนๆ เวียนๆ กับการทำ SEO ให้กับ Blogger หรือ Blogspot บ่อยสักหน่อยนะครับ เพราะยังเชื่อว่ายังมีเพื่อนๆหลายท่านอยากจะทำ blog เป็นของตัวเองโดยใช้ของฟรีอย่าง blogger หรือ blogspot ในการทำ อีกทั้งในต่างประเทศก็ยังเป็นที่นิยม และใช้ blog ฟรีเหล่านี้ในการทำเงิน ไม่ว่าจะจาก Adsense , ClickBank และ affiliate อื่นๆ  ไม่เว้นแม้แต่ Amazon (แต่เป็น Amazon สายขาวนะครับ สายปั่น หรือสายยัดก้นทำโฟสเยอะๆ ผมไม่ได้ทำมานานมากแล้วเพราะทำไปก็โดนลบและเสี่ยงกับการโดนแบนเป็นอย่างมาก 555+) 

สำหรับในครั้งนี้ สิ่งที่จะเอามาแชร์ มาเล่าสู่กันฟัง ก็เป็นเรื่องของการ ทำลิงค์ภายในโฟสของ Blogger / Blogspot ปัจจัยที่อยากจะทำเรื่องนี้ เกิดมาจากการที่นั่งมองโฟสฯ ของตวเองแล้ว บางทีมันจะยาวมาก การที่เราจะค้นหาหรือข้ามไปยังส่วนที่ต้องการดูในโฟส เป็นเรื่องที่ค่อนข้างลำบาก เลยอยากจะทำ Table of Contents แบบที่เห็นในเวปฯ ต่างๆ โดยเฉพาะเวปที่ทำด้วย Wordpress ซึ่งจะมี plugin รองรับให้ใช้งานอยู่มากมาย แต่ใน Blogger หรือ Blogspot ค่อนข้างจะยากในการทำ

เลยพยายามที่จะค้นหาและทดสอบ code และวิธีการต่างๆจากต่างประเทศ จนไในที่สุดก็ได้วิธีการที่จ่าจะให้ผลที่พอใจกับตัวเอง มาแบ่งปันให้กับทุกๆท่าน

ทำไมถึงต้องทำลิงค์ภายในโฟส?

นอกเหนือไปจากเหตุผลข้างต้นที่ต้องการให้ผู้ที่เข้ามาอ่านโฟสใน blog ของเรา สามารถเข้าถึงเนื้อหาที่สนใจและอยากอ่านได้โดยง่าย อีกเหตุผลหนึ่งที่เป็นปัจจัยสำคัญคือการเพื่อที่จะต้องการ Improve SEO ใช่ครับไม่ผิด เพื่อทำให้ blog ของเรามีคะแนแ SEO ที่ดีขึ้นในมุมมองของ search engine ต่างๆ โดยที่ blog หรือเวปไหนมีการทำโครงสร้างของลิงค์ภายในจะมีคุณภาพที่ดีกว่า blog หรือเวปที่ไม่มีก่ารทำ จะช่วยให้ผู้อ่านหาข้อมูลได้ง่ายแล้วยังทำให้ผู้ที่เข้าชม blog ของเรา อยู่กับเรานานขึ้นด้วย เป็นการช่วยเพิ่มค่า bounce rate ให้กับ blog ของเรานั่นเอง

วิธีการทำลิงค์ภายในโฟส

ตอนนี้เรามาเริ่มต้นการทำลิงค์ภายในโฟสกันดีกว่าครับ วิธีการไม่ยากจนเกินไปนัก หลักๆ คือเราจะใช้ ความรู้เกี่ยวกับ HTML พื้นฐานเป็นเครื่องมือในการสร้าง เพื่อไม่ให้เป็นการเสียเวลา เรามาลงมือกันเลยดีกว่าครับ เพียงแค่ทุกท่านทำตามขั้นตอนดังต่อไปนี้
1. ให้ท่านทำการ Login เข้าสู่ Blogger/Blogpot ของท่าน

2. ไปยังโฟสที่ท่านต้องการทำลิงค์ภายใน (Internal Post Link) โดยการเลือก Edit Post หรือสร้างใหม่ด้วย New Post

3. บทบทความที่ท่านเขียนให้ท่านหาดูว่าตำแหน่งในจะใช้ในการสร้างจุดเชื่อมโยงเพื่อไปยังเนื้อหาภายในโฟส ในตัวอย่าง ผมจะใช้โฟสนี้ในการทำ โดยเลือกที่จะสร้างจุดกระโดด ลิงค์ไปยัง 3 หัวข้อภายในโฟส จุดที่จะใช้กระโดดเป็นหัวข้อที่สร้างอยู่ในตาราง (table) และทำเป็น Table of Contents ไว้นั่นเอง

4. ให้ทำการเปลี่ยนโหมดในการเขียนบทความจาก Compose เป็น HTML ซึ่งจะทำให้เรามาารถแทรกและแก้ไขโค๊ดให้เป็นอย่างที่เราต้องการได้

5.กำหนดจุดเริ่มต้นที่เราจะทำลิงค์ไปยังเนื้อหาภายใน เรามาลองทำจุดแรกกันก่อน ในที่นี้ก็คือเราจะทำลิงค์ อืมมม ไปตรงกลางก่อนก็แล้วกันนะครับ เอาจุดที่จะใช้ลิงค์ไปในตาราง Table of Content ก็คือ "ทำไมถึงต้องทำลิงค์ภายในโฟส?"

6. รูปแบบของลิงค์ที่เราจะใช้ จะเป็นภาษา HTML ดังนี้ :
          <a href="#withinposts">ทำไมถึงต้องทำลิงค์ภายในโฟส?</a>
    <a href="#withinblogger">ทำไมถึงต้องทำลิงค์ภายในโฟส?</a>

อธิบายความหมายคร่าวๆ ให้ท่านได้ทราบ รายละเอียดลึกๆ ท่านสามารถหาอ่านได้ตามเวปทั่วๆไปนะครับ

• href เป็นคุณสมบัติอย่างหนึ่งในภาษา html วึ่งจะต้องใช้กับแท๊กปิด ด้วย </a> ทุกครั้ง โดยเป็นคุณสมัติที่ใช้ในการทำลิงค์ว่าต้องการให้ไปที่ใด
• ตัว identifier จะใช้เครื่องหมาย hash mark (#) เป็นตัวนำหน้าเพื่อใช้ชี้บ่งความเป็นการเชื่อมโยงภายในโฟส
• ตัว identifier ทุกตัวจะต้อง Unique เพื่อป้องกันความสับสนและความผิดพลาดในการเชื่อมโยงและจะต้องอยู่ภายในเครื่องหมานคำพูด ("-") เท่านั้น

7. ขั้นตอนนี้ เราไปยังจุดที่เราต้องการทำการลิงค์กัน ใน HTML ก็คือจุดนี้

Point to jump

8. ณ จุดนี้ให้เราทำ Anchor text ในรูปแบบ : <a name="identifier">a heading</a> ซึ่งจะทำให้จุดแรกของเราเป็นแบบนี้

Jump pint HTML code

9. จากนั้นให้ไปที่จุดที่เราจะทำการ jump ไปยังเนื้อหาที่เราต้องการ โดยการกำหนด รุปแบบได้เป็นแบบนี้

Jump to HTML Code

10. ทำการบันทุกและ Publish Post แล้วทดสอบดูการเชื่อมโยง โดยที่หน้าตาของการเชื่อมโยงที่เสร็จเรียบร้อยแล้วจะเป็นแบบนี้

Completed Internal Post Link

ให้ทำทำแบบเดียวกันนี้กับทุกๆลิงค์ภายในที่ท่านต้องการ และสามารถทดสอบได้กับโฟสๆนี้ที่มีการทำลิงค์ภายในไว้สามจุด

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

Read More

บันทึกการ หาเงินออนไลน์ ของลุงกบ : เพิ่ม Breadcrumb ใน Blogger/Blogspot

Blogger SEO : เพิ่ม Breadcrumb ใน Blogger/Blogspot

ใส่ Breadcrumb ให้กับ Blogger/Blogspot

ห่างหายกันไปนานกับการอัพเดท blog แต่ก็ไม่ได้ไปไหนครับ วนๆ เวียนๆ อยู่แถวๆ นี้ กับแอบไปหลงไหลกับเจ้า 3D Printing Technology สั่งเครื่องมาประกอบ สั่งเส้นพลาสติกมาพิมพ์ขึ้นงานดู แล้วก็แอบเขียน blog เล็กๆ เอาไว้ แต่ก็เช่นกันครับ ไม่ได้อัพเดทอะไรสักเท่าไหร่

มาวันนี้ก็ไม่มีอะไรมากครับ แค่อยากจะมาอัพเดทให้ทุกคนได้ลองทำกันดู เพราะว่าไปเจอเวปฯ หลายเวปฯ มากที่ทำ Navigator ให้กับเวปฯ ของเขา โดยใช้เทคนิคที่เรียกว่า "Breadcrumb" ที่ที่พบเห็นโดยมากหากไม่ใช้ Wordpress ก็จะเป็นสคริป์ที่เขียนขึ้นมา แต่ว่าเราๆ นี่ ใช้ Blogger หรือ Blogspot เป็นหลัก หากเราต้องการทำ Breadcrumb เราจะทำกันได้ไหม และทำอย่างไร?

What Breadcrumb will do on my blog?

ก่อนอื่น เราทุกคนคงอยากจะทราบซินะว่า เจ้า Breadcrumb นี่เขาเอาไว้ทำอะไร แล้วหากมีไว้ใน blog ของเรา มันจะเป็นอย่างไร ส่งผลอะไรให้กับ Blog ของเราบ้าง

การที่เราใส่ Breadcrumb เปรียบเสมือน หนูน้อยหมวกแดงโรยเศษขนมปังปังไว้ตามทางเพื่อให้กลับมาบ้านได้ถูก โดยที่ Breadcrumb จะอยู่ในรูปแบบของ การนำทางโดยตัวหนังสือ หรือที่เรียกกันว่า text-base navigation. 

Breadcrumb จะแสดงให้คนที่เข้ามายัง blog ของเราทราบว่า ตอนนี้เขาอยู่ที่จุดไหนของ blog และข้อดีของการทำ breadcrumb ก็คือจะช่วยให้ผู้ที่เข้ามายัง blog ของเราไปยังหน้าอื่นๆ หรือโฟสอื่นๆของเราได้โดยง่าย

ลักษณะของการแสดง breadcrumb จะเป็นในรูปแบบง่ายๆ แบบนี้

--------------------------------------------------------------------------
Home > Label > Post Title
--------------------------------------------------------------------------

ยกตัวอย่างจากโฟสนี้ (จะแสดง label ที่เยอะเป็นผลมาจากการใส่ label ของโฟสนั่นเอง) จะได้โฟสที่มี breadcrumb ในลักษณะนี้

ตัวอย่าง Breadcrumb ของ post นี้

SEO Benefits from Breadcrumb

นอกเหนือไปจากการที่เราช่วยให้ผู่ที่อยู่ใน blog ของเราได้ไปไหนมาไหนสะดวกแล้ว Breadcrumb ยังช่วยเราในเรื่องของ SEO โดยจะเป็นตัวช่วยให้ search engine ที่เข้ามา สามารถไต่ไปยังส่วนต่างๆของ blog เรา โดยเฉพาะไปตาม Label ที่เราสร้างไว้ โดย search engine จะมองเป็น text link ตัวหนึ่ง ที่เป็นเสมือน keywords ของ blog เรานั้นเอง ภาษาที่พวกเราชอบใช้กันคือ ทำให้ "บอทไต่" ไปได้ทั่วทั้ง blog ของเรานั้นเอง

How to add Breadcrumb to Blogger or Blogspot Post

การใส่ Breadcrumb ลงใน Blogger หรือ Blogspot ไม่ไช้เป็นเรื่องที่ยากลำบากนัก หลังจากที่ได้ลองค้นหาข้อมูลตาม blog และ/หรือ เวปของต่างประเทศ พร้อมทั้งลองผิดลองถูก เพื่อทดสอบผลลัพธ์ จึงสรุปเป็นขั้นตอนให้ทุกคนได้ทำตามอย่างง่ายๆ ได้ดังนี้

1. Login เข้าสู่หน้า  blog ของท่าน หากท่านยังไม่ได้ login
2. ไปที่ Template
3. ทำการสำรองข้อมูลของ Blog ไว้ก่อนทำการแก้ไข "สำคัญเป็นอย่างยิ่ง" หากเกดความผิดพลาดขึ้นมา ท่านจะได้เอาไฟล์สำรองมาทำการแก้ไข blog ให้กลับคืนมาได้ (หากท่านไม่ทราบว่าต้องทำอย่างไร ในการ Backup/Restore blog ของท่าน โฟสคอมเม้นท์ไว้นะครับ จะได้มาเขียนให้ทุกท่านได้ทราบอีกที)
4. คลิกที่ Edit HTML เพื่อเข้าสู่หน้า Edit Template
   
5. ค้นหา ข้อความนี้จาก HTML code โดยการกด Ctrl+F แล้วค้นหา <div class='blog-posts hfeed'> และ <data:defaultAdStart/>
6. เมื่อพบแล้ว ให้ทำการก๊อปปี้ โค๊ดสีแดง ข้างล่างนี้ไปใส่ต่อจาก <div class='blog-posts hfeed'>

<b:includable id='main' var='top'>
<b:if cond='data:top.showPlusOne'>
<script expr:src='data:top.plusOneJsUrl'/gt;
</b:if>
<!-- posts -->
<div class='blog-posts hfeed'>
<!--Breadcrumb Hack - disable default status message
<b:include data='top' name='status-message'/>default status message disabled -->
<b:include data='posts' name='breadcrumb'/>
<data:defaultAdStart/>

      7.  จากนั้นให้นำ code ต่อไปนี้ ไปวางไว้ก่อน <b:includable id='main' var='top'>

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl == data:blog.url'> 

<!-- No breadcrumb on front page --> 

<b:else/> 

<b:if cond='data:blog.pageType == "item"'> 

<div class='breadcrumbs'> 

Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> 

<b:loop values='data:posts' var='post'> 

<b:if cond='data:post.labels'> 

<b:loop values='data:post.labels' var='label'> 

<b:if cond='data:label.isLast == "true"'> » <a expr:href='data:label.url' rel='tag'><data:label.name/></a> </b:if> </b:loop> 

» <span><data:post.title/></span> </b:if> </b:loop> </div> 

<b:else/> 

<b:if cond='data:blog.pageType == "archive"'> 

<div class='breadcrumbs'> 

Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> </div> <b:else/> 

<b:if cond='data:blog.pageType == "index"'> 

<div class='breadcrumbs'> 

<b:if cond='data:blog.pageName == ""'> 

Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/> 

Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »

Posts filed under <data:blog.pageName/> 

</b:if> </div> </b:if> </b:if> </b:if> 

</b:if>

</b:includable>

      8.  จากนั้นทำการ Save Template เป็นอันเสร็จสิ้นวิธีการใส่  Breadcrumb ให้กับ Blogger / Blogspot ของเราเพื่อให้คนที่เข้าเวป และช่วยในเรื่อง SEO ของ blog เราครับ

หาท่านใดมีข้อสงสัยหรือต้องการให้ช่วยเหลือในด้านใด รบกวนช่วยโฟสไว้ในคอมเมนต์ หรือที่ facbook fanpage ของเรานะครับ ไว้พบกันใหม่ครับ

Read More