BS ; 08 // Bunny Bunny
<!---------------------------------------------------------------------------
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; 02.04.13
---------------------------------------------------------------------------!>
<HTML><head>
<link href='https://fonts.googleapis.com/css?family=Imprima' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Delius+Swash+Caps' rel='stylesheet' type='text/css'>
<base target='_blank'/><link href='https://media.tumblr.com/tumblr_lnvuymWlY41qepbs7.gif' rel='shortcut icon' type='image/x-icon'/><title>; Bunny Bunny</title>
<style type="text/css">
#navbar-iframe {
display: none;
}
body {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8a3zXqUBrkfPaCZWknbgv80WCOnuPG8wWcnqBSpwN3h-yDznMZ4zhkqJu11QJbGeeI4PQzPkQQmMCZkO52WY7cNHyN238X3zkMiHlfFjxtHGsA69-_Ks29ch0MlxIfDLkVoaAYIKH8JA/s1600/rabb.pngng) repeat-x bottom fixed;
font-family:Imprima;
font-size:13px;
color:#99938a;
}
::-moz-selection {
background:#fff;
color:#fff;
text-shadow: 0.2em 0.1em 0.1em #99938a;
}
::selection {
background:#fff;
color:#fff;
text-shadow: 0.2em 0.1em 0.1em #99938a;
}
::-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:url(https://i1245.photobucket.com/albums/gg581/elaine960211/Bottle-love/b101.jpg) center ; border:1px solid #ededed;box-shadow:inset 0 0 10px #fff;}
::webkit-scrollbar-thumb:vertical {background:#fff;border: 0px solid #ffffff;border-right:none;}
::webkit-scrollbar-thumb:horizontal {background:#fff;border: 0px solid #ffffff;border-bottom:none;}
a:link,a:visited {
text-decoration:none;
padding:2px;
color:#99938a;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
}
a:hover {
color:#fff;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/Bottle-love/b101.jpg) ;
background-position:30% 45%;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
}
u {
text-decoration:underline;
border-bottom:1px ridge #99938a;
-webkit-transition: .6s;
-moz-transition: .6s;
}
u:hover {
text-decoration:none;
border-bottom:4px solid #fff;
-webkit-transition: .6s;
-moz-transition: .6s;
filter: blur(1px);
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
}
b {
text-decoration:bold;
color:#fff;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/Colorful-pic/cf7_zps5a372cc0.jpg) ;
background-position:20% 60%;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
}
b:hover {
color:#fff;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/Colorful-pic/cf7_zps5a372cc0.jpg) ;
background-position:30% 70%;
text-shadow: 1px 1px 2px #c9c9c9;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
}
i {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
}
i:hover {
color:#fff;
padding-left: 20px;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
}
.post-title{
height:18px;
color:#b5b5b5;
font-family: 'Snippet', cursive;
background-image:-webkit-linear-gradient(left, #fff , #eee , #fff);
padding:3px;
text-align:center;
}
blockquote {
font-family: 'Snippet', cursive;
font-size:13px;
text-align:center;
padding:5px;
margin-left:42px;
border:1px solid #dbdbdb;
border-bottom: 1px solid #ab5b5b5;
box-shadow: inset 130px 0px 30px #ededed , inset -430px 0px 30px #f7f7f7 , 15px 15px 10px #eee ;
-webkit-transition-duration:.9s;
}
blockquote:hover{
box-shadow:inset -430px 0px 30px #ededed , inset 120px 0px 30px #f5f5f5 , -15px 15px 10px #eee;
-webkit-transition-duration:.9s;
}
/* Comment
----------------------------------------------- */
#comments {
margin:5px 13px 0;
border-width:0 1px 1px;
padding:20px 0 15px 0;
}
#comments-block {
margin:0 15px 0 9px;
}
.comment-data {
background: url(https://i1245.photobucket.com/albums/gg581/elaine960211/lovee_zps113d8641.png)no-repeat;
text-align:center;
margin:.5em 0;
padding:0 0 0 20px;
color:#eee;
}
.comment-poster {
}
.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
text-align:center;
margin:0 0 .5em;
padding:5px;
margin:0px 0px 2px;
border:3px double #ebeae4;
-webkit-background-clip: text;
color: #fff;
-webkit-text-fill-color: transparent;
background-image:-webkit-linear-gradient(top , #bababa , #c2c2c2 , #d2d2d2 );
}
.comment-timestamp {
margin:0 0 .5em;
padding:0 0 .40em 10px;
color:#fff;
}
.comment-timestamp a:link {
color:#c7a189;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.paging-control-container {
float: right;
margin: 0px 6px 0px 0px;
font-size: 80%;
}
.unneeded-paging-control {
visibility: hidden;
}
/* Footer
----------------------------------------------- */
.footer{
opacity:0.5;
margin:0px 0px 2px;
padding:3px;
padding-left:15px;
text-align:left;
border-radius:15px;
background-image:-webkit-linear-gradient(left, #ebeae4 , e0dfd5 , #fff);
-webkit-transition-duration: .8s;
}
.footer:hover{
opacity:1;
padding-left:60px;
-webkit-transition-duration: .8s;
}
a.footer{
color:#c7a189;
}
/* Photo
----------------------------------------------- */
.pic {
height:200px;
width: 245px;
top:35px;
left:30px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 2px solid #ddd;
overflow: hidden;
position: relative;
}
.inimg {
position: absolute;
top:0; left:0;
}
.inimg img {
float: left;
}
.num {
position: absolute;
top:183px;
left:59px;
width: 190px;
height:5px;
z-index: 100;
text-align: center;
line-height: 80px;
display: none;
}
.num a {
padding: 3px 8px;
text-decoration: none;
border: 1px solid #eee;
color:#cfcccc;
}
.num a.active {
color: #fff;
}
.num a:hover {
color: #fff;
}
/* First
----------------------------------------------- */
.bar{
position: absolute;
font-family: 'Delius Swash Caps', cursive;
font-size:14px;
top:115px;
right:130px;
width:120px;
padding:3px;
border-radius:333px;
padding-left:10px;
background-image:-webkit-linear-gradient(left, #eee , #fff );
opacity:0;
text-align:left;
-webkit-transition:0.6s;
}
.bar:hover {
right:80px;
opacity: 0.8;
-webkit-transition:0.6s;
}
/* Second
----------------------------------------------- */
.bar2{
position: absolute;
font-family: 'Delius Swash Caps', cursive;
font-size:14px;
top:160px;
right:140px;
width:100px;
padding:3px;
padding-right:10px;
border-radius:333px;
text-align:right;
background-image:-webkit-linear-gradient(left, #fff , #eee );
opacity:0;
-webkit-transition:0.6s;
}
.bar2:hover {
right:190px;
opacity: 0.8;
-webkit-transition:0.6s;
}
/* Third
----------------------------------------------- */
.bar3{
position: absolute;
font-family: 'Delius Swash Caps', cursive;
font-size:14px;
top:205px;
right:130px;
width:120px;
padding:3px;
padding-left:10px;
border-radius:333px;
background-image:-webkit-linear-gradient(left, #eee , #fff );
opacity:0;
text-align:left;
-webkit-transition:0.6s;
}
.bar3:hover {
right:80px;
opacity: 0.8;
-webkit-transition:0.6s;
}
/* Forth
----------------------------------------------- */
.bar4{
position: absolute;
font-family: 'Delius Swash Caps', cursive;
font-size:14px;
top:250px;
right:140px;
width:100px;
padding:3px;
padding-right:10px;
border-radius:333px;
text-align:right;
background-image:-webkit-linear-gradient(left, #fff , #eee );
opacity:0;
-webkit-transition:0.6s;
}
.bar4:hover {
right:190px;
opacity: 0.8;
-webkit-transition:0.6s;
}
/* ImgHover
----------------------------------------------- */
.imgh{
width: 220px;
height: 180px;
-webkit-transition:0.6s;
}
#info{
margin-top:-182px;
margin-left:2px;
text-align:center;
background: #fff;
width: 214px;
height:174px;
opacity: 0;
padding:3px;
border-radius: 12px;
-moz-transform: scale(0) rotate(90deg);
-webkit-transform: scale(0) rotate(90deg);
-webkit-transition:All 0.6s ease;
-moz-transition:All 0.6s ease;
-o-transition:All 0.6s ease;
}
.imgh:hover #info{
opacity:0.8;
-moz-transform: scale(1) rotate(720deg);
-webkit-transform: scale(1) rotate(720deg);
-moz-transition: 0.6s;
-webkit-transition: 0.6s;}
a.li {
border:2px ridge #d4cdc3;
border-radius:7px;
padding: 3px;
display:inline-block;
width:100px;
margin: 2px;
-webkit-transition: .7s;
}
a.li:hover {
border: 2px outset #c2c2c2;
border-radius:0px;
-webkit-transition: .7s;
}
@font-face{
font-family:minny;
src:url(https://static.tumblr.com/ib5boas/kTgmgu0jx/minny.ttf);
}
</style>
<script language="JavaScript">
document.ondragstart = function () { return false; };
</script>
<div style="background:#fff;color:#fff; position:fixed; top:0px;left:60px;width:10px;height:540px; box-shadow:1px 1px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;"></div>
<div style="background:#fff;color:#fff; position:fixed; top:0px;left:240px;width:10px;height:540px; box-shadow:1px 1px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;"></div>
<!-------------------Photo----------------------->
<div class="pic"><div class="inimg">
<img src="https://i1245.photobucket.com/albums/gg581/elaine960211/tz15_zpsad69812f.jpg" width="245" height="200"/>
<img src="https://i1245.photobucket.com/albums/gg581/elaine960211/tz2_zps7ec983c4.jpg" width="245" height="200"/>
<img src="https://i1245.photobucket.com/albums/gg581/elaine960211/tz5_zpsefc5490a.jpg" width="245" height="200"/>
<img src="https://i1245.photobucket.com/albums/gg581/elaine960211/tz8_zps9a30860a.jpg" width="245" height="200"/>
<img src="https://i1245.photobucket.com/albums/gg581/elaine960211/tz11_zps847722fd.jpg" width="245" height="200"/>
<img src="https://i1245.photobucket.com/albums/gg581/elaine960211/tz16_zps43c663db.jpg" width="245" height="200"/>
<img src="https://i1245.photobucket.com/albums/gg581/elaine960211/tz17_zps05b91ff6.jpg" width="245" height="200"/></div></div>
<div class="num">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>
<a href="#" rel="6">6</a>
<a href="#" rel="7">7</a></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".num").show();
$(".num a:first").addClass("active");
var imageWidth = $(".pic").width();
var imageSum = $(".inimg img").size();
var imageReelWidth = imageWidth * imageSum;
$(".inimg").css({'width' : imageReelWidth});
rotate = function(){
var triggerID = $active.attr("rel") - 1;
var inimgPosition = triggerID * imageWidth;
$(".num a").removeClass('active');
$active.addClass('active');
$(".inimg").animate({
left: -inimgPosition
}, 500 );
};
rotateSwitch = function(){
play = setInterval(function(){
$active = $('.num a.active').next();
if ( $active.length === 0) {
$active = $('.num a:first');
}
rotate();
}, 4000);
};
rotateSwitch();
$(".inimg a").hover(function() {
clearInterval(play);
}, function() {
rotateSwitch();
});
$(".num a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotateSwitch();
return false;
});
});
</script>
<!-------------------Info----------------------->
<div style="position:absolute;opacity:1;top:260px;left:41px;">
<div class="imgh"><img src="https://i1245.photobucket.com/albums/gg581/elaine960211/tz14_zps2ae0da9a.jpg"width="220" height="180" style="border: 2px solid #ddd;border-radius: 15px;"/>
<div id="info" style="text-align:center;font-family:minny; font-size:16px;">
Your Text HERE
</div></div></div>
<!-------------------Cbox----------------------->
<div style="position:absolute;top:452px;left:29.5px;">
<center>
<div id="cboxdiv" style="background: url(https://i1245.photobucket.com/albums/gg581/elaine960211/ratc_zps9b9e3023.gif) no-repeat ; width:251px; height:135px;padding-top:55px;padding-left:8px;text-align: center;">
<div id="cboxdiv" style="text-align: center; line-height: 0"></div>
** Cbox Code Here **
</div></div></div></center></div>
<!-------------------Navigation----------------------->
<div style="position:absolute;top:100px; right:210px;"><img src="https://i1245.photobucket.com/albums/gg581/elaine960211/rabb4_zpsccdaaa94.gif" /></div></div>
<div class="bar" onClick="document.getElementById('main').innerHTML=document.getElementById('post').innerHTML" title="">MemorY</div>
<div style="position:absolute;top:145px; right:140px;"><img src="https://i1245.photobucket.com/albums/gg581/elaine960211/rabb2_zps3ce959a1.gif" /></div>
<div class="bar2" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title="">About M3</div>
<div style="position:absolute;top:190px; right:210px;">
<img src="https://i1245.photobucket.com/albums/gg581/elaine960211/rabb1_zps37d8d52d.gif" /></div>
<div class="bar3" onClick="document.getElementById('main').innerHTML=document.getElementById('stuff').innerHTML" title="">StuffY</div>
<div style="position:absolute;top:235px; right:140px;">
<img src="https://i1245.photobucket.com/albums/gg581/elaine960211/rabb3_zps541ae886.gif" /></div>
<div class="bar4" onClick="document.getElementById('main').innerHTML=document.getElementById('link').innerHTML" title="">Dear3st</div>
<div style="position:fixed;top:295px;right:90px;">
<select style="border: 1px solid #c4beb5; box-shadow:0 0 8px #ddd; padding: 3px; background:#FFF;font-family:Snippet; font-size:13px; color: #b3ada6; width: 95px; text-align: center; "
onChange="location.href=this.options[this.selectedIndex].value;" value="GO" target="_blank">
<option selected="selected">Montly</option><BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
</select>
<select style="border: 1px solid #c4beb5; box-shadow:0 0 8px #ddd; padding: 3px; background:#FFF;font-family:Snippet; font-size:13px; color: #b3ada6; width: 95px; text-align: center; "
onChange="location.href=this.options[this.selectedIndex].value;" value="GO" target="_blank">
<option selected="selected">Daily</option><BloggerPreviousItems>
<option value="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></option>
</BloggerPreviousItems>
</select></div>
<a style="position:absolute;top:48px;left:375px;" href="https://www.blogger.com/follow-blog.g?blogID=Your Blog ID" title="Follow" ><img src="https://i1245.photobucket.com/albums/gg581/elaine960211/rab-pink_zps35f5e4c9.gif" /></a>
<a style="position:absolute;top:48px;left:420px;" href="https://www.blogger.com/home" title="Home"><img src="https://i1245.photobucket.com/albums/gg581/elaine960211/rab-blue_zpsc0a040af.gif" /></a>
<!-------------------Post----------------------->
<center><div style="padding:10px; position:absolute; left:350px; top:90px; width:640px; height:450px;background:#fff;border-radius: 20px;border:2px solid #ddd;">
<div style="padding:10px; float:left; width:625px; overflow-x: hidden; overflow-y: scroll;height:430px;background:#fff;">
<div id="main"><blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div style="text-align: center;">
<div class="post-body">
<p>
<$BlogItemBody$>
</p>
</div>
<div style="text-align:left;"><div class="footer">
<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> bunny</a></BlogItemCommentsEnabled>
</div></div>
<ItemPage>
<div id="comments">
<BlogItemCommentsEnabled><a name="comments"></a>
<dl id="comments-block">
<$CommentPager$>
<BlogItemComments>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
<$I18NCommentAuthorSaid$>
</dt>
<dd class="comment-body">
<p><$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments><br/><br/><br/>
<$CommentPager$>
</dl>
<p class="comment-timestamp">
<$BlogItemCreate$>
</p>
<br/><br/>
</div>
</ItemPage>
</Blogger>
<center><NewerPosts><a href=<$NewerPosts$>><img src='https://i1245.photobucket.com/albums/gg581/elaine960211/middotnew.png'/></a></NewerPosts> <img src='https://i1245.photobucket.com/albums/gg581/elaine960211/e.png'/> <OlderPosts><a href=<$OlderPosts$>><img src='https://i1245.photobucket.com/albums/gg581/elaine960211/middotold.png'/></a></OlderPosts></center>
</div></div></div>
</Blogger>
<!-------------------PAGE1----------------------->
<div id="post" style="display: none;">
<Blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div style="text-align: center;">
<div class="post-body">
<p>
<$BlogItemBody$>
</p>
</div><div class="footer">
<div style="text-align:left;">
<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> bunny</a></BlogItemCommentsEnabled>
</div></div>
<ItemPage>
<div id="comments">
<BlogItemCommentsEnabled><a name="comments"></a>
<dl id="comments-block">
<$CommentPager$>
<BlogItemComments>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
<$I18NCommentAuthorSaid$>
</dt>
<dd class="comment-body">
<p><$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
<$CommentPager$>
</dl>
<p class="comment-timestamp">
<$BlogItemCreate$>
</p>
<br/><br/>
<p style="padding-left:20px;">
<a href="<$BlogURL$>"><< home ?</a>
</p>
</div>
</ItemPage>
<!-- End #comments -->
</Blogger>
<center><NewerPosts><a href=<$NewerPosts$>><img src='https://i1245.photobucket.com/albums/gg581/elaine960211/middotnew.png'/></a></NewerPosts> <img src='https://i1245.photobucket.com/albums/gg581/elaine960211/e.png'/> <OlderPosts><a href=<$OlderPosts$>><img src='https://i1245.photobucket.com/albums/gg581/elaine960211/middotold.png'/></a></OlderPosts></center>
</div></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>
<div class="post-title">Credits</div>
<br>
* Template & Design by ; <a href="https://elaine0211.blogspot.com/">BabeX e.ling</a><br>
* Re-design by ; <a href="URL">Your Name</a><br>
* Helped by ; <a href="https://wanaseoby.blogspot.com//">Wana</a><br>
* Materials ; <a href="https://www.google.com/">Google</a> || <a href="https://elaine0211.blogspot.com/">BabeX e.ling</a> || <a href="https://pixlr.com/editor/?loc=zh-cn">Pixlr</a><br>
* Thank to ; <a href="https://www.google.com/">Google</a> || <a href="https://photobucket.com/">Photobucket</a><br>
<br><br>
<center>- Best Viewed In <a href="https://www.google.com/">Google Chrome</a> -</center>
<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; 02.04.13
---------------------------------------------------------------------------!>
<HTML><head>
<link href='https://fonts.googleapis.com/css?family=Imprima' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Delius+Swash+Caps' rel='stylesheet' type='text/css'>
<base target='_blank'/><link href='https://media.tumblr.com/tumblr_lnvuymWlY41qepbs7.gif' rel='shortcut icon' type='image/x-icon'/><title>; Bunny Bunny</title>
<style type="text/css">
#navbar-iframe {
display: none;
}
body {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8a3zXqUBrkfPaCZWknbgv80WCOnuPG8wWcnqBSpwN3h-yDznMZ4zhkqJu11QJbGeeI4PQzPkQQmMCZkO52WY7cNHyN238X3zkMiHlfFjxtHGsA69-_Ks29ch0MlxIfDLkVoaAYIKH8JA/s1600/rabb.pngng) repeat-x bottom fixed;
font-family:Imprima;
font-size:13px;
color:#99938a;
}
::-moz-selection {
background:#fff;
color:#fff;
text-shadow: 0.2em 0.1em 0.1em #99938a;
}
::selection {
background:#fff;
color:#fff;
text-shadow: 0.2em 0.1em 0.1em #99938a;
}
::-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:url(https://i1245.photobucket.com/albums/gg581/elaine960211/Bottle-love/b101.jpg) center ; border:1px solid #ededed;box-shadow:inset 0 0 10px #fff;}
::webkit-scrollbar-thumb:vertical {background:#fff;border: 0px solid #ffffff;border-right:none;}
::webkit-scrollbar-thumb:horizontal {background:#fff;border: 0px solid #ffffff;border-bottom:none;}
a:link,a:visited {
text-decoration:none;
padding:2px;
color:#99938a;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
}
a:hover {
color:#fff;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/Bottle-love/b101.jpg) ;
background-position:30% 45%;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
}
u {
text-decoration:underline;
border-bottom:1px ridge #99938a;
-webkit-transition: .6s;
-moz-transition: .6s;
}
u:hover {
text-decoration:none;
border-bottom:4px solid #fff;
-webkit-transition: .6s;
-moz-transition: .6s;
filter: blur(1px);
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
}
b {
text-decoration:bold;
color:#fff;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/Colorful-pic/cf7_zps5a372cc0.jpg) ;
background-position:20% 60%;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
}
b:hover {
color:#fff;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/Colorful-pic/cf7_zps5a372cc0.jpg) ;
background-position:30% 70%;
text-shadow: 1px 1px 2px #c9c9c9;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
}
i {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
}
i:hover {
color:#fff;
padding-left: 20px;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
}
.post-title{
height:18px;
color:#b5b5b5;
font-family: 'Snippet', cursive;
background-image:-webkit-linear-gradient(left, #fff , #eee , #fff);
padding:3px;
text-align:center;
}
blockquote {
font-family: 'Snippet', cursive;
font-size:13px;
text-align:center;
padding:5px;
margin-left:42px;
border:1px solid #dbdbdb;
border-bottom: 1px solid #ab5b5b5;
box-shadow: inset 130px 0px 30px #ededed , inset -430px 0px 30px #f7f7f7 , 15px 15px 10px #eee ;
-webkit-transition-duration:.9s;
}
blockquote:hover{
box-shadow:inset -430px 0px 30px #ededed , inset 120px 0px 30px #f5f5f5 , -15px 15px 10px #eee;
-webkit-transition-duration:.9s;
}
/* Comment
----------------------------------------------- */
#comments {
margin:5px 13px 0;
border-width:0 1px 1px;
padding:20px 0 15px 0;
}
#comments-block {
margin:0 15px 0 9px;
}
.comment-data {
background: url(https://i1245.photobucket.com/albums/gg581/elaine960211/lovee_zps113d8641.png)no-repeat;
text-align:center;
margin:.5em 0;
padding:0 0 0 20px;
color:#eee;
}
.comment-poster {
}
.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
text-align:center;
margin:0 0 .5em;
padding:5px;
margin:0px 0px 2px;
border:3px double #ebeae4;
-webkit-background-clip: text;
color: #fff;
-webkit-text-fill-color: transparent;
background-image:-webkit-linear-gradient(top , #bababa , #c2c2c2 , #d2d2d2 );
}
.comment-timestamp {
margin:0 0 .5em;
padding:0 0 .40em 10px;
color:#fff;
}
.comment-timestamp a:link {
color:#c7a189;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.paging-control-container {
float: right;
margin: 0px 6px 0px 0px;
font-size: 80%;
}
.unneeded-paging-control {
visibility: hidden;
}
/* Footer
----------------------------------------------- */
.footer{
opacity:0.5;
margin:0px 0px 2px;
padding:3px;
padding-left:15px;
text-align:left;
border-radius:15px;
background-image:-webkit-linear-gradient(left, #ebeae4 , e0dfd5 , #fff);
-webkit-transition-duration: .8s;
}
.footer:hover{
opacity:1;
padding-left:60px;
-webkit-transition-duration: .8s;
}
a.footer{
color:#c7a189;
}
/* Photo
----------------------------------------------- */
.pic {
height:200px;
width: 245px;
top:35px;
left:30px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 2px solid #ddd;
overflow: hidden;
position: relative;
}
.inimg {
position: absolute;
top:0; left:0;
}
.inimg img {
float: left;
}
.num {
position: absolute;
top:183px;
left:59px;
width: 190px;
height:5px;
z-index: 100;
text-align: center;
line-height: 80px;
display: none;
}
.num a {
padding: 3px 8px;
text-decoration: none;
border: 1px solid #eee;
color:#cfcccc;
}
.num a.active {
color: #fff;
}
.num a:hover {
color: #fff;
}
/* First
----------------------------------------------- */
.bar{
position: absolute;
font-family: 'Delius Swash Caps', cursive;
font-size:14px;
top:115px;
right:130px;
width:120px;
padding:3px;
border-radius:333px;
padding-left:10px;
background-image:-webkit-linear-gradient(left, #eee , #fff );
opacity:0;
text-align:left;
-webkit-transition:0.6s;
}
.bar:hover {
right:80px;
opacity: 0.8;
-webkit-transition:0.6s;
}
/* Second
----------------------------------------------- */
.bar2{
position: absolute;
font-family: 'Delius Swash Caps', cursive;
font-size:14px;
top:160px;
right:140px;
width:100px;
padding:3px;
padding-right:10px;
border-radius:333px;
text-align:right;
background-image:-webkit-linear-gradient(left, #fff , #eee );
opacity:0;
-webkit-transition:0.6s;
}
.bar2:hover {
right:190px;
opacity: 0.8;
-webkit-transition:0.6s;
}
/* Third
----------------------------------------------- */
.bar3{
position: absolute;
font-family: 'Delius Swash Caps', cursive;
font-size:14px;
top:205px;
right:130px;
width:120px;
padding:3px;
padding-left:10px;
border-radius:333px;
background-image:-webkit-linear-gradient(left, #eee , #fff );
opacity:0;
text-align:left;
-webkit-transition:0.6s;
}
.bar3:hover {
right:80px;
opacity: 0.8;
-webkit-transition:0.6s;
}
/* Forth
----------------------------------------------- */
.bar4{
position: absolute;
font-family: 'Delius Swash Caps', cursive;
font-size:14px;
top:250px;
right:140px;
width:100px;
padding:3px;
padding-right:10px;
border-radius:333px;
text-align:right;
background-image:-webkit-linear-gradient(left, #fff , #eee );
opacity:0;
-webkit-transition:0.6s;
}
.bar4:hover {
right:190px;
opacity: 0.8;
-webkit-transition:0.6s;
}
/* ImgHover
----------------------------------------------- */
.imgh{
width: 220px;
height: 180px;
-webkit-transition:0.6s;
}
#info{
margin-top:-182px;
margin-left:2px;
text-align:center;
background: #fff;
width: 214px;
height:174px;
opacity: 0;
padding:3px;
border-radius: 12px;
-moz-transform: scale(0) rotate(90deg);
-webkit-transform: scale(0) rotate(90deg);
-webkit-transition:All 0.6s ease;
-moz-transition:All 0.6s ease;
-o-transition:All 0.6s ease;
}
.imgh:hover #info{
opacity:0.8;
-moz-transform: scale(1) rotate(720deg);
-webkit-transform: scale(1) rotate(720deg);
-moz-transition: 0.6s;
-webkit-transition: 0.6s;}
a.li {
border:2px ridge #d4cdc3;
border-radius:7px;
padding: 3px;
display:inline-block;
width:100px;
margin: 2px;
-webkit-transition: .7s;
}
a.li:hover {
border: 2px outset #c2c2c2;
border-radius:0px;
-webkit-transition: .7s;
}
@font-face{
font-family:minny;
src:url(https://static.tumblr.com/ib5boas/kTgmgu0jx/minny.ttf);
}
</style>
<script language="JavaScript">
document.ondragstart = function () { return false; };
</script>
<div style="background:#fff;color:#fff; position:fixed; top:0px;left:60px;width:10px;height:540px; box-shadow:1px 1px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;"></div>
<div style="background:#fff;color:#fff; position:fixed; top:0px;left:240px;width:10px;height:540px; box-shadow:1px 1px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;"></div>
<!-------------------Photo----------------------->
<div class="pic"><div class="inimg">
<img src="https://i1245.photobucket.com/albums/gg581/elaine960211/tz15_zpsad69812f.jpg" width="245" height="200"/>
<img src="https://i1245.photobucket.com/albums/gg581/elaine960211/tz2_zps7ec983c4.jpg" width="245" height="200"/>
<img src="https://i1245.photobucket.com/albums/gg581/elaine960211/tz5_zpsefc5490a.jpg" width="245" height="200"/>
<img src="https://i1245.photobucket.com/albums/gg581/elaine960211/tz8_zps9a30860a.jpg" width="245" height="200"/>
<img src="https://i1245.photobucket.com/albums/gg581/elaine960211/tz11_zps847722fd.jpg" width="245" height="200"/>
<img src="https://i1245.photobucket.com/albums/gg581/elaine960211/tz16_zps43c663db.jpg" width="245" height="200"/>
<img src="https://i1245.photobucket.com/albums/gg581/elaine960211/tz17_zps05b91ff6.jpg" width="245" height="200"/></div></div>
<div class="num">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>
<a href="#" rel="6">6</a>
<a href="#" rel="7">7</a></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".num").show();
$(".num a:first").addClass("active");
var imageWidth = $(".pic").width();
var imageSum = $(".inimg img").size();
var imageReelWidth = imageWidth * imageSum;
$(".inimg").css({'width' : imageReelWidth});
rotate = function(){
var triggerID = $active.attr("rel") - 1;
var inimgPosition = triggerID * imageWidth;
$(".num a").removeClass('active');
$active.addClass('active');
$(".inimg").animate({
left: -inimgPosition
}, 500 );
};
rotateSwitch = function(){
play = setInterval(function(){
$active = $('.num a.active').next();
if ( $active.length === 0) {
$active = $('.num a:first');
}
rotate();
}, 4000);
};
rotateSwitch();
$(".inimg a").hover(function() {
clearInterval(play);
}, function() {
rotateSwitch();
});
$(".num a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotateSwitch();
return false;
});
});
</script>
<!-------------------Info----------------------->
<div style="position:absolute;opacity:1;top:260px;left:41px;">
<div class="imgh"><img src="https://i1245.photobucket.com/albums/gg581/elaine960211/tz14_zps2ae0da9a.jpg"width="220" height="180" style="border: 2px solid #ddd;border-radius: 15px;"/>
<div id="info" style="text-align:center;font-family:minny; font-size:16px;">
Your Text HERE
</div></div></div>
<!-------------------Cbox----------------------->
<div style="position:absolute;top:452px;left:29.5px;">
<center>
<div id="cboxdiv" style="background: url(https://i1245.photobucket.com/albums/gg581/elaine960211/ratc_zps9b9e3023.gif) no-repeat ; width:251px; height:135px;padding-top:55px;padding-left:8px;text-align: center;">
<div id="cboxdiv" style="text-align: center; line-height: 0"></div>
** Cbox Code Here **
</div></div></div></center></div>
<!-------------------Navigation----------------------->
<div style="position:absolute;top:100px; right:210px;"><img src="https://i1245.photobucket.com/albums/gg581/elaine960211/rabb4_zpsccdaaa94.gif" /></div></div>
<div class="bar" onClick="document.getElementById('main').innerHTML=document.getElementById('post').innerHTML" title="">MemorY</div>
<div style="position:absolute;top:145px; right:140px;"><img src="https://i1245.photobucket.com/albums/gg581/elaine960211/rabb2_zps3ce959a1.gif" /></div>
<div class="bar2" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title="">About M3</div>
<div style="position:absolute;top:190px; right:210px;">
<img src="https://i1245.photobucket.com/albums/gg581/elaine960211/rabb1_zps37d8d52d.gif" /></div>
<div class="bar3" onClick="document.getElementById('main').innerHTML=document.getElementById('stuff').innerHTML" title="">StuffY</div>
<div style="position:absolute;top:235px; right:140px;">
<img src="https://i1245.photobucket.com/albums/gg581/elaine960211/rabb3_zps541ae886.gif" /></div>
<div class="bar4" onClick="document.getElementById('main').innerHTML=document.getElementById('link').innerHTML" title="">Dear3st</div>
<div style="position:fixed;top:295px;right:90px;">
<select style="border: 1px solid #c4beb5; box-shadow:0 0 8px #ddd; padding: 3px; background:#FFF;font-family:Snippet; font-size:13px; color: #b3ada6; width: 95px; text-align: center; "
onChange="location.href=this.options[this.selectedIndex].value;" value="GO" target="_blank">
<option selected="selected">Montly</option><BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
</select>
<select style="border: 1px solid #c4beb5; box-shadow:0 0 8px #ddd; padding: 3px; background:#FFF;font-family:Snippet; font-size:13px; color: #b3ada6; width: 95px; text-align: center; "
onChange="location.href=this.options[this.selectedIndex].value;" value="GO" target="_blank">
<option selected="selected">Daily</option><BloggerPreviousItems>
<option value="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></option>
</BloggerPreviousItems>
</select></div>
<a style="position:absolute;top:48px;left:375px;" href="https://www.blogger.com/follow-blog.g?blogID=Your Blog ID" title="Follow" ><img src="https://i1245.photobucket.com/albums/gg581/elaine960211/rab-pink_zps35f5e4c9.gif" /></a>
<a style="position:absolute;top:48px;left:420px;" href="https://www.blogger.com/home" title="Home"><img src="https://i1245.photobucket.com/albums/gg581/elaine960211/rab-blue_zpsc0a040af.gif" /></a>
<!-------------------Post----------------------->
<center><div style="padding:10px; position:absolute; left:350px; top:90px; width:640px; height:450px;background:#fff;border-radius: 20px;border:2px solid #ddd;">
<div style="padding:10px; float:left; width:625px; overflow-x: hidden; overflow-y: scroll;height:430px;background:#fff;">
<div id="main"><blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div style="text-align: center;">
<div class="post-body">
<p>
<$BlogItemBody$>
</p>
</div>
<div style="text-align:left;"><div class="footer">
<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> bunny</a></BlogItemCommentsEnabled>
</div></div>
<ItemPage>
<div id="comments">
<BlogItemCommentsEnabled><a name="comments"></a>
<dl id="comments-block">
<$CommentPager$>
<BlogItemComments>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
<$I18NCommentAuthorSaid$>
</dt>
<dd class="comment-body">
<p><$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments><br/><br/><br/>
<$CommentPager$>
</dl>
<p class="comment-timestamp">
<$BlogItemCreate$>
</p>
<br/><br/>
</div>
</ItemPage>
</Blogger>
<center><NewerPosts><a href=<$NewerPosts$>><img src='https://i1245.photobucket.com/albums/gg581/elaine960211/middotnew.png'/></a></NewerPosts> <img src='https://i1245.photobucket.com/albums/gg581/elaine960211/e.png'/> <OlderPosts><a href=<$OlderPosts$>><img src='https://i1245.photobucket.com/albums/gg581/elaine960211/middotold.png'/></a></OlderPosts></center>
</div></div></div>
</Blogger>
<!-------------------PAGE1----------------------->
<div id="post" style="display: none;">
<Blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div style="text-align: center;">
<div class="post-body">
<p>
<$BlogItemBody$>
</p>
</div><div class="footer">
<div style="text-align:left;">
<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> bunny</a></BlogItemCommentsEnabled>
</div></div>
<ItemPage>
<div id="comments">
<BlogItemCommentsEnabled><a name="comments"></a>
<dl id="comments-block">
<$CommentPager$>
<BlogItemComments>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
<$I18NCommentAuthorSaid$>
</dt>
<dd class="comment-body">
<p><$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
<$CommentPager$>
</dl>
<p class="comment-timestamp">
<$BlogItemCreate$>
</p>
<br/><br/>
<p style="padding-left:20px;">
<a href="<$BlogURL$>"><< home ?</a>
</p>
</div>
</ItemPage>
<!-- End #comments -->
</Blogger>
<center><NewerPosts><a href=<$NewerPosts$>><img src='https://i1245.photobucket.com/albums/gg581/elaine960211/middotnew.png'/></a></NewerPosts> <img src='https://i1245.photobucket.com/albums/gg581/elaine960211/e.png'/> <OlderPosts><a href=<$OlderPosts$>><img src='https://i1245.photobucket.com/albums/gg581/elaine960211/middotold.png'/></a></OlderPosts></center>
</div></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>
<div class="post-title">Credits</div>
<br>
* Template & Design by ; <a href="https://elaine0211.blogspot.com/">BabeX e.ling</a><br>
* Re-design by ; <a href="URL">Your Name</a><br>
* Helped by ; <a href="https://wanaseoby.blogspot.com//">Wana</a><br>
* Materials ; <a href="https://www.google.com/">Google</a> || <a href="https://elaine0211.blogspot.com/">BabeX e.ling</a> || <a href="https://pixlr.com/editor/?loc=zh-cn">Pixlr</a><br>
* Thank to ; <a href="https://www.google.com/">Google</a> || <a href="https://photobucket.com/">Photobucket</a><br>
<br><br>
<center>- Best Viewed In <a href="https://www.google.com/">Google Chrome</a> -</center>
<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 ----------->