วิธีทำลิงค์ 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/

2 ความคิดเห็น:

loft on December 5, 2008 at 6:58 PM said...

เดี๋ยวขอลองดูหน่อยนะครับ

ถ้ามีปัญหาจะมาถาม

มีประโยชน์ดีอันนี้กำลังหาวิธีอยู่เลย

loft on December 5, 2008 at 7:36 PM said...

ใช้ได้ครับ ไม่มีปัญหาอะไร

Post a Comment

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