<html>
<head>

<base target="_blank"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbaMD_b0WsjgrChqqXzRtoDfAzgpHuxKLTo94I9MciR9Z8lNDMc0KfCLvk4SkaSjLzGjHslg-Jl5CGZ2tBd84JcYhFhIq_k2JZlsl-Bj020BtwIIf2k5UPhqigmHxEIB36nFJaYEfLkHk/s1600/kicon.jpg" rel="icon" type="image/x-icon"/>

<title>Kio</title>


<link href="https://fonts.googleapis.com/css?family=Quicksand|Source+Sans+Pro" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"/>
<link href='https://fonts.googleapis.com/css?family=Catamaran' rel='stylesheet'/>

<style type="text/css">

/* body
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

body {
background:#fdfdfd;
margin:0px;
font-family: 'Quicksand', sans-serif;
font-size: 13px;
color: #444444;
letter-spacing:1px;
overflow-x:hidden;
oveflow-y:scroll;
text-align:justify;
}

a:link,a:visited {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
text-decoration:none;
color:#444444;
padding:2px;
}

a:hover {
color:#ccc;
}

/* header
----------------------------------------------- */

.header{
font-size:40px;
margin-top:50px;
margin-bottom:60px;
text-align:center;
}

/* menu
----------------------------------------------- */
.menu{
text-align:center;
width:100%
}

a.menu-kio{
margin-bottom:5px;
font-family: 'Quicksand', sans-serif;
background:#f7f7f7;
padding:10px;
cursor:hand;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
width:8%;
display:inline-block;
text-align:center;
}

/* blog
----------------------------------------------- */
.blog-body{
width:80%;
padding:1%;
background:#fff;
padding:10px;
border:2px solid #f9f9f9;
box-shadow:0px 0px 0px 4px #ffffff;
}

.article{
padding:1%;
width:65%;
float:left;
text-align:justify;
}

.post-title{
background:#f9f9f9;
font-size:120%;
text-align:center;
padding-left:20px;
padding-top:5px;
padding-bottom:5px;
margin-bottom:10px;
}

.info{
text-transform:uppercase;
font-size:10px;
color:#444444;
font-family: 'Quicksand', sans-serif;
}

.blog-entry{
font-family: 'Catamaran', sans-serif;
font-size:13px;
color:#444444;
letter-spacing:1px;
margin-top:20px;
}

.blog-entry img{
max-width:100%;
margin-bottom:10px;
}

.blogger-labels{
background:#f8f8f8;
text-align:center;
text-transform:uppercase;
font-size:10px;
padding:2px;
color:#444444;
font-family: 'Quicksand', sans-serif;
margin-top:20px;
}

/* sidebar
----------------------------------------------- */

.sidebar{
padding:2%;
width:28%;
border-left:1px solid #f5f5f5;
float:right;
text-align:justify;
}

h2{
font-weight:normal;
border-bottom:1px solid #f6f6f6;
font-size:150%;
text-align:center;
padding-left:20px;
padding-top:5px;
padding-bottom:5px;
margin-bottom:10px;
margin-top:30px;
}

.label a{
text-transform:uppercase;
padding-left:10px;
padding-right:10px;
background: #fcfcfc;
padding:10px;
width:42%;
margin-bottom:4px;
display:inline-block;
font-size:11px;
}

a.latest-entries-button{
background:#fcfcfc;
display:block;
border:0px;
padding:5px;
margin:0px;
margin-bottom:2px;
}

#contact{
width:30%;
border:1px solid #f7f7f7;
padding-top:30px;
height:40px;
margin-bottom:5px;
}
/* footer
----------------------------------------------- */
.post-footer{
text-align:center;
border-top:1px solid #f3f3f3;
padding-top:10px;
margin-bottom:30px;
}

.credit{
text-align:center;
text-transform:uppercase;
font-size:10px;
padding:2px;
color:#444444;
font-family: 'Quicksand', sans-serif;
margin-top:20px;
margin-bottom:20px;
}

/* mobile view
----------------------------------------------- */
@media only screen and (max-width: 800px) {
a.menu-kio{
font-size:90%;
width:12%;
background:#f9f9f9;
}

.label a{
width:90%;
}

}

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

.menu{
margin-bottom:30px;
}

a.menu-kio{
width:95%;
font-size:100%;
display:block;
background:transparent;
border-bottom:1px solid #f3f3f3;
}

.blog-body{
width:95%;
backround:transparent;
shadow:none;
border:none;
padding:0px;
margin:0px;}

.article{
width:95%;
}

.info{display:none}

.sidebar{
width:95%;
border-left:none}

}
</style> <meta content='width=device-width, initial-scale=1.0' name='viewport'/>

</head>
<body>


<div class="header">Kio</div>



