[BL SPOT] របៀបដាក់ MUSIC លើBLOGSPOT ~ https://nachhayneng.blogspot.com/

ចម្រៀងជាផ្នែកមួយសម្រាប់រំសាយភាពនឿយហត់នឹងជាការកំសាន្តដែលមនុស្សពេញនិយម សម្រាប់ម្ចាស់គេហទំព័រ ឬ ប្លុក ក៍គាត់ចង់ដាក់កម្មវិធីចាក់ចម្រៀងនានានៅលើគេហទំព័រ ឬប្លុករបស់គាត់ ដើម្បីបម្រើសេវាកម្មអ្នកទស្សនារបស់គាត់។ថ្ងៃនេះខ្ញុំបាទនឹងលើកយកប្រធានបទ មួយបកបង្ហាញគឺរបៀបដាក់ HTML5 Music Player នៅលើ ប្លុក ។

ជាតំបូងសូម Login ចូលគណនីប្លុករបស់ អ្នកបន្ទាប់ចុចលើពាក្យ layout រូចជ្រើសយកពាក្យ Add Gadget ដើម្បី Widget ទៅលើប្លុករបស់អ្នក រួច ជ្រើសយក HTML and Javascript បន្ទាប់សូមចំណង
ជើង Widget របស់អ្នក ដូចរូបភាពបង្ហាញខាងក្រោម។

ចម្លងកូដខាងក្រោមនេះ យកទៅដាក់ក្នុង Content រួច ចុចយកពាក្យ Save

.mbl .ui-slider-handle {
width:14px;
height:14px;
position:absolute;
top:-3px;
margin-left:-7px;
z-index:200;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqpaumbCGWZdcVLhuNfvX4inkYi5JUrczH_BFbl7E98u2_M0jGO2CWbP2cp3xFVbkXFvQ7i0ptq7Uknu-sGMX2Flk_YpqDRXZ8l7VP_V_Ehbf7EFbbq5ps8myGUZytIEidvXB8M_sGoDyt/s1600/mnpl_tlb_btns.png)
 -84px bottom no-repeat;
outline:none;
}

.mbl .ui-widget-header {
background:url() repeat-x 0 0;
height:8px;
left:0;
top:0;
position:absolute;
border-radius:5px 0 0 5px;
}

.mbl_player {
font-size:15px!important;
font-family:'Open Sans', Helvetica, Arial, sans-serif;
color:#fff;
position:relative;
width:300px;
box-shadow:0 0 20px 0 rgba(0,0,0,0.5);
height:430px;
border:1px solid #000;
border-radius:0px;
background:#000;
margin:0px;
}

.mbl_player .mnpl_toolbar {
position:absolute;
width:auto;
height:30px;
left:0;
right:0;
bottom:265px;
border-top:1px solid #000;
background-color: rgba(239, 92, 12, 1);
}

.mbl_player .mnpl_toolbar .mnpl_tlb_prev {
position:absolute;
width:28px;
height:30px;
left:0;
top:0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqpaumbCGWZdcVLhuNfvX4inkYi5JUrczH_BFbl7E98u2_M0jGO2CWbP2cp3xFVbkXFvQ7i0ptq7Uknu-sGMX2Flk_YpqDRXZ8l7VP_V_Ehbf7EFbbq5ps8myGUZytIEidvXB8M_sGoDyt/s1600/mnpl_tlb_btns.png)
 0 0 no-repeat;
cursor:pointer;
}

.mbl_player .mnpl_toolbar .mnpl_tlb_stop {
position:absolute;
width:28px;
height:30px;
left:28px;
top:0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqpaumbCGWZdcVLhuNfvX4inkYi5JUrczH_BFbl7E98u2_M0jGO2CWbP2cp3xFVbkXFvQ7i0ptq7Uknu-sGMX2Flk_YpqDRXZ8l7VP_V_Ehbf7EFbbq5ps8myGUZytIEidvXB8M_sGoDyt/s1600/mnpl_tlb_btns.png)
 -116px 0 no-repeat;
cursor:pointer;
}

.mbl_player .mnpl_toolbar .mnpl_tlb_stop.isplay {
background-position:-28px 0;
}

.mbl_player .mnpl_toolbar .mnpl_tlb_next {
position:absolute;
width:28px;
height:30px;
left:56px;
top:0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqpaumbCGWZdcVLhuNfvX4inkYi5JUrczH_BFbl7E98u2_M0jGO2CWbP2cp3xFVbkXFvQ7i0ptq7Uknu-sGMX2Flk_YpqDRXZ8l7VP_V_Ehbf7EFbbq5ps8myGUZytIEidvXB8M_sGoDyt/s1600/mnpl_tlb_btns.png)
 -56px 0 no-repeat;
cursor:pointer;
border-right:1px solid #000;
}

.mbl_player .mnpl_long {
position:absolute;
left:122px;
top:10px;
width:140px;
}

.mbl_player .mnpl_current {
position:absolute;
left:85px;
top:0;
bottom:0;
border-left:1px solid #2d2d2d;
font-size:9px;
padding:10px 0 0 9px;
}

.mbl_player .mnpl_all {
position:absolute;
left:270px;
top:0;
bottom:0;
font-size:9px;
padding:8px 0 0;
}

.mbl_player .mbl_art_bg {
position:absolute;
width:auto;
height:auto;
opacity:0.3;
left:0;
right:0;
bottom:31px;
top:0;
background-repeat:no-repeat;
background-position:center top;
background-size:100% auto;
}

.mbl_player .mbl_cover {
position:absolute;
width:110px;
height:115px;
left:10px;
top:10px;
border-top:1px solid #141414;
border-bottom:1px solid #000;
border-left:1px solid #151515;
border-right:1px solid #000;
border-radius:0px;
}

.mbl_player .mnpl_title {
position:absolute;
left:130px;
top:21px;
font-weight:700;
font-size:14px;
}

.mbl_player .mnpl_author {
position:absolute;
left:149px;
top:42px;
font-weight:700;
font-size:11px;
color:#999;
}

.mbl_player li {
float:left;
width:10px;
height:10px;
padding-right:4px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqpaumbCGWZdcVLhuNfvX4inkYi5JUrczH_BFbl7E98u2_M0jGO2CWbP2cp3xFVbkXFvQ7i0ptq7Uknu-sGMX2Flk_YpqDRXZ8l7VP_V_Ehbf7EFbbq5ps8myGUZytIEidvXB8M_sGoDyt/s1600/mnpl_tlb_btns.png)
 -84px 0 no-repeat;
opacity:0.2;
}

.mbl_player .mnpl_volume {
position:absolute;
left:154px;
top:118px;
width:102px;
}

.mbl_player .mnpl_volume_min {
position:absolute;
left:140px;
top:117px;
width:12px;
height:11px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqpaumbCGWZdcVLhuNfvX4inkYi5JUrczH_BFbl7E98u2_M0jGO2CWbP2cp3xFVbkXFvQ7i0ptq7Uknu-sGMX2Flk_YpqDRXZ8l7VP_V_Ehbf7EFbbq5ps8myGUZytIEidvXB8M_sGoDyt/s1600/mnpl_tlb_btns.png)
 -98px bottom no-repeat;
}

.mbl_player .mbl_volume_max {
position:absolute;
left:273px;
top:116px;
width:18px;
height:15px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqpaumbCGWZdcVLhuNfvX4inkYi5JUrczH_BFbl7E98u2_M0jGO2CWbP2cp3xFVbkXFvQ7i0ptq7Uknu-sGMX2Flk_YpqDRXZ8l7VP_V_Ehbf7EFbbq5ps8myGUZytIEidvXB8M_sGoDyt/s1600/mnpl_tlb_btns.png)
 -98px 0 no-repeat;
}

.mbl_playlist {
background:#000;
overflow-y:auto;
position:absolute;
width:auto;
height:260px;
border-top:1px solid #000;
bottom:0;
left:0;
right:0;
}

.mbl_playlist span {
display:block;
border-bottom:1px solid #575555;
cursor:pointer;
font-size:80%;
opacity:0.8;
padding:5px 20px;
}

::-webkit-scrollbar {
width:13px;
height:13px;
background-color:#7f8c8d;
}

::-webkit-scrollbar-corner {
background:#fff;
}

::-webkit-scrollbar-thumb {
border-radius:0px;
border:3px solid transparent;
border-image:initial;
box-shadow:#fff 0 0 0 4px inset;
}

::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover {
min-height:20px;
background-clip:content-box;
}

::-webkit-scrollbar-thumb:hover {
box-shadow:#3498db 0 0 0 4px inset;
}

.mbl_player li.active,.mbl_playlist span:hover {
opacity:1;
}
</style>

<br />
<div class="mbl">
<div class="mbl_player" id="mnplp">
<div class="mbl_art_bg">
</div>
<img alt="" class="mbl_cover" src="" />
  <span class="mnpl_title"></span>
  <span class="mnpl_author"></span>
  
  <br />
