เติมไอคอนแสดงอารมณ์ใน comment box |blogspot

Written By Aucharaporn Theemcle on วันอังคารที่ 13 กรกฎาคม พ.ศ. 2553 | 08:58

ช่วงนี้ได้มีโอกาสตอบ comment เพื่อน ๆ บ่อยขึ้น  ดีใจจังอย่างน้อยก็รู้ว่าไม่ได้เขียนเองอ่านเอง อยู่คนเดียว    โดยส่วนตัวดิฉันมักมีนิสัยทะลึ่งตึงตังอยู่แล้ว  เขียนตอบ comment เฉย ๆ มันก็ยังไง ยังไงอยู่น๊า

ไอคอนแสดงอามรณ์ในบล็อก

ถ้าเกิดมีไอคอนแสดงอารมณ์เพิ่มเติมเข้าไปใน comment box ด้วยก็คงจะดี  อีกอย่างถ้าเราเข้าไปที่บล็อกไหนมี ไอคอนสวย ๆ เราก็คงอยากจะแสดงความคิดเห็นด้วย    จึงได้ไปค้นมาเรื่องนี้มา  ชอบใจเอาที่ ไอคอนแสดงอารณ์ของ yahoo  Icon ค่ะ ไม่มีไอคอนอะไรแรง ๆ มีแต่น่ารัก ๆ เผื่อว่าเพื่อนบางท่านเข้ามาไม่ชอบใจ ใช้ไอคอนแรง ๆ ประเภทยกเท้าถีบเข้าให้  โหคงไม่ประทับใจกันสักเท่าไหร่  แบบว่าเจ้าของบล็อกต้องป้องกันตัวนิดหนึ่งนะ     เอาหล่ะค่ะมาลองเพิ่มเติม ไอคอนแสดงอารณ์กันดูหน่อยไหม ชอบใจไม่ชอบใจเราก็สามารถปรับแต่งได้นี่นาแม่นบ๊อ….

ขั้นแรกในการเติมไอคอนแสดงอารมณ์ใน comment box  ให้เพื่อน ๆ login เข้าที่ blogger >การตั้งค่า >การออกแบบ>แก้ไข html> คลิ๊กขยายเทมเพลตวิตเจ็ต

คลิ๊ก ctrl+f หา code

<b:if cond='data:post.embedCommentForm'> และ
<b:include data='post' name='comment-form'/>

เมื่อเจอแล้วให้ copy code ด้านล่างนี้วางไว้ระหว่าง code   ดังกล่าว

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>

ขั้นตอนถัดไป ให้เพื่อน ๆ ค้นหา code

</body>

เมื่อหาเจอแล้วให้ นำ code ด้านล่างนี้วางไว้ก่อน code ดังกล่าว

<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/smiley.js' type='text/javascript'/><noscript><a href="http://bloggerstop.net" target="_blank"><span style="font-size: x-small;">Add Smilies</span></a></noscript>

ดูตัวอย่าง ชวนเพื่อนเขียนบล็อก

ไอคอนแสดงอารณ์ใน comment box หลังจากนั้นลองบันทึกและแสดงผลดูนะคะ   อย่าลืมนะคะ การ comment หรือแสดงความคิดเห็นก็เป็นการโปรโมทบล็อกเราด้วยนะคะ  

ขอขอบคุณข้อมูลจาก blogerstop.net

51 comments:

zJaMeSz กล่าวว่า...

แล้วคอมเม้นยังงัยให้ขึ้นไอค่อนอ่ะครับ
ใช้ไม่เป็น :p

zJaMeSz
Rich@Home บ้านความรู้เพื่อการหาเงินออนไลน์

meesubandmeesuk กล่าวว่า...

:)) เคยสงสัยเหมือนกันจ๊ะ สังเกตดูนะข้าง ๆ ไอคอนมันจะมีสัญลักษณ์สีขาวๆ จาง ๆ ไว้ ให้พิมพ์ตาม เช่น สัญลักษณ์ : : ; มันจะติด ๆ กันอยู่ลองดูนะคะ

sizuka กล่าวว่า...

:))ลองเอาไปใส่ในblogตัวเองแล้วค่ะ แต่ยังไม่เคยมีใครมาเม้นเลย555
มือใหม่หัดทำค่ำ รู้สึกจะเป็นขาประจำของblogนี้แล้ว ขอบคุณสำหรับความรู้ต่างๆนะคะ

Meesubandmeesuk กล่าวว่า...

