[How To]แต่งBlogแบบแมวๆ "วิธีใส่รูปลงในส่วนComment"
posted on 01 Sep 2011 08:14 by code-catte in Howto, MiniProject
)
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)%5)+1);
i++;
}
}
</script>
============================================================
จากนั้นไปที่ Css Editor
============================================================
เลื่อนลงมาจนถึงส่วน
/* Comment (Showing Area) */
ให้็ก็อปโค๊ดต่อไปนี้ครับ
.comment1{
border-bottom:1px dotted #4169E1;
background:url(codeรูปที่เราจะใช้) no-repeat bottom right;
float:right;
margin:15px 0px 0px 10px;
padding:12px 0px;
width:700px;
height:250px;
display:block;
}
.comment1 .post{
float:right;
width:50%;
padding:8px 15px 8px 15px;
margin-right:210px;
height:144px;
overflow:auto;
border:solid 0px #CC0000;
background:#F5F5F5;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.comment1 .post p{
margin-bottom:10px;
text-align:right;
}
.comment1 .info{
background:#f49127;
color:#F0F8FF;
float:left;
font-size:10px;
width:180px;
height:64px;
overflow:auto;
margin-left:0px;
padding:10px;
display:block;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.comment1 .info img{
width:24px;
}
height:250px; สามารถเปลี่ยนขนาดได้ ตามขนาดความสูงของรูปที่เราจะนำมาใช้
ส่วนที่ผมทำสีส้มไว้ ( #4169E1 )อันนั้นเอาไว้แก้สีของขอบครับ
ส่วนโค๊ดสีต่างก็เลือกเอาเลยจากลิงค์นี้ครับ
Code color เบื้องต้น ถ้าอยากได้เพิ่มกว่านี้ ให้หาจาก Google เลยเน้อ คำค้นว่า" Code สี "
อย่าลืมถ้าเรามีรูป2รูปที่จะนำลงใส่ในส่วนคอมเม้นก็ก็อปโค๊ดนั้นแล้วก็ ห้ามลืมแก้หัวข้อต่อไปนี้
.comment1
.comment1 .post
.comment1 .post p
.comment1 .info
.comment1 .info img
ใ้ห้แก้ชื่อเป็น
.comment2
.comment2 .post
.comment2 .post p
.comment2 .info
.comment2 .info img
หรือถ้ามีมากกว่านั้น ก็เปลี่ยนเป็น 3 4 5 6 อะไรก็ว่าไปครับ^w^
เช่น
.comment6{
border-bottom:1px dotted #4169E1;
background:url(Codeรูปที่เราจะนำมาใช้) no-repeat bottom right;
float:right;
margin:15px 0px 0px 10px;
padding:12px 0px;
width:700px;
height:250px;
display:block;
}
.comment6 .post{
float:right;
width:50%;
padding:8px 15px 8px 15px;
margin-right:210px;
height:144px;
overflow:auto;
border:solid 0px #CC0000;
background:#F5F5F5;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.comment6 .post p{
margin-bottom:10px;
text-align:right;
}
.comment6 .info{
background:#f49127;
color:#F0F8FF;
float:left;
font-size:10px;
width:180px;
height:64px;
overflow:auto;
margin-left:0px;
padding:10px;
display:block;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.comment6 .info img{
width:24px;
}
เท่านี้เราก็ได้คอมเม้นสวยๆตามที่รูปเราใส่ลงไปแล้วเน้อ>w<
ในตัวอย่าผมทำคอมเม้นตัวที่ 6 ไว้ >w<
============================================================
*หมายเหตุ
เราต้องแก้ Custom Code ที่อยุ่ใน Bottom menu ตามจำนวนภาพที่เราใช้ทำ ตามที่เราใส่ลงในCSS ด้วย
============================================================
* ข้อควรระวัง
-เมื่อทำเสร็จแล้วห้ามลบหรือซ่อนคอมเม้นเด็ดขาด ไม่เช่นนั้น เอนทรี่นั้นๆรูปในส่วนคอมเม้นจะเสียทันทีครับ
หาทางแก้ไม่ได้T^T แต่เอนทรี่ใหม่ไม่เป็นไร
============================================================
เครดิตสักนิด : ขอบคุณคนคิดCode สนุกๆเอาไว้แต่งBlogนะครับ
แน่นอนว่าวิญญานแมวคงไม่ได้คิดเองหรอก
แต่จำไม่ได้ว่าไปเอามาจากไหน เพราะมีหลายที่แล้วนำมาผสมๆกัน
และที่สำคัญ ขอบคุณ www.Exteen.com ที่มีพื้นที่ให้ลองทำอะไรหลายๆอย่างครับ>w<
============================================================
แถมอีกนิด
คิดถึงสมัยก่อนแหะ ตัวนี้วาดไว้นานแล้ว สมัยยังสไลด์เมาท์หนูกู้โลกอยู่เลย
ไหนๆก็ทำไว้แล้ว เอามาทำคอมเม้นเลยละกัน 
(เคยเอากลับมาRemakeใหม่แล้วอยู่ใน Head แต่... รู้สึกว่าน่ารักไม่เท่าเดิมแหะ)
ไว้เจอกันใหม่เอนทรี่หน้านะคร๊าบ>w<
ปล.ตอนนี้หายไข้แล้วแต่กำลังจะเป็นอีก อากาศเล่นแปรปรวนหนักกลางร้อนตับระเบิด
ตกเย็นมาฝนตกอย่างกะพายุ=w=
เราก็ป่วยแต่มันอดใจไม่ได้ เปิดคอมอีกแระ เหอๆๆ
)
ขอบคุณสำหรับวิธีทำนะครับ เอาไว้ทำมั้งดีกว่า ^^+b 
#1 By i-maii on 2011-09-01 10:56