วิธีใส่ Social bookmark icon สวยๆ ใต้ทุกบทความ

social_bookmark

สวัสดีเพื่อนสมาชิกที่ได้ติดตามของผมมาตลอด หายไป 3-4 วัน ครับเพราะว่าติดภาระกิจต้องไปต่างจังหวัด พอกลับมาก็ว่างมาเขียนบล็อกได้ต่อครับ

บทความนี้ก็เป็นการสอนให้ใส่ Social bookmark ไว้ที่ตำแหน่งใต้บทความทุกๆ บทความ ตามคำขอของคุณ ton (และผู้ที่สนใจท่านอื่นครับ)

shrare icon2

การใส่ Social bookmark ให้กับบทความของเรามีข้อดีคือ

1. ช่วยให้เราโปรโมทบทความของเราไปยัง Social Bookmark ได้ง่ายขึ้นเพียงแค่คลิกเท่านั้น
2. ช่วยให้ผู้อ่านเก็บเรื่องของเราไว้อ่านภายหลัง
3. ผู้อ่านจะช่วยเผยแพร่ หรือส่งต่อบทความของเราไปสู่เพื่อน ๆ หรือสังคมออนไลน์ไ้ง่ายขึ้น

ข้อดีที่กล่าวมานี้เป็นข้อเด่นชัดที่เป็นจุดประสงค์โดยตรงของ Social Bookmark แต่ก็ยังมีข้อดีอื่น ๆ ที่ผมไม่ได้กล่าวถึงในที่นี้อีกมาก และในที่นี้ผมจะกล่าวถึงการติดตั้งเฉพาะ Social Bookmark ที่ได้รับความนิยมมาก เท่านั้น ซึ่งได้แก่ stumbleupon technorati delicious digg reddit facebook yahoo และ twitter

ขั้นตอนการติดตั้ง

ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> คลิกขยายแม่แบบเครื่องมือ  >>

กด Ctrl+F เพื่อค้นหาโค้ด <data:post.body/> จากนั้นให้วางโค้ดต่อไปนี้ถัดจากโค้ดดังกล่าว


<!--SOCIAL-BOOKMARKING-ICONS-STARTS-->
<div align='center'>
<span class='post-icons'>
<a expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumble This'><img alt='Stumble This' border='0' class='icon-action' src='http://4.bp.blogspot.com/_vLeiVavkV_M/Sn0GJ5NxMRI/AAAAAAAABgc/zaraJzCuyXI/s200/stumbleupon.png'/></a>

<a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Fav This With Technorati'><img alt='Fav This With Technorati' border='0' class='icon-action' src='http://4.bp.blogspot.com/_vLeiVavkV_M/Sn0GRQk71JI/AAAAAAAABgk/AT5wC4ZYB8g/s200/technorati.png'/></a>

<a expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Del.icio.us'><img alt='Add To Del.icio.us' border='0' class='icon-action' src='http://4.bp.blogspot.com/_vLeiVavkV_M/Sn0FmrXO-vI/AAAAAAAABf0/gK0oKdOJzMM/s200/delicious.png'/></a>

<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg This'><img alt='Digg This' border='0' class='icon-action' src='http://4.bp.blogspot.com/_vLeiVavkV_M/Sn0FwVnXcQI/AAAAAAAABf8/8t8jUbCOQN0/s200/digg.png'/></a>

<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Reddit'><img alt='Add To Reddit' border='0' class='icon-action' src='http://3.bp.blogspot.com/_vLeiVavkV_M/Sn0GDJUzotI/AAAAAAAABgU/qAA0KjdLgF8/s200/reddit.png'/></a>

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Facebook'><img alt='Add To Facebook' border='0' class='icon-action' src='http://1.bp.blogspot.com/_vLeiVavkV_M/Sn0F1uQ7P_I/AAAAAAAABgE/zESf9tLZOtw/s200/facebook.png'/></a>

