4webku Layanan Builder Membuat Situs Mp3 Dan Tag

Anda hobi mengoleksi lagu lagu dengan format mp3 , bahkan anda penasaran ingin membuat situs mp3 ? sebelum anda benar-benar terjun menjadi blogger kategory download, alangkah baiknya mental baja anda siapkan terlebih dahulu, karena tidak semua yang terjun bahkan sangat semangat di awal ahirnya plempem di tengah perjalanan sebelum situs ramai trafik.

Banyak hal yang harus dipersiapkan, diantaranya siap menerima e-mail penghapusan konten atau sering disebut hangus di serang DMCA. tetapi di halaman dutakonten ini tidak akan membahas tentang itu semua, karena diluaran sana sudah banyak sekali yang membahas hal tersebut, termasuk masalah SEO Mp3.

4webku adalah builder yang bisa anda manfaatkan untuk mulai membangun situs kategory download. sebenarnya tidak hanya bisa digunakan untuk membuat situs mp3 atau konten download saja. tapi anda juga bisa membuat blog bertemakan artikel. tapi kusus dihalaman ini dutakonten hanya akan memberikan cara membuat situs mp3 di 4webku dan lengkap dengan tag yang digunakan, soal tampilan itu masalah selera, dan anda bisa menggunakan CSS untuk memperindah tampilan stus yang anda kelola.

Yang pasti pertama tama yang harus anda lakukan andalah mendaftar di layanan 4webku dengan alamat 4webku.com , lalu silahkan anda pilih subdomain yang anda sukai.

lalu kita akan mulai coding.

Yang pertama masuk di dasbord 4webku. anda akan disuguhi 3 menu.

index
footer
header

kita mulai dari menu file index terlebih dahulu, pilih file index dan masukkan tag yang sudah kami sediakan melalui textarea dibawah ini.

lalu simpan.

Yang kedua pilih file footer dan masukkan tag yang berada di dalaman textarea dibawah ini.

dan simpan

Selanjutnya adalah header. sama seperti diatas, copy tag yang berada di bawah ini dan paste didalam menu source.

lalu simpan

Selanjutnya buatlah Page baru [ download ] dan paste tag yang ada di bawah ini.

<title>[fm]to=:to-view:||%size% | Download Lagu %music-artist% - %music-title% Mp3[/fm]</title>
[fm]d=all,o=u,to=:to-view:,no=Tidak ada ||

<div id="k">
<div class="kpops-view">
<div class="info" id="76">
<h1>
Download Lagu %music-artist% - %music-title%</h1>
<table width="100%">
<tbody>
<tr valign="top">

<div class="kpops-view-atas">
<p>
Download lagu <b>%music-artist% - %music-title%</b> mp3 gratis di <em>DewaMp3</em>. Single yang berjudul "%music-title%" ini hanya untuk review, dapatkan CD Original dengan kualitas terbaik di situs Itunes.</p>
</div>
<td style="text-align: left;">
<ul>
<li><b>Artist</b>: %music-artist%</li>
<li><b>Title</b>: %music-title%</li>
<li><b>Added</b>: %time_upl%</li>
<li><b>Encoded</b>: DewaMp3</li>
<li><b>Filesize</b>: %size%</li>
<li><b>Download</b>: %hits%</li>
</ul>
</td></tr>
</tbody></table>
<div id="lagu">
<center>
<a href="%link%" title="Download MP3 Now" rel="nofollow"><button class="bt" type="submit"><i class="fa fa-download"></i> Download %size%</button></a></center>
</div>
</div>
<div align="center">
<div id="k">
<div class="note2" style="margin:3px">
<audio controls style="width: 100%;">
   <source src="https://dewamp3.4webku.com/data/dewamp3+4webku+com/filemanager/1/%name%" type="audio/mpeg">
</audio></div>
</div>
</div>
[/fm]

lalu simpan

Dan untuk mempertampan tampilan situs anda, maka anda harus menggunakan CSS, untuk css sendiri sudah kami sediakan tinggal anda copy dan paste, untuk meletakkan css, silahkan pilih menu Themes .

