BS ; 06 // Hi Darling
<!---------------------------------------------------------------------------
Don't COPY Any Code From This Template ! 101% Made & Create By Elaine0211 !
Designed By; Elaine0211
Designer's Blog; https://elaine0211.blogspot.com/
Date Of Design; 25.12.14
---------------------------------------------------------------------------!>
<HTML><head>
<link href='https://fonts.googleapis.com/css?family=Imprima' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Patrick+Hand+SC' rel='stylesheet' type='text/css'>
<base target='_blank'/><title>; Hi Darling</title>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXosxoNU_Qun_XhBW_t6JBdabs7062PhuI4QtwaAWCgZxCVxyZcFe-2CRst6BU3dit8UrwrMRhkaHoO8KSeQram5w27mIl7iH7qAEANvxml10DXoyscpXDzLt5pFfbYEpCf8EZM4x6TBCb/s1600/heart.png' rel='icon' type='image/x-icon'/>
<style type="text/css">
#navbar-iframe {display: none;}
body{
background:url();
font: 13px Imprima;
color:#a9b3ff;
}
::-moz-selection {
background:#fff;
color:#fff;
text-shadow: 1px 0px #8f9cff;}
::selection {
background:#fff;
color:#fff;
text-shadow: 1px 0px #8f9cff;}
::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment { height:0px; display: block; background-color: #fff;}
::-webkit-scrollbar-track-piece { background-color:#fff;}
::-webkit-scrollbar-thumb{ background:#a7b1fd;border:1px solid #fff;}
a:link,a:visited {
color:#b3bcfe;
text-decoration:none;
padding:2px;}
a:hover {
color:#d6dbff;
}
u{
text-decoration:underline;
border-bottom:1px dashed #cdd3fe;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}
u:hover{
border-bottom:2px solid #fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}
.post-title {
color:#fff;
margin:0px 0px 5px;
height:18px;
background-image:-webkit-linear-gradient(left, #8f9cff,#fff);
padding:2px 0 0 12px;
text-align:left;
border-radius:10px;
}
/* Other
----------------------------------------------- */
blockquote {
background:#fff;
padding:5px;
padding-left:10px;
border: 1px dashed #cdd3fe;
border-left:6px solid #cdd3fe;
-webkit-transition: .4s;
-moz-transition: .4s;
}
blockquote:hover {
border-left:1px dashed #cdd3fe;
border-right:6px solid #cdd3fe;
-webkit-transition: .4s;
-moz-transition: .4s;}
img{
filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;}
img:hover{
filter: blur(1px);
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;}
a.li {
border:1px dashed #8f9cff;
padding: 3px;
display:inline-block;
width:100px;
margin: 2px;
background: #fff;
background: url(https://i1098.photobucket.com/albums/g379/yuseong_13/Mis%20Pixels/Favicons/Onigiri.gif) no-repeat bottom left;
-webkit-transition: .6s;}
a.li:hover{
border:1px dashed #d6dbff;
-webkit-transition: .6s;}
#sidebar{
position:absolute;
left:800px;
width:230px;
background:#fff;
border:1px dashed #d6dbff;
padding:10px;
margin-top:10px;}
.side-title{
font:12px Patrick Hand SC;
color:#8f9cff;
height:18px;
background-image:-webkit-linear-gradient(left,#fff,#e2f8ff,#fff);
text-align:center;
}
/* Cbox
----------------------------------------------- */
.cbox {
width:296px;
height: 183px;
position: relative;
overflow: hidden;
background:url(https://i.imgur.com/eAIj5pu.png);
background-size: 319px 163px;
}
.cbox .mask,.cbox .content {
width:296px;
height: 183px;
position: absolute;
overflow: hidden;
}
.cbox img {
padding:2px;
}
.cbox p {
position: relative;
padding: 6px;
margin-top:-15px;
}
.cbox-th .mask {
background-color: rgba(255, 255, 255, 0.7);
filter: alpha(opacity=0);
top: 185px;
opacity: 0;
-webkit-transition: all 0.3s ease-out 0.5s;
-moz-transition: all 0.3s ease-out 0.5s;
transition: all 0.3s ease-out 0.5s;
}
.cbox-th p {
-webkit-transform: translateY(200px);
-moz-transform: translateY(200px);
transform: translateY(200px);
-webkit-transition: all 0.2s ease-in-out 0.2s;
-moz-transition: all 0.2s ease-in-out 0.2s;
transition: all 0.2s ease-in-out 0.2s;
}
.cbox-th:hover .mask {
filter: alpha(opacity=100);
opacity: 1;
top: 0px;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
-webkit-animation: bounceInRight 0.9s linear;
-moz-animation: bounceInRight 0.9s linear;
-ms-animation: bounceInRight 0.9s linear;
animation: bounceX 0.9s linear;
}
.cbox-th:hover p {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
@-webkit-keyframes bounceInRight {
0% {opacity: 0;-webkit-transform: translateX(2000px);transform: translateX(2000px);}
60% {opacity: 1;-webkit-transform: translateX(-30px);transform: translateX(-30px);}
80% {-webkit-transform: translateX(10px);transform: translateX(10px);}
100% {-webkit-transform: translateX(0);transform: translateX(0);}
}
@keyframes bounceInRight {
0% {opacity: 0;-webkit-transform: translateX(2000px);-ms-transform: translateX(2000px);transform: translateX(2000px);}
60% {opacity: 1;-webkit-transform: translateX(-30px);-ms-transform: translateX(-30px); transform: translateX(-30px);}
80% {-webkit-transform: translateX(10px);-ms-transform: translateX(10px);transform: translateX(10px);}
100% {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}
}
#picc {
position:absolute;
background:#fff;
padding:3px;
border-radius:50%;
width:72px;
height:72px;
box-shadow:0 0 5px #a4e5ff;
}
.back, .front {
width:70px;
height:70px;
position: absolute;
margin-top:3px;
margin-left:3px;
border-radius:50%;
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s ease-in;
}
.front img{border-radius:50%; margin-top:-2px;margin-left:-2px;}
.back {
margin-top:1px;
margin-left:1px;
overflow: hidden;
background:url(https://i1245.photobucket.com/albums/gg581/elaine960211/blue_zps992aa0a1.jpg) 90% 50%;
-webkit-transform: rotateX(-180deg);
}
#picc:hover .back {
-webkit-transform:rotateX( 0deg);
}
#picc:hover .front {
-webkit-transform: rotateX(360deg);
}
a.navi {
display:inline-block;
width:70px;
height:14px;
font:12px Patrick Hand SC;
line-height:1;
background:#fff;
opacity:0.8;
text-align:center;
margin-top:28px;}
@font-face {
font-family: "Ineed";
src: url('https://dl.dropbox.com/s/69sii3qe7eshtpx/KGINeedAFont.ttf'); }
</style>
<div style="position:absolute;top:12px;left:830px;font:36 Ineed;">; Hi Darling</div>
<!-------------------Side----------------------->
<div id="sidebar" style="top:60px;">
<div class="side-title">Hello</div>
<br><center>
<img SRC="https://i.imgur.com/L3rf4qm.png" style="width:200px;">
<br><br> *Your Own Text Here*
<br>Don't Remove the Credit ! Thanks :)</center>
</div>
<div id="sidebar" style="top:280px;">
<div class="side-title">Credits</div>
<br> • Template Design by ; <a href="https://elaine0211.blogspot.com/">BabeX e.ling</a>
<br> • Re-design by : <a href="URL">Yr Name</a>
<br> • Tutorials ; <a href="https://wanaseoby.blogspot.com/">Wana</a>
<br> • Materials ; <a href="https://www.google.com/">Google</a> * <a href="https://kawaii-box.blogspot.com/">Chokokuki</a>
<br> • Thank to ; <a href="https://imgur.com/">Imgur</a> * <a href="https://photobucket.com/">Photobucket</a>
<br><br>
<center>- Best Viewed In <a href="https://www.google.com/">Google Chrome</a> -</center>
</div>
<!-------------------top----------------------->
<table style="padding:2px;position:absolute; top:20px; left:100px;background:#fff; width:622px; padding:5px; border:1px dashed #d6dbff;" align="left" cellpadding="0" align="center">
<tr>
<td valign="top">
<div class="cbox cbox-th">
<img src="https://i.imgur.com/eAIj5pu.png" height="183"/>
<div class="mask">
<p><center><br><br>* Cbox Code Here *</center>
</td>
<td valign="top">
<div id="picc" style="margin-left:-295px; margin-top:8px;">
<div class="front"><img src="https://i.imgur.com/FwxGkrX.jpg" width="70px" /></div>
<div class="back"><a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('entry').innerHTML" >entry</a></div></div>
<div id="picc" style="margin-left:-195px; margin-top:8px;">
<div class="front"><img src="https://i.imgur.com/vZXZyFi.jpg" width="70px" /></div>
<div class="back"><a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" >about</a></div></div>
<div id="picc" style="margin-left:-95px; margin-top:8px;">
<div class="front"><img src="https://i.imgur.com/DVdHET2.jpg" width="70px" /></div>
<div class="back"><a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('link').innerHTML" >linkies</a></div></div>
<div id="picc" style="margin-left:-280px; margin-top:98px">
<div class="front"><img src="https://i.imgur.com/Jesi5FY.jpg" width="70px" /></div>
<div class="back"><a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('stuff').innerHTML" >stuff</a></div></div>
<div id="picc" style="margin-left:-180px; margin-top:98px;">
<div class="front"><img src="https://i.imgur.com/yXEMfgf.jpg" width="70px" /></div>
<div class="back"><a class="navi" href="https://www.blogger.com/follow-blog.g?blogID=YOUR BLOG ID">follow</a></div></div>
<div id="picc" style="margin-left:-80px; margin-top:98px;">
<div class="front"><img src="https://i.imgur.com/GH33ikx.jpg" width="70px" /></div>
<div class="back"><a class="navi" href="https://www.blogger.com/home">home</a></div></div>
</td>
<tr/></table>
<!-------------------Post----------------------->
<div style="position:absolute; top:220px; left:100px;">
<div style="background:#fff; width:600px; padding:10px; border:1px dashed #d6dbff;">
<div id="main"><Blogger>
<div class="post-title">▷ <BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader><$BlogItemDateTime$> // <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> love</a></BlogItemCommentsEnabled></div>
<$BlogItemBody$>
<div style="margin-top:10px;"></Blogger>
<a class="option" href=<$NewerPosts$>>←←</a></NewerPosts> <OlderPosts><a class="option" style="float:right;" href=<$OlderPosts$>>→→</a> </OlderPosts><div style="clear:both;"></div>
</div></div></div>
<br/>
<!-------------------PAGE1----------------------->
<div id="entry" style="display: none;">
<blogger>
<div class="post-title">▷ <BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader><$BlogItemDateTime$> // <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> love</a></BlogItemCommentsEnabled></div>
<$BlogItemBody$>
<div style="margin-top:10px;"></Blogger><a class="option" href=<$NewerPosts$>>←←</a></NewerPosts> <OlderPosts><a class="option" style="float:right;" href=<$OlderPosts$>>→→</a> </OlderPosts><div style="clear:both;"></div>
</div></div>
</div>
<!-------------------PAGE2----------------------->
<div id="about" style="display: none;">
<div class="post-title">Da' Owner</div>
<br>
<center>
<br># Name :
<br># Age :
<br># Birthday :
<br># Tumblr :
<br># Blog :
<br># Facebook :
<br>--- Replace with your profile ---
</center>
</div>
<!-------------------PAGE3----------------------->
<div id="link" style="display: none;">
<div class="post-title">Beloved Bloggie</div>
<br>
<center>
<br><br>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<br>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<br><br><br><br>
</center>
</div>
<!-------------------PAGE4----------------------->
<div id="stuff" style="display: none;">
<div class="post-title"> Stuff </div>
<br>
<b> Tutorial ; </b>
<br><br>
↘ <a href="URL">List 1</a><br>
↘ <a href="URL">List 2</a><br>
↘ <a href="URL">List 3</a><br>
↘ <a href="URL">List 4</a><br>
↘ <a href="URL">List 5</a><br>
<br><br>
<b> Material ;</b>
<br><br>
↘ <a href="URL">List 1</a><br>
↘ <a href="URL">List 2</a><br>
↘ <a href="URL">List 3</a><br>
↘ <a href="URL">List 4</a><br>
↘ <a href="URL">List 5</a><br>
<br><br>
<blockquote class="tr_bq">Coming Soon..</blockquote>
</div>
<!-------------------------- END ----------->
Don't COPY Any Code From This Template ! 101% Made & Create By Elaine0211 !
Designed By; Elaine0211
Designer's Blog; https://elaine0211.blogspot.com/
Date Of Design; 25.12.14
---------------------------------------------------------------------------!>
<HTML><head>
<link href='https://fonts.googleapis.com/css?family=Imprima' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Patrick+Hand+SC' rel='stylesheet' type='text/css'>
<base target='_blank'/><title>; Hi Darling</title>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXosxoNU_Qun_XhBW_t6JBdabs7062PhuI4QtwaAWCgZxCVxyZcFe-2CRst6BU3dit8UrwrMRhkaHoO8KSeQram5w27mIl7iH7qAEANvxml10DXoyscpXDzLt5pFfbYEpCf8EZM4x6TBCb/s1600/heart.png' rel='icon' type='image/x-icon'/>
<style type="text/css">
#navbar-iframe {display: none;}
body{
background:url();
font: 13px Imprima;
color:#a9b3ff;
}
::-moz-selection {
background:#fff;
color:#fff;
text-shadow: 1px 0px #8f9cff;}
::selection {
background:#fff;
color:#fff;
text-shadow: 1px 0px #8f9cff;}
::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment { height:0px; display: block; background-color: #fff;}
::-webkit-scrollbar-track-piece { background-color:#fff;}
::-webkit-scrollbar-thumb{ background:#a7b1fd;border:1px solid #fff;}
a:link,a:visited {
color:#b3bcfe;
text-decoration:none;
padding:2px;}
a:hover {
color:#d6dbff;
}
u{
text-decoration:underline;
border-bottom:1px dashed #cdd3fe;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}
u:hover{
border-bottom:2px solid #fff;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}
.post-title {
color:#fff;
margin:0px 0px 5px;
height:18px;
background-image:-webkit-linear-gradient(left, #8f9cff,#fff);
padding:2px 0 0 12px;
text-align:left;
border-radius:10px;
}
/* Other
----------------------------------------------- */
blockquote {
background:#fff;
padding:5px;
padding-left:10px;
border: 1px dashed #cdd3fe;
border-left:6px solid #cdd3fe;
-webkit-transition: .4s;
-moz-transition: .4s;
}
blockquote:hover {
border-left:1px dashed #cdd3fe;
border-right:6px solid #cdd3fe;
-webkit-transition: .4s;
-moz-transition: .4s;}
img{
filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;}
img:hover{
filter: blur(1px);
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;}
a.li {
border:1px dashed #8f9cff;
padding: 3px;
display:inline-block;
width:100px;
margin: 2px;
background: #fff;
background: url(https://i1098.photobucket.com/albums/g379/yuseong_13/Mis%20Pixels/Favicons/Onigiri.gif) no-repeat bottom left;
-webkit-transition: .6s;}
a.li:hover{
border:1px dashed #d6dbff;
-webkit-transition: .6s;}
#sidebar{
position:absolute;
left:800px;
width:230px;
background:#fff;
border:1px dashed #d6dbff;
padding:10px;
margin-top:10px;}
.side-title{
font:12px Patrick Hand SC;
color:#8f9cff;
height:18px;
background-image:-webkit-linear-gradient(left,#fff,#e2f8ff,#fff);
text-align:center;
}
/* Cbox
----------------------------------------------- */
.cbox {
width:296px;
height: 183px;
position: relative;
overflow: hidden;
background:url(https://i.imgur.com/eAIj5pu.png);
background-size: 319px 163px;
}
.cbox .mask,.cbox .content {
width:296px;
height: 183px;
position: absolute;
overflow: hidden;
}
.cbox img {
padding:2px;
}
.cbox p {
position: relative;
padding: 6px;
margin-top:-15px;
}
.cbox-th .mask {
background-color: rgba(255, 255, 255, 0.7);
filter: alpha(opacity=0);
top: 185px;
opacity: 0;
-webkit-transition: all 0.3s ease-out 0.5s;
-moz-transition: all 0.3s ease-out 0.5s;
transition: all 0.3s ease-out 0.5s;
}
.cbox-th p {
-webkit-transform: translateY(200px);
-moz-transform: translateY(200px);
transform: translateY(200px);
-webkit-transition: all 0.2s ease-in-out 0.2s;
-moz-transition: all 0.2s ease-in-out 0.2s;
transition: all 0.2s ease-in-out 0.2s;
}
.cbox-th:hover .mask {
filter: alpha(opacity=100);
opacity: 1;
top: 0px;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
-webkit-animation: bounceInRight 0.9s linear;
-moz-animation: bounceInRight 0.9s linear;
-ms-animation: bounceInRight 0.9s linear;
animation: bounceX 0.9s linear;
}
.cbox-th:hover p {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
@-webkit-keyframes bounceInRight {
0% {opacity: 0;-webkit-transform: translateX(2000px);transform: translateX(2000px);}
60% {opacity: 1;-webkit-transform: translateX(-30px);transform: translateX(-30px);}
80% {-webkit-transform: translateX(10px);transform: translateX(10px);}
100% {-webkit-transform: translateX(0);transform: translateX(0);}
}
@keyframes bounceInRight {
0% {opacity: 0;-webkit-transform: translateX(2000px);-ms-transform: translateX(2000px);transform: translateX(2000px);}
60% {opacity: 1;-webkit-transform: translateX(-30px);-ms-transform: translateX(-30px); transform: translateX(-30px);}
80% {-webkit-transform: translateX(10px);-ms-transform: translateX(10px);transform: translateX(10px);}
100% {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}
}
#picc {
position:absolute;
background:#fff;
padding:3px;
border-radius:50%;
width:72px;
height:72px;
box-shadow:0 0 5px #a4e5ff;
}
.back, .front {
width:70px;
height:70px;
position: absolute;
margin-top:3px;
margin-left:3px;
border-radius:50%;
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s ease-in;
}
.front img{border-radius:50%; margin-top:-2px;margin-left:-2px;}
.back {
margin-top:1px;
margin-left:1px;
overflow: hidden;
background:url(https://i1245.photobucket.com/albums/gg581/elaine960211/blue_zps992aa0a1.jpg) 90% 50%;
-webkit-transform: rotateX(-180deg);
}
#picc:hover .back {
-webkit-transform:rotateX( 0deg);
}
#picc:hover .front {
-webkit-transform: rotateX(360deg);
}
a.navi {
display:inline-block;
width:70px;
height:14px;
font:12px Patrick Hand SC;
line-height:1;
background:#fff;
opacity:0.8;
text-align:center;
margin-top:28px;}
@font-face {
font-family: "Ineed";
src: url('https://dl.dropbox.com/s/69sii3qe7eshtpx/KGINeedAFont.ttf'); }
</style>
<div style="position:absolute;top:12px;left:830px;font:36 Ineed;">; Hi Darling</div>
<!-------------------Side----------------------->
<div id="sidebar" style="top:60px;">
<div class="side-title">Hello</div>
<br><center>
<img SRC="https://i.imgur.com/L3rf4qm.png" style="width:200px;">
<br><br> *Your Own Text Here*
<br>Don't Remove the Credit ! Thanks :)</center>
</div>
<div id="sidebar" style="top:280px;">
<div class="side-title">Credits</div>
<br> • Template Design by ; <a href="https://elaine0211.blogspot.com/">BabeX e.ling</a>
<br> • Re-design by : <a href="URL">Yr Name</a>
<br> • Tutorials ; <a href="https://wanaseoby.blogspot.com/">Wana</a>
<br> • Materials ; <a href="https://www.google.com/">Google</a> * <a href="https://kawaii-box.blogspot.com/">Chokokuki</a>
<br> • Thank to ; <a href="https://imgur.com/">Imgur</a> * <a href="https://photobucket.com/">Photobucket</a>
<br><br>
<center>- Best Viewed In <a href="https://www.google.com/">Google Chrome</a> -</center>
</div>
<!-------------------top----------------------->
<table style="padding:2px;position:absolute; top:20px; left:100px;background:#fff; width:622px; padding:5px; border:1px dashed #d6dbff;" align="left" cellpadding="0" align="center">
<tr>
<td valign="top">
<div class="cbox cbox-th">
<img src="https://i.imgur.com/eAIj5pu.png" height="183"/>
<div class="mask">
<p><center><br><br>* Cbox Code Here *</center>
</td>
<td valign="top">
<div id="picc" style="margin-left:-295px; margin-top:8px;">
<div class="front"><img src="https://i.imgur.com/FwxGkrX.jpg" width="70px" /></div>
<div class="back"><a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('entry').innerHTML" >entry</a></div></div>
<div id="picc" style="margin-left:-195px; margin-top:8px;">
<div class="front"><img src="https://i.imgur.com/vZXZyFi.jpg" width="70px" /></div>
<div class="back"><a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" >about</a></div></div>
<div id="picc" style="margin-left:-95px; margin-top:8px;">
<div class="front"><img src="https://i.imgur.com/DVdHET2.jpg" width="70px" /></div>
<div class="back"><a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('link').innerHTML" >linkies</a></div></div>
<div id="picc" style="margin-left:-280px; margin-top:98px">
<div class="front"><img src="https://i.imgur.com/Jesi5FY.jpg" width="70px" /></div>
<div class="back"><a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('stuff').innerHTML" >stuff</a></div></div>
<div id="picc" style="margin-left:-180px; margin-top:98px;">
<div class="front"><img src="https://i.imgur.com/yXEMfgf.jpg" width="70px" /></div>
<div class="back"><a class="navi" href="https://www.blogger.com/follow-blog.g?blogID=YOUR BLOG ID">follow</a></div></div>
<div id="picc" style="margin-left:-80px; margin-top:98px;">
<div class="front"><img src="https://i.imgur.com/GH33ikx.jpg" width="70px" /></div>
<div class="back"><a class="navi" href="https://www.blogger.com/home">home</a></div></div>
</td>
<tr/></table>
<!-------------------Post----------------------->
<div style="position:absolute; top:220px; left:100px;">
<div style="background:#fff; width:600px; padding:10px; border:1px dashed #d6dbff;">
<div id="main"><Blogger>
<div class="post-title">▷ <BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader><$BlogItemDateTime$> // <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> love</a></BlogItemCommentsEnabled></div>
<$BlogItemBody$>
<div style="margin-top:10px;"></Blogger>
<a class="option" href=<$NewerPosts$>>←←</a></NewerPosts> <OlderPosts><a class="option" style="float:right;" href=<$OlderPosts$>>→→</a> </OlderPosts><div style="clear:both;"></div>
</div></div></div>
<br/>
<!-------------------PAGE1----------------------->
<div id="entry" style="display: none;">
<blogger>
<div class="post-title">▷ <BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader><$BlogItemDateTime$> // <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> love</a></BlogItemCommentsEnabled></div>
<$BlogItemBody$>
<div style="margin-top:10px;"></Blogger><a class="option" href=<$NewerPosts$>>←←</a></NewerPosts> <OlderPosts><a class="option" style="float:right;" href=<$OlderPosts$>>→→</a> </OlderPosts><div style="clear:both;"></div>
</div></div>
</div>
<!-------------------PAGE2----------------------->
<div id="about" style="display: none;">
<div class="post-title">Da' Owner</div>
<br>
<center>
<br># Name :
<br># Age :
<br># Birthday :
<br># Tumblr :
<br># Blog :
<br># Facebook :
<br>--- Replace with your profile ---
</center>
</div>
<!-------------------PAGE3----------------------->
<div id="link" style="display: none;">
<div class="post-title">Beloved Bloggie</div>
<br>
<center>
<br><br>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<br>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<br><br><br><br>
</center>
</div>
<!-------------------PAGE4----------------------->
<div id="stuff" style="display: none;">
<div class="post-title"> Stuff </div>
<br>
<b> Tutorial ; </b>
<br><br>
↘ <a href="URL">List 1</a><br>
↘ <a href="URL">List 2</a><br>
↘ <a href="URL">List 3</a><br>
↘ <a href="URL">List 4</a><br>
↘ <a href="URL">List 5</a><br>
<br><br>
<b> Material ;</b>
<br><br>
↘ <a href="URL">List 1</a><br>
↘ <a href="URL">List 2</a><br>
↘ <a href="URL">List 3</a><br>
↘ <a href="URL">List 4</a><br>
↘ <a href="URL">List 5</a><br>
<br><br>
<blockquote class="tr_bq">Coming Soon..</blockquote>
</div>
<!-------------------------- END ----------->