<div class="menu"><center>
<a class="menu-kio" onClick="document.getElementById('main').innerHTML=document.getElementById('home').innerHTML" title="">Home</a>
<a class="menu-kio" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title="">About</a>
<a class="menu-kio" onClick="document.getElementById('main').innerHTML=document.getElementById('page3').innerHTML" title="">Page 3</a>
<a class="menu-kio" onClick="document.getElementById('main').innerHTML=document.getElementById('page4').innerHTML" title="">Page 4</a>
<a class="menu-kio" href="http://www.blogger.com/follow-blog.g?blogID=<$blogID$>" title="">+ Follow</a></center>
</div>


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


<div id="main" class="article">
<blogger>

<div class="post-title">
<a href="<$BlogItemPermalinkURL$>"</a><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></a></div>

<center>
<span class="info">
posted by <$BlogItemAuthor$>
<span class="fa fa-calendar"></span> <$BlogItemDateTime$>
<span class="fa fa-comments"></span>
<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a>
</span>
</center>

<div class="blog-entry">
<$BlogItemBody$>
</div>

<div class="post-footer">
<a href="https://www.facebook.com/sharer/sharer.php?u=" class="fa fa-facebook-f"></a>
<a href="hhttps://twitter.com/home?status=" class="fa fa-twitter"></a>
<a href="https://plus.google.com/share?url=" class="fa fa-google-plus"></a>
<a href="https://pinterest.com/pin/create/button/?url=&media=&description=" class=" fa fa-pinterest-p"></a>
<a href="https://pinterest.com/pin/create/button/?url=&media=&description=" class="fa fa-envelope"></a>
</div>

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


<div class="sidebar">


<center><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj093GQg9wdXsLyi8bnzF_o7Uezy369aEM8gRuKYMDPFJc-Z29X5XUzbXI1zy_ItTbzRP3_3GBv5DcXsNfE0_jQpl9PtoP4YTlHu8w32H24ryJYmjssI5ukCUoYKBpwIMIyEwsCekp7VXY/s1600/sidebar.png" width="100%" / ></center>

<br />Shazwana, 20. Menulis blog sejak Mac 2011. Moto hidup adalah selagi saya tidak makan saya tidak boleh bergerak bye.



<h2> contact me </h2>
<center>
<a href="" id="contact" class="fa fa-facebook-f"></a>
<a href="" id="contact" class="fa fa-twitter"></a>
<a href="" id="contact" class="fa fa-google-plus"></a>
<a href="" id="contact" class="fa fa-pinterest-p"></a>
<a href="" id="contact" class="fa fa-envelope"></a>
<a href="" id="contact" class="fa fa-tumblr"></a>
</center>



<h2> instagram </h2>
<script src="//lightwidget.com/widgets/lightwidget.js"></script><iframe src="//lightwidget.com/widgets/2521b051bd5d517eb9bf608b506e7352.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width: 100%; border: 0; overflow: hidden;"></iframe>
get your instagram widget from https://lightwidget.com/ !
<h2> blog archive </h2>


<center>
<BloggerPreviousItems>
<a class="latest-entries-button" href="<$BlogItemPermalinkURL$>">
<$BlogPreviousItemTitle$>
</a>
</BloggerPreviousItems>
</center>



<h2> categories </h2><center>
<div class="label">
<a href='/search/label/YOURCATEGORYHERE/' target='_blank'>category</a>
<a href='/search/label/YOURCATEGORYHERE/' target='_blank'>category</a><br/>
<a href='/search/label/YOURCATEGORYHERE/' target='_blank'>category</a>
<a href='/search/label/YOURCATEGORYHERE/' target='_blank'>category</a>
</div>
</center>

</div>
<div style="clear:both"></div>
<div style="clear:both"></div>

</div></div>
<div class="credit">
design by <a href="http://wanaseoby.com"/>Wanaseoby</a>
</div>





<div id="home" style="display: none;">
<blogger>

<div class="post-title">
<a href="<$BlogItemPermalinkURL$>"</a><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></a></div>

<center>
<span class="info">
posted by <$BlogItemAuthor$>
<span class="fa fa-calendar"></span> <$BlogItemDateTime$>
<span class="fa fa-comments"></span>
<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a>
</span>
</center>

<div class="blog-entry">
<$BlogItemBody$>
</div>

<div class="post-footer">
<a href="https://www.facebook.com/sharer/sharer.php?u=" class="fa fa-facebook-f"></a>
<a href="hhttps://twitter.com/home?status=" class="fa fa-twitter"></a>
<a href="https://plus.google.com/share?url=" class="fa fa-google-plus"></a>
<a href="https://pinterest.com/pin/create/button/?url=&media=&description=" class=" fa fa-pinterest-p"></a>
<a href="https://pinterest.com/pin/create/button/?url=&media=&description=" class="fa fa-envelope"></a>
</div>

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

</div>


<div id="about" style="display: none;">
<div class="post-title">About Me</div>
Insert your about content here.
</div>



<div id="page3" style="display: none;">
<div class="post-title">Page 3</div>
Insert your content here
</div>



<div id="page4" style="display: none;">
<div class="post-title">Page 4</div>
Insert your content here
</div>



</body>
</html>

Labels: Blogskin, Blogskin Codes, Kio