</*-----------------------------------------------
Designer Blog: https://karren-yeoh.blogspot.com
Designer: Karrenyeoh
Date: 2026.07.01
----------------------------------------------- */>
<html>
<head></head>
<link rel="shortcut icon" href="https://pbs.twimg.com/media/HMFLIEta8AAvhrt?format=png&name=small">
<title>livepreview-clean</title>
</* 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="https://fonts.googleapis.com/css2?family=Overlock&display=swap" rel="stylesheet">
<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 {
overflow: hidden;
cursor: url(https://pbs.twimg.com/media/HJMjXuQbsAA3aqA?format=png&name=120x120), progress;
background: #FFF;
color: #6C6C6C;
font-family: Karla;
font-size: normal;
}
.archive {
background: transparent;
margin-top: 2%;
}
#main {
float: right;
overflow: auto;
display: inline-block;
background: #FFF;
height: 80%;
width: 55%;
font-family: Nunito;
letter-spacing: 1px;
padding: 2%;
margin-right: 2%;
border: 2px solid transparent;
border-image: linear-gradient(to left bottom, #FFF, #3C3C3C, #FFF);
border-image-slice: 1;
}
.sider {
float: left;
width: 30%;
margin-left: 2%;
}
/* Posts
----------------------------------------------- */
.post {
height: 95%;
margin-bottom: 2%;
}
.post-title {
color: #3C3C3C;
font-family: Georgia;
font-size: 300%;
line-height: 1.5;
margin-bottom: 2%;
border-bottom: 2px solid #9D9D9D;
}
.title-img {
float: right;
position: static;
background: url(https://64.media.tumblr.com/9149f30c56d3545a7f5a485ee76d66ff/bdff0a307a04ed40-7d/s1280x1920/15d235230d7b66730908e810cb46d2e791b4aaa5.gifv) no-repeat right;
background-size: 100%;
height: 30px;
width: 30px;
}
.date {
background: #FFF;
font-family: tinytots;
font-size: 80%;
text-align: left;
text-transform: uppercase;
margin-top: 2%;
margin-bottom: 5%;
}
/* Comments
----------------------------------------------- */
#comments {
background: #FFF;
padding: 2%;
}
h4 {
color: #3C3C3C;
font-family: georgia;
font-size: 150%;
font-style: italic;
text-transform: uppercase;
margin-bottom: 5%;
}
#comments-block {
margin: 2%;
}
.comment-data {
margin-bottom: 1%;
}
.comment-body {
background: #E0E0E0;
padding: 1%;
}
/* Sidebar
----------------------------------------------- */
.sidebar {
display: inline-block;
background: #FFF;
width: 70%;
font-size: 90%;
text-align: justify;
padding: 5%;
margin-bottom: 5%;
border: 2px solid transparent;
border-image: linear-gradient(to left bottom, #FFF, #3C3C3C, #FFF);
border-image-slice: 1;
}
h1 {
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%;
}
.imagebar {
background: url(https://64.media.tumblr.com/4a62b25340413279fbd73e3e442b97aa/70beea8222d9a199-bc/s1280x1920/e335d97a7d9c44ecef4d0d0b51cee6d39d670205.webp) center;
background-size: 100%;
height: 50%;
width: 100%;
margin-top: -5px;
margin-bottom: 10px;
border: 3px solid #BB5E00;
}
.statusbox {
overflow: auto;
background: #E0E0E0;
height: 75px;
padding: 2%;
padding-top: 5%;
padding-bottom: 2%;
}
.cbox {
background: #FFF;
height: 70px;
width: 100%;
padding: 5px;
border: 1px solid #ADADAD;
}
/* Navigator Menu
----------------------------------------------- */
.menu {
width: 100%;
text-align: center;
margin-top: 5%;
}
.navi {
display: inline-block;
background: #FFF;
color: #3C3C3C;
width: 45%;
font-family: Nunito;
font-size: 80%;
text-align: center;
text-transform: uppercase;
padding: 1%;
margin-bottom: 5px;
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;
}
h2 {
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;
}
/* Scrollbar
----------------------------------------------- */
::-webkit-scrollbar {
background: #FFF;
width: 5px;
}
::-webkit-scrollbar-thumb {
background: #3C3C3C;
width: 5px;
border: 1px solid #FFF;
}
/* Tooltip
----------------------------------------------- */
#s-m-t-tooltip {
background-color: #3C3C3C;
color: #FFF;
font-family: ZCOOL KuaiLe;
font-size: 90%;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
padding: 10px;
margin: 20px;
z-index: 999;
}
/* Music
----------------------------------------------- */
#player {
position: fixed;
overflow: hidden;
background: #3C3C3C;
color: #FFF;
top: 0%;
right: 130px;
text-align: center;
text-transform: uppercase;
padding: 10px;
transition: all .5s ease-in-out;
z-index: 99;
}
#player:hover #mp3 {
top: 0%;
}
#mp3 {
position: fixed;
background: #FFF;
color: #3C3C3C;
width: 300px;
top: -30%;
right: 10px;
font-size: 80%;
text-align: center;
text-transform: uppercase;
padding: 10px;
border: 2px solid #3C3C3C;
transition: all 0.5s ease-out;
z-index: 99;
}
#mp3:hover {
transition: all 0.5s ease-out;
}
/* Links
----------------------------------------------- */
a:link,a:visited {
color: #3C3C3C;
text-decoration: none;
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 img {
border-width: 0;
}
a.link2 {
display: inline-block;
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%;
transition-duration: .3s;
}
a.link2:hover {
background: url(http://media.tumblr.com/tumblr_m7eid0x1LJ1qdlkyg.gif) left center;
background-repeat: no-repeat;
background-size: 4%;
color: #7B7B7B;
}
#contact {
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%;
}
/* Text Effects
----------------------------------------------- */
b {
color: #3C3C3C;
font-size: 150%;
font-weight: 900;
}
u {
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid #3C3C3C;
}
::selection {
background: #3C3C3C;
color: #FFF;
}
blockquote {
padding: 6px;
border: 1px solid #9D9D9D;
transition: all 0.9s ease-out;
}
blockquote:hover {
color: #3C3C3C;
border: 1px solid #FFF;
box-shadow: inset 1300px 0 0 0 #E0E0E0;
transition: all 0.7s ease-out;
}
textarea {
background: #FFF;
border: 2px solid #9D9D9D;
}
h3 {
color: #3C3C3C;
font-size: 200%;
margin-bottom: 2%;
}
</style>
<body>
<!-----------------------------------Music-----------------------------------!>
<div id="player">music here
<div id="mp3">
// ハレハレヤ（朗朗晴天）
<audio controls autoplay src="https://mp3tourl.com/audio/1783011366867-173bbcb2-0d0e-4bf2-aaab-8871f44b8c3b.mp3"></audio>
</div></div>
<!--------------------------------------Notice--------------------------------------!>
<div class='popup_block' id='notice'><br/>
<h2>welcome . 欢迎各位</h2>
PUT YOUR THINGS HERE
</div>
<!--------------------------------------Blog-Body--------------------------------------!>
<div class="archive">
<div id="main">
<div class="post"><Blogger>
<div class="title-img"></div>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="date"><i class="fa fa-calendar-check-o"></i> <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <i class="fa fa-comments"></i> comments: <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$></a></div>
<$BlogItemBody$>
<ItemPage>
<div id="comments">
<BlogItemCommentsEnabled><a name="comments"></a>
<h4><$I18NNumComments$>:</h4>
<dl id="comments-block">
<$CommentPager$>
<BlogItemComments>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
<$I18NAtCommentTimeWithPermalink$>: <$I18NCommentAuthorSaid$>
</dt>
<dd class="comment-body">
<$BlogCommentBody$>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
<$CommentPager$>
</dl>
<$BlogItemCreate$>
</div></*--one is comments>
</ItemPage>
</div></*--one is post content>
<span style='float:left;'><NewerPosts><a href='<$NewerPosts$>'><i class="fa fa-long-arrow-left"></i> NewerPosts</a></NewerPosts></span>
<span style='float:right;'><OlderPosts><a href='<$OlderPosts$>'>OlderPosts <i class="fa fa-long-arrow-right"></i></a></OlderPosts></span>
</div>
<!--------------------------------------Sidebar--------------------------------------!>
</* Sidebar1>
<div class="sider">
<div class="sidebar">
<h1>status</h1>
<div class="statusbox">
<br>WRITE DOWN YOUR MESSAGE<br>
<p style='text-align: right;'>Note on <u>2026.05.21</u></p>
<div class="menu">
<div class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('entry').innerHTML" title="文章">entry</div>
<div class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title="文章">about</div>
<div class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('link').innerHTML" title="链接">link</div>
<div class="navi"><a class="poplight" href='#?w=500' rel='notice' title="提醒">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>
</div></div></div>
</* sidebar2>
<div class="sidebar">
<h1>message box</h1>
<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>
Template by <a href="https://karren-yeoh.blogspot.com/2026/06/clean.html" target="_blank">Clean</a>.<br>
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></div></*--one is archive>
<!--------------------------------------Page-Entry--------------------------------------!>
<div id="entry" style="display: none;">
<div class="post">
<div class="post-title-img"></div>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="date"><i class="fa fa-calendar-check-o"></i> <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <i class="fa fa-comments"></i> comments: <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$></a></div>
<$BlogItemBody$>
<ItemPage>
<div id="comments">
<BlogItemCommentsEnabled><a name="comments"></a>
<h4><$I18NNumComments$>:</h4>
<dl id="comments-block">
<$CommentPager$>
<BlogItemComments>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>
<$I18NAtCommentTimeWithPermalink$>: <$I18NCommentAuthorSaid$>
</dt>
<dd class="comment-body">
<$BlogCommentBody$>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
<$CommentPager$>
</dl>
<$BlogItemCreate$>
</div></*--one is comments>
</ItemPage>
</div></*--one is post content>
<span style='float:left;'><NewerPosts><a href='<$NewerPosts$>'><i class="fa fa-long-arrow-left"></i> NewerPosts</a></NewerPosts></span>
<span style='float:right;'><OlderPosts><a href='<$OlderPosts$>'>OlderPosts <i class="fa fa-long-arrow-right"></i></a></OlderPosts></span>
</div></div>
<!--------------------------------------Page-About--------------------------------------!>
<div id="about" style="display: none;">
<div class="post">
<div class="title-img"></div>
<div class="post-title">Owner . 版主</div>
<div class="date">Small Appearance And Presence. Yeap! That's Me! <i class="fa fa-heart"></i></div>
<center><img src="https://64.media.tumblr.com/967489e455bd02c2e73c11ad836d8a64/00935e01f8a6fd7e-13/s1280x1920/d84f708c41486fcbdcac004b42cfe654c0a98f44.jpg" width="40%"></center>
WRITE DOWN YOUR THINGS HERE
</div></div>
<!--------------------------------------Page-Link--------------------------------------!>
<div id="link" style="display: none;">
<div class="post">
<div class="title-img"></div>
<div class="post-title">Link . 链接</div>
<div class="date">Tell me if you're interested to be on the list. <i class="fa fa-heart"></i></div>
<center><img src="https://64.media.tumblr.com/07f3319ac33ceb57a4f42556c97d4593/00935e01f8a6fd7e-46/s1280x1920/53e0bc2cca630f735fdc6616cddbd096660c8f7a.jpg" width="40%"></center>
<h3>Tutorial and Material</h3>
<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>
</cetner>
</div></div>
<!--------------------------------------End--------------------------------------!>
</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>
