MyWapBlog merupakan penyedia layanan Blogging yang handal disamping Blogspot, Wordpress dan Layanan Blogging lainnya.
Adapun keuggulan Mywapblog dibanding platform lainnya adalah, sebagai berikut :
- Ringan
- Mobile Friendly
- SEO Friendly
Sebetulnya masih banyak lagi, ya mungkin ketiga point diatas sudah cukup mewakili ya, hehe
Kembali ke Topik, walaupun Mywapblog cukup User Friendly, namun tak sedikit pula yang kebingungan untuk mengedit Tampilan atau Template dari Mywapblog ini.
Untuk itulah disini saya akan mencoba membantu sobat sobat semua yang sedang kesusahan dalam MeDesain Template Mwapblognya.
Template Mywapblog sebenarnya memiliki 2 Varian yaitu, Default dan Default 2. Namun disini saya hanya akan menjelaskan yang Default saja bukan yang Default 2.
CSS Default Mywapblog
body
{
margin: 0px;
padding: 0px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
background: #343434;
color: #CCC;
font-size: 12px;
}
h1
{
font-size: 28px;
}
h2
{
font-size: 24px
}
h3
{
font-size: 20px;
}
h4
{
font-size: 16px;
}
h4
{
font-size: 14px;
}
h5
{
font-size: 12px;
}
h6
{
font-size: 10px;
}
a
{
color: #7EAC28;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
a.no-link, a.no-link:hover
{
color: #CCC;
text-decoration: none;
}
#header
{
margin: 0px;
padding: 0px;
border-bottom: 3px dashed #343434;
background: #FFF;
}
#header .heading
{
font-size: 24px;
margin: 0px;
padding: 0px;
text-decoration: none;
font-weight: bold;
}
#header .heading a
{
text-decoration: none;
color: #EE7C33;
}
#header .description
{
color: #343434;
margin: 0px;
font-size: 10px;
padding-bottom: 2px;
font-weight: bold;
}
#navigation
{
margin: 0px;
color: #7EAC28;
border-top: 1px dotted #EE7C33;
padding: 5px 0px 5px 5px;
}
#navigation span
{
margin: 0px;
padding: 0px;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
}
#navigation span a
{
color: #7EAC28;
padding: 0px 3% 0px 0px;
margin: 0px 3% 0px 0px;
display: inline-block;
text-decoration: none;
}
#content
{
padding: 4px 4px 0px 4px;
}
.post, .post-single
{
margin: 10px 0px 0px 0px;
padding: 0px 0px 10px 0px;
font-size: 12px;
border-bottom: 1px dashed #333;
}
.post
{
border-bottom: 1px solid #000;
}
.post-last
{
border-bottom: 0px;
}
.post-meta
{
font-size: 10px;
}
.post-meta .title
{
color: #EE7C33;
font-size: 18px;
font-weight: normal;
margin: 0px;
padding: 0px;
}
.post-meta .title a
{
text-decoration: none;
color: #EE7C33;
}
.post-meta .categories
{
font-size: 12px;
margin: 0px;
padding: 0px;
}
.post-meta2
{
font-size: 18px;
height: 32px;
text-align: center;
background: url('/themes/mobile/Default%20%28Title%20Only%29/images/comment-icon.gif') left top no-repeat;
}
.post-content
{
margin: 4px 0px 0px 0px;
font-size: 12px;
}
.post-left-content
{
float: left;
}
.post-right-content
{
float: right;
width: 32px;
}
.clear
{
clear: both;
}
#comments
{
margin: 10px 0px 0px 0px
}
#comments h3, #comments h4, #comments h5
{
margin: 0px;
padding: 0px;
}
#comments .comment
{
background-color: #f5f3e4;
padding: 4px;
margin: 0px 0px 4px 0px;
font-size: 12px;
color: #7EAC28;
}
#comments .comment .comment-header
{
font-size: 10px;
border-bottom: 1px dashed #333;
}
#comments .comment .comment-header .title
{
color: #EE7C33;
font-size: 14px;
font-weight: normal;
margin: 0px;
padding: 0px;
}
#comments .comment .comment-header .title a
{
text-decoration: none;
color: #EE7C33;
font-weight: bold;
}
#footer
{
font-size: 12px;
margin: 0px 0px 0px 0px;
color: #fff;
padding: 4px;
background: #EE7C33;
}
#footer a
{
color: #fff;
}
#footer #powered-by
{
font-size: 8px;
padding: 0px;
margin: 0px;
line-height: 8px;
}
#footer #powered-by a
{
color: #fff;
font-weight: bold;
}
#pagination-links
{
font-size: 18px;
text-align: center;
color: #fff;
}
#pagination-links span
{
padding: 5px;
display: inline-block;
background: #6A7527;;
}
#pagination-links a
{
padding: 5px;
background: #EE7C33;
color: #fff;
display: inline-block;
margin-top: 2px;
text-decoration: none;
}
#pagination-links a:hover
{
text-decoration: none;
}
#bottom-content
{
padding: 0px 4px 0px 4px;
margin-top: 10px;
background: #6A7527;
font-size: 14px;
color: #fff;
}
#bottom-content a
{
color: #ccc;
}
#bottom-content a.no-link, #bottom-content a.no-link:hover
{
color: #fff;
text-decoration: none;
}
#bottom-content a:hover
{
text-decoration: none;
}
#bottom-content h3
{
margin: 0px;
padding: 0px;
}
#bottom-content ul
{
margin: 0px;
padding: 0px;
list-style: none;
}
#bottom-content ul li
{
margin: 0px;
padding: 4px 0px 4px 0px;
border-bottom: 1px dotted #fff;
}
#bottom-content ul li.last
{
border: 0px;
}
#search-form
{
text-align: center;
margin-top: 4px;
}
#search-form .inp-text
{
width: 69%;
}
#search-form .inp-btn
{
width: 28%;
}
.highlight
{
background: #7EAC28;
text-align: center;
margin: 5px 0px 0px 0px;
border: 1px dashed #343434;
color: #fff;
}
#comments .messages, #comments .highlight
{
border: 1px solid;
margin: 10px 0px;
padding: 15px 10px 15px 15px;
}
#comments .messages
{
color: #D8000C;
border-color: #D8000C;
background-color: #FFBABA;
list-style: none;
}
#comments .highlight
{
color: #9F6000;
border-color: #9F6000;
background-color: #FEEFB3;
text-align: center;
}
.inp-text, .inp-textarea, .inp-btn
{
color: #7EAC28;
background: #fff;
font-weight: bold;
border: 1px solid #343434;
}
Penjelasan :
Tanda . (titik) biasa juga disebut dengan Class, sementara # (pagar) biasa disebut dengan ID.
Apa Fungsinya, fungsinya untuk mengatur div, span atau apapun yang disisipkan class ataupun ID tersebut.
Contoh mudah, diatas ada id bernama #footer
#footer
{
font-size: 12px;
margin: 0px 0px 0px 0px;
color: #000;
padding: 4px;
background: #fff; }
Jadi, jika ada sebuah div yang disisipkan ID tersebut maka tampilan tersebut akan menyesuaikan dengan apa yang ada di atribut id tersebut.
Misal, kode HTMLnya seperti ini : <div id="footer"> Cara Edukasi Mywaplbog </div>
Maka, tulisan Cara Edukasi Mywapblog ini akan mempunyai ukuran font 12px, teksnya berwarna hitam, sementara backgroundya berwarna putih.
Mungkin sampai disini dulu,
Cara Membuat dan Mengedit Template di MyWapBlog yang bisa saya berikan kepada sobat semua. Kurang lebihnya mohon maaf, karena newbie hanya berniat untuk berbagi.