Hatsune Miku: Blogskin 1: Kawaii Purple (Sci-Twi)

Hai! ini blogskin pertama buatan Angel. Basecode dari kak Ezah . Kalo mau pake bilang di komentar ya!

<html><head>
<!--------------------------------------
Blogger Classic Template
Name: Purple Kawaii
Skin basecode by: kawaiilady.blogspot.com
*Don't remove this*
*Don't use this skin as basecode*
--------------------------------------!>
<script type="text/javascript">
document.ondragstart = function () { return false; }; </script>
<link href='http://fonts.googleapis.com/css?family=Cinzel+Decorative|Short+Stack|Petit+Formal+Script' rel='stylesheet' type='text/css'/>
<link rel="shortcut icon" href="http://media.tumblr.com/tumblr_lkl773QmKa1qfamg6.gif">
<title>Purple Kawaii</title>
<center>
<img class="headerr" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioq-2IOHmB8tYScy4vBG_Vlur3IWDzR48Eg0ifOzzl3wUzyH4KL5OAWzrWfjnLzYsPIuKqX_HSRsMEVWjOl8tm3vNcs1-D1tjVgbkTGlOKL5AsfuO7_p4Zmc67fsN6egcMqIXYm31dpTI/s1600/1.gif"/></center>
<center>
<div style="background:#A901DB;width:892px;align:center;border-right: 4px solid #D358F7;border-left: 4px solid #A901DB;">
<a class="lola" onclick="document.getElementById('page').innerHTML=document.getElementById('diary').innerHTML" >Diary</a>
<a class="lola" onclick="document.getElementById('page').innerHTML=document.getElementById('profile').innerHTML" >About</a>
<a class="lola" onclick="document.getElementById('page').innerHTML=document.getElementById('links').innerHTML" >Link</a>
<a class="lola" onclick="document.getElementById('page').innerHTML=document.getElementById('rules').innerHTML" >Stuff</a>
<a class="lola" onclick="document.getElementById('page').innerHTML=document.getElementById('other').innerHTML" >Other</a>
</div>
</center>
<style type="text/css">
#navbar-iframe {
display: none;
}

body {
color:#F8E0F7;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSeUJzs4sEGV6zRl0pCJhM4s1pZ3O1t1KFu6IPjuONfoE9cqoJIS7PKP5DXnHTv4wHBXP2S4Wu7EbJ3ugwEoVC7eeGx7-CpxlQ-Cu9YkQbTCH5CIwbTcaLVAqLJGYfBWEmc0Mi-FmIHQs/s1600/IMG_488399.jpg);
background-attachment:fixed;
cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur267.cur), auto;
font-family: short stack;
letter-spacing: 1px;
line-height: 15px
font-size: 12px;
}
a:link, a:visited {
text-decoration:none;'
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
border:1px solid transparent;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
color:#190718;
cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur267.cur), progress;
}
a:hover{
border:1px solid #A901DB;
color:#DA81F5;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {
height: 10px;
width: 10px;
display: block;
background: #F8E0F7;
border: 1px solid #EBF5FF;
}
::-webkit-scrollbar-track-piece  {
background-color: #c2e1ff;
border: 4px solid #6A0888;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #F8E0F7;
border: 3px solid #ECE0F8;
border-radius:10px;
}
.headerr {
opacity:1;
margin-top:10px;
border-radius:0px;
}
.headerr:hover {
opacity:1;}
img {
opacity:1;
-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;
}

img:hover {
opacity:0.6;
}
::-moz-selection {
background:#E2A9F3;
color:#F5FAFF;
}

::selection {
background:#7401DF;
color:#99CCFF;
}

blockquote {
border-left: 20px groove #ECCEF5;
border-right: 2px solid #ECCEF5;
border-radius:10px;
border-top: 2px solid #CC2EFA;
border-bottom: 2px solid #CC2EFA;
background:#F0F5FF;
padding :4px;
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
}
blockquote:hover {
border-left: 2px solid #ECCEF5;
border-right: 20px ridge #ECCEF5;
border-top: 2px solid #CC2EFA;
border-bottom: 2px solid #CC2EFA;
background:#ffffff;
background-position:bottom right;
background-repeat:no-repeat;
padding :4px;]
-webkit-box-shadow: 0px 0px 12px #99CCFF;
-moz-box-shadow:    0px 0px 12px #99CCFF;
box-shadow:         0px 0px 12px #99CCFF;
}
.h1 {
font-size: 14px;
font-family: 'Cinzel Decorative', cursive;
margin-top: 15px; margin-bottom:5px;
border-radius:10px;
text-transform:uppercase;
color:#222222;
letter-spacing:2px;
padding: 5px;
line-height:15px;
text-align: center;
border-left: 25px solid  #8904B1;
border-right: 25px solid #8904B1;
background: #E2A9F3;
-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;
}
.h1:hover {
border-left: 50px solid #CC2EFA;
border-right: 0px solid #CC2EFA;
}
.title-b {
color:#333333;
text-align: center;
font:12px candara;
}

u {
text-decoration:none;
color:#8904B1;
line-height: 10px;
border-bottom: 2px solid #CC2EFA;
-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;
}

u:hover {
border-bottom: 6px solid #8904B1;
}

b {
color: #b2b2b2;
font-weight: bold;
}

strike {
text-decoration: line through;
color:#B8DBFF;
-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;
}

strike:hover {
color: transparent;
}
a.lola{
width:100px;
padding:5px;
border-radius:20px;
margin:10px;
display:inline-block;
background: #CC2EFA;
font:18px chewy !important;
text-transform:uppercase;
text-align:center;
Text-decoration:none;
color:#FFFFFF;
letter-spacing:5px;
border:none;
text-shadow: #aaa 1px 1px 2px;
-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;
}
a.lola:hover{
border:none;
transform: rotate(-360deg) scale(0.6) ;
-webkit-transform: rotate(-360deg) scale(0.6);
-moz-transform: rotate(-360deg) scale(0.6);
-o-transform: rotate(-360deg) scale(0.6) ;
-ms-transform: rotate(-360deg) scale(0.6) ;
}
a.tablo{
background:#ECCEF5;
width:50px;
font-family: 'Cinzel Decorative', cursive;
padding-top:16px;
padding-bottom:16px;
display:inline-block;
border-radius: 50px;
text-align:center;
color: #555;
letter-spacing:1px;
font-size: 10px;
border:2px solid #D6EBFF;
-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;
}
a.tablo:hover{
background:#D6EBFF;
border:2px solid #ffffff;
color:#000000;
}
a.linkies {
display:inline-block;
width:150px;
background:#BF00FF;
padding: 3px;
margin: 2px;text-align:center;
color:#222222;border:none;
-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;
}
a.linkies:hover {
color:#9F81F7;
background:#ECE0F8;
border:none;
}
a.nav{
box-shadow: inset 9px 0 0px 0 #D358F7;
margin:2px;
padding:3px;
display:inline-block;
text-align:center;
background: #fff;
color:4d4d4d;
width:350px;
border:1px solid #D358F7;
border-left:20px solid #A3C2FF;
width: 350px;
-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;
}
a.nav:hover{
box-shadow: inset 850px 0 0px 0 #FFFFFF;
color: #555;
}
a.uhmy {
letter-spacing:1px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
margin:3px;
cursor:http://cur.cursors-4u.net/cursors/cur-9/cur266.cur;
text-transform:uppercase;
display:inline-block;
font:9px Tahoma;
text-align:center;
background: #fff;
width:350px;
color:#777;
padding:5px;
border:4px double #C2E0FF;
text-decoration:none;
}
a.uhmy:hover{
border:2px solid #ECCEF5;
color:#b2b2b2;
}
.cutie {
background: #ffffff;
color: #6C6C6C;
font-size: 11px;
padding: 4px;
width: 250px;
border-radius: 10px;
text-align: justify;
}

.mimi {
font: 16px century gothic;
color:#222222;
letter-spacing:4px;
padding: 3px;
margin-top:10px;
text-align: center;
border-radius:15px 5px 15px 5px;
border-left: 5px solid #C2EBFF;
border-right: 5px solid #C2EBFF;
background: #EEF6FF;
-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;
}
.mimi:hover {
border-radius:30px;
}

.old {
margin-top:10px;
background:#F0F5FF;
font:12px century gothic;
padding:2px;
width:300px;
color:#444444;
border-radius:10px;
align:center;
text-align:center;
}
/* Comment Start
----------------------------------------------- */
#comments h4 {
text-align:center; color: #ffffff; text-shadow: 1px 1px 1px #777777;
border: 2px dashed #FFFFFF;font-weight:normal;font:20px cheri;width:400px;
-webkit-border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-moz-border-radius: 15px;
padding:3px;
border-radius: 15px;
box-shadow:0px 0px 4px 3px #CEE4FF;background:#ECCEF5;
}
#comments-block {
width:480px;
margin:1.5em;
background:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3831/3831636.png);
color:#555555;text-align:left;
font:11px short stack;
padding:5px;box-shadow:0px 0px 4px 4px #E9F3FF;
border:2px dashed #FFFFFF;border-radius:20px;
}
#comments-block .comment-author {margin:.5em 0;}
#comments-block .comment-body {margin:.25em 0 0; background: #FFFFFF;}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
letter-spacing:.1em;
}
.comment-body p {
margin:0 0 .60em;
padding: 5px 5px 5px 5px;
background: #ECCEF5;
border-radius: 25px;
box-shadow:0px 0px 4px 4px #D358F7;
border:2px dashed #FFFFFF;
}
.comment-timestamp {
margin:1em;
padding:5px;margin-bottom:2em;
color:#666666;width:200px;
box-shadow:0px 0px 4px 4px #D358F7;background:#ECCEF5;
border:2px dashed #FFFFFF;border-radius: 25px;
}
.comment-data {
background:#FFFFFF;
box-shadow:0px 0px 4px 4px #D2E7FF;
border:2px dashed #FFFFFF;border-radius: 25px;
margin-top:5px !important;margin-bottom:5px !important;
padding:3px;width:250px;
color:#666666;text-align:center;
}
.comment-date {
background:#FFFFFF;
box-shadow:0px 0px 4px 4px #D2E7FF;width:180px;float:right;
border:2px dashed #FFFFFF;border-radius: 25px;
margin-top:5px !important;margin-bottom:5px !important;
padding:3px;color:#666666;
text-align:center;
}
.deleted-comment {
font-style:italic;
color:#B2B2B2;
}
/* Comment Ends
----------------------------------------------- */
</style>
</head>

<!-------- MAIN WRAPPER --------!>
<table style="margin-bottom: 20px;font-size: 11px; color: #333333;line-height: 16px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic6HG7WCAGZWkiYfuQxGqenINXIYRwWSYy-UelcT9QIOCQZjSJFzEyODR8a8vVAi7lGNGBTZV75FXngWJDKUy5WMTlAQFsXHnEBP2mdfGUialJRozVuCN9WKUut-iaL9pG-i99VienwEo/s1600/back2.png); border: 4px solid #c2e1ff; border-bottom:20px solid #c2e1ff;border-top:0px solid #c2e1ff;" width="900" align="center" border="0" cellspacing="10";>
<tbody>
<tr>
<td valign="top" style="width:530px; padding-right:5px; border-right:1px solid #99CCFF; padding-bottom:5px;">
<div id="page">
<blogger><div class="h1">
<blogitemtitle><span class="PostTitle">
<a href="<$BlogItemPermalinkURL$>">
<$BlogItemTitle$></a></span></BlogItemTitle></div>
<div class="title-b">
<blogdateheader><$BlogDateHeaderDate$></BlogDateHeader> • <$BlogItemDateTime$> • <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>> <$BlogItemCommentCount$> Sweet hearts</span></a></BlogItemCommentsEnabled></div>
<br><$BlogItemBody$>

