วิธีติดตั้ง Animate Social Bookmark และ Email Subscribe สวย ๆ ในบทความ

สอนทำบล็อก วิธีทำ blogger รูปแบบของ Socail Bookmark นั้นมีอยู่หลายรูปแบบ ในส่วนที่ผมได้นำเสนอไปแล้วนั้นมี 2 รูปแบบคือ  วิธี ใส่ Social bookmark icon สวยๆ ใต้ทุกบทความ และ Floating Social Bookmark บน Blogger

สำหรับบทความนี้ผมจึงทดลองให้ jQuery กับสคริปต์ที่ทำให้เกิดการหมุนที่พัฒนาโดย tutorialzine.com แล้วเอามาปรับแต่งให้รูปแบบของ Socail Bookmark ทำให้ดูแล้วน่าSubmit และน่าคลิกมากขึ้น

ตัวอย่างการทำงาน Animate Social Bookmark
http://hackudesign.blogspot.com/ 

นอกจากนี้ผมยังได้ได้เพิ่มเติมในส่วนที่เป็น Email SubScribe ของ Feedburner เข้ามาด้วยเพื่อให้การติดตั้ง และการใช้พื้นที่คุ้มค่ามากยิ่งขึ้น สำหรับตัวอย่างการแสดงผลสามารถดูได้จากด้านล่างของบทความนี้ ซึ่งถ้าคุณดูแล้วชอบก็ลงมือสร้างกันเลยครับ


วิธีติดตั้ง Socail Bookmark และ Email SubScribe

ขั้นที่ 1 กำหนด Style ด้วย CSS โดย
Log in เข้าไปที่ blogger.com >> รูปแบบ(การออกแบบ) >> แก้ไข HTML >> ขยายแม่แบบเครื่องมือ

วิธีทำ blogspot

จากนั้นค้นหาโค้ด ]]></b:skin> แล้ววางโค้ดต่อไปนี้ลงไปก่อนหน้าโค้ดดังกล่าว

/* Rotate Social submit and Email SubScribe hacked by http://www.hackublog.com*/     
#share{/* สไตล์ของกรอบใหญ่สุด */      
width:500px;      
background:#ececec;      
height:140px;      
margin:10px 60px 10px 60px;      
overflow:hidden;      
-moz-border-radius:12px;      
-webkit-border-radius:12px;      
border-radius:12px;      
border:2px solid #E66908;
}      
#subscribe{/* Email SubScribe ทางขวามือ*/  
background:url(http://upic.me/i/f4/subscript.png) 15px 105px no-repeat;      
float:left;      
height:140px;      
width:220px;      
padding: 20px 0 0 10px;      
} 
#subscribe p,#subscribe p img{text-align:center;}    
#stage{/* พื้นที่ animation ทางว้ายมือ */      
position:relative;      
background:url(http://upic.me/i/aw/scbmbg.png) 10px 100px no-repeat ;      
border-right:1px solid #DDDDDD;      
width:250px;      
height:140px;      
overflow:hidden;      
float:left;      
border-bottom-left-radius:12px;      
border-top-left-radius:12px;      
-moz-border-radius-bottomleft:12px;      
-moz-border-radius-topleft:12px;      
-webkit-border-bottom-left-radius:12px;      
-webkit-border-top-left-radius:12px;      
}      
.btn{/* กำหนดพื้นที่ของปุ่ม share */      
background-color:white;      
height:90px;      
left:0;      
top:0;      
width:60px;      
position:relative;      
margin:20px 0 0 10px;      
float:left;      
}      
.bcontent{/* ตำแหน่งใน .btn container */      
position:absolute;      
top:auto;      
bottom:40px;      
left:0;      
}      
/* กำหนดให้พื้นหลังของ share button ว่าง */      
.shareicon{background:url() no-repeat -4px bottom;}

หากวางโค้ดแล้วไม่พอดีกับแม่แบบให้ปรับแต่งค่า margin:10px 60px 10px 60px; ให้ลดลงเช่นอาจจะปรับเป็น margin:10px 15px 10px 15px; เป็นต้น

ขั้นที่ 2 ต่อเนื่องจากขั้นที่ 1 ขั้นต่อมาติดตั้งจาวาสคริปต์เพื่อให้ Share button เกิดการหมุน ทำโดย
ค้นหาโค้ด </head> แล้ววางโค้ดต่อไปนี้ลงไปก่อนหน้าโค้ดดังกล่าว
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type="text/javascript"/>     
<script src='http://hackublog.googlecode.com/files/rotating_social.js' type='text/javascript'/>