<a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Yahoo'><img alt='Add To Yahoo' border='0' class='icon-action' src='http://2.bp.blogspot.com/_vLeiVavkV_M/Sn0GdCPWuUI/AAAAAAAABg0/-tjcrdMnRkA/s200/yahoo.png'/></a>

<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Add To Yahoo' border='0' class='icon-action' src='http://upic.me/i/h2/twitter.png'/></a></span>
</div>




วิธีปรับแต่ง

1. โค้ดสีแดงคือโค้ดของรุปขนาด 24 x 24  ถ้าต้องการให้ icon ใหญ่/เล็ก กว่านี้ก็สามารถเปลี่ยนแปลงเป็นรูปของคุณเองได้ตามใจชอบครับ

2. การเว้นบรรทัดจะทำให้เกิดระยะห่างระหว่างรูป (icon) ดังนั้นถ้าต้องการให้รูปติดกันก็ลบช่องว่างระหว่างบรรทัดออกไปครับ

3. ตำแหน่งในการวางอาจเปลี่ยนเป็นวางถัดจากโค้ดต่อไปนี้ก็ได้

<p class='post-footer-line post-footer-line-1'>
หรือ
<div class='post-footer-line post-footer-line-1'>
หรือ
<div class='post-footer-line post-footer-line-3'>
หรือ
<p><data:post.body/></p>
ทั้งนี้ขึ้นอยู่กับว่าโค้ดของ templates ที่คุณใช้มีลักษณะอย่างไร และหากมีข้อสงสัยก็สามารถสอบถามเพิ่มเติมได้เลยครับ

ตอนนี้มีความคิดเห็น : 12 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ขอบคุณครับ.....ดีจิงๆๆ

  1. ถ้าอยากใส่เป็นรูปภาพที่เราทำขึ้นมาเองและวางในลักษณะเดียวกันนี้ต้องทำยังไงครับ

  1. @ JOINMART :
    1. ต้องรู้จัก HTML ที่กำหนดรูปภาพเสียก่อน ศึกษาจาก http://www.w3schools.com/html/html_images.asp
    2. สร้างภาพแล้วฝากรูปไว้ที่ FreeHost เช่น http://upic.me
    3. เอาโค้ดรูปภาพวางในตำแหน่งเดียวกับที่สอนในบทความนี้ครับ

    ปล.ผมไม่เข้าใจสิ่งที่คุณถามเท่าไร ว่าจะวางภาพอย่างเดียวหรือ จะเอาภาพมาแทนภาพเดิม

  1. จะวางภาพแทรกลิ้งให้ขึ้นท้ายบทความทุกบทน่ะครับ

  1. @ JOINMART : ทำตาม 3 ข้อ ที่ได้แนะนำไปนะครับ แล้ววางตำแหน่งในแม่แบบให้ตรงตำแหน่งที่สอนไว้ในบทความนี้ครับ
    ปล. อย่าลืมขยายแม่แบบเครื่องมือเพื่อหาโค้ดนะครับ และถ้าต้องการความช่วยเหลือที่อาจไม่เกี่ยวกับบทความเชิญได้ที่ Forum ครับ >> http://www.hackublog.com/p/hackublog-forums.html

  1. ลองทำแล้วนะคะ .. ขอบคุณข้อมูลเกี่ยวกับการใส่ Social bookmark ให้กับบทความด้วยคะ

  1. ขอบคุณมากๆครับ

  1. ผมหาโค้ดตัวนี้ไม่เจอเขียนลงไปเองเลยได้มัยอะครับ

  1. @Joe: ในแม่แบบของ Blogger รุ่นใหม่ ๆ ก็จะมี Bookmark icon ให้อยู่แล้วครับคงไม่ต้องเติม แต่ถ้าจะเติมจริง ๆ ทิ้ง URL ของ Blog เอาไว้เดี๋ยวผมจะอธิบายให้ครับ

  1. ขอบคุณมากๆครับ

  1. มันไม่แสดงค่ะ

  1. เยี่ยมเลยครับ
    เห็นหลายๆ คนมีก็อยากทำบ้าง
    เพิ่งมาเจอบทความดีๆ ที่นี่เอง

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel