<html>
<head>
<title><$BlogPageTitle$></title>

<link href="http://68.media.tumblr.com/3d809ea394d216f969151466f7b06999/tumblr_inline_n2pje39gH11qdlkyg.gif" rel="icon" type="image/x-icon"/>
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,400i,700,700i|Hind:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<style type="text/css">
/* body
---------------------------------------------*/

body{
font-family: 'Droid Serif', serif;
font-size:12px;
margin:0;
line-height:23px;
color:#555;
letter-spacing:1px;
}

a{
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
color:#888;
text-decoration:none;
}

a:hover{
color:#dba2a2;
}

.clear{
clear:both;
}

img{
margin-bottom:10px;
}

::-webkit-scrollbar {
width:10px;
}

::-webkit-scrollbar-track {
background:#f9f9f9;
}

::-webkit-scrollbar-thumb {
background:#eee;
}
/* Header
---------------------------------------------*/
.header{
background:url(http://coolwallpaper.website/wp-content/uploads/2017/02/Perfect-Pretty-Wallpapers-Tumblr-Amazing-free-HD-3D-wallpapers-collection-You-can-download-best-3D-desktop-backgrounds.-3D-windows-wallpapers-pc-in-both-widescreen-lounge-room-furniture.jpg)fixed;
background-size:100%;
height:280px;
background-position:50% 50%;
text-align:center;
padding-top:160px;
}

.header-text{
font-family: 'Hind', sans-serif;
width:70%;
color:#fff;
font-weight:400;
padding:20px;
font-size:30px;
letter-spacing:20px;
line-height:60px;
border:2px solid #fff;
text-transform:uppercase;
}
/* navigation
---------------------------------------------*/
.navigation-box{
width:98%;
padding:1%;
margin-top:30px;
}

.navigation-box a.navi{
font-family: 'Hind', sans-serif;
width:70%;
font-weight:300;
padding:20px;
font-size:13px;
letter-spacing:4px;
text-transform:uppercase;
color:#000;
cursor:hand;
}

.navigation-box a:hover{
color:#ab90b7;
}

.navigation-box a.fa{
color:#a289a8;
font-size:13px;
margin-left:25px;
}

.navigation-box a.fa:hover{
color:#000;
}

/* About Me - Located at home page
---------------------------------------------*/
.about-me-section{
width:75%;
padding:1%;
border:1px solid #eee;
margin-top:30px;
}
.about-me-pic{
width:50%;
float:left;
}

.about-me-pic img{
width:100%;
}

.about-me-text{
padding:2%;
float:left;
width:46%;
color:#888;
}

.about-me-section h2{
color:#8f849b;
font-weight:normal;
letter-spacing:10px;
font-size:17px;
text-transform:uppercase;
text-align:center;
margin-bottom:30px;
}
.about-me-section a.button{
background:#fff;
border:1px solid #eee;
width:70%;
text-transform:uppercase;
padding:20px;
font-family: 'Hind', sans-serif;
color:#555;
font-size:13px;
letter-spacing:3px;
display:inline-block;
text-align:center;
}
.button1:hover,.about-me-section a.button:hover{
color:#ab90b7;
}
/* Blog - thumbnail and all
---------------------------------------------*/
.blog-body-box{
width:75%;
text-align:center;
}

.blog-body-column{
width:29.33%;
padding:2%;
float:left;
text-align:center;
}

.excerpt{
overflow:hidden;
height:360px;
border-bottom:1px dashed #eee;
text-align:justify;
padding-bottom:10px;}

.excerpt img{
margin-bottom:5px;
max-width:100%;
max-height:100%;
}

.excerpt a{
margin:0!important;
}
.excerpt h2.home-post-title{
text-align:center;
line-height:23px;
border-bottom:1px solid #eee;
}

.excerpt h2.home-post-title span{
font-size:13px;
text-align:center;
letter-spacing:2px;
font-weight:normal;
color:#999;
text-transform:uppercase;
}

.blog-body-column a.button{
margin-top:20px;
background:#f9f9f9;
padding:3%;
display:inline-block;
}

.button1{
width:72%;
padding:1.5%;
margin-top:30px;
border-top:1px dashed #ddd;
}
.button2{
width:97%;
padding:1.5%;
margin-top:10px;
margin-bottom:20px;
border-top:1px dashed #ddd;
display:none;
}

a.latest-entries-button{
display:block;
border:0px;
padding-bottom:4px;
margin:0px;
}

/* Blog - Single Post
---------------------------------------------*/
.blog-single-post{
width:80%;
border-top:1px dashed #eee;
text-align:justify;
padding:1%;
margin-top:-25px;
}

.blog-single-post .entry{
width:61%;
padding:2%;
float:left;
}

.blog-single-post .entry a{
margin:0!important;
margin-bottom:10px;
}
.blog-single-post .entry img{
max-width:100%;
max-height:100%;
}

h2.title{
font-size:14px;
color:#888;
display:block;
padding-left:22px;
letter-spacing:10px;
text-transform:uppercase;
margin:0;
margin-bottom:20px;
font-weight:normal;
text-align:center;
}

h3.date-header{
font-weight:normal;
text-transform:uppercase;
color:#c9a5a5;
font-size:11px;
text-align:center;
margin-bottom:30px;
letter-spacing:3px;
}

.blog-single-post .sidebar{
width:30.8%;
border-left:1px solid #f9f9f9;
float:right;
padding:2%;
}

.blog-single-post .sidebar img{
max-width:100%;
max-height:100%;
}
p.blogger-labels{
border:1px solid #eee;
text-align:center;
padding:0.5%;
margin-top:20px;
}

.comment-icon blogger-comment-icon{
display:none
}

span.comment-icon{
display:none
}
.comment-count{
font-size:14px;
color:#888;
display:block;
padding-left:22px;
letter-spacing:10px;
text-transform:uppercase;
margin:0;
margin-bottom:20px;
font-weight:normal;
text-align:center;
margin-top:50px;
}

.username-comment{
margin-bottom:10px;
}

.comment-content{
border:1px solid #eee;
padding:2%;
}

.sidebar{
color:#777;
}

.sidebar h2{
font-weight:normal;
font-size:13px;
text-transform:uppercase;
letter-spacing:4px;
text-align:center;
border-top:1px solid #eee;
line-height:1px;
margin:0;
margin-bottom:15px;
}

.sidebar h2 span{
background:#fff;
padding-left:20px;
padding-right:20px;
}

/* Footer
---------------------------------------------*/
.footer{
background:#f6f6f6;
padding:0.5%;
font-family: 'Hind', sans-serif;
text-transform:uppercase;
font-size:90%;
letter-spacing:4px;
}
/* Responsive - max 750px
------------------------------------------*/
@media only screen and (max-width: 750px) {

.header{
background-size:500%;
}

.excerpt{
width:98%;
}

.blog-body-box{
width:100%;
}

.blog-body-column{
width:98%;
padding:1%;
}

.blog-single-post{
width:98%;
padding:1%;

}
.blog-single-post .entry{
width:96%;
padding:2%;
}
.blog-single-post .sidebar{
width:96%;
padding:2%;
}
.button2{
display:block;
}

.about-me-section{
width:95%;
}
.about-me-pic{
width:100%;
}
.about-me-text{
padding:2%;
float:left;
width:96%;
color:#888;
}

.about-me-section a.button{
width:80%;
}
}
/* Responsive - max 550px
------------------------------------------*/
@media only screen and (max-width: 550px) {
.navigation-box{
padding:0;
width:100%;
}
.navigation-box a.navi{
width:100%;
border-bottom:1px solid #f9f9f9;
display:block;
padding:0;
padding-top:10px;
padding-bottom:10px;
}

.navigation-box a.fa{
margin-top:10px;
}
}

</style>
</head>
<body>

<!------------------------------- start html ----------------------------------->
<!-----------------header-------------------->

<div class="header">
<center><a href="<$BlogURL$>"><div class="header-text">
<$BlogTitle$>
</div></a>
</center>
</div>
<!-----------------navigation-------------------->

<div class="navigation-box">
<center>
<a class="navi" href="<$BlogURL$>">Home</a>
<a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title="">About</a>
<a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('contact').innerHTML" title="">Contact</a>
<a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('archive').innerHTML" title="">Archive</a>
<a class="navi" href="http://www.blogger.com/follow-blog.g?blogID=<$BlogID>">Follow</a>

<! ----- PLEASE CHANGE TO YOUR OWN SOCIAL MEDIAS LINK ------->
<a href="https://www.facebook.com/wanaseobycom/" class="fa fa-facebook" target="_blank"></a>
<a href="https://www.instagram.com/wanasby/?hl=en" class="fa fa-instagram" target="_blank"></a>
<a href="https://www.bloglovin.com/blogs/wanaseoby-18401535" class="fa fa-heart" target="_blank"></a>
<a href="https://twitter.com/wanasby" class="fa fa-twitter" target="_blank"></a>
<a href="https://plus.google.com/u/0/110735333918793906765" class="fa fa-google-plus" target="_blank"></a>
<a href="https://www.pinterest.com/wanasby/" class="fa fa-pinterest-p" target="_blank"></a>
<a href="mailto:contact@wanaseoby.com" class="fa fa-envelope" target="_blank"></a>
<a href="http://wanaseoby.com/feed/" class="fa fa-rss" target="_blank"></a>
</center>
</div>
<!----------------- About Me - in home page-------------------->
<MainPage>
<center><div class="about-me-section">
<div class="about-me-pic">
<img src="http://i.imgur.com/vo8RnOp.png">
</div>

<div class="about-me-text"><div id="main">
<h2>The Writer</h2>

Welcome to my space! Wana, 21. A full time student and part time blogger. This blog is based in Malaysia. I blog in Malay & English. Replace this thing with you own words. Recommended image size = 500px x 300px

<br/><br/><br/>
<a class="button" href="your about me page link">Read More About Me Here</a>

<!
NOTE : About page mentioned is a blog post about youself/your blog 🙂
>
</div></div>
<div class="clear"></div>
</div></center>
</MainPage><br/><br/><br/>
<!----------------- Blog Post Thumbnail and Excerpt-------------------->
<MainPage>

<center>
<div class="blog-body-box">
<Blogger>

<div class="blog-body-column">
<div class="excerpt">
<h2 class="home-post-title"><span><BlogItemTitle>
<$BlogItemTitle$>
</BlogItemTitle></span></h2>
<$BlogItemBody$>
</div>
<a class="button" href="<$BlogItemPermalinkURL$>">Read More </a></div>
</Blogger>
<div class="clear"></div>
</div>

</center>
</MainPage>
<!----------------- Single Post -------------------->
<ItemPage>

<style>

@media only screen and (max-width: 750px) {

.button1{display:none;}

}
</style>

<center><div class="blog-single-post">
<div class="entry">

<Blogger>
<h2 class="title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></h2>

<BlogDateHeader><h3 class="date-header"><$BlogDateHeaderDate$></h3>
</BlogDateHeader>

<$BlogItemBody$>
<center>
<div class="button2">
<span style="float:right;"><olderposts><a href=<$OlderPosts$>><span class="fa fa-arrow-right"></span></a></a> </OlderPosts></span>
<span style="float:left;"><newerposts><a href=<$NewerPosts$>> <span class="fa fa-arrow-left"></span></a></NewerPosts></span>
</div>
</center>

<div class="comment-count"><$BlogItemCommentCount$> comments</div>
<blogitemcommentsenabled><a name="comments"></a>
<$CommentPager$><blogitemcomments>
<a name="<$BlogCommentAnchorName$>"></a><div class="username-comment"><$I18NCommentAuthorSaid$></div>
<div class="comment-content"><$BlogCommentBody$></div>
<$BlogCommentDeleteIcon$>
</blogItemComments>
<$CommentPager$>
<br/><br/><$BlogItemCreate$>
</Blogger>

</div>

<div class="sidebar">
<h2><span>About</span></h2>
<img src="http://i.imgur.com/kUglFWY.png">Cupcake ipsum dolor sit amet icing cotton candy biscuit. Marzipan bonbon pudding bonbon jelly beans bonbon. Gummies pie gummies sweet bonbon chupa chups.
<br/><br/><br/>
<h2><span>Instagram</span></h2>

<! ----- GET YOUR OWN INSTAGRAM WIDGET ON LIGHTWIDGET.COM ------->
<!-- LightWidget WIDGET --><script src="//lightwidget.com/widgets/lightwidget.js"></script><iframe src="//lightwidget.com/widgets/e5896692bae159e1a90cfa022a6651d9.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width: 100%; border: 0; overflow: hidden;"></iframe>

<br/><br/><br/>
<h2><span>Footsteps</span></h2>

<! ----- YOUR CBOX CODES HERE ------->
<br/><br/>
<h2><span>My Bloglist</span></h2>
<center>

<! ----- YOUR BLOGLIST HERE ------->
<div class="friends">
<a href='BLOG LINK' target='_blank'>friend</a>
<a href='BLOG LINK' target='_blank'>friend</a>
<a href='BLOG LINK' target='_blank'>friend</a>
<a href='BLOG LINK' target='_blank'>friend</a>
<a href='BLOG LINK' target='_blank'>friend</a>
<a href='BLOG LINK' target='_blank'>friend</a>
<a href='BLOG LINK' target='_blank'>friend</a>
<a href='BLOG LINK' target='_blank'>friend</a>
<a href='BLOG LINK' target='_blank'>friend</a>
</center>
</div>

<div class="clear"></div>
</div></center>
</ItemPage>
<!----------------- Older/ Newer Post -------------------->

<center>
<div class="button1">
<span style="float:right;"><olderposts><a href=<$OlderPosts$>><span class="fa fa-arrow-right"></span></a></a> </OlderPosts></span>
<span style="float:left;"><newerposts><a href=<$NewerPosts$>> <span class="fa fa-arrow-left"></span></a></NewerPosts></span>
</div>
</center>

<br/><br/><br/>

<!----------------- Footer - DO NOT REMOVE CREDIT -------------------->

<center><div class="footer">Template by <a href="http://wanaseoby.com/">Wanaseoby</a></div>

<!----------------- 1st page -------------------->
<div id="about" style="display: none;">
<h2>The Writer</h2>

Welcome to my space! Wana, 21. A full time student and part time blogger. This blog is based in Malaysia. I blog in Malay & English. Replace this thing with you own words. Recommended image size = 500px x 300px

<br/><br/><br/>
<a class="button" href="your about me page link">Read More About Me Here</a>
</div>

<!----------------- 2st page -------------------->
<div id="contact" style="display: none;">
<h2>contact</h2>
The contact button is up there though. You may put your cbox here or maybe change this section to f.a.q page or anything else.
</div>

<!----------------- 3st page -------------------->
<div id="archive" style="display: none;">
<h2>Archive</h2>
<div style="height:200px; overflow-x:hidden; overflow-y:scroll;">
<BloggerPreviousItems>
<a class="latest-entries-button" href="<$BlogItemPermalinkURL$>">
<$BlogPreviousItemTitle$>
</a>
</BloggerPreviousItems>
</div>
</div>
</body>
</html>