CODE.CLEAN
</*-----------------------------------------------
Designer Blog: https://karren-yeoh.blogspot.com
Designer: Karrenyeoh
Date: 2026.05.25
----------------------------------------------- */>
<html>
<head>
<link rel="shortcut icon" href="https://pbs.twimg.com/media/HMFLIEta8AAvhrt?format=png&name=small">
<title>livepreview-clean</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">
</* Font Family>
<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Noto+Sans+SC:wght@100..900&family=Stick&display=swap" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Overlock' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Karla&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 href="#" class="close"><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>
<style type="text/css">
#navbar-iframe {
display: none;
}
/* Body
----------------------------------------------- */
body {
cursor: url(https://pbs.twimg.com/media/HJMjXuQbsAA3aqA?format=png&name=120x120), progress;
background: #FFF;
color: #6C6C6C;
font-family: Karla, sans-serif;
font-size: 13px;
}
/* Blog
----------------------------------------------- */
.blog-archive {
height: 90%;
width: 100%;
margin-top: 3%;
}
.post-body {
float: right;
overflow: auto;
background: #FFF;
height: 80%;
width: 55%;
padding: 2%;
margin-right: 2%;
border: 2px solid transparent;
border-image: linear-gradient(to left bottom, #FFF, #3C3C3C, #FFF);
border-image-slice: 1;
}
.small-title {
background: #FFF;
font-family: tinytots;
font-size: 80%;
text-align: left;
text-transform: uppercase;
margin-top: 2%;
margin-bottom: 5%;
}
.post {
color: #6C6C6C;
font-family: Nunito;
letter-spacing: 1px;
margin-bottom: 40px;
}
.post-title {
background: url(https://64.media.tumblr.com/d48c85a428c5e637eea48965bbbeb1dd/03d502865c26f3dd-72/s250x400/87d09ee45c91258950aedc8a634a0ab08ecf34b1.gifv) no-repeat left;
background-size: 2%;
color: #3C3C3C;
font-family: Georgia;
font-size: 300%;
line-height: 1.5;
padding-left: 3%;
margin-bottom: 2%;
border-bottom: 2px solid #9D9D9D;
}
h3 {
color: #3C3C3C;
font-size: 200%;
margin-bottom: 2%;
}
/* Sidebar
----------------------------------------------- */
.sidebar {
float: left;
background: #FFF;
width: 25%;
text-align: justify;
padding: 2%;
margin-left: 2%;
margin-bottom: 2%;
border: 2px solid transparent;
border-image: linear-gradient(to left bottom, #FFF, #3C3C3C, #FFF);
border-image-slice: 1;
}
h2 {
background: #D0D0D0;
color: #3C3C3C;
font-family: georgia;
font-size: 200%;
font-style: italic;
line-height: 35%;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 1px #FFF;
margin-bottom: 10%;
-webkit-transition: 2.5s;
}
#contact {
text-decoration: none;
background: #D0D0D0;
color: #FFF;
width: 10%;
font-size: 100%;
text-align: center;
padding-top: 4%;
padding-bottom: 4%;
margin: 1%;
border: 1px solid #FFF;
border-radius: 50%;
}
.status-box {
background: #E0E0E0;
overflow: auto;
height: 75px;
padding: 2%;
padding-top: 5%;
padding-bottom: 2%;
border: 1px solid transparent;
}
.cbox {
background: #FFF;
height: 70px;
width: 100%;
padding: 5px;
border: 1px solid #ADADAD;
}
/* navigation
---------------------------------------------*/
.navi {
display: inline-block;
background: #FFF;
color: #3C3C3C;
width: 45%;
font-family: Nunito;
font-size: 90%;
text-align: center;
text-transform: uppercase;
padding: 1%;
margin-bottom: 1%;
border: 1px solid #9D9D9D;
transition: all 0.3s ease-in-out;
}
.navi:hover {
background: #3C3C3C;
color: #FFF;
transition: all 0.3s ease-in-out;
}
/* Notice
----------------------------------------------- */
#fade {
/*--Transparent background layer--*/
display: none; /*--hidden by default--*/
position: fixed;
background: #3C3C3C;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: .50;
z-index: 9999;
}
.popup_block{
display: none; /*--hidden by default--*/
position: fixed;
float: left;
background: #FFF;
width: 60%;
top: 50%;
left: 50%;
font-family: Stick;
font-size: 120%;
text-align: center;
padding: 20px;
border: 5px solid transparent;
border-image: linear-gradient(to left bottom, #fff, #3C3C3C, #fff);
border-image-slice: 1;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #FFF;
-moz-box-shadow: 0px 0px 20px #FFF;
box-shadow: 0px 0px 20px #FFF;
}
img.btn_close {
float: right;
margin: -25px -25px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
h4 {
background: #D0D0D0;
color: #3C3C3C;
font-family: georgia;
font-size: 250%;
font-style: italic;
line-height: 35%;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 1px #FFF;
margin-bottom: 5%;
-webkit-transition: 2.5s;
}
/* Music Player
----------------------------------------------- */
.b-musicbox {
position: fixed;
background: #3C3C3C;
color: #FFF;
width: 100px;
top: -1px;
right: 5%;
text-align: center;
letter-spacing: 1px;
padding: 5px;
-webkit-transition-duration: .7s;
}
.b-musicbox:hover .playbox {
top: 0%;
-webkit-transition-duration: .7s;
}
.playbox {
position: fixed;
overflow-x: hidden;
background: #FFF;
width: 300px;
top: -100%;
right: 2%;
padding: 5px;
border: 2px solid #3C3C3C;
-webkit-transition-duration: .7s;
z-index: 1000;
}
/* Scrollbar
----------------------------------------------- */
::-webkit-scrollbar {
background: #FFF;
width: 5px;
}
::-webkit-scrollbar-thumb {
background: #3C3C3C;
width: 5px;
border: 1px solid #FFF;
border-radius: 10px;
-moz-border-radius: 10px;
}
/* Tooltip
----------------------------------------------- */
#s-m-t-tooltip {
display: block;
background: #3C3C3C;
color: #FFF;
font-size: 90%;
line-height: 1px;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
padding: 15px;
margin: 20px;
z-index: 999;
}
/* Image Effect
----------------------------------------------- */
img {
margin: 2%;
}
/* Link
----------------------------------------------- */
a:link,a:visited {
text-decoration: none;
color: #3C3C3C;
padding: 2px;
transition: all 0.5s ease-in-out;
}
a:hover {
cursor: url(https://pbs.twimg.com/media/HJMjewhaMAAmL38?format=png&name=120x120), progress;
color: #ccc;
}
a.link2 {
display: inline-block;
text-decoration: none;
background: url(http://media.tumblr.com/tumblr_m7ein048Bi1qdlkyg.gif) left;
background-repeat: no-repeat;
background-size: 4%;
color: #3C3C3C;
width: 45%;
font-family: Oswald;
font-size: 100%;
line-height: 100%;
letter-spacing: 2%;
text-align: left;
text-transform: uppercase;
padding: 0.5%;
padding-left: 3%;
border: 1px solid transparent;
-webkit-transition: All 0.4s ease;
}
a.link2:hover {
background: url(http://media.tumblr.com/tumblr_m7eid0x1LJ1qdlkyg.gif) left center;
background-repeat: no-repeat;
background-size: 4%;
color: #7B7B7B;
-webkit-transition: All 0.4s ease;
}
/* Text Effect
----------------------------------------------- */
b {
color: #3C3C3C;
font-size: 150%;
font-weight: 900;
}
u {
text-decoration: none;
border-bottom: 1px solid #3C3C3C;
}
blockquote {
padding: 6px;
border: 1px solid #9D9D9D;
-webkit-transition-duration: 1.5s;
}
blockquote:hover {
color: #3C3C3C;
border: 1px solid #FFF;
box-shadow: inset 1300px 0 0 0 #E0E0E0;
-webkit-transition-duration: 1.5s;
}
::selection {
background: #3C3C3C;
color: #FFF;
}
</style>
<blogger>
<body>
<!--------------------------------------Music Player--------------------------------------!>
<div class='b-musicbox'>Music Here
<div class='playbox'>
<iframe width="260" height="160" src="https://www.youtube.com/embed/NMioMylYlbg?si=iRdev3Ml6cqkwOSN" 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></div></div>
<!--------------------------------------Notice--------------------------------------!>
<div class='popup_block' id='notice'><br/>
<h4>welcome . 欢迎各位</h4>
PUT YOUR THINGS HERE
</div>
<!--------------------------------------Blog-Post--------------------------------------!>
<div class="blog-archive">
<div id="content" class="post-body">
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="small-title"><span class="fa fa-calendar"></span> <$BlogItemDateTime$> | <span class="fa fa-comments"></span> comments-<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$></a></div>
<div class="post"><$BlogItemBody$></div>
<span style='float:left;'><NewerPosts><a href='<$NewerPosts$>'><span class="fa fa-long-arrow-left"></span></a></NewerPosts></span>
<span style='float:right;'><OlderPosts><a href='<$OlderPosts$>'><span class="fa fa-long-arrow-right"></span></a></OlderPosts></span>
</div>
<!--------------------------------------Sidebar--------------------------------------!>
</* Sidebar-1>
<div class="sidebar">
<h2>status</h2>
<div class="status-box">
<br>WRITE DOWN YOUR MESSAGE<br>
<p style='text-align: right;'>Note on <u>2026.05.21</u></p><br><br><br>
<center>
<div class="navi" onClick="document.getElementById('content').innerHTML=document.getElementById('home').innerHTML" title="文章">entry</div>
<div class="navi" onClick="document.getElementById('content').innerHTML=document.getElementById('about').innerHTML" title="博主">about</div>
<div class="navi" onClick="document.getElementById('content').innerHTML=document.getElementById('link').innerHTML" title="链接">link</div>
<div class="navi" onClick="document.getElementById('content').innerHTML=document.getElementById('').innerHTML"><a class="poplight" href="#?w=500" rel="notice">notice</a></div>
<div class="navi"><a href="https://www.blogger.com/home" target="_blank" title="主页">dashboard</a></div>
<div class="navi"><a href="http://www.blogger.com/follow-blog.g?blogID=<$blogID$>" target="_blank" title="关注">follow</a></div>
</center></div></div>
</* Sidebar-2>
<div class="sidebar">
<h2>message box</h2>
<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>
<a href="" id="contact" class="fa fa-google-plus" title="google"></a>
<a href="" id="contact" class="fa fa-pinterest-p" title="pinterest"></a><br><br>
</center>
Designed by <a href="https://karren-yeoh.blogspot.com/" target="_blank">KARREN</a>.<br>
Resigned by <a href="" target="_blank">YourNamne</a>.<br>
Best viewed in Google Chrome.<br><br>
<div class="cbox">
PUT YOUR CBOX HERE</div>
</div></div></*--archive>
<!--------------------------------------Page-Entry--------------------------------------!>
<div id="home" style="display: none;">
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="small-title"><span class="fa fa-calendar"></span> <$BlogItemDateTime$> | <span class="fa fa-comments"></span> comments-<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$></a></div>
<div class="post"><$BlogItemBody$></div>
<span style='float:left;'><NewerPosts><a href='<$NewerPosts$>'><span class="fa fa-long-arrow-left"></span></a></NewerPosts></span>
<span style='float:right;'><OlderPosts><a href='<$OlderPosts$>'><span class="fa fa-long-arrow-right"></span></a></OlderPosts></span>
</div>
<!--------------------------------------Page-About--------------------------------------!>
<div id="about" style="display: none;">
<div class="post-title">Owner . 版主</div>
<div class="small-title">Small Appearance And Presence. Yeap! That's Me! <span class="fa fa-cloud"></span></div>
<img style="float:right;" src="https://pbs.twimg.com/media/HL-_pXfboAAXatK?format=png&name=medium" width="30%">
WRITE DOWN YOUR THINGS HERE
</div>
<!--------------------------------------Page-Link--------------------------------------!>
<div id="link" style="display: none;">
<div class="post-title">Linkies . 链接</div>
<div class="small-title">Tell me if you're interested to be on the list. <span class="fa fa-moon-o"></span></div>
<h3>Tutorials & Materials</h3>
<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>
</div>
<!--------------------------------------End--------------------------------------!>
</body>
</blogger>
</* 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>
