- Copy dan pastekan kode ini:
<center><img class="header" src="Url Header" /></center>Merah : Link Header
<title>Judul Blogskin</title>
<link rel="shortcut icon" href="Url Icon" />
<style type="text/css">
#navbar-iframe {
display: none;
}
Hijau : judul blogskins
Kuning : url icon
- Di paling atas sebelum kode pertama, tempel kode ini:
<html>Kode warna merah edit sendiri! Sudah tahu, kan?
<head>
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" >/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library(www.dynamicdrive.com)* Modified bySafiraNuril***********************************************/var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="Url Back To Top Button" />',
controlattrs: {offsetx:5, offsety:5},
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
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:'Scroll 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>
<base target='_blank'/>
<script type="text/javascript">
document.ondragstart = function () { return false; }; </script>
<link href='http://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Short+Stack' rel='stylesheet' type='text/css'>
- Di paling bawah tempel kode ini!
<style type="text/css">
#navbar-iframe {
display: none;
}
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-track-piece {
background-color: #fff;
border: 3px solid #fff;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #FFFFFF;
border: 1px solid #fff;
}
.header {
margin-left: 2px;
margin-bottom: -33px;
-webkit-transition:2s
}
body {
color: #000;
background: url(Url Background);
background-attachment:inherit;
cursor: url(Url Cursor), progress;
font-family: Short Stack;
letter-spacing: 0px;
line-height: 12px
font-size: 12px;
}
Edit sesuai tema!
- Lalu, tempel lagi kode ini:
a:link, a:visited {Kalian edit sendiri. Ada keterangannya!
color:#FFA4C1;
font-family: Short Stack;
font-size: 12px;
text-decoration:none;
-webkit-transition:1s;
cursor: url(Url Cursor Saat Hover Link), progress;
}
a:hover{
cursor: url(Url Cursor Hover), progress;
color: Pink;
text-decoration: none;
padding-left:0px;
-webkit-transition:1.2s;
}
a.navigate {
border:2px solid MistyRose;
border-radius:6px;
background:#fff;
color: #FF87AD;
-webkit-transition: 1s;
padding:2px;
}
a.navigate:hover {
background:#FEAFC8;
color: #fff;
text-decoration: none;
-webkit-transition: 0.5s;
}
.tit {
font-weight: bold;
font: 16px 'kristen itc';
color:#515151;
text-align:center;
border-top: 4px double MistyRose;
border-bottom: 4px double MistyRose;
}
::selection {
background-color: #fff;
color:#FF84AA;
}
::-moz-selection {
background-color: #FF84AA;
color: #fff;
}
.footer {
margin-top: 5px;
margin-bottom: 15px;
border-top: 1px #eee solid;
text-align: right;
}
</style>
- Tekan Ctrl + F lalu cari kode : </style>, tempel kode dibawah ini diatas kode </style>
blockquote{
background:url(Url Background Blackquote;
background-repeat:no-repeat;
background-position:100% 95%;
font-family: 'short stack';
padding:10px;
border-left:20px solid #FFCEF7;
border-right:2px dashed #FFCEF7;
border-top:2px dashed #FFCEF7;
border-bottom:2px dashed #FFCEF7;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
color:#555;
}
blockquote:hover{
background: none;
border-left:2px dashed #FFCEF7;
border-right:20px solid #FFCEF7;
color:#555;
}
i {
text-decoration:none;
color: #000;
}
u {
text-decoration:none;
color:#000;
padding: 3px;
line-height: 10px;
border-bottom: 2px solid #FFABC6;
-webkit-transition: 0.5s;
}
u:hover {
border-bottom: 6px solid transparent;
-webkit-transition: 0.5s;
}
b {
color: #FF6798;
font-weight: bold;
}
strike {
text-decoration: none;
color:#000;
-webkit-transition: .5s;
}
- Lalu, di paling paling paling bawah, tempel kode ini:
<style>
.hyosung{
width:100%;
background:url(background latar navigation);
border-bottom:5px solid #FF6BC6;
position:fixed;
top:0px;
left:0px;
box-shadow:0 0 6px #FF6BC6;
text-align:center;
padding:10px;}
a.jieun{
background:#FDD2F3;
border-bottom:5px solid #FF6BC6;
text-decoration:none;
color:#000;
padding:5px;
font:11px short stack;
margin-left:5px;
margin-right:5px;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
display:inline-block;
width:60px;}
a.jieun:hover{
border-bottom:5px solid #FF00DE;
background:#FCCDF5;
color:#fff;
</style>
</style>
<center>
<center>
<center><br>
<div style="background: #FFFFFF;"/>
<br>
<div class="hyosung">Sudah? Tempel kode ini dibawah semua kode!
<a class="jieun" onClick="document.getElementById('entry').innerHTML=document.getElementById('journal').innerHTML" >Diary</a>
<a class="jieun" onClick="document.getElementById('entry').innerHTML=document.getElementById('about').innerHTML" >Owner</a>
<a class="jieun" onClick="document.getElementById('entry').innerHTML=document.getElementById('links').innerHTML" >Friends</a>
<a class="jieun" onClick="document.getElementById('entry').innerHTML=document.getElementById('tutobies').innerHTML" >Affies</a>
<a class="jieun" href="<$NewerPosts$>">Future</a>
<a class="jieun" href="<$OlderPosts$>">Past</a>
<a class="jieun" href="http://www.blogger.com/follow-blog.g?blogID=<$BlogID$>">Join Site</a></div></div>
</head>
</head>
<body oncontextmenu='return false;'>
<br>
<table style="font-size: 11px; color: #FF4EE8; line-height: 17px; background:transparent;border-top: 32px solid MistyRose; border-left: 8px solid MistyRose; border-right: 8px solid MistyRose; border-bottom: 32px solid MistyRose; background:#fff; border-radius:10px;" width="899" border="0" align="center" cellspacing="5">Yang tulisannya judul sidebar : judul sidebar, cth owner, url gambar sidebar, tempel dengan url gambar yang kamu mau, isi sidebar, tempelkan tulisan singkat yang kamu mau! Yang wana merah ganti dengan url blogmu, yang orange, ganti dengan namamu..
<tbody><tr>
<td valign="top" style="line-height:16px; letter-font-size:11px; width:120px; padding-right:0px;">
<div class="tit">judul sidebar</div><br>
<center><img height="142" src="url image sidebar" width="230" /></center></div><br>
<center>isi sidebar</center>
<br></div></div>
<br></div>
</div></div>
<div class="separator" style="clear: both; text-align: center;">
<div class="tit">judul sidebar</div><br>
<center><img height="142" src="url image sidebar" width="230" /></center></div>
<center>isi sidebar<center>
<br>
<div class="tit">Big Clap</div><br>
<center>Template : <a href="http://litbloggie.blogspot.com/">Jesslyn</a>.<br>
<center>Codes : <a href="http://nafaraisya.blogspot.com/">Zahra</a><br>
</div><br>
<center>Owner : <a href="Url Blog Kamu">Nama Kamu</a><br>
</div><br>
- Kemudian tempel kode ini!
<td valign="top" style="width:630px; padding-left:5px; border-left:1px solid #f0f0f0; padding-right:7px; padding-left:12px;">Credit : Jesslyn
<div id="entry">
<blogger><div class="tit"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<br><$BlogItemBody$></br>
<div class="footer">Written by NAMA KAMU at <$BlogItemDateTime$> <b style="background-color: white; color: #ffb3c4; font-family: verdana, tahoma, sans-serif; font-size: 12px; font-weight: bold; text-align: -webkit-center;">?</b> <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comment(s)</a></BlogItemCommentsEnabled></div>
</blogger>
</div>
</td></tr></tbody>
</table>
<div id="about" style="display: none;">
<div class="tit">About Owner</div><br>
<center><img src="url gambar yang kamu mau" width="330" height="320"></center><br>
<center>ganti dengan biodatamu..</center>
<div id="diary" style="display: none;">
<blogger><div class="tit"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<br><$BlogItemBody$></br>
<div class="footer">Written by Nama Kamu at <$BlogItemDateTime$> <b style="background-color: white; color: #ffb3c4; font-family: verdana, tahoma, sans-serif; font-size: 12px; font-weight: bold; text-align: -webkit-center;">?</b> <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> jesslyn</a></BlogItemCommentsEnabled></div>
</blogger>
</div>
<div id="links" style="display: none;">
<div class="tit">friends</div><br>
<center><img src="Url Gambar" width="330" height="350"></center><br>
<center>
<a class="linkies" href="http://www.blogger.com">people</a> |
<a class="linkies" href="http://www.blogger.com">people</a> |
<a class="linkies" href="http://www.blogger.com">people</a> |
<a class="linkies" href="http://www.blogger.com">people</a> |
<a class="linkies" href="http://www.blogger.com">people</a> |
<a class="linkies" href="http://www.blogger.com">people</a><br>
</div>
<div id="tutobies" style="display: none;">
<div class="tit">tutorial and freebies</div><br>
<center><img src="Url Gambar" width="330" height="280"></center><br>
<center style="text-align: left;"><u>Tutorials</u></center><br>
<li> tutorial
<li> tutorial<br><br><br>
<center style="text-align: left;"><u>Freebies</u></center><br>
<li> freebies
<li> freebies<br><br>
</div>
</body>
</html>