คุณ sizuka คะ ดิฉันเองเคยเป็นเหมือนคุณเมื่อปีที่แล้ว สมัยที่หัดเขียนบล็อกใหม่ ๆ จะรู้สืกตื่นเต้นมาก ๆถ้ามีใครสักคนผ่านมาทักทาย หรือแม้แต่เค้ามาแปะโฆษณาก็ยังว่ารู้สึกตื่นเต้น อย่าพึ่งท้อซะก่อนค่อย ๆ เรียนรู้ไปเรื่อย ๆ มันต้องอาศัยเวลาค่ะ ที่ชวนเพื่อนเขียนบล็อกแห่งนี้ กว่าจะมีเพื่อน ๆ มาร่วมแจมด้วย ก็เกือบปีเชียวหล่ะ สู้ ๆ ค่ะ :X

sizuka กล่าวว่า...

ขอบคุณที่ให้กำลังใจนะคะ^^
จะสู้ๆค่ะ สักวันต้องมีคนเข้ามาดูของเราบ้าง:x

meesubandmeesuk กล่าวว่า...

เอาใจช่วยค่ะ ดิฉันมีคติประจำตัวไว้ ไม่รู้ว่าเป็นผลงานของใคร แต่จะพิมพ์แปะไว้หน้าโต๊ะทำงาน นั่งเมื่อไหร่ก็จะเห็นประโยคนี้ค่ะ " ท้อไยเมื่อใจยังเต้น เมื่อเส้นเลือดแรงแดงฉาน ความหวังยังเข้มเต็มนาน กล้าหาญเถิดสูสู้ไป "

ไม่ระบุชื่อ กล่าวว่า...

ดูซิขนาดจะเม้นท์ยังทำไม่ได้ลองใหม่แล้วกันเนอะ
กำลังหาอยู่พอดีเลย เป็นมือใหม่หัดทำblog อยู่ค่ะ รู้สึกท้อๆไม่ได้อย่างใจเลย ถ้ามีเวลาช่วยแวะไปดูให้หน่อยนะค่ะ smartmomsnkids.blogspot.com คงต้องเข้ามาศึกษาอีกเยอะเฮ้อ!

Meesubandmeesuk กล่าวว่า...

แวะไปทักทายแล้วนะคะ smartmomsnkids.blogspot.com เวลาไม่กี่เดือน ทำได้ขนาดนี้ก็เยี่ยมแล้วหล่ะค่ะ

naro กล่าวว่า...

มีคำถามครับคุณครู แบบว่าผมอยากได้ ไอคอนแสดงอารมแบบอื่นได้ไหมครับเอาน่ารักกว่านี้อะครับ

MeesubandMeesuk กล่าวว่า...

ก่อนที่จะเขียนเรื่องนี้ก็ไปค้นมาพอสมควรนะ เท่าที่เห็นจะมีอยู่ 2 แบบที่พี่ค้นเจอ แบบนี้เรียกว่า yahoo icon ส่วนอีกแบบ skype จริง ๆ หลักการเค้าก็แค่เพิ่ม javascipt กับ link ของ icon แค่นั้น ถ้าเกิดเก่งด้าน javascript จะลองเขียนเอง แล้วหาลิงค์ icon มา ก็คงไม่ยาก แต่พี่ไม่เก่งขนาดนั้น อีกแบบลองดูนะว่าน่ารัก ถูกใจวัยรุ่นอย่างเธอหรือเปล่า แปลงไฟล์ไหน ๆ วางใจ Format factory วิธีการศึกษา code ง่าย ๆ ใช้ firefox drag ลากไปบริเวณนั้นคลิ๊กขวา เลือก ดูโค้ดที่เลือก แค่นั้นก็ทราบ code แล้วหล่ะ

นาย จักรกฤษณ์ เปรมนิยา กล่าวว่า...

ผมไม่เห็นได้เลยคับ0861722371

MeesubandMeesuk กล่าวว่า...

สวัสดีค่ะคุณจักรกฤษณ์ เปรมนิยา :-O อธิบายให้ละเอียดสักนิดนะคะ บอก url บล็อกดีกว่า เบอร์โทรดีไหมเอ่ย :))

asone555 กล่าวว่า...

ขอบคุณมากครับที่เผยแพร่คำสอน รบกวนสอนวิธีเอา youtube ออกจาก blog ด้วยครับ

MeesubandMeesuk กล่าวว่า...

:)) สวัสดีค่ะคุณ asone555 ว่าแต่ว่าตอนเอา youtube แปะในบล็อกคุณ asone555 ทำเองไหมคะ เราอยากเอา youtube ออก ก็ไปแก้ไขบทความเสร็จแล้วก็ลบออก เท่านั้นเองค่ะ ลองแอบไปดู proflie คุณ asone555 มา น่าจะเริ่มต้นสร้างบล็อก ดิฉันแนะนำให้ลองดาวน์โหลด window live writer มาช่วยงานบล็อกนะคะ ทำให้เขียนบทความแต่งบทความได้ง่าย ขึ้น ดูตามลิงค์นี้ค่ะ เครื่องมือเขียนบล็อก offline