ขั้นที่ 3 ต่อเนื่องจากขั้นที่ 2 ระบุตำแหน่งด้วยและการแสดงผลด้วย HTML โดย
ค้นหาโค้ด <data:post.body/> แล้ววางโค้ดต่อไปนี้ถัดจากโค้ดดังกล่าว

<div id='share'>     
<div id='stage'>      
<div class='btn shareicon'><div class='bcontent'>      
<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://upic.me/i/t0/delicious.png'/></a>      
</div></div>      
<div class='btn shareicon'><div class='bcontent'>      
<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://upic.me/i/cg/zdigg.png'/></a>      
</div></div>      
<div class='btn shareicon'><div class='bcontent'>      
<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://upic.me/i/4e/reddit.png' /></a>      
</div></div>      
<div class='btn shareicon'><div class='bcontent'>      
<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://upic.me/i/cs/yahoo.png' /></a>      
</div></div>      
<div class='btn shareicon'><div class='bcontent'>      
<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://upic.me/i/7e/facebook.png' /></a>      
</div></div>      
<div class='btn shareicon'><div class='bcontent'>      
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitthis' border='0' class='icon-action' src='http://upic.me/i/94/twitter.png' /></a>      
</div></div>      
<div class='btn shareicon'><div class='bcontent'>      
<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://upic.me/i/1i/stumbleupon.png' /></a>      
</div></div>      
<div class='btn shareicon'><div class='bcontent'>      
<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://upic.me/i/9w/technorati.png' /></a>      
</div></div>      
</div>      
<div id='subscribe'>      
<div align='center'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Hackublog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:none; padding: 3px; text-align: center;' target='popupwindow'><p><span style='font-size: 8px;'><img border='0' src='http://upic.me/i/96/enteremail.gif'/></span></p><p><input name='email' style='width: 140px;' type='text'/></p><input name='uri' type='hidden' value='Hackublog'/><input name='loc' type='hidden' value='en_US'/><input class='feedburner_submit' name='submit' src='http://upic.me/i/k8/submit.gif' title='submit your email' type='image'/></form></div>      
</div>      
</div>

การปรับค่า : คุณจะต้องทำการเปลี่ยนค่า Hackublog เป็นชื่อ Feeds ของคุณที่ได้ลงทะเบียนเอาไว้กับ Feedburner(ดูรูป)  ซึ่งหากคุณยังไม่ได้สมัครใช้ Feedburner ก็ต้องกลับไปอ่านบทความ การสมัครใช้ FeedBurner เสียก่อน

สอนแต่งบล็อก และวิธีสร้างบล็อก

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

หมายเหตุ URL สีม่วง ในบทความนี้รูปที่แสดงผล ซึ่งถ้าหากไม่ต้องการใช้ร่วมกับคนอื่น ๆ หรือป้องกกันการโดนลบรูป ให้ดาวน์โหลดเป็น backup ได้ที่
http://www.mediafire.com/file/imij1mnjch4/Hackublog_Submit_IMG.rar
สุดท้ายหวังว่าจะชอบบทความนี้กันนะครับ และถ้าคิดว่าบทความนี้น่าสนใจขอให้ช่วยบอกต่อด้วยนะครับ ขอบคุณครับ

