Group Blog
 
All blogs
 

ใส่รูปให้กล่องคอมเมนต์ แบบตามใจฉัน








<style type="text/css">textarea{background:url(url ของรูปพื้นหลังที่ต้องการ) no-repeat right top #EEBD59;border:dotted 2px #ffffff;width:450px;height:350px;color:#000000;font-size:16px;filter:alpha(opacity=80);-moz-opacity: 0.8;opacity: 0.8;}</style>



วิธีการใส่รูปให้กล่องคอมเมนต์


โค้ดนี้อาจจะต่างจากโค้ดที่อื่นอยู่สักหน่อยนะคะ เพราะเจ้าของประยุกต์มาใช้เองค่ะ และเห็นว่ามันน่าจะพอมีประโยชน์กับเพื่อนๆ ที่อยากจะแต่งกล่องคอมเมนต์แบบตามใจฉันอยู่บ้างค่ะ
วิธีการใส่รูปให้กล่องคอมเมนต์จริงๆ แล้วง่ายๆ เองค่ะ แต่ถ้าอยากแต่งให้ถูกใจมากขึ้น อาจต้องศึกษา css อีกสักเล็กน้อย
    วิธีการใส่รูป
  • หากต้องการให้แสดงกล่องคอมเมนต์เหมือนกันทุกๆ บล็อก ให้ copy Css Style Sheet อันนี้ ไปไว้ที่ช่องจัดการ Script area ได้เลยค่ะ

  • แต่ถ้าต้องการให้แต่ละบล็อกแสดงกล่องไม่ซ้ำกันล่ะก็ ให้ copy Css Style Sheet นี้ไปไว้ที่ช่องที่เราเขียนบล็อกนั่นแหละค่ะ เปลี่ยนรูปแบบ เปลี่ยนรูปภาพ ได้ตามใจฉันเลยค่ะ


อธิบายโค้ด



  • ที่ตัวหนังสือสีแดง no-repeat คือการกำหนดการแสดงผลของรูปค่ะ สามารถเปลี่ยนค่าได้ดังนี้

    • no-repeat : กำหนดให้แสดงภาพเพียงครั้งเดียว ไม่แสดงซ้ำ

    • repeat : กำหนดให้แสดงภาพซ้ำจนเต็มกรอบ

    • repeat-x : กำหนดให้แสดงซ้ำในแนวนอน

    • repeat-y : กำหนดให้แสดงซ้ำในแนวตั้ง


  • เอ๊า! แล้วมันมีประโยชน์ยังไงล่ะ ก็ภาพคอมเมนต์เค้าก็ทำไว้ให้พอดีๆ กล่องอยู่แล้วนิ?

  • ...มีสิจ๊ะ ประโยชน์สำหรับการที่เราอยากจะใช้ภาพที่ไม่ได้สร้างมาเพื่อเป็นกล่องคอมเมนต์โดยเฉพาะ เช่นภาพไอคอน บางทีเราก็อยากได้ไอคอนน่ารักแสดงเต็มกรอบ แต่บางทีก็อยากให้แสดงแค่หนเดียว ใช่ไหมล่ะ... ก็โค้ดนี้แหละ ใช้ได้เลย

  • ต่อมา ก็มาที่ตัวหนังสือสีเหลือง right top คือ position หรือตำแหน่งของรูปภาพ อาจจะกำหนดหรือไม่กำหนดก็ได้ ซึ่งปกติ หากไม่ได้กำหนด จะแสดงรูปภาพที่ตรงกลาง แต่ถ้าเราอยากจะกำหนดตำแหน่งรูปภาพใหม่ ก็แก้ไขค่าตรงนี้ได้ค่ะ จากตัวอย่าง right top คือการกำหนดให้แสดงรูปบริเวณด้านบนขวาของรูป
      การกำหนดตำแหน่งภาพ
    • กำหนดโดยระบุตำแหน่งเพียงค่าเดียว เช่น top, bottom, left, right, center

    • กำหนดโดยระบุตำแหน่งสองค่า เช่น top left, bottom left, top right, bottom right

    • กำหนดโดยระบุตำแหน่งเป็นเปอร์เซนต์ เช่น 80% 60%

    • กำหนดโดยระบุตำแหน่งเป็น px เช่น 25px 200px


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

  • มาที่ตัวอักษรสีเขียวกันค่ะ ตรงนี้ให้ใส่โค้ดสีที่เราอยากได้ลงไป จากโค้ดด้านบนจะมะ 3 แห่งใช่ไหมคะ อันแรก อยู่กับ background หมายถึง เราต้องการให้สีเป็นพื้นหลัง ดูตัวอย่างที่คอมเมนต์ด้านล่างค่ะ จะใช้พื้น BG เป็นสีฟ้า และประดับ icon เล็กๆ ในตำแหน่งที่ชอบ แต่ถ้าหากว่าเรากำหนดให้ภาพในกรอบคอมเมนต์เป็นภาพขนาดใหญ่อยู่แล้วสีของ BG ก็จะถูกทับด้วยภาพของพื้นหลัง การกำหนดสีพื้นหลังควรกำหนดให้สีตัดกับสีอักษร เพื่อที่เราจะได้อ่านตัวอักษรได้ง่ายด้วยค่ะ

    • การกำหนดสี กำหนดได้ทั้งแบบระบุสีโดยตรง เช่น red, green, yellow, orange red ….. แต่การกำหนดสีแบบนี้อาจแสดงผลต่างกันในบราวเซอร์ที่ต่างกันค่ะ

    • กำหนดโดยระบุตำแหน่ง rgb เช่น(255,255,255) ซึ่งจะให้สีขาว

    • กำหนดโดยระบุเป็นเลขฐานสิบหก ซึ่งเป็นที่นิยม และมีสีให้เลือกมากมายค่ะ เช่น #000000


  • ต่อมาเป็น ตัวอักษรสีเหลืองส้มค่ะ dotted อยู่ในแท็ก border ซึ่งก็คือเส้นขอบนั่นเองค่ะ ซึ่งเส้นขอบนี้ จะกำหนดหรือไม่กำหนดก็ได้ค่ะ สามารถเปลี่ยนขนาด สี และรูปแบบได้ เราพอรู้เรื่องสีบ้างแล้ว มารู้จักรูปแบบของ border กันค่ะ ซึ่งเราสามารถเปลี่ยนรูปแบบได้หลายอย่าง ดังนี้ค่ะ


    • dotted

    • dashed

    • solid

    • double

    • groove

    • inset

    • outset

    • none สำหรับกำหนดให้ไม่มีเส้นขอบค่ะ



  • สำหรับตัวอักษรสีฟ้า ก็ง่ายที่สุดเลยค่ะ เติมค่าเป็นตัวเลขลงไป ซึ่งหน่วยที่ใช้ในที่นี้ก็คือ px ค่ะ


    • ตรง border:2px ก็คือความหนาของเส้นขอบค่ะ ตัวเลขมาก เส้นก็หนาขึ้น

    • ตรง width คือความกว้างของกรอบคอมเมนต์

    • ตรง height คือความสูงของกรอบคอมเมนต์

    • และ font-size คือขนาดตัวอักษรเวลาที่เราเขียนคอมเมนต์ค่ะ


  • อันสุดท้ายแล้วค่ะ ตัวอักษรสีชมพู สำหรับทำภาพเป็นแบบโปร่งใสค่ะ(ถ้าไม่อยากให้ภาพโปร่งใส ก็ลบโค้ดตรงสีชมพูนี้ออกไปเลยค่ะ ^w ^) ปรับเปลี่ยนค่าตรงตัวเลข เช่น 80 หมายถึง 80% = 0.8 ค่ะ ค่าเท่ากัน แต่มีโค้ดหลายอัน เพราะแต่ละบราวเซอร์นั้นใช้โค้ดต่างกัน หากต้องการให้โปร่งใสนิดหน่อย ก็ใส่ค่าใกล้ 100 หรือ 1 ไว้ ถ้าอยากให้โปร่งใสมากก็ใส่ค่าน้อยๆ ไว้ค่ะ เช่น 0.2--> ภาพจะจางมาก 0.8--> ภาพจะจางลงนิดหน่อย

  • สุดท้ายหวังว่าคงพอเข้าใจ และนำไปใช้ประโยชน์ได้บ้างนะคะ








 

Create Date : 13 กันยายน 2553    
Last Update : 13 กันยายน 2553 18:28:58 น.
Counter : 867 Pageviews.  

โค้ดกล่องคอมเมนต์




copy script มาจากบล็อกป้ากล้วยอีกทีค่ะ ตั้งใจจะเก็บไว้ดูเอง
เวลาแต่งบล็อกจะได้หยิบจับง่ายหน่อย
แต่ถ้าเพื่อนๆ จะ copy ไปใช้ต่อก็ตามอัธยาศัยเลยค่ะ

ป้ากล้วยให้เครดิตคุณ กึ่งยิงกึ่งผ่าน
ขอบคุณมากๆ สำหรับทั้งสองท่านด้วยค่ะ

วิธีใช้ ก็ copy script ไปวางไว้ที่ script area
ตรง"โค้ดสี" ให้ใส่โค้ดสีของกรอบที่ชอบค่ะ ตรงที่ทำสีต่างไว้ให้ แก้ไขตามใจเลยค่ะ

ดูโค้ดใส่รูปให้กรอบคอมเมนต์ที่นี่ค่ะ



<script>HTML = document.body.innerHTML; CommentCount = 0; var reg = new RegExp("-- Comment", "gm"); while(reg.test(HTML)) CommentCount++; CommentCount--; for(i=1; i<=CommentCount; i++){ originalHtml = document.getElementById( i ).innerHTML; beforeHtml = '<fieldset style="border:โค้ดสี groove 3px; padding:20"> <legend align=center><img src=URL ของรูป> ความเห็นที่ ' + i + ' <img src=URL ของรูป></font></legend>';document.getElementById( i ).innerHTML = beforeHtml + originalHtml;} </script>








 

Create Date : 13 กันยายน 2553    
Last Update : 13 กันยายน 2553 18:53:47 น.
Counter : 1762 Pageviews.  

โค้ดเปลี่ยน Emoticon





<script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo1.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่1 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo2.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่2 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo3.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่3 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo4.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่4 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo5.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่5 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo6.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่6 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo7.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่7 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo8.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่8 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo9.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่9 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo10.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่10 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo11.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่11 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo12.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่12 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo13.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่13 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo14.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่14 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo15.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่15 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo16.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่16 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo17.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่17 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo18.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่18 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo19.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่19 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo20.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่20 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo21.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่21 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo22.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่22 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo23.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่23 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo24.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่24 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo25.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่25 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo26.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่26 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo27.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่27 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo28.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่28 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo29.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่29 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo30.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่30 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo31.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่31 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo32.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่32 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo33.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่33 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo34.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่34 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo35.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่35 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo36.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่36 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo37.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่37 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo38.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่38 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo39.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่39 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo40.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่40 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo41.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่41 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo42.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่42 ";document.images[i].height="50"; document.images[i].width="50";}
iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="../emo/emo43.gif") {document.images[i].src="http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่43 ";document.images[i].height="50"; document.images[i].width="50";}</script>





วิธีการใส่โค้ด

copy script ด้านบน วางไว้ที่ Script area
ใส่ url ของภาพที่ต้องการลงใน "http://ลิงค์ของรูปที่เราจะเปลี่ยนรูปที่ 1 -43 " (ตัวอักษรสีเหลือง)
ขนาดของภาพสามารถเปลี่ยนแปลงได้ที่ width และ height หรือใส่ตัวเลขตรงตัวอักษรสีชมพู



ขอขอบคุณความรู้เรื่องการเปลี่ยน emoticon จาก บล็อกคุณนวลกนก และ บล็อกคุณ SORRUM




 

Create Date : 12 กันยายน 2553    
Last Update : 14 กันยายน 2553 8:42:28 น.
Counter : 395 Pageviews.  


ที่นี่ดาวสวย
Location :
สมุทรปราการ Thailand

[Profile ทั้งหมด]

ให้ทิปเจ้าของ Blog [?]
ฝากข้อความหลังไมค์
Rss Feed
Smember
ผู้ติดตามบล็อก : 3 คน [?]




เชคข้อความหลังไมค์
New Comments
Friends' blogs
[Add ที่นี่ดาวสวย's blog to your web]
Links
 

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.