วิธีสร้าง jQuery Drag To Share Social เพื่อแบ่งปันภาพสวยๆ

Drag2share1

Drag2share 

ถ้าหากคุณเข้าไปเยี่ยมชมเว็บบล็อก/เว็บไซต์ที่มีเนื้อหาเกี่ยวกับการใช้รูปภาพ เช่นการท่องเที่ยว โปรโมทโรงแรม อะไรทำนองนี้ เมื่อคุณอ่านแล้วพบสถานที่หรือภาพสวยๆ คุณก็คงอยากจะบอกต่อ หรืออยากให้เพื่อนๆ ของคุณเห็นรูปภาพที่น่าประทับใจนั้นด้วย

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

บทความนี้จึงขอนำเสนอเทคนิคในการทำให้การบอกต่อ/แบ่งปันรูปภาพ จากบล็อกของคุณทำได้ง่ายขึ้น โดยใช้ jQury

สำหรับตัวอย่างของผลงานจากบทความนี้สามารถทดลองโดย Drag เมาส์รูปด้านล่าง (ต้องมาทำที่บล็อกของผมนะครับ ถ้าอ่านผ่าน feed effect จะไม่แสดง)

image



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

ผมก็ยังคงแบ่งการติดตั้งเป็น 3 ส่วนเช่นเดิมกับบทความที่ผ่านมา ซึ่งได้แก่ CSS + Java Script + HTML


ขั้นที่ 1 CSS

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

image 


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


/*Drag to share Edit by Hackublog*/
.ui-draggable { cursor:move; }
#tip { position:absolute; display:none; height:25px; padding:9px 9px 0px; color:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; background:#000; background:rgba(0,0,0,.5); }
#tip .arrow { width:0; height:0; line-height:0; border-right:8px solid #000; border-right:8px solid rgba(0,0,0,.5); border-top:8px solid transparent; border-bottom:8px solid transparent; position:absolute; left:-8px; top:9px; }
#targets { display:none; list-style-type:none;position:fixed; top:10px; z-index:99999; }
#targets li { float:left; margin-right:20px;display:block;width:60px; height:60px; background:url(http://upic.me/i/5t/iconsprite.png) no-repeat 0 0; position:relative; border:none;}
#targets li#delicious { background-position:0 -60px ;}
#targets li#facebook { background-position:0 -120px; }
#targets li span { display:block; position:absolute; bottom:-40px; white-space:pre; color:#fff; }
#overlay { background-color:#000; position:fixed;top:0; left:0; width:100%; height:100%; z-index:99997; }
#helper { background-color:#c2c2c2; position:absolute; height:25px; padding:15px 70px 10px 20px; color:#fff; font-family:Verdana; font-weight:bold; font-size:12px; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; border:2px solid #7d7d7d;overflow:hidden; }
#thumb { width:50px; height:50px; position:absolute;right:0; top:0; border-left:3px solid #7d7d7d; }
.share { font-weight:bold; position:absolute; font-size:14px; font-family:Verdana; margin-left:-38px; }



ขั้นที่ 2 Java Script

ต่อเนื่องจากขั้นที่ 1 ให้ค้นหาโค้ด </head> ต่อเลยครับ

จากนั้นวางโค้ดต่อไปนี้ไว้ก่อนหน้า

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://hackublog.googlecode.com/files/jQuery-UI-Droppable-1.7.2.js' type='text/javascript'/>


หมายเหตุขั้นที่ 2 หากคุณเคยติดตั้ง jquery1.3.2.min.js ลงไปใน Templates แล้วก็ไม่ต้องติดตั้งซ้ำอีก นั่นหมายความว่า ให้ติดตั้งโค้ดต่อไปนี้เท่านั้น

<script src='http://hackublog.googlecode.com/files/jQuery-UI-Droppable-1.7.2.js' type='text/javascript'/>

เมื่อติดตั้ง java script แล้วก็บันทึกแม่แบบครับ



ขั้นที่ 3 HTML

ขั้นสุดท้ายนี้ เราจะติดตั้ง HTML โดยใช้ Gadget

ไปที่แผงควบคุม >> รูปแบบ >> องค์ประกอบของหน้า >> เพิ่ม Gadget ชนิด HTML/จาวาสคริปต์ และวางโค้ดต่อไปนี้ลงไปและบันทึก (โดยไม่ต้องตั้งชื่อ Gadget)

<ul id="targets">
<li id="twitter"><a href="http://twitter.com"></a></li>
<li id="delicious"><a href="http://delicious.com"></a></li>
<li id="facebook"><a href="http://www.facebook.com"></a></li>
</ul>



หากติดตั้งรูปแบบมีความสวยงามไม่ผิดเพี้ยนอะไรก็เป็นอันจบขั้นตอนครับ


หมายเหตุขั้นที่ 3 สำหรับคนที่ติดตั้งแล้วมีปัญหาในการแสดงผลของ icon ทั้ง 3 แก้ได้ดังนี้

ให้ย้าย Gadget โดยการ Drag เมาส์ลาก ไปวางในตำแหน่งใต้กล่องบทความของบล็อก (ดูรูปด้านล่าง)

Drag to share


หากมีข้อสงสัยประการใดสอบถามกันได้เลยนะครับ สำหรับบทความนี้ผมก็ขอจบเพียงเท่านี้ครับ

เครดิต Script : net.tutsplus.com
Hack and Edit to Blogger : Hackublog

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

  1. ขั้น html มันบอกว่า ฟิลด์ที่จำเป็นไม่สามารถเว้นว่างได้

    ทำไงไงดี T,T

  1. คุณ kook ให้ตั้งชื่อ gadgget ไปก่อนครับ แล้วใช้วิธีของบทความนี้ซ่อนชื่อ
    http://www.hackublog.com/2010/06/problem-with-blogger-gadget-name.html

    ปล.ระบบ ของ Blogger เพิ่มมีการเปลี่ยนแปลงครับ

  1. อยากนำมาใช้กับหน้า web ตัวเองบ้าง แนะนำได้ไหมครับ
    niponjon@gmail.com

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

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

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