Cara desain atau memperindah wap di wapka ~ ASMADY

Assalamu'alaikum Wr .Wb

Hallo sobat jumpa kembali bersama Asmady saya ucapkan selamat siang dan selamat berakifitas semoga di berkahi selalu! Amin

Ya kali ini Asmady masih akan membahas tutorial seputar wapka.com.
gimana sih wapsite wapka sobat yang sebelumnya sudah membuatnya Wapka.com masih polos blank putih kah atau sudah cantik... hehe

Yang belum punya daftar dulu yah
Silahkan kunjungi websitenya untuk mendaftar klik disini!
Dan baca juga:

mengenal fungsi menu di wapka
cara membuat wapsite di wapka

Yang sudah punya silahkan lanjut ke Topik
Pembahasan
Ya kalau belum memiliki tampilan atau masih blank
Asmady akan membagikan tutorialnya yaitu:

Cara desain atau memperindah wap di wapka sobat

Caranya bagai mana!
oke langsung saja kita mulai pertama-tama sobat masuk dulu dengan akun sobat

setelah itu pergi ke ~~Admin mode~~

lalu kilk ~~EDIT SITE~~

klik Global Settings

karena kita akan memperindah tampilan wap! kita harus mempunyai template cssnya dulu
dimana mendapatkan cssnya sobat bisa download di internet cari saja dengan keyword css wapka banyak ko oke atau sobat juga bisa copas css dibawah:

/* 2016 Style by Jhony */
body {
 color: #987777;
 margin: 0;
 font: 12px Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
}

a:link, a:active, a:visited {
 color: #0c9dd1;
 text-decoration: none;
}

a:hover, a:focus {
 color: #ff1919;
 text-decoration: underline;
}

a.ico {
 padding-left: 13px;
 background: url() no-repeat left center;
}

img {
 border-style: none;
}

hr { margin-top: 2px; margin-bottom: 2px; border-bottom: 1px solid #dfdfdf; border-top-style: none; border-top-width: 0; border-right-style: none; border-right-width: 0; border-left-style: none; border-left-width: 0; }

.head {
 border-bottom: 2px solid #8fdef3;
 background: #b4ebde url() repeat-x 0 top;
}

.head img {
 margin-bottom: -18px;
}

.head a {
 font-size: 11px;
 font-weight: bold;
 text-decoration: none;
}

.search_cit {
 font-size: small;
 font-weight: bold;
 border-bottom: 1px dotted #cacaca;
}

.rekl, .rekl_main, .icon14, .foot {
 margin-top: 1px;
 margin-bottom: 1px;
 padding: 4px;
 border-bottom: 1px solid #b3e5f3;
 background: #f0fcff;
}

.foot { border-top: 1px solid #b3e5f3; }

.cit {
 color: #b5b5b5;
 font-size: 10px;
 margin: 3px;
 padding: 3px;
 border: 1px solid #e7e7e7;
 background: #fff;
}

form {
 margin: 1px;
 padding: 0;
}

.ank_n {
 font-weight: bold;
}

.ank_d {
 font-style: italic;
}

.status {
 color: #8dbd00;
 font-weight: bold;
}
.black_overlay {
display:block;
position:absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity : 0.8;
opacity: .80;
filter: alpha(opacity= 80);
}
.content {
display: block;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
background-color : white;
z-index: 1002;
overflow: auto;
}
}

.icon14 { font-size: xx-small; width: 14px; height: 14px; vertical-align: top; text-align: center; margin-top: 1px; margin-bottom: 1px; padding: 4px; background: #ededed url() repeat-x 50% top; border: solid 1px #d9d9d9; }

.post {
 width: 100%;
}

.menu, .news {
 margin: 2px;
 padding: 4px;
 border: solid 1px #e8e8e8;
 background: #fff;
}
 }
.bl {font-weight:bold;}

.wht {background: #fff;}

.str {
 margin: 3px;
 padding: 3px;
 border: 1px dotted #d2d2d2;
 background: #fff;
}

.err {
 color: #ff5454;
 margin: 2px;
 padding: 4px;
 background: #fdf1f1;
}

.msg {
 color: #6db131;
 margin: 2px;
 padding: 4px;
 background: #f7fff0;
}

.aut, .end { margin-top: 1px; margin-bottom: 1px; padding: 4px; border-bottom: 1px solid #d9d9d9; background: #ededed url() repeat-x 50% top; border-top: 1px solid #d9d9d9; }

.end { text-align: center;  }

.p_m { margin-top: 1px; margin-bottom: 1px; padding: 4px; background: url() repeat-x 50% top; border: solid 1px #d9d9d9; }

.title {
 text-align: center;
 margin-top: 1px;
 margin-bottom: 1px;
 padding: 4px;
 border-bottom: 1px solid #d9d9d9;
 background: #ededed url() repeat-x 50% top;
}

.on {
 color: #47a000;
}

.off {
 color: #ff1d00;
}

.copy {
 color: #fff;
 text-align: center;
 padding: 4px;
 background: #5088b0 url() repeat-x 50% top;
}

.copy a {
 color: #fff;
 border-bottom: 1px dotted #7ad4f0;
}

.ads{background:#fff8cc; border: 1px solid #ffe222; padding: 4px; font-weight:normal; color:#000; margin: 5px;}
.star {border-radius:110px; background:#fff8cc; display:inline-block; padding:0px 0px; margin:0 0 1px; color:#ff2ccc;  border-top: 1px solid #ff2ccc; border-left: 1px solid #ff2ccc; border-right: 1px solid #ff2ccc; border-bottom: 1px solid #ff2ccc;}

Oke kita sudah masuk di Global Settings

maka kita pilih menu HEAD tags (meta,style,...)

lalu next step klik Edit style sheet file (styles.css)

contoh gambar:

HEAD tags (meta,style,...)

Edit style sheet file (styles.css)

lalu pastekanlah css yang sobat download dari internet tadi atau yang dicopas tadi trus klik Set

contoh gambar:

trara jadi berubah tampilan wakpa sobat gimana masih pusing haha itu cuma tambahkan css saja belum
pakai code apa-apa ya ke pengen punya wap download seperti demo sit7wap ikuti terus episode berikutnya dan jangan sungkan untuk menghubungi admin pasti dengan senang hati akan membantu sobat!
oke saya pasti akan kembali dengan kasih tutorial yang lebih pusing lagi oke sudah cukup basa basinya hari ini akhiri kata asmady ucapkan terima kasih sudah membaca artikel ini somaga hari anda menyenangkan???

ASMADY

15 Dec 2016