Bloggang.com : oranuch

รวมCODEตกแต่งBLOG #1

รวมโค้ดที่ใช้ในการตกแต่งBlog & HTML Code

โค้ดทั้งหมดที่ได้นำมารวบรวมในครั้งนี้

ได้นำมาจากบล็อกของคุณไหม(Paradijs)

ซึ่งจขบ.ได้พูดคุยและขออนุญาตคุณไหม

เป็นที่เรียบร้อยแล้ว

ในการที่จะนำโค้ดมาลงที่บล็อก

ขอขอบคุณ คุณไหม ไว้ณ.ที่นี้ด้วยค่ะ

Blog คุณไหม(Paradijs)

//www.bloggang.com/viewdiary.php?id=paradijs&group=2

Create Date : 23 มีนาคม 2555

20 comments

Last Update : 18 มกราคม 2559 8:10:45 น.

Counter : 46040 Pageviews.

รวมโค้ดที่ใช้ตกแต่งบล็อค

ลบพื้นหลังและลบกรอบสีขาว

<style>table {background-color: transparent;border-style: none;border-spacing: none;}td {border: none;border-color: none;background: none;}</style>

=========================================

เปลี่ยนรูปพื้นหลัง

<style>body{background-attachment: fixed;background-image:url(URL ของรูป);}</style>

=========================================

เปลี่ยนสีและแบบ Font

<style>body, ul, li, p{font:bold MS Sans Serif;font-size:10pt;color:โค้ดสี;}</style>

=========================================

เปลี่ยนตัวหนังสือให้ใหญ่และ Font

<style>p b font {font:bold 13px MS Sans Serif;}</style>

=========================================

เปลี่ยนสี Link

<style>A:link{color:โค้ดสี Link;text-decoration:none;}
A:visited{color:โค้ดสีที่คลิกแล้ว;text-decoration:none}
A:hover{color:โค้ดสีที่ลากผ่าน;text-decoration: none;}</style>

โดย: oranuch_sri 23 มีนาคม 2555 18:45:34 น.

เปลี่ยน Bullet (จุดกลมๆที่อยู่หน้า Group Blog)

<style>ul{list-style: ;list-style-image: url(URL ของรูป);}</style>

=========================================

เปลี่ยน Title Bar (แถบสีฟ้าที่อยู่บนและล่างสุด)

<script language="Javascript">
var tt = 0;
var FMess = new Array("ข้อความที่ 1","ข้อความที่ 2","ข้อความที่ 3")
function FTitle()
{
document.title = FMess[tt]
tt = (tt < (FMess.length -1)) ? tt + 1 : 0;
setTimeout('FTitle()',700);
}
FTitle();
</script>

=========================================

ทำให้รูปไม่มีกรอบ

<style>img {border: none;}</style>

=========================================

เปลี่ยน Cursor

<body style="cursor:url(URL ของรูป ไฟล์ .ani หรือ .cur)">

=========================================

เปลี่ยนสี Scrollbar (แถบลากขึ้นลงด้านขวามือ)

<STYLE> body { scrollbar-3d-light-color:โค้ดสี; scrollbar-arrow-color:โค้ดสี; scrollbar-3d-light-color:โค้ดสี; scrollbar-arrow-color:โค้ดสี; scrollbar-base-color:โค้ดสี; scrollbar-dark-shadow-color:โค้ดสี; scrollbar-face-color:โค้ดสี; scrollbar-highlight-color:โค้ดสี; scrollbar-track-color:โค้ดสี; scrollbar-shadow-color:โค้ดสี; }</STYLE>

โดย: oranuch_sri 23 มีนาคม 2555 18:46:16 น.

จำนวนผู้ชมออนไลน์

<script type="text/javascript" src="//fastonlineusers.com/on4.php?d=URL บล็อคของคุณ"></script> : Users Online

=========================================

ใส่รูปภาพ

<img src="URL ของรูป" "border=0">

=========================================

ใส่รูปภาพพร้อมคำพูด

<img src="URL ของรูป" alt="ข้อความที่ต้องการ">

=========================================

ส่งอีเมล์

<a href="mailto:ที่อยู่อีเมล์ของคุณ">ส่งอีเมล์</a>

หรือใส่รูป
<a href="mailto:ที่อยู่อีเมล์ของคุณ"><img src="URL ของรูป"></a>

=========================================

เปลี่ยน Logo Bloggang

<script>document.images[0].src="URL ของรูป"; document.images[0].width =0 ; document.images[0].height =0</script>

โดย: oranuch_sri 23 มีนาคม 2555 18:47:12 น.

ทำ Link

<a href ="URL Link">ข้อความที่ต้องการ</a>

=========================================

ทำ Link เปิดหน้าใหม่

