โ ค้ ด แ ม ว

ตอนที่ 1 : (H o w t o*) ; วิธีใส่โค้ดในเว็บ & ใช้โค้ดชี้ภาพเฉพาะบางภาพ

  • เนื้อหานิยายตอนนี้เปิดให้อ่าน
  • View : 10,146
    จำนวนคนให้กำลังใจ : 8 ครั้ง
    5 ต.ค. 62

  ◈ L e s s o n 1 ◈   



` The cat โค้ดแมวๆ ●
How to
' วิธีนำโค้ดไปใช้ในบทความ/นิยาย/writer  '

 

ง่ายๆ ทำตามขั้นตอนเลยจร๊าา หรืออีกวิธีคือ คลิก 
(วิธีในลิงค์ที่ให้'คลิก'จะใช้กับหน้าหลักบทความ
ส่วนวิธีด้านล่างภาพนี้คือ ใช้ในตอนย่อยนะคะ)

เปิดมาหน้าที่จะเขียนนิยาย จะเจอแถบแบบนี้ใช้ปร้ะ ?



ให้คลิกคำว่า "ดูรหัส HTML"
พอกดปุ๊บมันก็จะมีหน้าอย่างนี้
v
v
(ดูๆแล้วมันคล้ายกับภาพข้างบนใช่มะ แต่สังเกตุดีๆ ตรงแถบไอค่อนด้านบนบางไอค่อนมันจางลงนะ)
พอกดปุ๊บเจอหน้าอย่างนี้ก็วางโค้ดลงไปเลยคะ เสร็จก็กด บันทึกการเปลี่ยนแปลง 
ง่ายมั้ยง่ายมั้ย สงสัย Qmsg มาที่หน้าไอดีเค้าได้จ้า




  ◈ L e s s o n 2 ◈   



` The cat โค้ดแมวๆ ●
How to
' ใส่โค้ดชี้ภาพเฉพาะบางภาพ ไม่รวมทั้งหมด '

 



วิธีการใช้โค้ดเฉพาะภาพที่เราต้องการอยากทำ ใช้วิธีการดังนี้

1 | เราต้องมีหน้าตาโค้ดแบบนี้ซะก่อน

<style type="text/css">
img[src="ใส่ URL ภาพ"]:hover{
}</style>
 
 
<style type="text/css">
img[src="ใส่ ULR ภาพ"]{
}</style>