<div class="mnpl_volume_min">
</div>
<div class="mnpl_volume">
</div>
<div class="mbl_volume_max">
</div>
<div class="mnpl_toolbar">
<div class="mnpl_tlb_prev">
</div>
<div class="mnpl_tlb_stop">
</div>
<div class="mnpl_tlb_next">
</div>
<div class="mnpl_current">
</div>
<div class="mnpl_long">
</div>
<div class="mnpl_all">
</div>
</div>
<div class="mbl_playlist">
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('#mnplp').mnplp({
'volume': 80,
'playlist':[
{"title":"Cry on My Shoulder", "author":"Super Star ", 
"cover":"https://lh4.googleusercontent.com/-44mMkp4nTFU/U8i9Q8P-nCI/AAAAAAAAAQ8/IJLWFkbfqdM/s534-no/Deutschland-sucht-den-Superstar_-United.jpg",
 "background":"cover-image.jpg", 
"mfile":"https://www.dropbox.com/s/7pgegsowx126r61/HQ%5D%20Cry%20On%20My%20Shoulder%20.mp3?dl=1"},

{"title":"All
 Of me", "author":"Jhon legend", 
"cover":"https://lh3.googleusercontent.com/-TZfisPyi8e0/U8jDVKF0MwI/AAAAAAAAARY/p1-ehAwhmK4/w401-h534-no/all+of+me.jpg",
 "background":"cover-image.jpg", 
"mfile":"https://googledrive.com/host/0BwrRT1IZntENNDVPdFN6Q3lRUlk"},

{"title":"A thousand Years", "author":"Cristina Perri", 
"cover":"https://lh6.googleusercontent.com/-tZC2lHPU8pA/U8jEZ0o-r9I/AAAAAAAAARk/mqh7xIf_uMA/s240-no/A+thousand+year.jpg",
 "background":"cover-image.jpg", 
"mfile":"https://googledrive.com/host/0BwrRT1IZntENM01XZHNZNFU2R0k"},

{"title":"Compass", "author":"Sam bailey", 
"cover":"https://lh5.googleusercontent.com/-oCWlaxjD-JQ/U8jGvPDkfLI/AAAAAAAAAR0/JmneMFQc3DI/w618-h420-no/Compass.jpg",
 "background":"cover-image.jpg", 
"mfile":"https://googledrive.com/host/0BwrRT1IZntENTEZzaWN4b09HTUE"},

{"title":"if I die young ", "author":"Cristina Perri ", 
"cover":"https://lh5.googleusercontent.com/-7Reumnv8VkQ/U8kwRVmJlVI/AAAAAAAAATA/OJnwLZ0KvEA/s500-no/the-band-perry.jpg",
 "background":"cover-image.jpg", 
"mfile":"https://googledrive.com/host/0BwrRT1IZntENdy0yakpaNl9ZbzQ"},

{"title":"I wish you were here  ", "author":"Avril Lavigne ", 
"cover":"https://lh5.googleusercontent.com/-yBkaTEd6bz0/U8mr_4pdtcI/AAAAAAAAATQ/1Mogw976sFI/s300-no/Avril_Lavigne_-_Wish_You_Were_Here.png",
 "background":"cover-image.jpg", 
"mfile":"https://googledrive.com/host/0BwrRT1IZntENLWI1bnNJSnVPcE0"},

{"title":"Let it go   ", "author":"Demi lovato ", 
"cover":"https://lh3.googleusercontent.com/-gMhYKCavVTA/U8n8o8obe0I/AAAAAAAAATk/33ZRZUnDmIE/s300-no/Let_It_Go_single_artwork.jpg",
 "background":"cover-image.jpg", 
"mfile":"https://googledrive.com/host/0BwrRT1IZntENd3d5cDliSXBHQ2M"},

{"title":"Define ", "author":"Ronan Park ", 
"cover":"https://lh4.googleusercontent.com/-y2sK-krG-LE/U8oCOG7ZVmI/AAAAAAAAAT4/iohbXroYsK8/s534-no/Ronan-Parke-cover.jpg",
 "background":"cover-image.jpg", 
"mfile":"https://googledrive.com/host/0BwrRT1IZntENaEZidk4tZlN3V0U"},

{"title":"Living to Love you ", "author":"sara corner ", 
"cover":"https://lh5.googleusercontent.com/-nhO4dn9X-nA/U9UFmiHnp3I/AAAAAAAAAmE/4eOXC1NkIMA/w220-h191-no/Livingtolove+you.jpg",
 "background":"cover-image.jpg", 
"mfile":"https://googledrive.com/host/0BwrRT1IZntENdkJzRVdGWVd4UEE"}

]
   });
  });
 </script>

ដើម្បីបន្ថែមបទចម្រៀងទៅក្នុងកម្មវីធីចាករបស់អ្នកគឺលោក អ្នកត្រូវ បង្ហោះ File របស់ទៅលើ Cloud ជាមុនសិន ដោយប្រើ Dropbox ឬ Google Drive ដើម្បីស្វែងយល់ ពី របៀប Host File នៅលើ Google Drive សូចចុចទីនេះ ប្រសិនអ្នកប្រើ Dropbox គ្រាន់តែចុចលើ File ដែល Upload រួច ចុច Share អ្នកនឹង ឃើញបូតុង Download បន្ទាប់មក Right Click នៅលើ បូតុង Download រួច ជ្រើស រក Copy Link ខាងក្រោមនេះជា Structure របស់ចម្រៀង អ្នក

https://nachhayneng.blogspot.com/

Sunday, August 10, 2014

[BL SPOT] របៀបដាក់ MUSIC លើBLOGSPOT

1 comments:

ចុច LIKE ទីនេះដើម្បីទទួលបានអ្វិថ្មីៗ

channel: na chhayneng

DICTIONARYបកប្រែភាសា

Popular Posts

ads

b