@import url('https://fonts.googleapis.com/css?family=Righteous');@import url('https://fonts.googleapis.com/css?family=Amaranth|Bangers');#hw{background:#transparent;}#hw .v{padding:1px 5px;margin:0;position:relative;background:url(https://1.bp.blogspot.com/-RjcJapYH7_E/XrBP0sqGIiI/AAAAAAAAAcs/ODUS3fzyl4w2vUzC8fuDkwOBJVLqKbyTgCLcBGAsYHQ/s1600/line.png) center top repeat-x #fff}#top-content2 ul{background:#fff;padding:10px;margin:0 0 0 15px;list-style-type:square;}
,#bottom-content2 ul{background:#fff;padding:10px;margin:0 15px 0 0;list-style-type: square;}
#top-content2 ul li,#bottom-content2 ul li{padding:4px;border-bottom:1px solid #ddd;margin:0;list-style-type: square;}
#top-content2 ul li:last-child,#bottom-content2 ul li:last-child{border:none}
#hw .v h1{padding:8px 5px;margin:0}
#hw .v h1 a{font-family: 'Righteous', cursive;color:#fff;font-size:36px;background: -webkit-linear-gradient(left, #ba412c, #d04e38, #fdcb01, #fd7faa, #f53477, #a51a5d); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

#hw .desc{margin:0;padding:6px 12px;background:#f3f3f3;border-bottom:solid 1px #ddd;font-size: inherit;}
#hw .desc h2{margin:0;padding:0px;}
#hw .nav {background-color: #ffffff;border-bottom:2px solid #ffffff;text-align:left;padding:6px 0px;display:block;width:100%;}
#hw .nav a{padding:6px 15px;color:#0086ce !important;font-weight:bold;text-decoration:none;border-right:1px solid rgba(0,0,0,0.1);border-bottom:2px solid #ffffff;width:auto;}
#hw .nav a:hover{border-bottom:2px solid #d04e38;}
#hw .nav span.sptr{display:none;}
#hw .profil{border-bottom:solid 1px #50a7e6;padding:2px 3px;}
#hw .msg{background-color: #fff;border:solid 1px #50a7e6;padding:3px 6px;}
#hw .navbar ,.thmlink{text-align:left;padding:5px 3px;border-bottom:solid 1px #ddd;display:block;}
#hw .navbar a,.thmlink a{background-color: #199bd6;padding:1px 6px;color:#fff !important;text-decoration:none;}
@media screen and (max-width:480px) {

#hw .nav{text-align:left;font-weight:bold}
#hw .nav a{padding:2px;color:#0086ce !important;font-weight:bold;text-decoration:none;border-right:0px solid rgba(0,0,0,0.1);border-bottom:0px solid #ffffff;width:auto;}
#hw .nav a:hover{border-bottom:0px solid #d04e38;text-decoration:none}
#hw .nav span.sptr{display:inline;font-weight:bold;}
  .mn ul li {max-width:97%;width:100%}
}