<br /><br />
<itempage>
  <div id="comments" style="margin-top:5px;">
 <blogitemcommentsenabled><a name="comments"></a><center>
<h4>
<$I18NNumComments$>:</h4>
</center>
<center>
<dl id="comments-block">
<div style="width:465px;padding:5px;">
      <$CommentPager$>
      <blogitemcomments>
<dt class="comment-date" id="<$I18NAtCommentTimeWithPermalink$></dt>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
 <$I18NCommentAuthorsaid$>
</dt>
<dd class="comment-body">
        <p>
<$BlogCommentBody$></p>
</dd>
   </BlogItemComments>
    <$CommentPager$>
    </dl>
</center>
</div>
<center>
<p class="comment-timestamp">
<$BlogItemCreate$>
    </p>
</div>
</ItemPage></center>
</blogger>
<center>
<div class="old">
<newerposts><a href="<$NewerPosts$>" target="_blank">← Newer Posts</a> | </NewerPosts>  <olderposts> <a href="<$OlderPosts$>" target="_blank">Older  Posts →</a></OlderPosts></center>
</div>
</center>
<!-------- SIDEBAR WRAPPER --------!>

<div class="cutie">
<div class="mimi">
Click</div>
<br>
<center>
<img src="https://vignette.wikia.nocookie.net/mlp/images/3/35/Sci-Twi_%22my_entrance%22_EG3.png/revision/latest/scale-to-width-down/640?cb=20151013194137" width="240"height="170"><br><br>
<div style="font-size: 13px;text-align: center;font-family: 'Petit Formal Script', cursive;border-radius: 10px;background:#fff;color:808080;">
<a href="http://www.blogger.com/follow-blog.g?blogID=<$BlogID$>">follow</a> | <a href="http://www.blogger.com/home" ">dash</a><br><br><span style=font-size:20px;text-align:center; padding-left:20px;display:inline-block;center;">
<div class="top">
</div>
</div>
<div class="cutie">
<div class="mimi">
Disclaimer</div>
<br>
<center>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCEzvoDRR4408huHKq0XWnN_DbRVeISBVjr6sYaB6MVzY0z1S4iGL75Ilj786kkQsmUCZA29yvxWzSvwxYrFNLT6umDZQxhEi6Rh6iPgb-YkgmHOXn9KoAGK9L-xuds77M8XwQoRUViFE/s1600/equestria+girls+sci+twi.png";width="240"height="170"><br><br>
<div style="text-align:center;">
Hi visitor! welcome to my blog! Please navigate around happily. And follow me if you like to :) Hate my blog?click <a href="javascript:window.close();">Here</a><br><br></div>
<div class="cutie">
<div class="mimi">
Speak now!</div>
<br>
<center>
<img src="http://www.sadmuffin.net/cherrybam/graphics/graphics-cute2/019.gif"  ><br><br><img src="https://img1.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 20px; width: 200px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_0" data-original-id="BLOGGER_object_0" />
<center>
Don't use harsh word<center>
<center>
Put your blog url<center>
<br>

SHOUTBOX CODE HERE
<div class="cutie">
<div class="mimi">
Advertise</div>
<br>
<center>
<img src="https://orig00.deviantart.net/1e5e/f/2017/028/a/9/sci_twi_being_cuuuuuuuteeeeeee_gif_by_spyro1997-dax188w.gif" width="230" height="150"><br><br>
<center>
<select style="background-color: #F0F5FF; color: #4D4D4D; font: 10px 'Patrick Hand', cursive; letter-spacing: 2px; border: 1px #99CCFF solid; padding: 2px; width: 230px;" onChange="location.href=this.options[this.selectedIndex].value;">
<option value=''>Blog Archive ♥</option>
<bloggerarchives>
<option value="<$BlogArchiveURL$>"> <$BlogArchiveName$></option>
</BloggerArchives></select></center>
<br><br>

