ช่วยหน่อยค่ะ ทำกล่องเพลงในนิยายกับจัดรูปแบบนิยายแบบนี้ทำยังไงคะ?

[Red Hairing]

ปกติหนูจะทำกล่องใส่เพลงแบบธรรมดาๆเลยอ่ะค่ะ แล้วพอดีไปเจอกล่องเพลงแบบนี้เข้า



แม่เจ้ามันงดงามมาก = = แถมมันยังสามารถเปลี่ยนเพลงเองเมื่อเพลงจบได้ด้วย
คำถามคือมันทำยังไงเหรอคะ ขอผู้รู้ผู้ใจดีรบกวนชี้แจงหน่อยค่ะ ขอบคุณมากค่ะ

แล้วก็


ปกติหนูจะจัดหน้านิยายให้มันลงมาเรื่อยๆแบบนี้












แต่บังเอิญไปเจอแบบนี้เข้า








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

Comments

[rubieismx]

ใช้โค้ดสองคอรั่มค่ะ แล้วก็ใช้โค้ดเพลงสีเทาใส่กี่จพลงก็ได้ตามแต่ใจชอบเลย ไว้เปิดคอมถ้าไม่ลืมจะเอาโค้ดมาแปะให้น้า

[Red Hairing]

ขอบคุณมากค่ะ รบกวนด้วยนะคะ

[rubieismx]

<embed allowscriptaccess="always" height="25" quality="autohigh" src="https://www.youtube.com/v/6VHA6DwUs7w?version=3&hl=en_US&autoplay=1&loop=1&theme=light&autohide=0&fs=0&modestbranding=1&showinfo=0

&playlist=zomViZnG0Sc,t6q4X2vovoo,sqlbgzx30Js,89vmRyDxJ0I,2720SvmPFy4,P0jeZU0Figw,-COLDFxJC18,mPaUtWf-EJE " type="application/x-shockwave-flash" width="250"><br />

อันนี้โค้ดเพลงนะคะส่วนโค้ดสองคอรั่มเราขอแกะของตัวเองก่อนห้านาที 5555

<div style="text-align: center;">

<div style="text-align: center;">

</div>

<table border="0" cellpadding="0" cellspacing="7" style="width: 730px; height: ความสูงpx" width="730">

<tbody>

<tr style="text-align: left">

<td valign="top">

<p style="text-align: center;">

</p>

<p style="text-align: center;">

</p>

</td>

<td valign="top" width="300">

</td>

</tr>

</tbody>

</table>

<span style="color:#2f3032;">

<style type="text/css">

ul.next li a{

border-right: 1px solid #FFFFFF;

}

p.font_nu02 {

}

.vote_box {

}

ul.bigsize li a {

} </style>

<style type="text/css">

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

<style type="text/css">

.avatar img:hover {-webkit-transition: all 0.9s ease-out;

-moz-transition: all 0.9s ease-out;

-webkit-transform: rotate(720deg)!important;

-moz-transform: rotate(720deg)!important;

-o-transform: rotate(720);-moz-border-radius: 20px;  border-radius: 20px;

-webkit-filter: saturate(50%);} </style>

<style type="text/css">

#content_name img{border:1px dashed #5b5b5b!important; padding:3px;border-radius: 30px/10px;box-chadow:2px 2px 0px} </style>

<style type="text/css">

div.story .desc_head {

display: none;

} </style>

<style type="text/css">

#content_name p

{display:none !important} </style>

<style type="text/css">

.avatar img:hover {-webkit-transition: all 0.9s ease-out;

-moz-transition: all 0.9s ease-out;

-webkit-transform: rotate(720deg)!important;

-moz-transform: rotate(720deg)!important;

-o-transform: rotate(720);-moz-border-radius: 20px;  border-radius: 20px;

-webkit-filter: saturate(50%);} </style>

<style type="text/css">

img[src*="/newtoon/"], img[src*="/board/pic/toon/"] {border-radius: 30px/10px;padding:2px;box-shadow: 0em 0em 2em #5b5b5b!important;-webkit-transition: all .5s ease-out;-moz-transition: all .5s ease-out;-webkit-transition: all 0.9s ease-out;-moz-transition: all 0.9s ease-out;} </style>

<style type="text/css">

#content_name img{border:1px dashed #5b5b5b!important; padding:3px;border-radius: 30px/10px;} </style>

<style type="text/css">

.avatar.girl {

border-color: #ffffff !important;

padding:4px;border: 1px dashed #5b5b5b !important;

border-radius: 30px/10px;}

.avatar.unsigned {

border-color: #ffffff !important;

padding:4px;border: 1px dashed #5b5b5b !important;

border-radius: 30px/10px;}

.avatar.boy {

border-color: #ffffff !important;

padding:4px;border: 1px dashed #5b5b5b !important;

border-radius: 30px/10px;} </style>

</span>

<div style="bottom:10px;right:30px;border:dashed 1px rgba(255,255,255,0.8)!important;padding:2px;">

<div style="bottom:10px;right:30px;border:dashed 1px rgba(255,255,255,0.8)!important;padding:2px;">

</div>

</div>

<br />

<div style="text-align: center;">

<br />

<div>

</div>

</div>

</div>

<div style="display:none;">

</div>

อันนี้โค้ดคอรั่มค่าอาจจะขนาดเบี้ยวๆ ไปปรับเองน้า เราจัดให้มันเข้ากับธีมเราเฉยๆ