<a href =URL Link target=_blank>ข้อความที่ต้องการ</a>

=========================================

ทำรูปให้กับ Link

<a href="URL Link"><img src="URL ของรูป"></a>

ทำรูปให้กับ Link (เปิดหน้าใหม่)

<a href="URL Link" target=_blank><img src="URL ของรูป"></a>

=========================================

ทำกรอบรอบๆบล็อค

<script language="JavaScript1.2">
if (document.all)
document.body.style.cssText="border:10 ridge โค้ดสี"
</script>

=========================================

ข้อความต้อนรับ

<SCRIPT LANGUAGE="JavaScript">

</script>

==============================================

ข้อความบอกลา

<Script Language="VBScript"> Sub Window_onUnLoad() alert("ข้อความที่ต้องการ") End Sub </Script>

โดย: oranuch_sri 23 มีนาคม 2555 18:48:05 น.

ใส่เพลง Real Player ram, rm

<OBJECT ID=video1 CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" HEIGHT=70 WIDTH=300>
<PARAM NAME="controls" VALUE="ControlPanel,StatusBar">
<PARAM NAME="console" VALUE="Clip1">
<PARAM NAME="autostart" VALUE="true หรือ false">
<PARAM NAME="src" VALUE="URL เพลง">
<EMBED SRC="URL เพลง" type="audio/x-pn-realaudio-plugin" CONSOLE="Clip1" CONTROLS="ControlPanel,StatusBar" HEIGHT=70 WIDTH=300 AUTOSTART=false>
</OBJECT>

=========================================

ใส่เพลง wma, wmv, mp3

มี Console เปิด - ปิด
<EMBED SRC="URL เพลง wma, wmv, mp3" HEIGHT="40" WIDTH="170" AUTOSTART="true" VOLUME="50%" MASTERSOUND></EMBED>

ไม่มี Console เปิด - ปิด
<EMBED SRC="URL เพลง wma, wmv, mp3"HIDDEN="true" AUTOSTART="true" LOOP="true" VOLUME="50%" MASTERSOUND></EMBED>

=========================================

ใส่เพลง swf

<object id="mediaplayer" height="45" width="170" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"standby="Loading Microsoft Windows Media Player components" viewastext><param name="url"value="URL เพลง swf"><param name="autostart" value="ture"></object>

โดย: oranuch_sri 23 มีนาคม 2555 18:49:03 น.

ใส่ไฟล์ .css

<link rel="stylesheet" href="URL ของ ไฟล์ .css" type="text/css">

=========================================

เปลี่ยนสีตัวหนังสือ

<font color="โค้ดสี">ข้อความที่ต้องการ</font>

=========================================

ลูกเล่นเมื่อเปลี่ยน Webpage

<Meta http-equiv="Page-Enter" content="RevealTrans (Duration=3, Transition=23)">
<Meta http-equiv="Page-Exit" content="RevealTrans (Duration=2, Transition=23)">

=========================================

จำนวนผู้ชมทั้งหมด

<center><script src="//fastwebcounter.com/secure.php?s=ใส่ URL บล็อค ของคุณที่นี่ค่ะ"></script></center>

=========================================

โค้ด กลับขึ้นข้างบนของ Page

<center><a href="#top">TOP</a></center>

ลองกดทดสอบที่นี่ค่ะ

=========================================

ส่งหลังไมค์

<a href ="URL หลังไมค์" target='_blank'> ส่งหลังไมค์ที่นี่</a>

หรือใส่รูป
<a href ="URL หลังไมค์" target='_blank'><img src="URL ของรูป" border=0></a>

โดย: oranuch_sri 23 มีนาคม 2555 18:50:07 น.

โค้ดทำกรอบและเปลี่ยนคำให้กับ Submit และ Reset

<script>
document.forms.reply.Submit.value = "Submit";
document.forms.reply.Reset.value = "Reset";
document.forms.reply.Submit.style.width = 100;
document.forms.reply.Reset.style.width = 100;
document.forms.reply.Submit.style.height = 30;
document.forms.reply.Reset.style.height = 30;
document.forms.reply.Submit.style.backgroundColor = "black";
document.forms.reply.Reset.style.backgroundColor = "black";
document.forms.reply.Submit.style.color = "#e65c7c";
document.forms.reply.Reset.style.color = "#e65c7c";
document.forms.reply.Submit.style.border = "3px double #e65c7c";
document.forms.reply.Reset.style.border = "3px double #e65c7c";
</script>

Submit = เปลี่ยนเป็นคำที่ต้องการแทน Submit
Reset = เปลี่ยนเป็นคำที่ต้องการแทน Reset
100 = ความยาวของกรอบ
30 = ความสูงของกรอบ
black = สีพื้นหลังที่ต้องการ
#e65c7c = สีตัวอักษรที่ต้องการ
3px double #e65c7c = ขนาด, ชนิด, และสีกรอบที่ต้องการ
ชนิดกรอบจะมี solid, inset, outset, groove, ridge, dashed, dotted, หรือ double

โดย: oranuch_sri 23 มีนาคม 2555 18:51:05 น.

โค้ดเชคข้อความหลังไมค์

ต้อง Login ที่ Bloggang ก่อนค่ะ ถึงจะเชคข้อความหลังไมค์ได้

<a href ="//www.pantip.com/cafe/krazip/index.php" target=_blank>เชคข้อความหลังไมค์</a>

หรือใส่รูป
<a href="//www.pantip.com/cafe/krazip/index.php" target=_blank><img src="URL ของรูปที่ต้องการ" border="0"></a>

=========================================

โค้ดเปลี่ยนรูปตรง Rss Feed

<script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="https://www.bloggang.com/images/icon_rss.png") {document.images[i].src="URL ของรูปที่ต้องการ"}</script>

=========================================

โค้ดเปลี่ยนรูปตรง My FriendFlock

<script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="https://www.bloggang.com/images/icon_network_mini1.gif") {document.images[i].src="ใส่ URL ของรูปที่ต้องการเปลี่ยน"}</script>

=========================================

โค้ดเปลี่ยนรูปตรง ฝากข้อความหลังไมค์

<script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="https://www.bloggang.com/images/message.gif") {document.images[i].src="ใส่ URL ของรูปที่ต้องการเปลี่ยน"}</script>

=========================================

ใส่รูปให้กล่อง Comment

<style>textarea{ width: 300; height: 200; background: url(URL ของรูป); color: โค้ดสีเวลาพิมพ์; font-family : MS Sans Serif; font-size: 14pt; }</style>

=========================================

เปลี่ยนรูปหัวใจ (Login ท้ายชื่อใน Comment)

<script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="https://www.bloggang.com/images/smile.gif") {document.images[i].src="ใส่ URL ของรูปที่ต้องการเปลี่ยน"}</script>

โดย: oranuch_sri 23 มีนาคม 2555 18:52:05 น.

เปลี่ยน Now Here

<script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="https://www.bloggang.com/images/now.gif") {document.images[i].src="ใส่ URL ของรูปที่ต้องการเปลี่ยน"}</script>

=========================================

โค้ดเปลี่ยนรูปถังขยะ ( ลบ Comment, ลบ Blog )

<script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="https://www.bloggang.com/images/delete.gif") {document.images[i].src="URL ของรูปที่ต้องการเปลี่ยน";document.images[i].height="ความสูงของรูป"; document.images[i].width="ความยาวของรูป";}</script>

=========================================

โค้ดเปลี่ยนรูปกระดาษ ปากกา ( แก้ไข Blog )

<script>iLength = document.images.length; for(i=0;i<iLength;i++) if(document.images[i].src=="https://www.bloggang.com/images/iconnote.gif") {document.images[i].src="URL ของรูปที่ต้องการเปลี่ยน";document.images[i].height="ความสูงของรูป"; document.images[i].width="ความยาวของรูป";}</script>

=========================================

โค้ดป้องกันการยืดของหน้าบล็อค

<style>div.comment{overflow: auto; width: 400px; height: auto;}</style>

=========================================

โค้ด ที่ทำให้ข้อความหรือรูปภาพ

ที่เพื่อนๆคอมเม้นท์ ให้อยู่ตรงกลาง

<style>div.comment{text-align: center;}</style>

ตรง center จะกำหนดให้ข้อความ และ รูปภาพ

ที่เพื่อนๆ Comments อยู่ตรงกลาง ทั้งหมด

เราสามารถเปลี่ยนเป็น right ได้ ข้อความจะอยู่ชิดขวา

ถ้าไม่ได้ใส่โค้ด Style นี้ลงไป

ข้อความจะอยู่ชิดซ้าย ที่เราๆเห็นกันอยู่

นำโค้ดวางไว้ที่ Script Area ค่ะ

โดย: oranuch_sri 23 มีนาคม 2555 18:53:29 น.

โค้ดทำ BG ให้กับกล่อง Emotion โดยใช้รูปหรือสี +

โค้ดทำกรอบ กล่อง Emotion

=========================================

โค้ดใช้รูปทำ Background ให้กล่อง Emotion

<style>
fieldset{
background-image: url(ใส่ URL รูปที่ต้องการ);}
</style>

=========================================

โค้ดใช้สีทำ Background ให้กล่อง Emotion

<style>
fieldset{
background: ใส่สีที่ต้องการทำบีจี;}
</style>

=========================================

ให้เลือกเอาโค้ดอย่างใดอย่างหนึ่ง เสร็จแล้ว Copy โค้ด