Blog Owner: <a href="YourBlogURL">Your name</a><br>
Desainer: <a href="http://angelssweetnotes.blogspot.com/">Angel</a><br>
Basecode By: <a href="http://kawaiilady.blogspot.com/">Kawaii</a><a href="http://www.blogskins.com/me/teddy_chimi"> Lady</a><br>
Some stuff: <a href="http://nurulatiqahjaidin.blogspot.com/">♥ </a><a href="https://www.google.com.my/">♥</a><a href="http://wanaseoby.blogspot.com/"> ♥</a><a href="http://www.screamcute.com/"> ♥</a><br>
</div>
</td>
</tr>
</tbody>
</table>
<div id="profile" style="display: none;">
<div class="h1">
Meet The Owner</div>
<br>
<center>
<img src="https://camo.derpicdn.net/6037e135fb51d503efa59a12f96011c821a57c00?url=http%3A%2F%2Fvignette1.wikia.nocookie.net%2Fmlp%2Fimages%2F8%2F82%2FSci-Twi_%2522Everton_Independent%2522_EG3.png%2Frevision%2Flatest%3Fcb%3D20151013194137"width="450" /></center>
<br>
<center>
<u>I'am just a normal girl like other</u><br><br>
<div style="text-align: left; padding-left: 30px;">
<b>Name</b> : Twilight Sparkle <br>
<b>Born on</b> : bla bla... <br>
<b>State</b> : bla bla... <br>
<b>Country</b> : bla bla... <br>
<b>Language</b> : bla bla... <br>
<b>Religion</b> : bla bla... <br>
<b>Wishes</b> : bla bla... <br>
<b>Hobby</b> : bla bla... <br>
<b>Ambition</b> : bla bla... <br>
<b>Quotes</b> : bla bla... <br>
<b>Contact</b> : <a href="https://twitter.com/YOUR TWITTER">Twitter</a> | <a href="http://www.facebook.com/YOUR FB">Facebook</a></center>
<br><br></center>
<div style="text-align: left; padding-left: 30px; padding-right: 20px;">
<u>I love </u><br><br>
♥  bla bla... <br>
♥  bla bla... <br>
♥  bla bla... <br>
♥  bla bla... <br>
♥  bla bla... <br>
♥  bla bla... <br><br>
<u>I Hate </u><br><br>
✖  CopyCat <br>
✖  Back Stabbers <br>
✖  Hypocrite <br>
✖  Fake friends <br>
✖  Arrogant <br>
✖  Annoying person<br>
✖  Insects <br><br>
<center>
<u>About this blog</u><br><br>This blog has been created at the middle of 2016 ... don't remember when ;) The aim is just for fun.. Ngee ..<br><br>
<center>
<u>Replace this!<u><br><br>

<div id="links" style="display: none;">
<div class="h1">
Link Exchanges</div>
<br>
<center>
<img src="https://derpicdn.net/img/view/2016/10/16/1274309__safe_screencap_sci-dash-twi_spike_sunset+shimmer_twilight+sparkle_equestria+girls_friendship+games_animated_dog_gif_hug_spike+the+regular+dog.gif"width="450" /><br><br>
<div style="text-align: left; padding-left: 20px; padding-right: 20px;">
<img src="http://media.tumblr.com/tumblr_lnvuxsy7uD1qepbs7.gif" />  Exchange link? tell me at my cbox...<br>
<img src="http://media.tumblr.com/tumblr_lnvuxsy7uD1qepbs7.gif" />  Put mine as...<br>
<img src="http://media.tumblr.com/tumblr_lnvuxsy7uD1qepbs7.gif" />  Also include your nickname to put...<br><br><br>
<center>
<a class="linkies" href="http://kawaiilady.blogspot.com/">Ezah</a>
<a class="linkies" href="http://angelssweetnotes.blogspot.com/">Angel</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a>
<a class="linkies" href="">friend</a><br/><br/>
</div>
</center>
<div id="rules" style="display: none;">

