วิธีติดตั้ง Floating Social Bookmark บน Blogger

สอนทำบล็อก

บทความนี้จะนำเสนอวิธีติดตั้ง Floating Social Bookmark เพื่อเป็นการเพิ่มโอกาสให้บล็อกของคุณถูก Submit สู่ Social Bookmark ได้ง่ายขึ้น

วิธีนี้ผมได้ดัดแปลงมาจากการติดตั้ง Floating Menu จาก dynamicdrive.com และการ Script การ Submit ของ Addthis.com ซึ่งก็ได้ผลลัพธ์ที่น่าสนใจทีเดียวครับ

สำหรับตัวอย่างการทำงานสามารถคลิกดูได้จากลิงค์ด้านล่าง



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

การติดตั้งไม่ซับซ้อนครับเพียง 2 ขั้นตอนเท่านั้น

ก่อนอื่นให้ Login เข้าไปที่ Blogger

เช่นเคย หากใครที่ไม่ชำนาญในการแก้ไขแม่แบบให้ Backup แม่แบบเอาไว้ก่อน และเมื่อทำการ Backup เสร็จแล้ว

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

สอนแต่งบล็อก 



1. ติดตั้ง CSS

โดยค้นหา (กด Ctrl+F) โค้ด ]]></b:skin> แล้ววางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว


สอนสร้างบล็อก



#divStayTopLeft {left:5px;position:absolute;top:15px;}
.sidetab {}
.sidetab ul {list-style-type: none;margin: 0;margin-top: 220px;margin-left: -2px;padding: 0;}
.sidetab ul li {border-bottom: 0;margin-bottom: 0;padding: 0;}
.sidetab a {background: none;display: block;height: 25px;margin-top: 0px;padding: 2px;width: 25px;}
.sidetab a:link, .navlist a:visited {color: #555;text-decoration: none;}
.sidetab a:hover {border: none;background: #e8e8e8;}
.sidetab .button a {background:none;height: 25px; width: 25px;}




2. ติดตั้ง HTML + Java Script

ต่อเนื่องจากขั้นที่ 1 ให้ค้นหา </body> แล้ววางโค้ดต่อไปนี้ไว้ก่อนหน้าโค้ดดังกล่าว


image



<DIV id='divStayTopLeft'>
<div class='sidetab'>
<ul class='navlist'>

<li class='button'><a href='http://hackublog.blogspot.com/feeds/posts/default'><img height='25' src='http://upic.me/i/ci/rss_48.png' title='Subscribe to RSS feed' width='25'/></a></li>
<a class='addthis_button_facebook'><img alt='Facebook' height='25' src='http://upic.me/i/8n/facebook_32.png' width='25'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='25' src='http://upic.me/i/k6/delicious.png' width='25'/></a>
<a class='addthis_button_email'><img alt='Email' height='25' src='http://upic.me/i/bo/emailsmall.jpg' width='25'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='25' src='http://upic.me/i/ij/favorites.png' width='25'/></a>
<a class='addthis_button_twitter'><img alt='Twitter' height='25' src='http://upic.me/i/bx/twitter_32.png' width='25'/></a>
<a class='addthis_button_google'><img alt='Google' height='25' src='http://upic.me/i/fm/gsmall.jpg' width='25'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='25' src='http://upic.me/i/0v/mdigg.png' width='25'/></a>
<a class='addthis_button_more'><img alt='More' height='25' src='http://upic.me/i/5e/wmore.png' width='25'/></a>
</ul>
</div>
</DIV>
<script src='http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a65e1d93cd75e94' type='text/javascript'/>
<script src='http://hackublog.googlecode.com/files/FloatingMenu.js' type='text/javascript'/>



แก้ไข Feed URL ให้เป็นชื่อบล็อกของคุณเองบันทึกแม่แบบ ก็จบขั้นตอนครับ

ผมก็ขอจบบทความสอนทำบล็อกอีกหนึ่งบทความเพียงเท่านี้ครับ

เครดิต Script: dynamicdrive.com + Addthis.com
Hack to Blogger : Hackublog

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

  1. great..im using this widget

  1. สุดยอดคับ เอาไปแปลง เป็นป้ายโฆษณา ได้ด้วยนะคับ ขอบคุณมากคับ

  1. ผมลองทำตามแล้ว ทำไมiconของ Email, Save to favorite, View more คลิกแล้วนิ่งเลยครับ http://HealthAtWill.blogspot.com ขอคำแนะนำด้วยครับ ขอบคุณครับ

  1. ตอนนี้ คลิกได้แล้วครับ ขอบคุณครับ

  1. ขอบคุณครับ

  1. ขอบคุณมากๆเลยคะ

  1. ตอนนี้จาวาสคริปต์ที่เคยฝากไว้กับ Google code มีปัญหาครับ ท่านใดจะติดตั้ง Gadget นี้ หรือมีปัญหาใช้งานขณะนี้ให้แก้โค้ด
    <script src='http://hackublog.googlecode.com/files/FloatingMenu.js' type='text/javascript'/>
    เป็น
    <script src='http://sites.google.com/site/hacublogcode/javascripts/FloatingMenu.txt' type='text/javascript'/>

    ก็จะใช้งานได้ตามปกติครับผม

  1. ขอบคุณมากพี่ ใช้งานได้แล้ว

    แต่ตอนนี้ comment facebook ยังนิ่งอยู่เลย facebook เป็นไรหนอ

  1. ผมอยากทำปุ่ม facbook, twitter, rss คล้ายๆ ตรงหน้าช่อง search แบบ blog นี้ และอยากให้อยู่ในตำแหน่งตามรูปนี้ http://lh4.ggpht.com/_RZKjUaCSRRE/TL4twKB9QkI/AAAAAAAADJw/ioRkKB74GVA/rss.jpg (ในกรอบสีแดง) ต้องใส่ code ตรงไหนครับ http://nun-gfx.blogspot.com/ พอดีหาบทความที่เกี่ยวเกี่ยว case นี้ไม่เจอ ขอบคุณมากครับ

  1. @ Chainarong Wanachaisong : มันใช้ CSS กับ HTML ครับ ลองศึกษาโค้ดที่พี่ใช้ดูครับ

    ตัวอย่างนี้เฉพาะปุ่ม facebook ปุ่มเดียวนะครับ ปุ่มอื่น ๆ ก็ต้องเพิ่มโค้ดลักษณะคล้ายกันนี้เข้าไปอีก ปุ่มละ 1 ชุดครับ

    /*CSS*/

    .facebook{float:right;
    width:50px;
    height:53px;
    background-image:url(http://sites.google.com/site/hackublogpicture/server/facebook.png);
    }
    .facebook a{
    float:right;display:block;
    width:50px;height:53px;
    outline:none;
    -moz-outline-style:none
    }
    .facebook a:hover{
    float:right;
    display:block;
    width:50px;
    height:53px;
    outline:none;
    background-image:url(http://sites.google.com/site/hackublogpicture/server/facebookhover.png);
    -moz-outline-style:none;
    }

    ---------------------------------------------------------------------------


    <!--HTML-->
    <div class='facebook'>
    <a href='http://www.facebook.com/Hackblog' title='ร่วมเป็น Fan ของ Hackublog บน Facebook!'/>
    </div><!--end facebook-->

    ตำแหน่งในการวาง HTML ก็วางก่อนหรือหลังจาก Search box ครับ (ถ้าหาตำแหน่งไม่เจอลองถามมาอีกทีนะครับ)

  1. ได้ล่ะฮะ ขอบคุณมากๆ ครับ ตอนนี้กำลังหา icon youtube, vimeo มาใส่เพิ่ม สนุกสนานมากๆ ครับ ^^

  1. ขอบคุณครับสำหรับสิ่งดี ๆ ที่แบ่งปันครับ

    ความรู้ ประสบการดี ๆ มีไว้แบ่งปัน

  1. โค้ดเสียเปล่าครับ มันไม่เห็นเลื่อนเลย !!

  1. @ร้าน เมาปลิ้น: อ่านวิธีแก้ใน Comments ที่ 7 ครับ

  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. ความคิดเห็นนี้ถูกผู้เขียนลบ
  1. http://homefront-game.blogspot.com/ วิจารณ์หน่อยพี่ เทคนิคของพี่ล้วนๆ ขอบคุณกับความรู้ดีๆครับ

  1. @jojo: เพิ่มโค้ด #navbar-iframe{display:none;height:0px;} ในส่วน CSS ครับจะดูดีมาก แล้้วค่อย ๆ โปรโมทวันละนิดเดี๋ยวอันดับก็มาครับ

  1. ย้ายไปข้างขวาแล้วทำไมมันไม่เลื่อนอ่ะพี่ !

  1. มันไม่เลื่อนแล้วครับ -.-

  1. ปรับขนาดได้ปะครับ

  1. นี้อะครับ http://wink-movies.blogspot.com/ ดูไห้หน่อย

  1. ม้นเล็กไปอะครับ ทำไงอะ

  1. ขอบคุณกับความรู้ดีๆครับ

  1. ทำไม ผมใส่ url http://ideahotnews.blogspot.com/feeds/posts/default ของผมแล้วพอคลิก แล้วมันไปหน้าที่มีแต่ตัวหนังสือเต็มหน้าเลยอะครับ ช่วยที

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

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

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