วางไว้ที่ Script Area จะมองเห็นเหมือนกัน ทุกๆบล็อคที่สร้าง

วางไว้ที่ รายละเอียด ตอนสร้างบล็อค จะมองเห็นเฉพาะบล็อคนั้นๆ

ถ้าวางโค้ดไว้ที่ รายละเอียด ให้ทำโค้ด เป็นแถวเดียวกันด้วยค่ะ

ถ้าวางโค้ดไว้ที่ Script Area ไม่ต้องทำให้เป็นแถวเดียวกันก็ได้

ป.ล. ถ้าใครใช้ โค้ดกรอบนับคอมเม้นท์ จากบล็อคป้ามด

โค้ดตัวนี้ จะมีผลกับ กรอบนับคอมเม้นท์ และ fieldset Style

(กรอบมนๆ) ด้วยค่ะ

จะมองเห็นรูปบีจี หรือ สีบีจี ที่เราใส่โค้ดลงไป

ที่กรอบนับคอมเม้นท์ด้วยเช่นกัน

ใครอ่านแล้ว งง ให้ทดสอบเอาโค้ดวางไว้ที่ Script Area

แล้วสังเกตุดูกรอบนับคอมเม้นท์ของคุณดูนะคะ ว่าเป็นยังไง

ถ้าใครใช้โค้ดกรอบนับคอมเม้นท์ที่เราทำออกมาใหม่

จะไม่มีผลอะไรค่ะ

โค้ดกรอบนับคอมเม้นท์ แบบใหม่ ที่เราใช้อยู่ กดที่นี่ค่ะ

=========================================

ตัวอย่าง ก่อนทำ

=========================================

ตัวอย่าง หลังทำ

=========================================

โค้ดทำกรอบให้กับ กล่อง Emotion
(ทำกรอบอย่างเดียวค่ะ ไม่รวม BG)

<style>
fieldset{
border: 3px double;
padding: 5px;
border-color : ใส่โค้ดสีกรอบที่ต้องการ;}
</style>

padding: 5px = ระยะห่างของรูปและตัวอักษรจากกรอบ

border: 3px = เปลี่ยนขนาดของกรอบได้ค่ะ

double = ชนิดของกรอบ เปลี่ยนเป็นแบบอื่นได้ค่ะ

ชนิดของกรอบจะมี
inset, outset, double, dotted

dashed, groove, ridge, solid

โดย: oranuch_sri 23 มีนาคม 2555 18:54:45 น.

ขอบคุณค่ะ

โดย: pantawan 23 มีนาคม 2555 20:57:58 น.

....เจ๋งอ่ะ...

โดย: krittut_48 23 มีนาคม 2555 21:20:54 น.

พวกโค๊ด ใส่รูปในกล่อคอมเม้นไว้ในไหนหรอค่ะบางครั้งไว้ในScript Area แล้วมันก็ไม่ขึ้น พอบางครั้งกด saveแล้วหายไปอีก

โดย: tanwaratmi 12 เมษายน 2555 16:04:40 น.

โดย: ยัยคิดมาก (LadyGirL-Ying ) 1 กุมภาพันธ์ 2556 19:04:07 น.

มีโค้ดปรับขนาดตัวอักษรในกล่องคอมเม้นมั้ยคะ?

โดย: ยัยคิดมาก (LadyGirL-Ying ) 1 กุมภาพันธ์ 2556 19:08:29 น.

สวัสดีค่ะ อยากทำ scroll bar ใส่นิยายค่ะ เอาตอนนิยายใส่ลงไปยังไงคะ ขอโค้ดที่เป็น scroll bar เลื่อนขึ้น-ลง และใส่ตอนนิยายด้วยได้ไหมคะ ใส่ยังไงคะ มีโค้ดสำหรับใส่ตอนนิยายไหมคะ ทำไม่เป็นเลยค่ะ ช่วยอธิบายด้วยได้ไหมคะ ว่าใส่ตรงไหน ขอบคุณค่ะ

โดย: อรัญญาีวี (อรัญญาวี ) 5 สิงหาคม 2556 23:52:57 น.

ฝากด้วยจ้า
โค้ดติดเว็บ

โดย: konseo 5 เมษายน 2557 18:08:45 น.

//www.mindphp.com/forums/viewtopic.php?f=24&t=41160
ฝากเพิ่มโค้ดติดเว็บด้วยครับผม
ขอบคุณครับ

โดย: na_nyu 27 พฤศจิกายน 2560 19:54:33 น.

Hello My Friend

โดย: oranuch_sri 22 ธันวาคม 2560 19:42:51 น.

โค้ดปลักอิน ตรวจหวย

โดย: na_nyu 4 มกราคม 2564 2:10:53 น.