2 | หน้าตาโค้ดจากแตกต่างกันตรงคำว่า :hover
ที่ไฮไลท์สีเขียว ซึ่ง โค้ดชี้ภาพทุกโค้ดในบทความเราจะมีคำว่า img:hover{ และ img{

มาดูตัวอย่างกันเลย เราจะใช้โค้ดนี้นะคะ จากตอนที่ 2

<style type="text/css">
img:hover{
-webkit-box-shadow: 0px 0px 3px 3px #b39f62 ;
box-shadow: 0px 0px 3px 3px  #b39f62;
}
img{
-webkit-box-shadow: 0px 0px 3px 3px #f5ccdc;
box-shadow: 0px 0px 3px 3px #f5ccdc;
-webkit-transition: all 1.0s ease;
transition: all 1.0s ease;
}
</style>

3 | ยกชุดแรกมา

เราจะใช้ภาพนี้ ก็ก๊อป URL ของภาพมาใส่ตรงช่องที่ให้ใส่เลย



<style type="text/css">
img[src="ใส่ URL ภาพ"]:hover{
}</style>
 
 
<style type="text/css">
img[src="ใส่ ULR ภาพ"]{
}</style>


( ขั้นแรกก๊อป URL ภาพมาแล้วจะได้แบบนี้ )

<style type="text/css">
img[src="http://41.media.tumblr.com/tumblr_lryj0pG0981qmvn4wo1_500.jpg"]:hover{
}</style>
 
 
<style type="text/css">
img[src="http://41.media.tumblr.com/tumblr_lryj0pG0981qmvn4wo1_500.jpg"]{
}</style>


( ขั้นตอนที่ 2 คัดลอกโค้ดต้นแบบไปใส่ในช่องที่เราก๊อป URL เสร็จไปแล้ว )

<style type="text/css">
img:hover{
-webkit-box-shadow: 0px 0px 3px 3px #b39f62 ;
box-shadow: 0px 0px 3px 3px  #b39f62;
}
img{
-webkit-box-shadow: 0px 0px 3px 3px #f5ccdc;
box-shadow: 0px 0px 3px 3px #f5ccdc;
-webkit-transition: all 1.0s ease;
transition: all 1.0s ease;
}
</style>

คัดลอก :hover ใส่ตรงที่ของมัน 
และ คัดลอก img ใส่ตรงที่ของมันเช่นเดียวกัน

<style type="text/css">
img[src="http://41.media.tumblr.com/tumblr_lryj0pG0981qmvn4wo1_500.jpg"]:hover{
-webkit-box-shadow: 0px 0px 3px 3px #b39f62;
box-shadow: 0px 0px 3px 3px  #b39f62;
}</style>
 
 
<style type="text/css">
img[src="http://41.media.tumblr.com/tumblr_lryj0pG0981qmvn4wo1_500.jpg"]{
-webkit-box-shadow: 0px 0px 3px 3px #f5ccdc;
box-shadow: 0px 0px 3px 3px #f5ccdc;
-webkit-transition: all 1.0s ease;
transition: all 1.0s ease;
}</style>



เสร็จแล้วแท้นแท่นนน





T
B
ให้กำลังใจนักเขียน
นักเขียนได้รับกำลังใจแล้ว!
นักเขียนได้รับกำลังใจแล้ว 8 ครั้ง

นิยายที่ผู้อ่านนิยมอ่านต่อ

loading
กำลังโหลด...

11,913 ความคิดเห็น

  1. #11832 POND_NATDANAI (@asoog1234) (จากตอนที่ 1)
    วันที่ 22 กรกฎาคม 2561 / 15:38
    ขอบคุณครับ
     
    #11,832
    0
  2. #11638 MygJjr (@19930309) (จากตอนที่ 1)
    วันที่ 19 กันยายน 2560 / 00:34
    ขอบคุณมากๆค้าา
    #11,638
    0
  3. #11527 Mina_Chu+Chu (@lovelyztk) (จากตอนที่ 1)
    วันที่ 1 พฤษภาคม 2560 / 13:36
    เราทำตามแล้วทำไมรูปภาพมันไม่ขึ้นล่ะคะ ฮือไม่เข้าใจตรง :hoover กับ img 
    #11,527
    0
  4. #11217 Choco_Chocky (@Jirapha-2546) (จากตอนที่ 1)
    วันที่ 12 ตุลาคม 2559 / 18:17
    ขอบคุณมากจริงๆ  ค่ะ  หาวิธีอยู่นานมากเลย
    #11,217
    0
  5. #11035 Mamiar (@whitekoala) (จากตอนที่ 1)
    วันที่ 1 มิถุนายน 2559 / 14:07
    เราทำตามแล้วทำไมมันใช้ไม่ได้อ่า... งง @_@
    #11,035
    0
  6. #10950 F.xxx (@xxxavinn) (จากตอนที่ 1)
    วันที่ 7 พฤษภาคม 2559 / 22:12
    คือเรางงนิดหน่อยค่ะ ;__; ที่งงเพราะว่าเราลองทำตามแล้วมันใช้ไม่ได้
    ใช้ได้แค่ตอนเดียวคือตอนที่ 10 อยากใช้อันอื่นๆได้มั่ง ต้องทำยังไงคะ ฮื่อออ
    #10,950
    0
  7. #10907 ปดิวรัดา (@the1navyy) (จากตอนที่ 1)
    วันที่ 1 พฤษภาคม 2559 / 15:56
    ขอบคุณมากๆเลยค่ะ
    #10,907
    0
  8. #10805 AP. ♔ PuFF (@pareploypunapung) (จากตอนที่ 1)
    วันที่ 16 เมษายน 2559 / 12:12
    ขอบคุณค่ะ
    #10,805
    0
  9. #10478 illlua (@aillTY) (จากตอนที่ 1)
    วันที่ 2 มกราคม 2559 / 20:28
    ขอบคุณค่ะ กำลังอยากได้พอดีเลย >., #10,478
    0
  10. #10372 abx13 (@abz123) (จากตอนที่ 1)
    วันที่ 18 พฤศจิกายน 2558 / 09:42
    ttttttttttt

    แก้ไขครั้งที่ 1 เมื่อ 28 มกราคม 2559 / 16:02
    แก้ไขครั้งที่ 2 เมื่อ 28 มกราคม 2559 / 16:03
    #10,372
    0
  11. #10309 BoomIU (@BoomIU) (จากตอนที่ 1)
    วันที่ 20 ตุลาคม 2558 / 17:40
    สุดยอด ขอบคุณมากครับ
    #10,309
    0
  12. #10173 S|͇̿t͇̿|ar (@starsky662) (จากตอนที่ 1)
    วันที่ 20 กันยายน 2558 / 19:58
    ขอยืมนะคะ
    #10,173
    0
  13. #9752 เอมจัง (@amyamyjirapajang) (จากตอนที่ 1)
    วันที่ 8 พฤษภาคม 2558 / 13:53
    URL คืออะไรหรอคะ

    #9,752
    0
  14. #9695 ไม่บอก :p (จากตอนที่ 1)
    วันที่ 4 พฤษภาคม 2558 / 13:12
    ถ้าไม่ได้ใช้โค้ด แต่อยากให้กะลังใจอ่ะ ได้ป่ะครับ ^^ แฮะๆ
    #9,695
    0
  15. #9646 N'Aun'Pan'nn (@aun4444) (จากตอนที่ 1)
    วันที่ 29 เมษายน 2558 / 14:56
    งงตรงขั้นตอนที่2 อ่ะค่ะ ช่วยอธิบายได้มั้ยค่ะ
    #9,646
    0
  16. #9548 poppy9492 (@exolarmy9492) (จากตอนที่ 1)
    วันที่ 20 เมษายน 2558 / 10:06
    ขอบคุณค้า ><
    #9,548
    0
  17. #9367 Ncysap (@Ncysap) (จากตอนที่ 1)
    วันที่ 4 เมษายน 2558 / 15:22
    ขอบคุณมากๆค่ะ
    #9,367
    0
  18. #9036 Cabilusz'zz (@cabilus46) (จากตอนที่ 1)
    วันที่ 10 มีนาคม 2558 / 11:52
    เจ๋ง! ขอบคุณคร้าบ
    #9,036
    0
  19. #9022 [ เถาไอวี่_] (@odoeoeor) (จากตอนที่ 1)
    วันที่ 9 มีนาคม 2558 / 14:36
    ขอบคุณค่ะ
    #9,022
    0
  20. #8852 -Ao Sora- (@kaitomint) (จากตอนที่ 1)
    วันที่ 8 กุมภาพันธ์ 2558 / 16:13
    ขอบคุณสำหรับความรู้มากเลยคะ ก็งงตั้งนาน
    #8,852
    0
  21. #8733 ผู้วิเศษคนที่0 (@poowises) (จากตอนที่ 1)
    วันที่ 19 มกราคม 2558 / 10:51
    ขอบคุณค่าาาา ^ ^
    #8,733
    0
  22. #8732 ผู้วิเศษคนที่0 (@poowises) (จากตอนที่ 1)
    วันที่ 19 มกราคม 2558 / 10:50
    ขอบคุณค่าา ^ ^
    #8,732
    0
  23. #8652 bambamexo (@bambamexo12) (จากตอนที่ 1)
    วันที่ 6 มกราคม 2558 / 12:17
    สวัสดีค่ะ เพิ่งสมัครเด็กดีก็เลยยังเล่นไม่เป็น อยากจะถามว่าโค้ดนี่คืออะไรหรือคะ ต้องเข้าตรงไหน ช่วนตอบด้วยนะค่ะ
    #8,652
    0
  24. #8641 ซุ_ป_ไ_ก่ (@zupkai) (จากตอนที่ 1)
    วันที่ 5 มกราคม 2558 / 09:09
    ขอบคุณค่ะ
    #8,641
    0
  25. ความเห็นนี้ถูกลบแล้ว :(