CODE.BLACK ANIME
</*-----------------------------------------------
Designer Blog: https://karren-yeoh.blogspot.com
Designer: Karrenyeoh
Date: 2026.05.15
----------------------------------------------- */>
<html>
<head>
<link rel="shortcut icon" href="https://pbs.twimg.com/media/HJMgspwagAA405f?format=png&name=small">
<title>Black Anime</title>
</head>
</* Social Media Icon>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</* Google Font>
<link href="https://fonts.googleapis.com/css2?family=Stick&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Stick&family=Tiny5&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Geo:ital@0;1&display=swap" rel="stylesheet">
</* Notice>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[2]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a style="outline: none; background-color: #fff;" href="#" class="close"><img style=" margin: -60px -60px 0px 0px;" src="https://64.media.tumblr.com/1bf122be2900ebe4f18580c80b0d00b1/09ee67fc3609f322-bb/s250x400/b8db2760d8a07aaf77f289a79c2ee8d18fd37bdf.gifv" width="85" class="btn_close" title="Close Window" alt="Close" /></a>');
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() - 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
</* ScrollToTop>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="https://pbs.twimg.com/media/HJMiaFHbwAAH5UZ?format=png&name=small" style="filter:alpha(opacity=70); -moz-opacity:0.1; width:150px;" />',
controlattrs: {offsetx:10, offsety:50},
anchorkeyword: '#top',
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport)
this.$control.css({opacity:0})
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1)
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='')
mainobj.$control.css({width:mainobj.$control.width()})
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
<style type="text/css">
#navbar-iframe {
display: none;
}
/* Blog Body
----------------------------------------------- */
body {
cursor: url(https://pbs.twimg.com/media/HJMjXuQbsAA3aqA?format=png&name=120x120), progress;
background: url(https://pbs.twimg.com/media/HJMdYWjbMAAFA6_?format=jpg&name=small);
color: #666;
font-family: Geo;
font-size: 13px;
line-height: 1.5;
padding-bottom: 50px;
overflow: auto;
}
/* Posts
----------------------------------------------- */
#post {
float: right;
background: #FFF;
color: #4F4F4F;
height: auto;
width: 65%;
line-height: 1.0;
padding: 50px;
margin-top: 50px;
margin-right: 3%;
border: 1px solid #ccc;
border-radius: 35px;
}
.title {
color: #272727;
font-family: Bebas Neue;
font-size: 30px;
letter-spacing: 15px;
text-align: center;
text-transform: uppercase;
}
.small-title {
background: #E0E0E0;
color: #000;
font-family: Tiny5;
font-size: 11px;
line-height: 1.5;
text-align: center;
text-transform: uppercase;
padding: 2px;
margin: 10px 20px 50px 0px;
-webkit-transition-duration: 1.3s;
}
.small-title:hover {
color: #FFF;
text-shadow: 0 0 5px #ccc;
-webkit-transition-duration: 1.3s;
}
/* Sidebar
----------------------------------------------- */
.sidebar {
position: fixed;
float: left;
background : url(https://64.media.tumblr.com/794105dfefae7e2dff8aa77a6984b1ec/62be6a0cfeca99ff-33/s540x810/f084791dfd61495223f7359eb2865fce257c5d1b.gifv);
background-size: 100%;
height: 100%;
width: 25%;
}
.sidebar-archive2 {
float: right;
width: 40%;
}
.sidebar-archive1 {
float: left;
width: 55%;
}
/* Image Hover
----------------------------------------------- */
.line1 {
background: transparent;
height: 15%;
width: 7px;
}
.line2 {
background: #FFF;
height: 5px;
width: 7px;
}
.line3 {
background: #FFF;
height: 80%;
width: 7px;
}
#img1-sidebar1 {
overflow: hidden;
background : url(https://i.pinimg.com/736x/84/d5/88/84d58855ecb9fdf42e4a9adcb6288588.jpg) no-repeat;
background-size: 100%;
height: 45%;
width: 100%;
border: 7px solid #FFF;
-webkit-transition: 1.0s;
}
.img1-content1 {
background: #FFF;
height: 100%;
width: 100%;
font-size: 100%;
padding: 2%;
margin-left: -50%;
border: 2px solid #FFF;
transition: all .4s linear;
opacity: 0;
}
#img1-sidebar1:hover .img1-content1 {
margin-left: 0%;
transition: all .2s linear;
opacity: .8;
}
#img2-sidebar2 {
overflow: hidden;
background : url(https://i.pinimg.com/1200x/a2/c5/4a/a2c54ac9a8c941f644caf47a69567c66.jpg) no-repeat;
background-size: 100%;
height: 13%;
width: 70%;
margin-top: 5%;
border: 7px solid #FFF;
border-radius: 100%;
-webkit-transition: 1.0s;
}
.img2-content2 {
display: flex;
align-items: center;
justify-content: center;
background: #FFF;
height: 100%;
width: 100%;
font-size: 130%;
padding: 2%;
border-radius: 100%;
transition: all .4s linear;
opacity: 0;
}
#img2-sidebar2:hover .img2-content2 {
transition: all .2s linear;
opacity: .8;
}
.img3 {
position: fixed;
top: 50%;
left: 10%;
background : url(https://pbs.twimg.com/media/HJMiQyDb0AAAsq4?format=png&name=small) no-repeat;
background-size: 100%;
height: 100%;
width: 25%;
}
/* Navigator
----------------------------------------------- */
.navigation-box {
width: 100%;
}
.navigation-box a.navi1 {
display: inline-block;
background: #FFF;
color: #000;
height: 15px;
width: 70%;
font-family: Oswald;
font-size: 80%;
letter-spacing: 3px;
text-align: center;
text-transform: uppercase;
padding: 5px;
border: 1px solid #FFF;
-webkit-transition-duration: .7s;
opacity: 1;
}
.navigation-box a:hover {
background: #000;
color: #FFF;
border: 1px solid #FFF;
-webkit-transition-duration: .7s;
}
.navi2 {
display: inline-block;
background: #FFF;
color: #000;
height: 15px;
width: 80%;
font-family: Oswald;
font-size: 80%;
letter-spacing: 5px;
text-align: center;
text-transform: uppercase;
padding: 5px;
margin-top: 5px;
border: 1px solid #000;
-webkit-transition-duration: .7s;
opacity: 1;
}
.navi2:hover {
background: #000;
color: #FFF;
border: 1px solid #FFF;
-webkit-transition-duration: .7s;
}
/* Notice
----------------------------------------------- */
#fade {
/*--Transparent background layer--*/
/*--hidden by default--*/
display: none;
position: fixed;
background: #000;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.5;
z-index: 9999;
}
.popup_block{
/*--hidden by default--*/
display: none;
position: fixed;
background: #fff;
width: 1000px;
top: 40%;
left: 50%;
float: left;
font-size: 15px;
padding: 20px;
border: 10px solid #6C6C6C;
border-radius: 30px;
box-shadow: 0px 0px 20px #fff;
z-index: 99999;
}
img.btn_close {
float: right;
margin: -25px -25px 0 0;
}
*html #fade {/*--Making IE6 Understand Fixed Positioning--*/
position: absolute;
}
*html .popup_block {
position: absolute;
}
.notice-title {
background: #E0E0E0;
color: #272727;
font-family: Bebas Neue;
font-size: 35px;
line-height: 10px;
letter-spacing: 15px;
text-align: center;
text-transform: uppercase;
padding: 4px;
margin: 30px 0px 30px 0px;
}
/* Music
----------------------------------------------- */
#youtube {
background: #FFF;
color: #000;
width: 300px;
font-size: 10px;
text-align: center;
text-transform: uppercase;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
#player {
position: fixed;
color: #000;
top: -210px;
right: 10px;
text-align: center;
text-transform: uppercase;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
z-index:999;
}
#player:hover {
top: 0px;
}
/* Scrollbar
----------------------------------------------- */
::-webkit-scrollbar {
background: #000;
width: 5px;
}
::-webkit-scrollbar-thumb {
background: #FFF;
border-radius: 5px;
}
/* Tooltip
----------------------------------------------- */
#s-m-t-tooltip {
display: block;
background: #FFF;
color: #3B3B3B;
font-family: Stick;
font-size: 12px;
line-height: 11px;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
padding: 8px;
margin: 20px;
border: 1px solid #000;
border-radius: 5px;
}
/* Links
----------------------------------------------- */
a:link,a:visited {
text-decoration: none;
color:#000;
text-transform: uppercase;
-webkit-transition-duration: .7s;
}
a:hover {
cursor: url(https://pbs.twimg.com/media/HJMjewhaMAAmL38?format=png&name=120x120), progress;
text-decoration: none;
color: #E0E0E0;
-webkit-transition-duration: .7s;
}
.link2 {
display: inline-block;
background: #FFF;
color: #000;
width: 20%;
font-family: Oswald;
font-size: 10px;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
padding: 5px;
margin: 3px;
border: 1px solid #000;
-webkit-transition-duration: 3.5s;
}
.link2:hover {
background: #000;
color: #FFF;
box-shadow: inset 0px 1000px 0px 0px #000;
-webkit-transition-duration: .7s;
}
#contact {
width: 10%;
font-size: 20px;
margin: 5px;
}
/* Text Effect
----------------------------------------------- */
b {
color: #272727;
font-size: 15px;
}
textarea {
background: #FFF;
color: #000;
padding: 5px;
border: 1px solid #000;
}
::-moz-selection {
background: #000;
color: #fff;
}
::selection {
background: #000;
color: #fff;
}
blockquote {
background: #E0E0E0;
color: #7B7B7B;
padding: 10px;
border: 2px solid #7B7B7B;
box-shadow: inset 0px 0px 20px 0px #FFF;
-webkit-transition-duration: 3.5s;
}
blockquote:hover {
color: #7B7B7B;
padding: 10px;
box-shadow: inset 0px 1000px 0px 0px #FFF;
-webkit-transition-duration: 3.5s;
}
</style>
<blogger>
<!-----------------------------------Music-----------------------------------!>
<div id="player">
<div id="youtube">
<div style="height: 210px; width: 310px; overflow: auto;">
<center><br>// Youtube Player Place Here<br>
<iframe width="260" height="160" src="https://www.youtube.com/embed/ePp3bThWK0E?si=wxYYumUV4Mjj6zhr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></center></div></div>
<div style="position:fixed; background:#fff; right:100px; width:100px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; padding:5px;">music here</div>
</div>
<!--------------------------------------Notice--------------------------------------!>
<div class="popup_block" id="notice">
<center><div class="notice-title">welcome . 欢迎各位</div></center>
<img style="float:left; margin:0px 20px 0px 0px;" src="https://pbs.twimg.com/media/HJMiEMjaIAAlhar?format=jpg&name=small" width="35%">
WRITE YOUR NOTIC HERE
<img style="float:right; margin:-30px 0px 0px 0px;" src="https://media3.giphy.com/media/v1.Y2lkPTZjMDliOTUyc3c2Ymt2MGhzeDdqOXhrYmt0N3dycjJ5bjA2Nm9wMHJpaThhaXk5ZiZlcD12MV9zdGlja2Vyc19zZWFyY2gmY3Q9cw/ADATtOVP6kn9OS79mO/giphy.gif" width="10%"><hr style='border: 1px solid #6C6C6C;'>
</div>
<!--------------------------------------Navigator--------------------------------------!>
<div class="sidebar">
<div class="sidebar-archive1">
<div class="line1"></div>
<div id="img1-sidebar1">
<div class="img1-content1">
PUT YOUR CHAT BOX HERE <img src="https://i.pinimg.com/originals/0a/3e/11/0a3e110909d30a773f2e97be5e29b2cc.gif" width="5%"></div></div>
<div class="navi2"><a style="text-transform:uppercase;" class="poplight" href="#?w=500" rel="notice" title="点这里" >notice inside here</a></div>
</div>
<div class="sidebar-archive2">
<center>
<div id="img2-sidebar2">
<div class="img2-content2">
黑色の日记 <img style="margin-top:10px;" src="https://i.pinimg.com/originals/93/10/df/9310df432c2b22633ff104bb0ef163ad.gif" width="10%"></div></div><div class="line2"></div>
<div class="navigation-box">
<div class="navi1">
<a class="navi1" onClick="document.getElementById('post').innerHTML=document.getElementById('entry').innerHTML" title="页面文章">entry</a><div class="line2"></div>
<a class="navi1" onClick="document.getElementById('post').innerHTML=document.getElementById('profile').innerHTML" title="个人简介">about</a><div class="line2"></div>
<a class="navi1" onClick="document.getElementById('post').innerHTML=document.getElementById('link').innerHTML" title="朋友链接">link</a><div class="line2"></div>
<a class="navi1" href="https://www.blogger.com/" target="_blank" title="部落格主页">dashboard</a><div class="line2"></div>
<a class="navi1" href="http://www.blogger.com/follow-blog.g?blogID=<$blogID$>" target="_blank" title="关注我吧">follow</a><div class="line3"></div></div></div>
</center></div>
<div class="img3"></div>
</div>
<!--------------------------------------Post--------------------------------------!>
<div id="post">
<img style="background:#000; padding:2px; margin-top:20px; margin-right:20px; border-radius:20px;" src="https://pbs.twimg.com/media/HJMfC2oaYAAxu6U?format=png&name=small" align="right" width="80"><br>
<div class="title"><$BlogItemTitle$></div>
<div class="small-title"><BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader> - <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> COMMENT(S)</a></BlogItemCommentsEnabled></div><br>
<$BlogItemBody$>
<center><NewerPosts><a href="<$NewerPosts$>">< Latest Memories</a></NewerPosts> | <OlderPosts><a href="<$OlderPosts$>">Past Memories ></a></OlderPosts></center>
</div>
<!--------------------------------------Entry--------------------------------------!>
<div id="entry" style="display:none;">
<img style="background:#000; padding:2px; margin-top:20px; margin-right:20px; border-radius:20px;" src="https://pbs.twimg.com/media/HJMfC2oaYAAxu6U?format=png&name=small" align="right" width="80"><br>
<div class="title"><$BlogItemTitle$></div>
<div class="small-title"><BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader> - <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> COMMENT(S)</a></BlogItemCommentsEnabled></div><br>
<$BlogItemBody$>
<center><NewerPosts><a href="<$NewerPosts$>">< Latest Memories</a></NewerPosts> / <OlderPosts><a href="<$OlderPosts$>">Past Memories ></a></OlderPosts></center>
</div>
<!--------------------------------------Profile--------------------------------------!>
<div id="profile" style="display:none;">
<img style="background:#000; padding:2px; margin-top:20px; margin-right:20px; border-radius:20px;" src="https://pbs.twimg.com/media/HJMf7YibUAAvblS?format=jpg&name=small" align="right" width="80"><br>
<div class="title">owner.博主</div>
<div class="small-title">Small Appearance And Presence. Yeap! That's Me!</div>
<img style="float:left; margin:0px 0px 15px 15px;" src="https://i.pinimg.com/474x/cc/0d/03/cc0d03779b00957ec65f27addaa400a9.jpg" width="30%">
<center>
<a href="" id="contact" class="fa fa-facebook-f" title="facebook"></a>
<a href="" id="contact" class="fa fa-instagram" title="instagram"></a>
<a href="" id="contact" class="fa fa-twitter" title="twitter"></a>
<a href="" id="contact" class="fa fa-tumblr" title="tumblr"></a>
</center>
</div>
<!--------------------------------------Link--------------------------------------!>
<div id="link" style="display: none;">
<img style="background:#000; padding:2px; margin-top:20px; margin-right:20px; border-radius:20px;" src="https://pbs.twimg.com/media/HJMetH3bEAANUJc?format=png&name=small" align="right" width="80"><br>
<div class="title">links.链接</div>
<div class="small-title">Tell me if you're interested to be on the list.</div>
<b>FRIENDS . 朋友</b> <img src="https://64.media.tumblr.com/d48c85a428c5e637eea48965bbbeb1dd/03d502865c26f3dd-72/s250x400/87d09ee45c91258950aedc8a634a0ab08ecf34b1.gifv" width="20"><br><br>
<center>
<a class='link2' href="" target="_blank">link2</a>
<a class='link2' href="" target="_blank">link2</a>
<a class='link2' href="" target="_blank">link2</a>
<a class='link2' href="" target="_blank">link2</a>
<a class='link2' href="" target="_blank">link2</a>
<a class='link2' href="" target="_blank">link2</a>
<a class='link2' href="" target="_blank">link2</a>
<a class='link2' href="" target="_blank">link2</a>
<a class='link2' href="" target="_blank">link2</a>
<a class='link2' href="" target="_blank">link2</a>
<a class='link2' href="" target="_blank">link2</a>
<a class='link2' href="" target="_blank">link2</a>
<a class='link2' href="" target="_blank">link2</a>
<a class='link2' href="" target="_blank">link2</a>
<a class='link2' href="" target="_blank">link2</a>
<a class='link2' href="" target="_blank">link2</a>
<a class='link2' href="" target="_blank">link2</a>
<a class='link2' href="" target="_blank">link2</a>
<a class='link2' href="" target="_blank">link2</a>
<a class='link2' href="" target="_blank">link2</a>
</center>
</div>
<!---------------------------------------End #content--------------------------------------!>
</blogger>
</body>
</* Tooltip>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips();
});
})(jQuery);
</script>
</html>
