สวัสดีครับ
 
Entry นี้คือหมวด Etc หรือหมวดตามใจฉัน
ซึ่งเรื่องที่จะมาบอกมาเล่าในวันนี้ก็เป็นเรื่อง
การโม CSS ในส่วนช่องแสดง Comment
ให้เป็นรูปภาพแบบหลายรูป เรียงตามลำดับ
โดย Req คุณเพื่อนบ้าน Kunizan ครับ..
เพิ่งจะได้มาเขียนเอาวันนี้ก็ต้องขออภัยใน
ความช้า และขอขอบคุณผู้ให้ความรู้กับผม
ในเรื่องนี้คือคุณเพื่อนบ้าน Butter-t อีกคนครับ
 
Ps. หัว Entry งวดนี้คือไม่รู้จะใส่รูปอะไรดีครับ นางฟ้าประจำบล็อคเลยออกโรง
 
= - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - =
 
-: สิ่งที่ต้องเตรียม :-
1. รูปที่จะใช้เป็นพื้นหลัง (อันนี้สำคัญมากครับ ไม่มีไม่ได้)
2. Custom Code ว่างๆ ในหน้า Widget สักหนึ่งตำแหน่ง
 
ว่าแล้วก็เริ่มกันเลย..
 
ก่อนอื่น.. ท่านจะต้องนำ Code เหล่านี้ไปใส่ใน Custom Code ว่างๆ สักตัวนึง
 
<script type="text/javascript">

CommentBGChange();

function CommentBGChange()

{

    var cs,i,j;

      cs = document.getElementsByTagName('div');

      for(j = 0;j<cs.length;j++)

      {

        if( cs[j].id.indexOf('comment-') >= 0)

          {

            i = cs[j].id.replace("comment-","");

            break;

        }

    }

      while (true)

      {

          c = document.getElementById('comment-' + i);

            if (c==null) return;

            c.className='comment' + (((i -1)%4)+1);

            i++;

      }

}
            </script>
 
ตัวในไฮไลท์ทั้งหมดนี่ Copy ไปเลยครับ  ใส่ใน Custom Code สักตัวนึง
แล้วเอา Custom Code นี้ไปวางไว้ตำแหน่งล่างสุด.. ที่ว่าล่างสุดนี่หมายถึง
ตรง Bottom Menu แบบนี้เลยนะครับ
 
 
จากนั้นเราก็มาจัดการกับ CSS Code กันต่อครับ
ตรงนี้อาจจะงงหน่อย แต่จะพยายามอธิบายให้เข้าใจมากที่สุด
 
....
 
ในหน้า CSS Code นั้นสิ่งที่เราต้องจัดการจะอยู่ในโซน
/* Comment (Showing Area) */ ครับ ซึ่ง โดยปกติ มันจะเป็นแบบนี้
 
.comment{
border-bottom:1px solid #DDD;
float:left;
margin:5px 0px 5px 0px;
padding-bottom:5px;
width:100%;
}

.comment .post
{
float:right;
width:330px;
}

.comment .post p
{
margin-bottom:10px;
}

.comment .info
{
float:left;
font-size:10px;
width:150px;
margin-right:10px;
}

.comment .info img
{
width:32px;
}

 
แล้วให้ทำการเปลี่ยนมันทั้งยวงให้เป็นรูปแบบนี้ครับ
 

.comment{

border-bottom:1px solid #DDD;

float:left;

margin:5px 0px 5px 0px;

padding-bottom:5px;

width:100%; height:140px;

background:url(URL รูปที่หนึ่ง) no-repeat;

background-position:top right;

 

}

 

.comment .post{

float:right;

width:530px;

}

 

.comment .post p{

margin-bottom:10px;

}

 

.comment .info{

float:left;

font-size:10px;

width:150px;

margin-right:10px;

}

 

.comment .info img{

width:32px;

}

 (เหมือนจะดูเว้นห่างๆ แต่เว้นไม่เกิน 1 บรรทัดตามปกติครับ)
ยังไม่เสร็จเท่านี้ครับ จากนี้ให้เราทำการเตรียมรูปภาพที่จะทำมาใช้เป็นพื้นหลัง
และเช็คทั้งหมดว่าจะให้มันเปลี่ยนทั้งหมดกี่รูป อาทิเช่น ผมจะใช้ท้ังหมด 3 รูป ดังนี้
 
 
 