/* FIXED MENU */
.navZ {
    font: 16px Arial,sans-serif;
    font-weight:bold;
    color: #f4f4f4;
    height: 40px;
    background: #d04e38 none repeat scroll 0% 0%;
    border: 1px solid #d04e38;
}
.navZ input, .navZ label {
    display: none;
}
.navZ label {
    height: 40px;
    width: 40px;
    color: #AAA;
    line-height: 40px;
    font-size: 25px;
    font-weight: 700;
    text-align: center;
    margin-left: 5px;
    cursor: pointer;
    float: left;
}
.navZ ul {
    margin: 0px;
    padding: 0px;
}
.navZ li {
    list-style: outside none none;
    margin: 0px;
    padding: 0px;
    float: left;
    position: relative;
}
    .navZ input:checked + div label {color: #ffffff;}
    .navZ li a{display: block;
text-decoration: none;
color: #f4f4f4;
line-height: 40px;
padding: 0px 15px;
font-size: 12px;
font-family: arial;
border-right: 1px solid rgba(0,0,0,0.1);}
    .navZ li a:hover,
    .navZ li:hover a{background: rgba(0,0,0,0.1);
      color: #f4f4f4;}
    .navZ li.home a{display: block;
background: rgba(0,0,0,0.1);
text-decoration: none;
color: #f4f4f4;
line-height: 40px;
padding: 0px 15px;
font-size: 12px;
font-family: arial;}
    .navZ li.home a:hover,
    .navZ li.home:hover a{background: #f4f4f4;
      color: #303030;}
    .navZ li ul li a:hover,
    .navZ li ul li:hover a{background: rgba(0,0,0,0.1);}
    .navZ li ul {
      transition:  .3s ease-out;-webkit-transition: .3s ease-in-out;-moz-transition: .3s ease-in-out;
      position:absolute;
      top:100%;
      left:0px;
      z-index:99;
      width:200px; 
      opacity: 0;
      height: auto;
      visibility: hidden;
      background: #d04e38;
    }
    .navZ .maxer ul li ul {margin-top: -1px;}
    .navZ li ul li a {text-shadow: none; font-size: 12px;color: #f4f4f4;line-height: 25px;}
    .navZ li ul li {
      float:none;
      display:block;    
      height: 0;
      transition:  .3s ease-out;-webkit-transition: .3s ease-in-out;-moz-transition: .3s ease-in-out;
      font-weight:normal;
    }
    .navZ li ul ul {
      top:0px;
      left:100%;    
      border-top: 0;
    }
    .navZ li:hover ul { 
      opacity: 1;
      visibility: visible;
    }
    .navZ li:hover ul li { 
      height: 25px;
    }
.serching form {
    max-width: none;
    float: right;
    margin: 4px;
    min-width: 230px;
    background: #f5dad6 none repeat scroll 0% 0%;
    border: 1px solid #d04e38;
    border-radius: 3px;
    position: relative;
    box-shadow: 0px 0px 5px #efefef inset;
}
.serching form input {
    display: block !important;
    margin: 0px;
    border: 0px none;
    padding: 5px 0px;
    outline: 0px none;
    height: 20px;
    font-style: italic;
    line-height: 20px;
    font-size: 12px;
    border-radius: 0px !important;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 30px;
}
.serch {text-indent: 10px;background: transparent;}
.serchg {
    float: right;
    width: 30px;
    height: 30px !important;
    padding: 0px !important;
    background: #913322 none repeat scroll 0% 0%;
    color: #fff;
    border: 0px none !important;
    font-size: 12px !important;
    cursor: pointer;font-weight:bold
}

@media screen and (max-width:902px) {
      .serching form {min-width: 180px;}
            }
            @media screen and (max-width:600px) {
                      .navZ {position: relative;}
                      .navZ label {display: block;}
                      .navZ ul {display: none;position: absolute; top: 100%;left:0;right:0;background: #efefef;z-index:1;}
      .navZ .maxer ul li {float: none;border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #d04e38;}
      .navZ .maxer ul li a {line-height: 30px;}
      .navZ .maxer ul li ul {margin-bottom: 10px;}
                      .navZ input:checked + div ul {display: block;}
.navZ li ul li:hover a, .navZ li:hover a {
background: transparent;
      }
      .navZ a:hover {background:#0086ce!important}
      .navZ li:hover ul {opacity: 1;} 
      .navZ li ul {
        position: static;
        visibility: visible;
        opacity: 1;
        width: auto;
        background: transparent;
      }
      .navZ li ul li a, .navZ li a {color: #333;}
.navZ li ul li ul {
      }
      .navZ li ul li, .navZ li:hover ul li {
        height: auto;
      }
      .navZ li ul li {
        margin-left: 20px;
        border-left: 3px solid #2A5A86;
      }
.serching form {
min-width: 0;
float: none;
position: absolute;
left: 45px;
        right: 0;}
.serching form input{
width: 90%;}
.serching form button{
width: 10%;}
}

.f-nav{ z-index: 9999; position: fixed; center: 0; top: 0; max-width: 598px; width: 100%; padding:2px -1px 0 0; margin: 0 auto} /* ini yang membuat menu menjadi melayang (fixed) */

/* CONTENT CSS */

body, td, th, input, textarea, select {max-width:600px;font-family:Verdana,Arial,"Comic Sans MS",sans-serif;font-size:13px;}
body{background:#555;margin:0px auto;padding:0px;color:#fff;font-size:14px}
a,a:link{color:#ed1d5b;text-decoration:none;}
img{max-width:90%}
#header{padding:0px;margin:0px 0px 4px;position:relative;background:url(https://1.bp.blogspot.com/-RjcJapYH7_E/XrBP0sqGIiI/AAAAAAAAAcs/ODUS3fzyl4w2vUzC8fuDkwOBJVLqKbyTgCLcBGAsYHQ/s1600/line.png)center top repeat-x #fff}
.head{padding:15px 5px 1px;margin:0px;text-align:center;font-size:16px;color:#383838}
.head a{font-size:25px;font-family:Arial,Geneva,sans-serif;text-transform:uppercase;color:#dc0a4c;font-weight:bold}
.head a:hover, .description ul li a:hover, ul.nav li a:hover, #kategori a:hover{color:#fe2c6c;font-weight:bold;text-decoration:none;}
.description{margin:0px;padding:8px 4px;text-align:center;background:#fff url(https://1.bp.blogspot.com/-UBXPKgE7JBs/XrBPh0rk67I/AAAAAAAAAck/DyYJEL4wsYQC-W4gwBtcYjJTG_3DTpTbwCLcBGAsYHQ/s1600/12d.png) bottom repeat-x}
.description ul{margin:0px;padding:0px;}
.description ul li{margin:0px;padding:3px;font-weight:normal;color:#5b5b5b;display:inline-block;list-style-type:none;text-align:center;border-right:1px solid #ddd;} .description ul li:last-child{border:0px !important;}
.description ul li a{text-decoration:none;color:#0099cc}

/*form [type=text]{background:#f5f5f5;color:#444;border:1px solid #eee;width:60%;padding:5px;margin:0px}
form [type=submit]{margin:0 2px 0 2px;padding:5px;color:#fefefe;font-weight:bold;border:1px solid #0071b0;background:#293949;width:20%;}
.search-form{text-align:center;border-left:1px solid #ddd;border-right:1px solid #ddd;border-bottom:1px solid #ddd;background:#fff;clear:both;padding:5px;margin:0;}
.search-form form [type=text]{background:#fff;color:#000;border:1px solid #ddd;width:60%;padding:8px 3px;margin:2px 2px 0px 5px}
.search-form form [type=submit]{background:#293949;width:30%;margin:2px 5px 0 5px;padding:8px 3px;color:#fff;border:1px solid #333;border-radius:3px;text-align:center}*/

/*CONTENT*/

.post-h3{background:#f5dad6;margin:5px;padding:7px;color:#333;border:1px solid #eee;border-top:1px solid #f0c8c1;}
h4{background:#f5dad6;margin:0px;padding:7px;font-weight:bold;border:1px solid #eee;border-top:1px solid #f0c8c1}
.pagination{background:#ffffff;margin:4px 0 0;padding:4px;color:#666;border:1px solid #ececec;}
.pagination span{background:#283848;color:#fff;padding:3px 7px;margin:1px;display:inline-block;border:1px solid #cecece}
.pagination a{padding:3px 8px;margin:0 1px;display:inline-block;border:1px solid #eee;background:#fff}

/* FOOTER */

#k .footer{clear:both;padding:10px 5px;background:#333;color:#eee;text-align:center;height:105px}
#k .footer a{color:#96f808;text-decoration:none}
#k .footer a:hover{color:#eee}

/*MEDIA SCREEN*/
@media screen and (min-width:640px){

ul.nav li{width:10%;padding:10px 0}
ul.nav li:first-child{background:#0071b0}
ul.nav li:last-child{position:absolute;top:1px;right:1px;text-align:right;display:inline-table;width:60%;padding:0px;background:none;border:none}

.pagination{margin-top:6px;}
}

/* CONTENT */
#k {
 background: #eee;
 padding:1px;margin:0
}
#k a{color:#900}
#k a:hover{color:#333}
#k ul, #indie ol {
 list-style: none;margin:0;padding:0
}
#k ul li:nth-child(even) {
 list-style-type: square;
 list-style-position: inside;
}
#k ul li:nth-child(odd) {
 list-style-type: square;
 list-style-position: inside;
}
#k ol li {
 list-style-type: decimal;
 list-style-position: inside;
}
#k li{margin: 0;
 padding: 6px 5px;
}
#indie {padding:4px 6px;margin:0px;max-width:100%;display:block}

/* LIST DIHALAMAN INDEX */
.kpops-vee{background:#fff;margin:0;padding:4px 0;}
.kpops-list {background:#fff;margin:0;padding:4px;}
.kpops-list a,.kpops-vee a{color:#900}
.kpops-list a:hover,.kpops-vee a:hover{color:#333}
.kpops-list:nth-child(even),.indie-list1:nth-child(even),#k li:nth-child(even),#k .list

.lagu:nth-child(even) {
 background: #f8f8f8;
 color: #333;
 border-bottom: 1px solid #eee;
}
.kpops-list:nth-child(odd),.indie-list1:nth-child(odd),#k li:nth-child(odd),#k .list .lagu:nth-child(odd){
 background: #fff;
 color: #333;
 border-bottom: 1px solid #eee;
}

.thumb {width:100%;height:100%;max-width:60px;max-height:55px;margin:2px;padding:0px;position:relative;border-radius:2px;border:3px solid #333}
.indie-list-thumb{width:70px;height:70px;padding:3px}
.kpop-vee-thumb {width:70px;height:70px;padding:2px}
.kpop-vee-img {width:100%;height:100%;max-width:60px;max-height:55px;margin:2px;padding:0px;position:relative;border-radius:752px;border:2px solid #555}

#k .indie-judul{text-transform: uppercase;display:block;background: #d04e38;border-left: 5px solid #ba412c;padding:7px;text-align:left;color:#fff;margin:0}
#k .indie-judul a{float:right;background:#d04e38;padding:2px 5px;margin:0 0 4px 0;color:#fff;border-left:3px solid #fff;border-top:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #fff;font-size:14px}
#k .indie-judul a:hover{background:#ba412c;color:#fff}

/* DETAIL DI HALAMAN VIEW */

#k .indie-view {background:#fff;margin:0;padding:4px;}
#k .indie-view-judul {text-transform: uppercase;display:block;background: #d04e38;border-left: 5px solid #ba412c;padding:7px;text-align:left;color:#fff;margin:0;font-size:16px}
#k .indie-view-atas{background:#f8f8f8;padding:8px 15px;margin:0 2px 4px 2px;text-align:left;border-left:5px solid #eee}
#k .indie-view-gambar{padding:8px 15px;margin:0 2px 4px 2px;text-align:left;}
#k .indie-view-atas img{max-width:240px;width:100%;height:240px;}
#k .indie-view-gambar audio{max-width:240px;background:#ba412c}
#k .indie-view-atas p{text-align:justify;margin:5px 0 5px 0;padding:0}
#k .indie-view-atas p:hover{color:#ba412c}

#k .dl {
    cursor: pointer;
    margin: 3px 2px;
    padding: 5px 3px;
    color: #fefefe;
    font-weight: bold;
    border: 1px solid #0076A3;
    background: #0095CD;
    background: -webkit-gradient(linear,left top,left bottom,from(#00ADEE),to(#0078A5));
    background: -moz-linear-gradient(top,#00ADEE,#0078A5);
    max-width: 230px;
    width: 100%;
    border-radius: 3px;
}
#k .dl:hover{
    text-decoration: none;
    background: #007EAD;
    background: -webkit-gradient(linear,left top,left bottom,from(#0095cc),to(#00678e));
    background: -moz-linear-gradient(top,#0095cc,#00678e);
}

#k .note2,#k .note3{padding:10px;margin:2px 0 7px 0;text-align:center;font-size:14px;background:#f5dad6;border:1px solid #d04e38;border-radius:1px}

#k .note{padding:10px;margin:2px 0;text-align:center;font-size:14px;background:#f9edbe;border:1px solid #f0c36d;border-radius:1px}
#k .note a{color:#f77951}
#k .note a:hover{color:#f84912}

#k .indie-menu-judul {
    text-transform: uppercase;
    display: block;
    background: #d04e38;
    border-left: 5px solid #ba412c;border-right: 5px solid #ba412c;
    padding: 9px 7px;
    text-align: center;
    color: #fff;
    margin: 0;
}
#k .indie-menu-judul a{color:#333;}
#k .indie-menu-judul a:hover{color:#eee}
#indie.indie-menu{background:#c5e39c;border-top:1px solid #ba412c;border-left:5px solid #ba412c;border-bottom:1px solid #8bc738;border-right:5px solid #ba412c;padding:6px;margin:0 0 5px 0;color:#333;text-align:center}

#indie .indie-menu span a {display:inline-block;width:auto;padding:1px 6px;margin:1px 1px 2px 0;background:#638b27;color:#fff;border:1px solid #47631c;border-radius:2px}
indie .indie-menu span{display:inline-block;width:auto;padding:1px 6px;margin:0 1px 0 0;background:#555;color:#fff;border:1px solid #444;border-radius:2px}

#indie .indie-menu span a:hover{background:#47631c}
#k .pst{text-align:center;padding:5px;margin:2px 0;color:#333;background:#c5e39c;border:1px solid #ba412c}
#k .pst textarea{padding:5px 7px;max-width:70%;width:100%;max-height:20px;height:100%}
#k {color:#333}
#k .indie-vee table h2{font-size:14px;text-align:left;padding:3px;margin:0 1px}
#k .indie-vee table .autor{font-size:11px;text-align:left;padding:3px 3px 3px 4px;margin:1px 0;border-top:2px solid #555}
#k .cat ul li{list-style:none}
#k .cat ul {padding:5px;margin:0}
#k .cat li{padding:9px 10px;margin:0;color:#900}
#k h3.title,#k h2.title{text-transform: capitalize;border-left:5px solid #ba412c;padding:9px 10px;margin:0;color:#fff;background:#d04e38;}
#k h3.title1{text-transform: capitalize;padding:9px 10px;margin:0;color:#fff;background:#d04e38;font-size:16px}
#k h3.title a{text-transform: uppercase;float:right;background:#ba412c;padding:2px 9px;margin:-3px 0 0 0;color:#fff;border:1px solid #913322;border-radius:2px;font-size:14px}

#k h3.title a:hover{background:#913322;color:#eee}
#k h3.title a:after{
    content: "\f08e";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;float:right;
    padding:2px 0 2px 10px;font-size:14px;margin:1px 0 0 0
}

#k h3.title-cat{text-transform: uppercase;border-left:5px solid #ba412c;padding:9px 10px;margin:0;color:#fff;background:#d04e38;}
#k .cat li:hover,#k .album .album-list:hover{background:#f8f8f8;color:#333}
#k .cat li:before{
    content: "\f07c";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    padding:0 5px 0 1px
}
#k .cat li:after{
    content: "\f054";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;float:right;
    color: #333;padding:0 2px 0 1px
}
#k h3.title-cat:before {
    content: "\f009";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #fff;padding:0 6px 0 1px
}
#k h3.title:before,#k h2.title:before{
    content: "\f0c9";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #fff;padding:0 6px 0 1px;font-size:17px
}
#k .album{margin:0;padding:5px}
#k .album .album-list a{font-size:14px}
#k .album .album-list a:before{
    content: "\f07c";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    padding:0 5px 0 1px;font-size:14px;margin:15px 0 0 0
}

#k .album .album-list {border-bottom:1px solid #eee;padding:9px 10px;margin:0;color:#900;background:#fff}
#k .album .album-list span{color:#333;padding:5px 0 0 0;margin:1px 0;display:block;width:100%;font-size:14px;font-weight:normal}

#k .album .album-list span:hover{color:#900}
#k .album .album-list span b.user:before{text-transform: capitalize;
    content: "encoded";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: bold;
    text-decoration: inherit;
   padding:2px 8px;color:#fff;font-size:14px;background:#555;border-radius:2px;margin:0 4px 0 0
}

#k .album .album-list span b.date:before{text-transform: capitalize;
    content: "added on";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: bold;
    text-decoration: inherit;
    padding:2px 8px;color:#fff;font-size:14px;background:#555;border-radius:2px;margin:0 4px 0 0
}
#k .album .album-list span b{padding:1px 0 0 0;font-weight:normal;margin:0 5px 0 0;}
#k .album .album-list span b:last-child{padding:1px 0 0 0;font-weight:normal;margin:0 0 0 5px;}
#k .list{margin:0;padding:5px}
#k .list .lagu a{font-size:14px}
#k .list .lagu a:before{
    content: "\f001";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;color:#333;
    padding:0 5px 0 1px;font-size:14px;margin:15px 0 0 0
}

#k .list .lagu {border-bottom:1px solid #eee;padding:9px 10px;margin:0;color:#900;background:#fff}

#k .list .lagu i{float:right;color:#111;font-style:normal;background:#666;color:#fff;padding:2px 4px;display:inline-block;width:13%;text-align:center;margin:-1px 0 0 0}

#k .list .lagu span{color:#333;padding:5px 0 0 0;margin:1px 0;display:block;width:100%;font-size:14px;font-weight:normal}

#k .list .lagu span:hover{color:#900}

#k .list .lagu span b.album:before{text-transform: capitalize;
    content: "album";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: bold;
    text-decoration: inherit;
   padding:2px 8px;color:#fff;font-size:14px;background:#555;border-radius:2px;margin:0 4px 0 0
}

#k .list .lagu span b.size:before{text-transform: capitalize;
    content: "size";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: bold;
    text-decoration: inherit;
   padding:2px 8px;color:#fff;font-size:14px;background:#555;border-radius:2px;margin:0 4px 0 0
}
#k .list .lagu span b.durasi:before{text-transform: capitalize;
    content: "durasi";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: bold;
    text-decoration: inherit;
   padding:2px 8px;color:#fff;font-size:14px;background:#555;border-radius:2px;margin:0 4px 0 0
}

#k .list .lagu span b.date:before{text-transform: capitalize;
    content: "added on";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: bold;
    text-decoration: inherit;
    padding:2px 8px;color:#fff;font-size:14px;background:#555;border-radius:2px;margin:0 4px 0 0
}
#k .list .lagu span b{padding:1px 0 0 0;font-weight:normal;margin:0 5px 0 0;}
#k .list .lagu span b:last-child{padding:1px 0 0 0;font-weight:normal;margin:0 0 0 5px;}
#k .informasi {
    overflow: hidden;
    border-top: 1px solid #EBEBEB;
    margin: 2px;
}

#k .informasi ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#k .informasi ul li {
    padding: 8px 5px;
    border: 1px solid #EBEBEB;
    border-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;list-style: none;
}

#k .informasi ul li:nth-child(odd) {
    background: #f8f8f8;
}

#k .informasi ul li:nth-child(even) {
    background: #FFF;
}

#k .informasi ul li b {
    display: inline-block;
    width: 130px;
}

#k .informasi ul li a {}

#k h3.title-chart {text-transform: uppercase;border-left:5px solid #ba412c;padding:9px 10px;margin:0;color:#fff;background:#d04e38;}

#k h3.title-chart a{text-transform: uppercase;float:right;background:#ba412c;padding:2px 9px;margin:-3px 0 0 0;color:#fff;border:1px solid #913322;border-radius:2px;font-size:14px}

#k h3.title-chart a:hover{background:#913322;color:#eee}
#k h3.title-chart a:after{
    content: "\f08e";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;float:right;
    padding:2px 0 2px 10px;font-size:14px;margin:1px 0 0 0
}

#k h3.title-chart:before{
    content: "\f080";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #fff;padding:0 6px 0 1px;font-size:17px
}

#k .cari {padding:7px 10px;margin:0;background:#f5dad6;color:#333}
#k .cari .f{padding:0;margin:0;position:relative;max-width:60%}
#k .cari input[type=text] {text-indent:15px;padding:10px;margin:1px 2px 0 0;max-width:80%;width:100%;display:inline-block;background:#fff;color:#333;border-radius:2px;border:0}
#k .bot{padding:5px 10px;margin:0 0 0 -65px;border:none;background:#d04e38;color:#fff;display:inline;width:17%;cursor: pointer;}
#k .bot:hover{background:#ba412c}
#k .riquest {padding:10px;margin:0;background:#fff;color:#333}

.riquest span {margin:7px 0;display:block;width:100%;max-width:27%;background:#ba412c;color:#fff;padding:2px 5px;text-align:center;border-radius:2px;border:1px solid #913322}

.riquest .inp-text {margin:0;padding:6px 10px;max-width:50%;width:100%;border:1px solid #d04e38;background:#f5dad6;border-radius:2px}

.riquest .inp-textarea {outline: none;padding:6px 10px;margin:0 0 0 0px;min-height:70px;max-height:70px;min-width:50%;max-width:50%;width:100%;border:1px solid #d04e38;background:#f5dad6;border-radius:2px}

.riquest .inp-btn{display:block;max-width:50%;font-weight:bold;background:#555;border:1px solid #333;color:#fff;padding:6px 14px;margin:7px 0 0 0px;cursor: pointer;}
.riquest .inp-btn:hover{background:#333}

#k .r{margin:0;padding:5px}
#k .r .r-list b{font-size:14px;font-weight:normal}

#k .r .r-list {border-bottom:1px solid #eee;padding:9px 10px;margin:0;color:#900;background:#fff}
#k .r .r-list span{color:#333;padding:4px 0 0 0;margin:1px 0;display:block;width:100%;font-size:14px;font-weight:normal}

#k .r .r-list span:hover{color:#900}
#k .r .r-list span b.pesan:before{content: "Meriquest:";
    font-family: FontAwesome;
    font-weight: bold;font-size:14px;color:#555;padding:0 5px 0 0
}
#k .r .r-list span b{color:#555;font-weight:normal}
#k .info audio{margin:0 2px -4px 0;width:100%;max-width:100%;height:100%;max-height:30px;padding:0;text-align:center}
#k .info {
    overflow: hidden;
    border-top: 1px solid #EBEBEB;
    margin: 2px 2px 5px 2px;background:#f5dad6;border:2px solid #d04e38;border-radius:2px;color:#333
}
#k .info h1{font-size:16px;text-align:center;padding:5px;margin:1px;color:#111;background:#d04e38}
#k .info ul {
    margin:0;
    padding: 0;
    list-style: none;
}

#k .info ul li {
    padding: 8px 5px;
    border:0;
    border-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;list-style: none;color:#333
}

#k .info ul li:nth-child(odd) {
    background: #faedea
}

#k .info ul li:nth-child(even) {
    background: #f5dad6;
}

#k .info ul li b {
    display: inline-block;
    width: 17%;color:#222;
}

#k .info ul li a {}
#k .info .gbr {max-width:135px;width:100%;padding:0;margin:0}
#k .bt{font-size:18px;cursor: pointer;margin: 3px 0 3px 3px;padding: 1px 10px;color: #fefefe;font-weight: bold;border: 1px solid #ba412c;background: #d04e38;width:auto;border-radius:2px;}

#k .bt:hover{background:#ba412c;color:#fff;tex-decoration:none}
.footer .center{display:inline-block;border-radius:4px;border:1px solid #444;float:center;background:#666;color:#fff;padding:2px 15px;margin:-3px 0 0 0;max-width:100%}
.footer .kanan{border-radius:4px;border:1px solid #444;float:right;background:#666;color:#fff;padding:2px 15px;margin:-3px 0 0 0;width:max-60%}
.footer .menufot{border-radius:4px;border:1px solid #111;background:#666;color:#fff;padding:4px 8px;margin:-3px 0 8px 0;display:block;position:relative;text-align:justify}
#indie .indie-list1 span{display:block;width:100%;padding:0;margin:4px 0 0 0;color:#333}
#indie .indie-list1 span a{font-size:10px;font-weight:bold;text-transform: uppercase;display:inline-block;width:auto;padding:1px 15px;margin:0 1px;border-radius:3px;background:#d04e38;color:#fff;text-align:center;border:1px solid #913322}

.indie-list1 b{font-size:14px}
#indie .indie-list1 span a:hover{background:#a53a27;}
.thumb1 {width:100%;height:100%;max-width:47px;max-height:47px;margin:2px;padding:0px;position:relative;border-radius:60px;border:2px solid #555}
.indie-list-gambar{width:47px;height:47px;padding:3px;}
.indie-list-list{padding:8px 0 0 7px;margin:0}
.indie-list1 {background:#fff;margin:0;padding:0;}

Yang Terahir silahkan membuat page [ cari ] agar supaya apa yang anda atau pengunjung melakukan pencarian bisa muncul. sebenarnya tanpa membuat menu atau page cari juga bisa, yaitu dengan cara mengarahkan hasil pencarian ke Index, tapi itu kurang maksimal.

lalu simpan.

Dan itulah tadi tutorial cara membuat situs mp3 di 4webku, kami berharap semoga layanan ini tidak seperti yang sudah sudah, yakni layanan mati dan domain dipakai sendiri.

4webku Layanan Builder Membuat Situs Mp3 Dan Tag

Popular Posts