BS ; 04 // f(x) - Red Light
<!---------------------------------------------------------------------------
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; 27.07.14 -- 01.08.2014
---------------------------------------------------------------------------!>
<HTML><head>
<link href='https://fonts.googleapis.com/css?family=Imprima' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Megrim' 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>; Red Light</title>
<style type="text/css">
#navbar-iframe {
display: none;
}
body {
background: #fff;
cursor:url(https://i1245.photobucket.com/albums/gg581/elaine960211/fx-red_zpscd18bae9.png), progress;
font-family:Imprima;
font-size:13px;
color:#ff3030;}
::-moz-selection {
background:#fff;
color:#fff;
text-shadow: 0.1em 0.1em 0.2em #ff3030;}
::selection {
background:#fff;
color:#fff;
text-shadow: 0.1em 0.1em 0.2em #ff3030;}
::-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/red2_zps96370b5d.jpg)center;border:1px solid #ff6363;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 {
color:#ff0000;
text-decoration:none;
padding:2px;}
a:hover {
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/red7_zps38fcffab.jpg) ;
background-position:58% 63%;
cursor:url(https://i1245.photobucket.com/albums/gg581/elaine960211/fx-red2_zps8637108f.png), progress;
}
u {
text-decoration:underline;
border-bottom:1px solid #ff0909;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;}
u:hover {
text-decoration:none;
border-bottom:1px dashed #fff;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;}
b {
text-decoration:bold;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/red7_zps38fcffab.jpg) ;
background-position:65% 35%;
-webkit-transition: .8s;
-moz-transition: .8s;}
b:hover {
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/red7_zps38fcffab.jpg) ;
background-position:58% 63%;
-webkit-transition: .8s;
-moz-transition: .8s;}
.post-title{
font-family: 'Megrim';
padding:0 0 3px 5px;
text-align:left;
background:url(https://i1245.photobucket.com/albums/gg581/elaine960211/line_zps2e120430.png) repeat-x;
background-position:bottom left;
}
.page-title{
font-family: 'Megrim';
font-size:20px;
padding:0 0 5px 5px;
text-align:left;
background:url(https://i1245.photobucket.com/albums/gg581/elaine960211/line_zps2e120430.png) repeat-x;
background-position:bottom left;}
/* Comment
----------------------------------------------- */
#comments {
margin:5px 13px 0;
border-width:0 1px 1px;
padding:20px 0 5px 0;}
#comments-block { margin:0 10px 0 9px;}
span.comment-icon{ display:none;}
.comment-icon blogger-comment-icon{ display:none;}
.comment-data {
width:420px;
margin: 1em .4em 0 0.4em;
text-align:left;
padding:4px;
border:1px solid #ff9090;
border-radius:5px;}
.comment-body p{
width:420px;
text-align:left;
margin:-1px 5px 2px -2.7em;
padding:4px;
border:1px solid #ff9090;
border-radius:5px;}
.comment-timestamp { margin:0 0 .5em; padding:0 0 0 10px; float:center;}
.comment-timestamp a:link { color:#c7a189;}
.deleted-comment { font-style:italic;color:gray;}
.paging-control-container { float:center;margin: 0px 6px 0px 0px;font-size: 80%;}
.unneeded-paging-control { visibility: hidden;}
/* Other
----------------------------------------------- */
blockquote {
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
text-align:center;
box-shadow:inset 0 0 30px 0 rgba(255, 140, 140, 0.5) ;
background:#fff;
border:1px solid #ff0303;
border-left:10px solid #ff0303;
padding:5px;
-webkit-transition: .5s;
-moz-transition: .5s;}
blockquote:hover{
border:1px solid #ff6b6b;
border-left:3px solid #ff6b6b;
border-right:3px solid #ff6b6b;
-webkit-transition: .5s;
-moz-transition: .5s;
}
a.li {
border:1px solid #ff6363;
padding: 3px;
display:inline-block;
width:100px;
margin: 2px;
background: #fff;
-webkit-background-clip: none;
-webkit-text-fill-color: #ff0000;
background: url(https://i1175.photobucket.com/albums/r623/synhasthehorizon/emotes/tumblr_m7y4lyY2bh1rrd4z3.gif) no-repeat bottom left;
-webkit-transition: .6s;}
/* Slide
----------------------------------------------- */
#slider{position:relative;}
#slider img {display:none;width:250px;}
#slider a {display:block;}
.nivoSlider {width:400px;height:200px;}
.nivoSlider img {width:400px;height:200px;}
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;}
.nivo-box {display:block;position:absolute;z-index:5;}
.nivo-caption{position:absolute;left:0px;bottom:0px;width:98%;z-index:50;padding:3px;}
.nivo-caption p {margin:0;font-size:11px;} .nivo-caption a {display:inline;} .nivo-html-caption {display:none;}
.nivo-directionNav a {position:absolute;top:45%;z-index:99;} .nivo-prevNav {left:0px;} .nivo-nextNav {right:0px;}
.slider {width:100%;}
.slider img {position:absolute;top:0px;left:0px;display:none;width:250px;}
.nivo-controlNav {display:none;}
.nivo-directionNav a {display:block;width:31px;height:34px;background:url(https://i.imgur.com/YlJpGxM.png) no-repeat;text-indent:-9999px;}
a.nivo-nextNav {background-position:-30px 0;right:15px;} a.nivo-prevNav {left:15px;}
.nivo-caption {font-weight:2;}
/* Playlist
----------------------------------------------- */
.lists {
width: 100px;
left:1150px;
margin-top: -50px;
position: fixed;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
z-index: 100;
top: 0px;}
.lists:hover {
margin-top: 0px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;}
.list {
width: 100px;
background: none;
font-family:'Patrick Hand SC';
font-size:12px;
color:#ff0000;
border-left:1px dotted #ff0000;
border-right:1px dotted #ff0000;
padding-left: 6px;
overflow: hidden;
height: 55px;}
.close{
top: 48px;
font-size:12px;
font-family: 'Patrick Hand SC';
position: absolute;
background: none;
border:1px dotted #ff0000;
border-top:0px solid #fff;
color: #ff0000;
padding: 3px;
width:100px;
height:15px;
text-align:center;
left:0px;}
.close e, .lists:hover f{display: inline;opacity:.8;}
.close f, .lists:hover e{display: none;opacity:.8;}
/* Side Navi
----------------------------------------------- */
.dotstyle ul {
position: relative;
display:block;
margin: 0;
padding: 0;
list-style: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.dotstyle li {
position: relative;
display:block;
float: left;
margin: 0 26px;
width: 16px;
height: 16px;}
.dotstyle li c {
display:block;
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: none;
border-radius: 50%;
background-color: #ccccff;
background-color: rgba(255, 255, 255, 0.3);
text-indent: -999em; /* make the text accessible to screen readers */
position: absolute;
}
.dotstyle li c:focus {outline: none;}
.dotstyle-tooltip li {
border: 2px solid #ccccff;
border-radius: 50%;
z-index: 1;
-webkit-transition: border-color 0.3s ease;
transition: border-color 0.3s ease;
}
.dotstyle-tooltip li c {
top: 190%;
left: 50%;
visibility: hidden;
padding: 0 10px;
width: auto;
height: auto;
border-radius: 0;
background-color: #ff0000;
color: #fff;
text-indent: 0;
line-height: 2;
opacity: 0;
-webkit-transform: translateX(-50%) translateY(50%);
transform: translateX(-50%) translateY(50%);
-webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s ease;
transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s ease;
}
.dotstyle-tooltip li c::after {
position: absolute;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border: solid transparent;
border-width: 10px;
border-color: transparent;
border-bottom-color: #ff0000;
content: '';
pointer-events: none;
bottom:90%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;}
.dotstyle-tooltip li:hover c, .dotstyle-tooltip li.current c {
z-index: 100;
visibility: visible;
opacity: 1;
-webkit-transform: translateX(-50%) translateY(-0%);
transform: translateX(-50%) translateY(-0%);
-webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
transition: transform 0.3s ease, opacity 0.3s ease;}
.dotstyle-tooltip li.current {border-color: #ff0000;}
.dotstyle-tooltip li:hover {z-index: 100;}
.dotstyle-tooltip ul:hover li.current c {opacity: 0.2;}
.dotstyle-tooltip ul li.current:hover c {opacity: 1;}
</style>
<script language="JavaScript">
document.ondragstart = function () { return false; };
</script>
<div style="position:fixed; top:115px;left:200px;">
<a class="" href="https://www.blogger.com/">Home</a> // <a class="" href="https://www.blogger.com/follow-blog.g?blogID=YOUR BLOD ID">+ Follow</a></div>
<!-------------------slide show----------------------->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/ifqwhnb/GBsm20q7d/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">var $nv4wp = jQuery.noConflict();$nv4wp(window).load(function() {$nv4wp('#slider').nivoSlider({effect:'random', slices:15, // For slice animations boxCols: 4, // For box animations boxRows: 2, // For box animations animSpeed: 40, // Slide transition speed pauseTime: 300, // How long each slide will show startSlide:0, // Set starting Slide (0 index) directionNav:true, //Next & Prev directionNavHide:true, //Only show on hover controlNav:true, // 1,2,3... navigation controlNavThumbs:false, // Use thumbnails for Control Nav controlNavThumbsFromRel:false, // Use image rel for thumbs controlNavThumbsSearch: '.jpg', // Replace this with... controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src keyboardNav:true, //Use left & right arrows pauseOnHover:true, //Stop animation while hovering manualAdvance:false, //Force manual transitions captionOpacity:0.8, //Universal caption opacity prevText: 'Prev', // Prev directionNav text nextText: 'Next', // Next directionNav text beforeChange: function(){}, // Triggers before a slide transition afterChange: function(){}, // Triggers after a slide transition slideshowEnd: function(){}, // Triggers after all slides have been shown lastSlide: function(){}, // Triggers when last slide is shown afterLoad: function(){} // Triggers when slider has loaded
});}); </script>
<div id="slide" style="position:fixed;top:130px;left:40px;"><div id="slider">
<a href="/"><img src="https://i.imgur.com/Kr8txq3.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/DYhdhx0.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/hXrZyIU.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/hPrnBWb.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/GcWLeT6.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/tXLSgmB.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/4SFUOtd.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/Qfo1JJR.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/ytTFDr9.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/Zi0L4N7.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/6BXQhln.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/XIyNecH.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/nfNwEoo.jpg"/></a>
</div></div>
<!-------------------playlists----------------------->
<div class="lists"><div class="close"><e>music</e> <f>enjoy :)</f></div>
<div class="list"><br>
music player here !
</div></div>
<!-------------------Dot Navi----------------------->
<div class="dotstyle dotstyle-tooltip" style="position:fixed; top:350px;left:65px;"><ul>
<li class="current" onClick="document.getElementById('main').innerHTML=document.getElementById('post').innerHTML" title=""><c>Posts</c></li>
<li class="" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title=""><c>About</c></li>
<li class="" onClick="document.getElementById('main').innerHTML=document.getElementById('link').innerHTML" title=""><c>Link</c></li>
<li class="" onClick="document.getElementById('main').innerHTML=document.getElementById('stuff').innerHTML" title=""><c>Stuff</c></li>
<li class="" onClick="document.getElementById('main').innerHTML=document.getElementById('chat').innerHTML" title=""><c>Cbox</c></li>
</ul></div>
<script src="https://tympanus.net/Development/DotNavigationStyles/js/dots.js"></script>
<script>
[].slice.call( document.querySelectorAll( '.dotstyle > ul' ) ).forEach( function( nav ) {
new DotNav( nav, {
callback : function( idx ) {
//console.log( idx )
}
} );
} );
</script>
<!-------------------Side-DCC----------------------->
<div id="chat" style="display: none;">
<div class="page-title">ChatBox</div>
<br><br>
- CHATBOX CODE HERE -
<br><br>
<div class="page-title">Credits</div>
<br>
<br> • Template Design by : <a href="https://elaine0211.blogspot.com/">BabeX e.ling</a>
<br> • Redesign by : <a href="URL">Yr Name</a>
<br> • Tutorials : <a href="https://tympanus.net/codrops/category/tutorials/">Tympanus</a>
<br> • Materials : <a href="https://www.google.com/">Google</a> & <a href="https://www.pixel-diary.tumblr.com/">Pixel-diary</a>
<br> • F(x) Photo : <a href="https://www.facebook.com/fx.smtown">F(x) Official FB</a> & <a href="https://www.facebook.com/fx.perfxtion">F(x) FC</a> & <a href="https://www.facebook.com/fxhkfc">F(x) HKFC</a>
<br> • Best Viewed In <a href="https://www.google.com/">Google Chrome</a>
</div>
<!-------------------Post----------------------->
<div style="padding:10px; position:absolute; left:520px; top:65px; width:520px; height:470px;border:1px dotted #ff1919; box-shadow:inset 0 0 20px 0 rgba(255,25,25,0.2);">
<div style="padding:10px; opacity:0.8; float:center; width:500px; overflow-x: hidden; overflow-y: scroll;height:450px;background:#fff;box-shadow: 0 0 3px 3px #fff;">
<div id="main"><blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
• <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$>Comment(s)</a></BlogItemCommentsEnabled>
<div style="text-align: center;">
<div class="post-body">
<p>
<$BlogItemBody$>
</p>
</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$>> ←← Newer</a></NewerPosts> // <OlderPosts><a href=<$OlderPosts$>> Older →→</a></OlderPosts></center>
</div></div></div>
</Blogger>
<!-------------------PAGE1----------------------->
<div id="post" style="display: none;">
<Blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
• <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$>Comment(s)</a></BlogItemCommentsEnabled>
<div class="post-body">
<p>
<$BlogItemBody$>
</p></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$>> ←← Newer</a></NewerPosts> // <OlderPosts><a href=<$OlderPosts$>> Older →→</a></OlderPosts></center>
</div></div></div>
</div>
</div>
<!-------------------PAGE2----------------------->
<div id="about" style="display: none;">
<div class="page-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="page-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="page-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; 27.07.14 -- 01.08.2014
---------------------------------------------------------------------------!>
<HTML><head>
<link href='https://fonts.googleapis.com/css?family=Imprima' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Megrim' 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>; Red Light</title>
<style type="text/css">
#navbar-iframe {
display: none;
}
body {
background: #fff;
cursor:url(https://i1245.photobucket.com/albums/gg581/elaine960211/fx-red_zpscd18bae9.png), progress;
font-family:Imprima;
font-size:13px;
color:#ff3030;}
::-moz-selection {
background:#fff;
color:#fff;
text-shadow: 0.1em 0.1em 0.2em #ff3030;}
::selection {
background:#fff;
color:#fff;
text-shadow: 0.1em 0.1em 0.2em #ff3030;}
::-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/red2_zps96370b5d.jpg)center;border:1px solid #ff6363;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 {
color:#ff0000;
text-decoration:none;
padding:2px;}
a:hover {
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/red7_zps38fcffab.jpg) ;
background-position:58% 63%;
cursor:url(https://i1245.photobucket.com/albums/gg581/elaine960211/fx-red2_zps8637108f.png), progress;
}
u {
text-decoration:underline;
border-bottom:1px solid #ff0909;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;}
u:hover {
text-decoration:none;
border-bottom:1px dashed #fff;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;}
b {
text-decoration:bold;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/red7_zps38fcffab.jpg) ;
background-position:65% 35%;
-webkit-transition: .8s;
-moz-transition: .8s;}
b:hover {
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/red7_zps38fcffab.jpg) ;
background-position:58% 63%;
-webkit-transition: .8s;
-moz-transition: .8s;}
.post-title{
font-family: 'Megrim';
padding:0 0 3px 5px;
text-align:left;
background:url(https://i1245.photobucket.com/albums/gg581/elaine960211/line_zps2e120430.png) repeat-x;
background-position:bottom left;
}
.page-title{
font-family: 'Megrim';
font-size:20px;
padding:0 0 5px 5px;
text-align:left;
background:url(https://i1245.photobucket.com/albums/gg581/elaine960211/line_zps2e120430.png) repeat-x;
background-position:bottom left;}
/* Comment
----------------------------------------------- */
#comments {
margin:5px 13px 0;
border-width:0 1px 1px;
padding:20px 0 5px 0;}
#comments-block { margin:0 10px 0 9px;}
span.comment-icon{ display:none;}
.comment-icon blogger-comment-icon{ display:none;}
.comment-data {
width:420px;
margin: 1em .4em 0 0.4em;
text-align:left;
padding:4px;
border:1px solid #ff9090;
border-radius:5px;}
.comment-body p{
width:420px;
text-align:left;
margin:-1px 5px 2px -2.7em;
padding:4px;
border:1px solid #ff9090;
border-radius:5px;}
.comment-timestamp { margin:0 0 .5em; padding:0 0 0 10px; float:center;}
.comment-timestamp a:link { color:#c7a189;}
.deleted-comment { font-style:italic;color:gray;}
.paging-control-container { float:center;margin: 0px 6px 0px 0px;font-size: 80%;}
.unneeded-paging-control { visibility: hidden;}
/* Other
----------------------------------------------- */
blockquote {
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
text-align:center;
box-shadow:inset 0 0 30px 0 rgba(255, 140, 140, 0.5) ;
background:#fff;
border:1px solid #ff0303;
border-left:10px solid #ff0303;
padding:5px;
-webkit-transition: .5s;
-moz-transition: .5s;}
blockquote:hover{
border:1px solid #ff6b6b;
border-left:3px solid #ff6b6b;
border-right:3px solid #ff6b6b;
-webkit-transition: .5s;
-moz-transition: .5s;
}
a.li {
border:1px solid #ff6363;
padding: 3px;
display:inline-block;
width:100px;
margin: 2px;
background: #fff;
-webkit-background-clip: none;
-webkit-text-fill-color: #ff0000;
background: url(https://i1175.photobucket.com/albums/r623/synhasthehorizon/emotes/tumblr_m7y4lyY2bh1rrd4z3.gif) no-repeat bottom left;
-webkit-transition: .6s;}
/* Slide
----------------------------------------------- */
#slider{position:relative;}
#slider img {display:none;width:250px;}
#slider a {display:block;}
.nivoSlider {width:400px;height:200px;}
.nivoSlider img {width:400px;height:200px;}
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;}
.nivo-box {display:block;position:absolute;z-index:5;}
.nivo-caption{position:absolute;left:0px;bottom:0px;width:98%;z-index:50;padding:3px;}
.nivo-caption p {margin:0;font-size:11px;} .nivo-caption a {display:inline;} .nivo-html-caption {display:none;}
.nivo-directionNav a {position:absolute;top:45%;z-index:99;} .nivo-prevNav {left:0px;} .nivo-nextNav {right:0px;}
.slider {width:100%;}
.slider img {position:absolute;top:0px;left:0px;display:none;width:250px;}
.nivo-controlNav {display:none;}
.nivo-directionNav a {display:block;width:31px;height:34px;background:url(https://i.imgur.com/YlJpGxM.png) no-repeat;text-indent:-9999px;}
a.nivo-nextNav {background-position:-30px 0;right:15px;} a.nivo-prevNav {left:15px;}
.nivo-caption {font-weight:2;}
/* Playlist
----------------------------------------------- */
.lists {
width: 100px;
left:1150px;
margin-top: -50px;
position: fixed;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
z-index: 100;
top: 0px;}
.lists:hover {
margin-top: 0px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;}
.list {
width: 100px;
background: none;
font-family:'Patrick Hand SC';
font-size:12px;
color:#ff0000;
border-left:1px dotted #ff0000;
border-right:1px dotted #ff0000;
padding-left: 6px;
overflow: hidden;
height: 55px;}
.close{
top: 48px;
font-size:12px;
font-family: 'Patrick Hand SC';
position: absolute;
background: none;
border:1px dotted #ff0000;
border-top:0px solid #fff;
color: #ff0000;
padding: 3px;
width:100px;
height:15px;
text-align:center;
left:0px;}
.close e, .lists:hover f{display: inline;opacity:.8;}
.close f, .lists:hover e{display: none;opacity:.8;}
/* Side Navi
----------------------------------------------- */
.dotstyle ul {
position: relative;
display:block;
margin: 0;
padding: 0;
list-style: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.dotstyle li {
position: relative;
display:block;
float: left;
margin: 0 26px;
width: 16px;
height: 16px;}
.dotstyle li c {
display:block;
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: none;
border-radius: 50%;
background-color: #ccccff;
background-color: rgba(255, 255, 255, 0.3);
text-indent: -999em; /* make the text accessible to screen readers */
position: absolute;
}
.dotstyle li c:focus {outline: none;}
.dotstyle-tooltip li {
border: 2px solid #ccccff;
border-radius: 50%;
z-index: 1;
-webkit-transition: border-color 0.3s ease;
transition: border-color 0.3s ease;
}
.dotstyle-tooltip li c {
top: 190%;
left: 50%;
visibility: hidden;
padding: 0 10px;
width: auto;
height: auto;
border-radius: 0;
background-color: #ff0000;
color: #fff;
text-indent: 0;
line-height: 2;
opacity: 0;
-webkit-transform: translateX(-50%) translateY(50%);
transform: translateX(-50%) translateY(50%);
-webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s ease;
transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s ease;
}
.dotstyle-tooltip li c::after {
position: absolute;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border: solid transparent;
border-width: 10px;
border-color: transparent;
border-bottom-color: #ff0000;
content: '';
pointer-events: none;
bottom:90%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;}
.dotstyle-tooltip li:hover c, .dotstyle-tooltip li.current c {
z-index: 100;
visibility: visible;
opacity: 1;
-webkit-transform: translateX(-50%) translateY(-0%);
transform: translateX(-50%) translateY(-0%);
-webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
transition: transform 0.3s ease, opacity 0.3s ease;}
.dotstyle-tooltip li.current {border-color: #ff0000;}
.dotstyle-tooltip li:hover {z-index: 100;}
.dotstyle-tooltip ul:hover li.current c {opacity: 0.2;}
.dotstyle-tooltip ul li.current:hover c {opacity: 1;}
</style>
<script language="JavaScript">
document.ondragstart = function () { return false; };
</script>
<div style="position:fixed; top:115px;left:200px;">
<a class="" href="https://www.blogger.com/">Home</a> // <a class="" href="https://www.blogger.com/follow-blog.g?blogID=YOUR BLOD ID">+ Follow</a></div>
<!-------------------slide show----------------------->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/ifqwhnb/GBsm20q7d/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">var $nv4wp = jQuery.noConflict();$nv4wp(window).load(function() {$nv4wp('#slider').nivoSlider({effect:'random', slices:15, // For slice animations boxCols: 4, // For box animations boxRows: 2, // For box animations animSpeed: 40, // Slide transition speed pauseTime: 300, // How long each slide will show startSlide:0, // Set starting Slide (0 index) directionNav:true, //Next & Prev directionNavHide:true, //Only show on hover controlNav:true, // 1,2,3... navigation controlNavThumbs:false, // Use thumbnails for Control Nav controlNavThumbsFromRel:false, // Use image rel for thumbs controlNavThumbsSearch: '.jpg', // Replace this with... controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src keyboardNav:true, //Use left & right arrows pauseOnHover:true, //Stop animation while hovering manualAdvance:false, //Force manual transitions captionOpacity:0.8, //Universal caption opacity prevText: 'Prev', // Prev directionNav text nextText: 'Next', // Next directionNav text beforeChange: function(){}, // Triggers before a slide transition afterChange: function(){}, // Triggers after a slide transition slideshowEnd: function(){}, // Triggers after all slides have been shown lastSlide: function(){}, // Triggers when last slide is shown afterLoad: function(){} // Triggers when slider has loaded
});}); </script>
<div id="slide" style="position:fixed;top:130px;left:40px;"><div id="slider">
<a href="/"><img src="https://i.imgur.com/Kr8txq3.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/DYhdhx0.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/hXrZyIU.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/hPrnBWb.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/GcWLeT6.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/tXLSgmB.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/4SFUOtd.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/Qfo1JJR.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/ytTFDr9.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/Zi0L4N7.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/6BXQhln.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/XIyNecH.jpg"/></a>
<a href="/"><img src="https://i.imgur.com/nfNwEoo.jpg"/></a>
</div></div>
<!-------------------playlists----------------------->
<div class="lists"><div class="close"><e>music</e> <f>enjoy :)</f></div>
<div class="list"><br>
music player here !
</div></div>
<!-------------------Dot Navi----------------------->
<div class="dotstyle dotstyle-tooltip" style="position:fixed; top:350px;left:65px;"><ul>
<li class="current" onClick="document.getElementById('main').innerHTML=document.getElementById('post').innerHTML" title=""><c>Posts</c></li>
<li class="" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title=""><c>About</c></li>
<li class="" onClick="document.getElementById('main').innerHTML=document.getElementById('link').innerHTML" title=""><c>Link</c></li>
<li class="" onClick="document.getElementById('main').innerHTML=document.getElementById('stuff').innerHTML" title=""><c>Stuff</c></li>
<li class="" onClick="document.getElementById('main').innerHTML=document.getElementById('chat').innerHTML" title=""><c>Cbox</c></li>
</ul></div>
<script src="https://tympanus.net/Development/DotNavigationStyles/js/dots.js"></script>
<script>
[].slice.call( document.querySelectorAll( '.dotstyle > ul' ) ).forEach( function( nav ) {
new DotNav( nav, {
callback : function( idx ) {
//console.log( idx )
}
} );
} );
</script>
<!-------------------Side-DCC----------------------->
<div id="chat" style="display: none;">
<div class="page-title">ChatBox</div>
<br><br>
- CHATBOX CODE HERE -
<br><br>
<div class="page-title">Credits</div>
<br>
<br> • Template Design by : <a href="https://elaine0211.blogspot.com/">BabeX e.ling</a>
<br> • Redesign by : <a href="URL">Yr Name</a>
<br> • Tutorials : <a href="https://tympanus.net/codrops/category/tutorials/">Tympanus</a>
<br> • Materials : <a href="https://www.google.com/">Google</a> & <a href="https://www.pixel-diary.tumblr.com/">Pixel-diary</a>
<br> • F(x) Photo : <a href="https://www.facebook.com/fx.smtown">F(x) Official FB</a> & <a href="https://www.facebook.com/fx.perfxtion">F(x) FC</a> & <a href="https://www.facebook.com/fxhkfc">F(x) HKFC</a>
<br> • Best Viewed In <a href="https://www.google.com/">Google Chrome</a>
</div>
<!-------------------Post----------------------->
<div style="padding:10px; position:absolute; left:520px; top:65px; width:520px; height:470px;border:1px dotted #ff1919; box-shadow:inset 0 0 20px 0 rgba(255,25,25,0.2);">
<div style="padding:10px; opacity:0.8; float:center; width:500px; overflow-x: hidden; overflow-y: scroll;height:450px;background:#fff;box-shadow: 0 0 3px 3px #fff;">
<div id="main"><blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
• <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$>Comment(s)</a></BlogItemCommentsEnabled>
<div style="text-align: center;">
<div class="post-body">
<p>
<$BlogItemBody$>
</p>
</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$>> ←← Newer</a></NewerPosts> // <OlderPosts><a href=<$OlderPosts$>> Older →→</a></OlderPosts></center>
</div></div></div>
</Blogger>
<!-------------------PAGE1----------------------->
<div id="post" style="display: none;">
<Blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
• <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$>Comment(s)</a></BlogItemCommentsEnabled>
<div class="post-body">
<p>
<$BlogItemBody$>
</p></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$>> ←← Newer</a></NewerPosts> // <OlderPosts><a href=<$OlderPosts$>> Older →→</a></OlderPosts></center>
</div></div></div>
</div>
</div>
<!-------------------PAGE2----------------------->
<div id="about" style="display: none;">
<div class="page-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="page-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="page-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 ----------->