ก็ให้เราทำการเพิ่ม Code CSS แบบข้างบน "เพิ่มไปตามจำนวนรูปที่จะใช้" ครับ
แต่มันจะมีจุดแตกต่างอยู่นิดหน่อย .. แบบนี้ครับ
 

.comment1{

border-bottom:1px solid #DDD;

float:left;

margin:5px 0px 5px 0px;

padding-bottom:5px;

width:100%; height:140px;

background:url(Url รูปที่หนึ่ง) no-repeat;

background-position:top right;

 

}

 

.comment1 .post{

float:right;

width:530px;

}

 

.comment1 .post p{

margin-bottom:10px;

}

 

.comment1 .info{

float:left;

font-size:10px;

width:150px;

margin-right:10px;

}

 

.comment1 .info img{

display:table;

float:left;

padding-right:25px;

 

padding-top:20px;

width:32px;

}

 

.comment2{

border-bottom:1px solid #DDD;

float:left;

margin:5px 0px 5px 0px;

padding-bottom:5px;

width:100%; height:140px;

background:url(Url รูปที่สอง) no-repeat;

background-position:top right;

 

}

 

.comment2 .post{

float:right;

width:530px;

}

 

.comment2 .post p{

margin-bottom:10px;

}

 

.comment2 .info{

float:left;

font-size:10px;

width:150px;

margin-right:10px;

}

 

.comment2 .info img{

display:table;

float:left;

padding-right:25px;

 

padding-top:20px;

width:32px;

 

}

 

.comment3{

border-bottom:1px solid #DDD;

float:left;

margin:5px 0px 5px 0px;

padding-bottom:5px;

width:100%; height:140px;

background:url(Url รูปที่สาม) no-repeat;

background-position:top right;

 

}

 

.comment3 .post{

float:right;

width:530px;

}

 

.comment3 .post p{

margin-bottom:10px;

}

 

.comment3 .info{

float:left;

font-size:10px;

width:150px;

margin-right:10px;

}

 

.comment3 .info img{

display:table;

float:left;

padding-right:25px;

 

padding-top:20px;

width:32px;

}

 
จุดแตกต่างก็ดังที่เห็นคือในแต่ละชุด จะมีตัวเลขชุดกำกับอยู่ครับ (นอกนั้นเหมือนกันหมด)
เพิ่มขึ้นมาจากชุดแรกที่เป็น Code ยืนพื้น.. แล้วเราก็ทำการ ใส่ Url รูปลงไปตามลำดับ 1 2 3 เลยครับ
ภาพของ ชุดที่ 1 กับชุดแรกที่เป็นชุดยืนพื้น จะใช้ รูปเดียวกันครับไม่ต้องแปลกใจ
หรือใครจะเพิ่มรูปให้มากกว่านี้ก็ทำการเพิ่ม Code ชุดใหม่ลงไป แล้วเปลี่ยนเลขเป็น 4 5 6 ต่อๆ ไปเลยครับ
 
ย้ำอีกครั้งว่าทุกอย่างที่เราทำใน CSS นี้อยู่ในโซน /* Comment (Showing Area) */ ทั้งหมดครับ
 
เท่านี้ก็เรียบร้อยครับ.. > <
หากไม่มีอะไรผิดพลาด ผลลัพธ์ที่ได้จะประมาณนี้
 
 
 
ส่วนการปรับแต่งปลีกย่อยของกล่อง อันนี้ก็อยู่ที่ฝีมือของแต่ละท่านละครับ
สิ่งที่ต้องระวังหลักๆ ก็คือขนาดกว้าง x ยาวของรูปครับ ควรกะให้พอดีกับ
หน้า Entry และช่องแสดง Comment เพื่อความสวยงาม  ^^
 
เกือบลืมบอก.. Entry ไหนที่มีการลบ Comment.. Code ในหน้า Entry นั้นจะพังนะครับ (คือจะไม่สลับรูป)
 
= - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - =
 
... Entry นี้
สั้นๆ ง่ายๆ (มั้ง) ได้ใจความ (คิดว่านะครับ)
ก็พอดีว่าจะได้เก็บไว้เป็นฐานข้อมูลเสียด้วย
ใครทำละติดตรงไหนก็ถามๆ ได้ครับ แต่ผมก็
ไม่ค่อยรู้เรื่องเท่าไหร่เหมือนกันนะ Foot in mouth
 ก็.. จบเท่านี้ล่ะครับ (สั้นจริงๆ)
...
 
สำหรับ Entry นี้ ก็คงมีเรื่องพูดคุยเพียงเท่านี้
แล้วพบกันใหม่ Entry หน้าครับ
 
(ขอบพระคุณทุก ๆ ท่านที่เข้าชม Blog พิลึก ๆ นี้เช่นเคยครับ Cool)
 
Ps. อะไรสักอย่าง ใกล้จะคลอดแล้วจ้า
 
 

Comment

Comment:

Tweet

#16 By สติ๊กเกอร์ไลน์ (183.89.83.82|183.89.83.82) on 2014-11-28 08:37

จะลองเอาไปทำดูนะคะขอบคุณค่ะ เอาไปใช้นะ~

#14 By Petsinn Cashmere Crate Dog Pad (103.7.57.18|198.13.105.185) on 2013-07-05 13:48

Nice stuff about this topic. Everyone will find this sfuff at the custom writing services and buy an essay supreme-essay.com or order essay finished by essay writers.

#13 By research writing services (103.7.57.18|91.201.64.16) on 2012-09-09 03:33

Do you want to get resume company, which conform the range of research you wish?. You can rely on our resume writers, as you count on yourself. Thanks because that’s the useful knowledge

#12 By Look here (103.7.57.18|91.201.64.16) on 2012-09-08 08:42

People opine that stolen text can't be seen someone. I argue that <a href="http://theplagiarism.com">plagiarism checker</a> aids to eliminate any kinds of plagiarized stuff.

#11 By NicholsonPATTY (91.212.226.136) on 2012-03-22 16:57

waxnzh

#10 By atyhwgfe (91.232.96.4) on 2012-02-17 15:02

mini hdmi adapter

#9 By mini hdmi adapter (58.250.54.33) on 2011-10-29 15:18

โอ้ กระทู้ดี มีสาระ ~~

เขียนอ่านได้เข้าใจง่ายดีนะครับนิ ^^+

#8 By Butter-T on 2011-04-28 00:53

ขอบคุณสำหรับข้อมูลตามที่ขอครับ สำหรับบล็อกผมยังติดค้างเรื่อง How to อยู่ด้วยเรื่องของการทำปุ่ม Link อยู่เลย คิดว่าคงอีกนาน เพราะได้ที่ทำงานใหม่ งานหนักเงินดีกว่าเดิมครับ เวลาว่างคงน้อยลง

อย่างไรก็ขอบคุณสำหรับ How to นะครับ จะนำไปใช้แน่นอน ลงทุนทำตามที่ขอแบบนี้ต้องเอาดาวไปเยอะ ๆ Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot! Hot!

#7 By Kunizan on 2011-04-27 19:41

ทำซับอาเรียกันอยู่สองคน เกย์ขิง ๆ เลย...

#6 By nicky_008 on 2011-04-27 04:10

ขอบคุณค่ะ เอาไปใช้นะ~Hot! Hot!

#5 By ||CagedCanary|| on 2011-04-24 09:03

ขอบคุณสำหรับโค้ดกับวิธีทำครับ

ภาพล่างสุดมองผ่านๆนึกว่าผมอาเรียไหม้ = ="

#4 By yuki-tuki on 2011-04-23 19:58

เค้าเป็นสาวน้อยผมม่วงงงงHot! Hot!

#3 By pangnim on 2011-04-23 16:47

Hot! Hot!
ขอบคุณมากๆค่ะ
จะลองเอาไปทำดูนะคะ
มีประโยชน์จริงๆ
Hot! Hot!

#2 By hameii on 2011-04-23 16:45

เทสๆๆ เป็นคนแรก(วิ่งควาย) ฮา~

#1 By Shih-Hwa J. Tenkaminari on 2011-04-23 16:23