เครดิตสคริปต์ : tutorialzine.com
Hack to Blogger : www.hackublog.com

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

  1. ไม่เคยจะเบื่อกับเว็บ นี้จริงๆ เข้ามาเจอแต่บทความน่าสนใจทั้งนั้น

    ขอบคุณครับ ^^~

  1. @Hasekawa Masato : ขอบคุณครับ รู้ว่าเขียนแล้วมีคนอ่านก็มีกำลังใจครับ

  1. ขอบคุณพี่มากเลยนะคับอุสาห์เข้าไปตอบถึงในบล็อกผม.. ช่วยผมตั้ง 2 รอบ เก่งจิงๆๆ จะติดตามบล็อกพี่ตลอดไปนะ

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

  1. @ TEMP28cFILM : ยินดีครับ ค่อย ๆ ทำไปเรื่อย ๆ ขยันอ่าน เดี๋ยวก็เก่งครับ

  1. ขอบมันไม่ชิดกับขอบของบทความอ่ะครับ รบกวนดูให้หน่อยครับขอบคุณมากครับ http://hero108-cafe.blogspot.com/ แก้ไขอย่างไรดีช่วยด้วยครับ

  1. @ JsMaster : แก้ไขค่า margin:10px 60px 10px 60px; เป็น margin:10px 0px 10px 0px; ครับ แต่ก็ยังอาจจะตกขอบอยู่บ้างเพราะพื้นที่ ๆ ต้องการในการติดตั้งต้องกว้างอย่างน้อย 500 px แต่พื้นที่บทความของคุณนั้นกว้างเพียง 498px

    ดังนั้นให้แก้โค้ดในขั้นที่ 1 เพิ่มด้วยดังนี้

    #share{/* สไตล์ของกรอบใหญ่สุด */
    width:500px;
    เป็น
    #share{/* สไตล์ของกรอบใหญ่สุด */
    width:470px;

    และแก้โค้ด
    #subscribe{/* Email SubScribe ทางขวามือ*/
    background:url(http://upic.me/i/f4/subscript.png) 15px 105px no-repeat;
    float:left;
    height:140px;
    width:220px;

    เป็น
    #subscribe{/* Email SubScribe ทางขวามือ*/
    background:url(http://upic.me/i/f4/subscript.png) 15px 105px no-repeat;
    float:left;
    height:140px;
    width:210px;

    และแก้โค้ด
    #stage{/* พื้นที่ animation ทางว้ายมือ */
    position:relative;
    background:url(http://upic.me/i/aw/scbmbg.png) 10px 100px no-repeat ;
    border-right:1px solid #DDDDDD;
    width:250px;

    ้เป็น
    #stage{/* พื้นที่ animation ทางว้ายมือ */
    position:relative;
    background:url(http://upic.me/i/aw/scbmbg.png) 10px 100px no-repeat ;
    border-right:1px solid #DDDDDD;
    width:240px;

    *************************************************************

  1. ขอบคุณครับ ได้แล้วครับ แต่ ตรง submit ยังตกลงมาอยู่พอมีวิธีแก้ใหมครับ

  1. รบกวนอีกครั้ง มีวิธีปรับ Enter your Email และกล่องใส่อีเมล ตามด้วย Submit ให้จัดแนวเรียงลำดับลงมาให้มันดูสวยๆ ใหมครับ ผมพยามลองหาที่ปรับแล้วไม่เจอครับ รบกวนอีกครั้งครับ

  1. @ JsMaster : ที่มันมีการตกขอบแบบนี้เพราะ มีการสืบทอด Style จากการกำหนดบางอย่าง ใน Template ที่คุณใช้ ซึ่งการไล่ดูโค้ดที่กำหนดเอาไว้แล้วต้องใช้เวลามาก ผมจึงเสนอวิธีแก้แบบนี้แล้วกันนะครับ ถ้าไม่ได้ยังไงก็ลองดาวน์โหลดแม่แบบแล้วคุยใน Forums กันอีกทีครับ

    แก้ค่า(ในขั้นที่3ของบทความนี้)
    <div id='share'>

    เป็น
    <div style='clear:both;'></div>
    <div id='share'>

  1. ผมเจอปัญหาคับบ....
    ถ้าใส่โค๊ดส่วนนี้ลงในธีม...และ้เซฟให้ทำงาน

    ปรากฏว่าส่่วน วิธี สร้าง Feature Content ใน Blogger ด้วย jQuery ไม่ทำงานคับบ ภาพต่างๆ 1-4 ไม่ทำงาน
    อยู่นิ่งในภาพแรกอย่างเดียว คลิกก็ไม่ได้คับ

  1. @ S.laecher :
    1. ให้แทนที่ โค้ดเดิมในแม่แบบคือ
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'> </script>

    ด้วยโค้ด
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'> </script>

    2. การติดตั้งโค้ดขั้นที่ 2 ของบทความนี้ให้ติดตั้งเฉพาะ

    <script src='http://hackublog.googlecode.com/files/rotating_social.js' type='text/javascript'/>

    อย่างเดียว นอกนั้นทำเหมือนเดิมครับทุกขั้นตอนครับ

  1. ตัว Subscript กับตัว submit มันซ้อนกันค่ะ อยากให้ตัว Subscript ลงมาอยู่ใต้ตัว submit เหมือนแบบตัวอย่างค่ะ ทำยังไงค่ะ ขอบคุณมากค่ะ สำหรับคำตอบล่วงหน้า

  1. @ Tour-mydreams : ขอดูที่ติดตั้งไปแล้วได้ป่าวครับ เพราะต้องปรับแต่งโค้ดให้พอดีกับแม่แบบที่คุณใช้ด้วยครับ หมายถึงขอ URL ของบล็อกที่ติดตั้งนะครับ

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

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

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