<div class="h1">
Read this rules first</div>
<br>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://vignette.wikia.nocookie.net/mlp/images/a/ab/Spike_pops_out_of_Twilight%27s_backpack_EG3.png/revision/latest/scale-to-width-down/640?cb=20151014210744" width="450" /></div>
<br>

<div style="text-align: left; padding-left: 20px; padding-right: 20px;">
<img src="http://media.tumblr.com/tumblr_lnvuxsy7uD1qepbs7.gif" />  1. your rules.<br>
<img src="http://media.tumblr.com/tumblr_lnvuxsy7uD1qepbs7.gif"/>  2. your rules.<br>
<img src="http://media.tumblr.com/tumblr_lnvuxsy7uD1qepbs7.gif" />  3. your rules.<br>
<img src="http://media.tumblr.com/tumblr_lnvuxsy7uD1qepbs7.gif" />  4. blablabla.<br>
<img src="http://media.tumblr.com/tumblr_lnvuxsy7uD1qepbs7.gif" />  5. blablabla.<br><br><br></div>
<div style="text-align: center;">
<span onClick="document.getElementById('page').innerHTML=document.getElementById('stuff').innerHTML"><b><u>Tutorial</u></b></span>   or   <span onClick="document.getElementById('page').innerHTML=document.getElementById('free').innerHTML"><b><u>Freebies</u></b></span><br>
</div>
<div id="stuff" style="display: none;">

<div class="h1">
Blog Tutorial...</div>
<br>
<center>
<img src="http://www.wallpapermay.com/thumbnails/detail/20120607/rain%20flowers%20leaves%20school%20uniforms%20skirts%20outdoors%20plants%20anime%20boys%20closed%20eyes%20umbrellas%20bag%20anim_www.wallpapermay.com_68.jpg"width="450" /></center>
<br>
<br><br>
<center>
<u>Tutorial</u><br><br>
<a class="uhmy" href="http://link">option</a>
<a class="uhmy" href="http://link">option</a>
<a class="uhmy" href="http://link">option</a>
<a class="uhmy" href="http://link">option</a>
<a class="uhmy" href="http://link">option</a>
<a class="uhmy" href="http://link">option</a>
<a class="uhmy" href="http://link">option</a>
<a class="uhmy" href="http://link">option</a>
<br><br><br><br></center>
</div>
<div id="free" style="display: none;">
<div class="h1">
Extras by me...</div>
<br>
<center>
<img src="http://cache.desktopnexus.com/thumbnails/1046432-bigthumbnail.jpg"width="450" /></center>
<br>
<br><br>
<center>
<u>Template designer.</u><br><br>
<a class="nav" href="http://link">option</a>
<a class="nav" href="http://link">option</a>
<a class="nav" href="http://link">option</a>
<a class="nav" href="http://link">option</a>
<a class="nav" href="http://link">option</a>
<a class="nav" href="http://link">option</a>
<a class="nav" href="http://link">option</a>
<a class="nav" href="http://link">option</a>
<br><br><br>
</div>
<div id="other" style="display: none;">
<div class="h1">
Free page...</div>
<br>
<center>
<img src="https://derpicdn.net/img/view/2016/7/12/1199205__safe_screencap_applejack_sci-dash-twi_twilight+sparkle_equestria+girls_friendship+games_animated_hug.gif"width="450" /></center>
<br>
<br><br>
<center>
<u>Anything here</u><br><br>
Put anything here like bias list or etc...
<br /><br/>
</div>
<div id="diary" style="display: none;">
<blogger><div class="h1">
<blogitemtitle><span class="PostTitle">
<a href="<$BlogItemPermalinkURL$>">
<$BlogItemTitle$></a></span></BlogItemTitle></div>
<div class="title-b">
<blogdateheader><$BlogDateHeaderDate$></BlogDateHeader> • <$BlogItemDateTime$> • <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>> <$BlogItemCommentCount$> Sweet hearts</span></a></BlogItemCommentsEnabled></div>
<br><$BlogItemBody$>

</body></html></table>

screenshoot: