About MeAll Entries

 
 
สวัสดีครับ 
 
ก่อนที่คุณจะหายใจเข้า (หรือถ้ากำลังหายใจเข้าอยู่ ก็ก่อนที่คุณจะหายใจออก) กด Ctrl + F5 ซักแก่กสองแก่ก เปลี่ยนนู่นนี่เล็ก น้อย
 
 
 
 
ไม่ได้อัพบล็อกมาค่อนข้างนาน ไม่ใช่เพราะอู้ แต่เพราะแอบไปเขียนสิ่งที่คุณกำลังจะเห็นต่อไปนี้ต่างหาก!!
 
เคยมั้ยเวลาที่เล่าเรื่องหนัง/อนิเม/มังงะ/คลิปวิดีโอ/ฯลฯ แล้วเกิดมีข้อมูลบางอย่างที่ถ้าหากเผลอเอาสายตาไปวางไว้แล้วละก็...
 
มันจะหอบเอาความตื่นเต้นและอรรถรสลงเหวไปในทันที
ข้อมูลที่ว่า เราเรียกสั้นๆ ว่าสปอยเลอร์ (Spoiler)
 
บางทีเราอาจจะทำตัวหนังสือสีเดียวกับพื้นหลัง แล้วบอกให้คนอ่านเอาเม้าส์คลุม ตามด้วยเครื่องหมายมากกว่าสองอัน >> แบบนี้
 
ซึ่งปัญหาจะเกิด เมื่อคุณเปลี่ยนธีมแล้วพื้นหลังเปลี่ยน ข้อความลับทั้งหมดทั้งมวลของคุณก็จะทยอยกันออกมาสู่ที่แจ้ง ดังตัวอย่างต่อไปนี้...
 
 
 
 
แต่ปัญหานี้จะหมดไป (ประโยคนี้เป็นสัญญาณแสดงถึงการขายของ) ด้วยโค้ด Spoiler!!
 
ข้อมูลปกปิดทั้งหมดของคุณจะอยู่ในรูปแบบของกล่องปิดเปิดได้ เหมือนในเว็บบอร์ดหรือฟอรั่มต่างๆ ที่คุ้นเคยกันดี
 
อย่างงี้:
 
[spoiler]
นายพรานยิงหมาป่าตาย หมาป่าตายบนปากโอ่ง
[/spoiler]
 
ไฮโซว *-*
อ้อ อีกอย่าง นอกจากตัวหนังสือแล้วมันสามารถเก็บรูปหรืออะไรอย่างอื่นได้ด้วยนะเอ้อ
 
วิธีใช้ก็แค่ใส่คำที่ต้องการซ่อนในรูปแบบนี้ (พิมพ์เข้าไปตรงๆ เลย ไม่ต้องเข้าไปแก้ html ใดๆ ทั้งสิ้น)
 
[ spoiler ] (เอาวรรคหน้าและหลังคำว่า spoiler ออก)
เนื้อหาที่ต้องการซ่อน
[/ spoiler ] (เอาวรรคหน้าและหลังคำว่า spoiler ออก)
 
เหมือนในเว็บบอร์ดนั่นแหละ
 
Edit เพิ่มอีกนิด: [ spoiler ] กับ [/ spoiler ] ต้องอยู่ในบรรทัดเดียวโดดๆ น่อ ถ้าเอาไปไว้กับอย่างอื่นอาจจะใช้ไม่ได้
 
เอาละ คราวนี้ก็มาถึง
 
วิธีทำ
 
 
1. เอาโค้ดไปใส่
 
เอาโค้ดต่อไปนี้ไปใส่ใน custom code อันไหนก็ได้
<script src="http://exteenplus.googlecode.com/files/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var texthide = "spoiler - click to hide";
var textshow = "spoiler - click to show";
</script>
<script src="http://exteenplus.googlecode.com/files/spoiler1-0-1.js" type="text/javascript"></script>
 
**ถ้าใครมี Hide My Sidebar , RenameMe , CommentPlus หรือ emoTion อยู่ แล้วให้เอาบรรทัดแรกออก
 
 
2. แก้คำ
 
ขั้นนี้จะทำก็ได้ ไม่ทำก็แล้วแต่
คำที่ว่านี้คือคำว่า spoiler - click to hide และ spoiler - click to show
ใช่ คุณสามารถเปลี่ยนมันได้!
 
จากโค้ดในข้อที่ 1 หาบรรทัดพวกนี้
 
var texthide = "spoiler - click to hide";
var textshow = "spoiler - click to show";
 
แล้วแก้คำที่อยู่ในเครื่องหมายคำพูดเป็นคำที่ต้องการ เช่น "เปิดสิ" "จิ้มเบาๆ" หรืออะไรก็ตามแต่
ใช้ภาษาไทยก็ได้นะ
 
 
3. ใส่ธีม
 
ถึงขั้นนี้สปอยเลอร์ของคุณจะเป็นลิ้งค์จืดๆ เปิดออกมาก็เป็นตัวหนังสือจืดๆ
ทีนี้พอคุณไปกินก๋วยเตี๋ยว ก๋วยเตี๋ยวคุณก็จะจืดๆ
คนรอบข้างคุณก็จะหน้าตาจืดๆ
ชีวิตคุณก็จะจืดๆ
 
ใช่ มันร้ายแรงขนาดนั้น
เพราะคุณยังไม่ได้ใส่ธีมนั่นเอง
 
การใส่ธีมก็ไม่ยาก แค่เลือกธีมที่ชอบจากในเอนทรี่นี้ แล้วก้อปโค้ดไปแปะไว้ใน CSS ของบล็อก
ธีมก็มีดังนี้:
 
default
 
ตัวอย่าง (กดไม่ได้)
 
 
ธีมเริ่มต้นที่ดีไซน์ไว้ตั้งแต่แรก เหมาะสำหรับบล็อกสว่างๆ สีอ่อนๆ หน่อย หรือธีม Apollo ที่ติดมากับเอ๊กซ์ทีน
 
โค้ด
 
.post{
width:100%;
}
.spoiler{
padding:10px 5px 5px 5px;
background:#fff;
border:1px #ddd solid;
}
.spoilercon{
padding:0px 10px 10px 10px;
margin:10px 0px;
background:#f9f9f9;
}
a.spoilerhide{
display:inline-block;
text-decoration:none;
font-size:14px;
color:#333;
padding:3px 10px;
background:#eee;
}
.spoilerhide:visited{
outline:0;
}
 
dark
 
ตัวอย่าง (กดไม่ได้)
 
 
 
ธีมมืด เหมาะสำหรับบล็อกมืดๆ เข้าไปดูแล้วจิตตกไปถึงตาตุ่มยมทูต หรือธีม Dark Apollo ของเอ็กซ์ทีน
 
 
โค้ด
 
.post{
width:100%;
}
.spoiler{
padding:10px 5px 5px 5px;
background:#222;
color:#fff;
margin-top:5px;
}
.spoilercon{
padding:5px 10px 5px 10px;
margin:10px 0px;
border:1px #eee solid;
}
a.spoilerhide{
display:inline-block;
text-decoration:none;
font-size:14px;
color:#fff;
padding:3px 10px;
background:#222;
border:1px solid #eee;
}
.spoilerhide:visited{
outline:0;
}
 
simple
 
ตัวอย่าง
 
 
ธีม เรียบ ง่าย
 
โค้ด
 
.post{
width:100%;
}
.spoiler{
padding:10px 5px 5px 5px;
background:#eee;
color:#333;
margin-top:5px;
}
.spoilercon{
padding:5px 10px 5px 10px;
margin:10px 0px;
border:1px #eee solid;
}
a.spoilerhide{
display:inline-block;
text-decoration:none;
font-size:14px;
color:#333;
padding:3px 10px;
background:#eee;
border:1px solid #eee;
}
.spoilerhide:visited{
outline:0;
}
 
ถ้าไม่ชอบสามธีมนี้ก็สามารถแก้ CSS ให้เข้ากับบล็อกได้โดยไม่มีอะไรมากีดขวาง
ซึ่งชื่อคลาสของมันจะเป็นแบบนี้
 
 
แก้กันได้ตามสบาย
 
 
4. เสร็จ
 
เสร็จ...
ง่ายมาก!
 
 
ถ้าใครเอาไปใช้ก็รบกวนทิ้งคอมเม้นต์ไว้ด้วยนะครับ เพราะถ้าโค้ดนี้มีเวอร์ชั่นอัพเดตผมจะส่ง ems ไปบอกวิธี
 
 
ต่อไปก็เรื่องข้อควรระวัง
 
- หลักๆ เลยก็ก่อนที่โค้ดจะโหลด (ซึ่งโค้ดจะโหลดหลังอย่างอื่น) ตัว spoiler ของคุณจะไม่มีอะไรมาปิดบังไว้ (จะเป็นเวลาประมาณ 1-5 วิฯ ขึ้นอยู่กับความเร็วเน็ตและ อย่างอื่นในบล็อก ดังนั้นควรใส่ spoiler ไว้ต่ำๆ หน่อย อาจจะไม่ต้องถึงกับล่างสุด
 
- ยังไม่ได้ทดสอบอย่างอื่นนอกจากรูปและตัวหนังสือ ดังนั้นเวลายัดอย่างอื่นเข้าไป (คลิปวิดีโอ แฟลช ฯลฯ) ควรทดสอบให้ดีซะก่อน
 
- ตอนนี้ยังทำ spoiler ซ้อน spoiler ไม่ได้ ถ้าทำจะเละเทะเป็นโจ๊กในเครื่องปั่น (แต่ถ้าสองอันอยู่แยกกันทำได้ไม่มีปัญหา)
 
- อาจจะมีบั๊กเล็กๆ น้อยๆ ถ้าหากเจอรบกวน ems มาที่ผม ผมจะตอบแทนด้วยการส่งอากาศที่ออกมาจากรูจมูกของเคน ธีรเดชไปให้ทางไปรษณีย์
 
นอกจากนี้ก็ไม่มีอะไรแล้ว XD ขอให้พลังแห่งสปอยล์เลอร์อยู่กับท่าน
 
[spoiler]
ความจริงหมาป่าคือคุณยายปลอมตัวมา ที่ถูกมัดอยู่ในตู้เสื้อผ้านั่นนายพราน
[/spoiler]
 
 
 
 
ความจริงโค้ดตัวนี้พอกำลังเขียนอยู่ ปรากฏว่าไปบล็อกไหนก็เจอแต่สปอยล์เลอร์แบบลากคลุมทั้งนั้น
เลยทำให้มีไฟเขียนต่อไปเรื่อยๆ 55
เริ่มเขียนตั้งแต่เอนทรี่ที่แล้วนั่นแหละ เพิ่งเสร็จ XD
 
 
 
เจอกันเอนทรี่หน้าครับ 
 
 
ปล. เอนทรี่นี้ไม่มีปล. นะ

Comment

Comment:

Tweet

ขอบคุณหลายๆค่า  Hot! Hot! Hot! Hot! Hot! Hot!

#77 By Mifuyu on 2015-03-21 04:49

ขออนุญาตรับไปใช้นะคะ ^ ^,,
ปล. ฮือออ มันไฮโซมาก คือเราตามหามานานแล้วค่ะ ; v ;

#76 By ナキシ★ on 2014-07-22 11:46

ผ่านไปนานแล้วแต่เพิ่งเข้ามาเจอ (;v ;
ขอบคุณมากนะคะ ขอนำไปใช้บ้างล่ะค่า

#75 By Nanzation * on 2014-06-02 05:56

มีประโยชน์มากเลยค่ะ! กำลังหาอยู่พอดีเลย cry

#74 By Uchuta on 2014-05-28 13:39

ยังไงคร้า sad smile   งงจุง

#73 By ...`Inn๏cence` on 2014-02-26 15:33

ขอบคุณค่า

#72 By c h r o s on 2013-05-18 21:08

ลองแล้วค่ะะ แจ่มไปเลยย แต่เราก๊อบธีมไปแปะใน CS แล้วรูปลักษณ์ยังเหมือนเดิมอยู่เลย ;w;;

#71 By jump2537 on 2013-04-27 20:45

ขอนำโค้ดไปใช้นะคะ ขอบคุณค่า

#70 By LikeWeatheR™ on 2013-04-21 00:57

ไชโย้วววววววววววววว!!
เย้ววว ทำได้แล้วค่ะ เฮ ขอบคุณนะคะ
ขอบคุณที่แบ่งปันโค้ดดีๆเช่นนี้ XD

#69 By ธฟะฟพธฟพนห on 2013-04-02 13:02

//มาช้ากว่าใครเพื่อน...
ขอบคุณมากค่ะ  Hot! Hot! Hot!

#68 By Mizukiko on 2012-10-18 16:52

ขอบคุณค่า ขอเอาไปใช้หน่อยนะคะ >w<

#67 By Sphere Root on 2012-05-07 13:58

ขอบคุณมากๆนะคร้าบ รับไปใช้เเล้วนะครับ Hot! Hot!

#66 By sukmuang-gym on 2012-03-15 11:36

ขอบคุณมากค่ะ ^^

#65 By kurobina on 2012-01-05 14:09

ขอบคุณมากๆ เลยค่ะ

เป็นประโยชน์สำหรับคนเล่นบล็อกมากๆ

ขอนำไปใช้นะคะ confused smile

#64 By Firo on 2011-11-05 03:52

ขอบคุณจ้า ลองเอาไปใชเน้อ

ตอนนี้พบว่าใส่สปอยเลอร์แบบปกติ

ข้อความ 1
[ spoiler]ข้อความ2[ / spoiler ]

แล้วมันไม่ซ่อน เลยใส่แบบนี้แทน


ข้อความ 1
[ spoiler ][ / spoiler ]
ข้อความ2


มันซ่อนให้เฉยเลยจ้า แต่ปัญหาคือมันซ่อน ข้อความ1 ไม่ว่าจะเปิดหรือปิดสปอยเลอร์ก็หายสาปสูญไร้ร่องรอยไปซะงั้น

#63 By Divas & Knockouts on 2011-08-24 16:26

Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!
สุดยอด! เหมือนในเว็บบอร์ดเลย

#62 By Unya-yaya on 2011-07-27 09:22

Hot! ขอบคุณค่ะ

#61 By AERN on 2011-07-24 14:17

ขอเอาไปใช้นะคะ

#60 By jyammii on 2011-06-04 18:12

เจ๋งเลย ๆๆคับ แล้วสปอย์นี้เหนทุกคนเลยหรอหรือคือสมาชิกHot! Hot!

#59 By Battler [Ushiromiya] on 2011-05-04 19:42

เห็นนานแล้วแต่เพิ่งขอเอาไปใช้ ขอบคุณมากครับ open-mounthed smile

#58 By BoatKung on 2011-04-16 17:15

ขอบคุณมากๆเลยครับมีประโยชน์มากๆเลย

#57 By Copic on 2011-03-03 22:08

embarrassed

#56 By GIFT_TU ...กิฟท์ on 2011-02-04 21:53

Hot!

#55 By nonworld on 2011-02-01 09:55

ถ้าตามอ่านจาก RSS หรือ Google Reader
มันจะไม่เห็นแทคสปอยที่เราซ่อนเอาไว้นะ
ถ้าตามอ่านทางนั้น ก็โดนสปอยอยู่ดี XD
เจ๋งค่ะ Hot! Hot! Hot! Hot! cry

#53 By 31ink on 2011-02-01 06:55

ขอบคุณครับผม+
กำลังหาอะไรแบบนี้ใช้อยู่พอดีครับ
Hot! Hot! Hot!

#52 By ►Amily Zoil◄ on 2011-01-31 22:02

เยี่ยมไปเลยค่าาา ~~ Hot!

#51 By ✖ maii - まいさ - maisa ✖ on 2011-01-31 21:53

ว้าว

สุดยอดไปเลยค่ะ * 0 *
ขอเอาไปใช้นะคะ (ไม่รู้จะมีโอกาสได้ใช้เมื่อไหร่ sad smile )

ขอบคุณมากๆค่ะ

Hot! Hot! Hot!

#50 By BBtion on 2011-01-31 21:23

Hot! ยอดเลยค่ะ ไว้เอาไปใช้บ้าง >w<)//

#49 By *zequs on 2011-01-31 19:55

ว๊าวววว open-mounthed smile เลิศมากๆเลยค่ะ
ขอบคุณมากนะคะ Hot!

#48 By OILdrop on 2011-01-31 19:35

อ่า เราก็เจอปัญหาเดียวกับคุณ จิ้งจก ณ ตุ๊กแก ค่ะ

#47 By gale on 2011-01-31 19:09

อ้ากกกกก ไม่ยอมมมมม เริ่ดเกินไปแว้วววววววsurprised smile surprised smile surprised smile surprised smile surprised smile surprised smile surprised smile

#46 By Ryoma D on 2011-01-31 18:56

ขอบคุณค่าาา cry cry Hot! Hot! Hot!

#45 By jyammii on 2011-01-31 18:51

Hot! Hot! ว้าว! ขอบคุณค่า~

#44 By กุ๊กๆๆ_____,,* on 2011-01-31 17:36

เยี่ยมมากครับ ขอบคุณมาก จะลองใช้ดู Hot!

#43 By Drama Queen on 2011-01-31 17:15

มีวิธีอย่างนี้ด้วยยย cry
ขอบคุณค้ะ
Hot! Hot! Hot! Hot! Hot!
เยี่ยมครับ เก่งมากๆเลย

#41 By hackerlife on 2011-01-31 14:51

Hot! Hot!

ชอบตรงหนูน้ิอยหมวกแดงล่ะ

#40 By nuicekung on 2011-01-31 14:37

เจ๋งสุดๆเลยยยยยยยย Hot! Hot! Hot!
แต่เราลองใ่ส่แถบสปอยล์ในเอนทรี่บล็อกแล้วเนื้อหาเอนทรี่หายไปทั้งหน้าเลยล่ะค่ะ ฮา T T

#39 By eฺ-mäil666 on 2011-01-31 14:08

สุดยอดด..หามานานแล้วค่ะ

ของยืมไปเล่นบ้างนะค่ะ ขอบคุณคร้า

Hot! Hot! Hot! Hot! Hot!

#38 By AoMMu on 2011-01-31 13:46

Hot! มัน...สุดยอดดด
ขอไปใช้มั่งน๊าาาbig smile

#37 By (^_^)/nana on 2011-01-31 13:42

ทดสอบดูแล้ว คำใน [spoiler]ยาราไนก้า[/spoiler] ไม่แสดงผล
แต่คำข้างล่าง ดันกลายเป็นไปอยู่ในสปอยแทน wink
ลองไปใช้ดูแล้ว มันซ่อนแต่ตรงคำที่มันบอกว่า แก้ไขโดยจิ้งจก ณ ตุ๊กแก
แต่คำที่ซ่อนจริง ๆ ดันไม่โผล่
ลองแล้วใช้ไม่ได้เลยอ่ะ มันไม่โชว์ข้อความที่สปอยเลย
ขอบคุณมากค่า ขอเอาไปใช้นะคะ Hot!
อีโมน่ารักจัง cry

#33 By ♣ mon monaelice ♣ on 2011-01-31 11:58

ยอดเลยค่ะ ขอบคุณมาก ๆ
Hot! Hot! Hot! Hot! Hot!

surprised smile ขอบคุณค่า มีประโยชน์มากๆ

#31 By STECHA ลา ล่า~ on 2011-01-31 11:08

เป็นประโยชน์มากๆเลยค่า

#30 By rakuchan on 2011-01-31 10:56

เยี่ยมไปเลยครับ

Hot! Hot! Hot! Hot! Hot!
มีประโยชน์มากครับ Hot!

#28 By chubby on 2011-01-31 10:49