tonghealth กล่าวว่า...

;;) ได้ความรู้มากครับ ผมอยากติดตามมากเลยครับ

poetshev กล่าวว่า...

http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif ขอบคุณครับ

poetshev กล่าวว่า...

;))

meesubandmeesuk กล่าวว่า...

สวัสดีค่ะคุณ poetshev ขอบคุณที่แวะเวียนมานะคะ

Cartercho กล่าวว่า...

:x Thanks

ไม่ระบุชื่อ กล่าวว่า...

:))

xnamtarnx กล่าวว่า...

thankz ka

MeesubandMeesuk กล่าวว่า...

ยินดีค่ะ คุณ xnamtarnx

Teacher Potchara กล่าวว่า...

:))

MeesubandMeesuk กล่าวว่า...

สวัสดีค่ะคุณ Teacher potchara วันไหนมีเพื่อนครูแวะมาทักทาย ดีใจจริง ๆ ค่ะ แว้บไปที่บล็อกมา เขียนการ์ตูนเก่งนะคะ จบด้านสารสนเทศคอมพิวเตอร์มาด้วย ดิฉันยินดีน้อมรับคำแนะนำค่ะ

ไม่ระบุชื่อ กล่าวว่า...

:)

เดธไซน์ กล่าวว่า...

ขอบคุณครับ :X

kindy กล่าวว่า...

ขอบคุณนะคะ เพิ่งหัดทำ blog แต่ไม่ค่อยมีสาระเท่าไหร่ เน้นบันเทิงอย่างเดียว ตอนนี้เริ่มมีสีสันขึ้นมานิดนึงแล้ว เย้.. :D

MeesubandMeesuk กล่าวว่า...

คุณ Kindy คะ ค่อย ๆ ทำไปค่ะ สักวันต้องดีขึ้นแน่ ๆ

SAsi กล่าวว่า...

คุณคะ
ขอบคุณมากค่ะ ได้ผลดีเลย เพียงแต่กรอบใส่ไอคอนยาวไปนิดค่ะ จะปรับยังไงให้สั้นลงคะ ความยาวซัก 300 รบกวนหน่อยนะคะ ขอบคุณที่ให้แบ่งปันความรู้ค่ะ

meesubandmeesuk กล่าวว่า...

สวัสดีวันปีใหม่ไทยค่ะ คุณ SAsi ความยาวของกรอบไอคอนนั้น ให้คุณ Sasi สังเกตตรงโค้ด ทีเติมในขั้นตอนแรก บรรดทัดแรก ๆ นะคะ จะมีโค้ดว่า width: 369; โค้ดตรงนี้หล่ะค่ะ คุณความกว้างของกรอบไอคอนให้คุณเปลี่ยนจาก 369 เป็น 300 ได้เลย ลองดูนะคะ

SAsi กล่าวว่า...

ขอบคุณมากนะคะ ใจดีจริงๆ ;;)

meesubandmeesuk กล่าวว่า...

ยินดีค่ะคุณ SAsi :))

nid กล่าวว่า...

ขอบคุณมากค่ะ :))

meesubandmeesuk กล่าวว่า...

ยินดีนะคะคุณ nid แวะทักทายกันใหม่นะคะ :)

AniaRovana กล่าวว่า...

ขอบคุณมากเลยค่า อยากทราบว่าถ้าเราต้องการเปลี่ยนรูปไอคอนเอง เราจะสามารถทำได้ไหมคะ :)

meesubandmeesuk กล่าวว่า...

คุณ AniaRovana ดิฉันไม่เคยลองเปลี่ยน แต่คิดว่าเปลี่ยนได้ค่ะ โดยเมื่อเราสร้าง icon ที่ต้องการเสร็จแล้วอัพโหลดฝากไว้ที่ host ไหนสักแหน่งแล้วเปลี่ยน url ของ ไอคอน ตรงที่มี src='url ของไอคอน' ความกว้าง='18' เปลี่ยน url แล้วใส่ขนาดให้เหมาะสมค่ะ

AniaRovana กล่าวว่า...

เปลี่ยนได้แล้วค่ะ ขอบคุณมากนะคะ :)

meesubandmeesuk กล่าวว่า...

ยินดีด้วยค่ะ คุณ AniaRovana ยินดีช่วยแก้ปัญหาเรื่องเวบบล็อกนะคะ (ถ้าทำได้) :))

gigi rose กล่าวว่า...

ทําได้แล้ว ขอบคุณค่ะ

pakamas กล่าวว่า...

สวัสดีค่ะ

ขอบคุณมากเลยนะค่ะ เพราะหามานานมากๆๆๆๆๆๆแล้ว

เพิ่งหักสร้างบล็อก ยังไงก็แวะไปชมบ้านนะค่ะ

ไม่ทราบว่าโพสลงในนี้ได้หรือป่าวยังไม่โพสแล้วกันนะค่ะ :))

Meesubandmeesuk กล่าวว่า...

แนะนำบล็อกที่นี่ได้ค่ะ คุณ pakamas เผื่อมีเพื่อนคนใดเข้าไปเยี่ยมชมค่ะ

Natar Nikarus กล่าวว่า...

ขอบคุณครับ แต่ว่าโค้ดไม่มีปัญหาใส่ไปยังเงียบเหมือนเดิมครับ
ไม่มีอะไรขึ้นมาอ่ะครับ(ตอนใส่มีโค้ดกั้นไว้ประมาณชุดหนึ่งระหว่างสองตัวด้านบนครับ)
http://dinoplayprogramandgame.blogspot.com/2012/04/blog-post.html

meesubandmeesuk กล่าวว่า...

อืม...คณ Natar คะ สังเกตว่า โค้ด จะมี 2 แห่งในเวบบล็อกค่ะ เลือกเอา code ที่ติดกับ มันจะอยู่ใกล้ ๆ กันไม่มี code แทรกแค่บรรทัดเดียวค่ะ แล้วทดลองเปลี่ยน code javascript ในขั้นตอนที่ 2 ใหม่ด้วยนะคะ ดิฉันทดลองแล้วได้ผลค่ะ เพราะแหล่งฝากไฟล์ javascript ที่เดิมเปลี่ยนแล้วจ้า ได้ผลอย่างไร แวะทักทายแจ้งข่าวด้วยนะคะ

Natar Nikarus กล่าวว่า...

ได้แล้วครับแต่น้าตาโค้ดมันเป็น
< b:if cond='data:post.allowNewComments' >
ครับ

meesubandmeesuk กล่าวว่า...

อ้อ ! แต่ละ code มันอาจจะต่างกันนิดหน่อย :)

Jakkit Keawcharoen กล่าวว่า...

มันก็เป็นรูป อักขระ ธรรมดาอะครับ ทำไมลองคอมเม้นแล้วไม่เป็นรูป หน้าตาอะครับ

Aucharaporn Theemcle กล่าวว่า...

คุณ Jakkit คะ ขอบคุณค่ะสำหรับคำถามนี้ ดิฉันเองก็ไม่เคยสังเกต ครั้นลองทดสอบ ก็พบว่ามันเป็นตัวอักขระจริง ๆ ด้วย ดิฉันเข้าใจว่าเป็นเพราะ script ที่ใช้ตอบคำถามในคอมเมนท์ ทำให้มันไม่แสดงผล สังเกตได้ว่า หลังจากที่ดิฉันเพิ่มคำสั่ง ตอบ ในกล่องคอมเม้นท์ icon แสดงอารมณ์ดังกล่าว ไม่แสดงผล แต่ครั้นทดสอบกับเวบบล็อกอื่น ๆ การแสดงผลก็ปกติ ดิฉันเสียดาย เมนู ตอบ เลยไม่ลบออกไป คงต้องเสียสละ emotion icon ค่ะ คุณ Jakkit ลองทดสอบ emotion icon ได้ที่ การลบโปรแกรม Msn Chat จากเครื่องคอมพิวเตอร์ ดูนะคะ

กมลชนก ธนกิจชูวงศ์ กล่าวว่า...

สวัสดีค่ะ ขอบพรพะคุณมากค่ะ
แต่อยากเปลี่ยนเป็นอีโมหัวหอมอะค่ะ ต้องทำอย่างไรบ้างคะ

Aucharaporn Theemcle กล่าวว่า...

หากอยากเปลี่ยน emotion ต้องมี url ของ emotion นั้น ๆก่อนค่ะ แล้วเปลี่ยน code โดยเปลี่ยน url จาก src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif ตรงนี้ เปลี่ยน เป็น scr="urlของอีโมหัวหอม"

pairin choowongwut กล่าวว่า...

ขอบคุณความรู้ เกี่ยวกับเขียน blog มากเลยค่ะ
{ชูการ์|วิธีเลี้ยงชูการ์ไกลเดอร์|ชูการ์ไกลเดอร์}รวมเรื่องชูการ์ไกลเดอร์

Fatima Noosila กล่าวว่า...

เค้าเปลี่ยนแร่ว
พอกดโพส มันไม่ขึ้นรูปอ่าาาา
ทำไงดี >.<

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