Make Over Your Blog
السلام عليكم ورحمۃﷲ وبركاته
Okay, saya mau bantu adik saya nih, Rifa
I think this template is good for using to designer template
1. Ubah dulu template klasik kamu ke template designer,
2. Udah? Kosongkan atau delete kode-kode di edit html itu. Gantikan dengan template yang kamu inginkan.
Nih contohnya,
Nih kodenya,
<html>Semua nya udah tersedia, tinggal diedit dikit lagi sama kamu, selesai deh!
<head>
<title>//02</title>
<style type="text/css">
#navbar-iframe{display: none;}
::-webkit-scrollbar-thumb:vertical {background-color:#fff;width:10px;}
::-webkit-scrollbar {height:0px;width:6px;background-color:#f0f0f0;}
body {
line-height: 17px;
text-align:justify;
font-size: 11px;
font-family: Lucida Sans Unicode;
color: #999999;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV6JJtZBsdLQWtc15Shne_bcMxdIw3MfNIYxqGubRWsVR6HOJXWOIb81WIbLN8Mmrnp10S6bFDx5Q31QvNR0ShjInroToZ-WD8XUvbwxXVRZzmJ61r15vhDKpJzI5qXaGoR2sytM2RVogR/s1600/floral+2+grey.jpg);
cursor: url(URL CURSOR), progress !important;
}
#content {
padding: 1px 20px 20px 20px;
width: 900px;
margin: auto;
}
a:link, a:active, a:visited {
cursor: url(URL CURSOR), progress !important;
color:#aaa; text-decoration:none;
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
transition:all 0.3s ease-out}
a:hover {
color: #696969;
text-shadow: 1px 0 .5px #a2cddf, -0px 0 .5px #daaf93;}
blockquote {border-radius:5px;border-bottom:1px dashed #e1e1e1; border-right:1px dashed #e1e1e1;border-top:1px dashed lightgrey ;border-left:3px dashed lightgrey;-webkit-transition: 2.5s;-moz-transition: 2.5s;box-shadow: inset 0px 0 0px 0 #fff;padding:6px;background-position:center right;background-repeat:no-repeat;}
.sidebar {
position: fixed;
margin-top: 100px;
margin-left: -190px;
width: 110px;
text-align: justify;
background: #FBFBFB;
padding: 10px;
font-size:10px;
}
#title {
margin-bottom: 5px;
text-align: center;
color: #000;
background: #F0F0F0;
padding: 5px;
letter-spacing: 1px;
}
#links {
text-align: center;
margin-top: 5px;
}
iframe#tumblr_controls {
position: fixed !important;
z-index: 9999;
}
#icy {
margin: 11px auto;
padding: 11px;
width: 500px;
background: #FFF;
border:8px solid ;
border-image: url(http://static.tumblr.com/bc7znss/XIMm1x07w/tumblr_ls0w5txuft1r3vazto12_r1_100.png) 10% repeat;
}
@font-face{font-family:candystr;src:url('http://static.tumblr.com/eq1rpir/i3Wm518mw/candystr.ttf')}
.f1 {
color: grey;
font-family: candystr;
font-size:15px;
line-height:17px;
text-align: left;
background: url(http://i.imgur.com/r9lmj.png);
text-transform: uppercase;
letter-spacing: 1px;
}
.f2 {
font-family: trebuchet ms;
font-size:9px;
letter-spacing: 1px;
line-height:16px;
color: #8E8E8E;
text-align: left;
background: #fff;
margin-bottom: 20px;
}
.f3 {
font-family: trebuchet ms;
font-size:9px;
letter-spacing: 1px;
color: #8E8E8E;
text-align: left;
background: #fff;
margin-bottom: 0px;
}
#sidelinks{
position:fixed;
margin-left:-10px;
margin-top: 15px;
}
#square{
position:fixed;
top:10px;
left:10px;
width:30px;
height:30px;
line-height:10px;
overflow:hidden;
background-color:#ffffff;
box-shadow: 2px 3px 10px 0px #777777;
}
#gif{
height:30px;
width:60px;
margin-left:-30px;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#gif:hover{
margin-left:2px;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#player{
height:30px;
padding:5px;
width:13px;
margin-left:2px;
overflow:hidden;
position:absolute;
}
#permabar
{width:400px;
overflow:hidden;
height:autolength;
padding: 5px;
font-family:helvetica;
font-size:10px;
color:#ddd6d6;
background-color:#ffffff;
}
.perm{
font-size:10px;
height:auto;
}
img {
border:5px solid #fff;
box-shadow:0px 0px 2px #333;
-moz-transition:1500ms;
-webkit-transition:1500ms;
}
img:hover {
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-webkit-transition:1500ms;
-moz-transition:1500ms;
}
#nav {
margin-top:3px;
margin-left:16px;
height:10px;
width:110px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;}
.box:hover #nav {
margin-left:35px;}
#nav .button {
font:8px arial;
text-align:center;
text-transform:uppercase;
width:20px;
height:20px;
margin-right:5px;
float:left;
overflow:hidden;
display:inline-block;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;}
#nav .button:hover{
height:75px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
padding:10px 0px 10px 0px;}
#en {
background:#525252;}
#to {
background:#D8D8D8;}
#tre {
background:#fff;}
#fire {
background:#919999;}
#colour-bar {
width:100%;
height:10px;
overflow:hidden;
}
.colour-part {
width:20%;
height:100%;
float:left;
}
#a, #b, #c, #d, #e, #f {
width: 15px;
height: 15px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
float: left;
margin-right: 10px;
margin-bottom: 5px;
}
#dhtmltooltip {
position: absolute;
padding: 3px;
text-align:center;
font-family:consolas;
font-size: 9px;
text-transform: uppercase;
color:#020201;
visibility: hidden;
z-index: 1000; }
.ti {
background-color:#fcfd58;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;}
.no {
background-color:#fd4c6e;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.re {
background-color:#3a8dfa;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ti:hover, .re:hover, .no:hover {
background-color: #ffffff;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
@font-face{font-family:sketchrockwell;src:url('http://static.tumblr.com/eq1rpir/21bm54axi/sketchrockwell-bold.ttf')}
#tittle3 {
text-align: center;
margin-top:20px;
font-family: sketchrockwell;
text-decoration:none;
font-size:60px;}
.raejun{
width:96px;
padding:2px;
margin-top:5px;
box-shadow:2px 2px 4px #DFDFDF;
background:#f7f7f7;
font:8px tt;
text-align:center;
Text-decoration:none;
color:#FF8888;
text-transform:uppercase;
display:block;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
border-left:0px solid #ccc;
}
.raejun:hover{
width:66px;
border-left:30px solid #ccc;
}
@font-face {
font-family:tt !important;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
}
</style>
<div style=" position:fixed; left:125px; top:0px; padding:2px; opacity:0.2;background:#B3B3B3; height:1000px; display:block; width:30px" /></div>
</div>
<div style=" position:absolute; left:100px; top:100px;">
<img border="0" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1LbCdI_0DoFyL6JNcrV8Ru6TcVS82mKGfn8BnQMfwfFKe07O-8Q" style="border:1px solid #D1D1D1; padding:3px; background: url(http://i.imgur.com/v8w4i.png);" width="70" /></div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQV3JKLMYCcUGQ1p1ho5RfVNLQBx2-DjamLEUwzEu_mnyjBQGfryw" style="border:1px solid #D1D1D1; padding:3px; background: url(http://i.imgur.com/jgK5w.png); position:absolute; left:100px; top:230px;" width="70" />
<img src="http://data.whicdn.com/images/13165339/tumblr_l90g41ZyED1qcsgcuo1_500_large.jpg" style="border:1px solid #D1D1D1; padding:3px; background: url(http://i.imgur.com/KtT7p.png); position:absolute; left:100px; top:360px;" width="70" />
<div style=" position:fixed; left:250px; top:0px; padding:2px; opacity:0.2;background:#CCCCCC; height:1000px; display:block; width:30px" /></div>
</div>
<div style=" position:absolute; left:230px; top:180px;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4gh0a7EMR-aHTEgb2RYHXmxFS0gRQSqhd1D-D1sg4kVfLfl24gYXdvjmflk6P3cdoRP7D-_qEW82xUGimjzi0SfRyz55nI6Km6VnNVol2hEktF8VeM2KBgmox5ViJJNWxOEp6REjWFA/s320/sunny-snsd-23.jpg" style="border:1px solid #D1D1D1; padding:3px; background: url(http://i.imgur.com/KtT7p.png);" width="70" /></div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR74GKW-OZuW55jxuBrdqwogpSMioAkUOwABRowtRUoRmetm6QN" style="border:1px solid #D1D1D1; padding:3px; background: url(http://i.imgur.com/v8w4i.png); position:absolute; left:230px; top:310px;" width="70" />
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQjO7O2SaylYw1K9AAuYYeLzG57jOIWgglg7gvU2PqFDLvmbNJ7" style="border:1px solid #D1D1D1; padding:3px; background: url(http://i.imgur.com/B9gqI.png); position:absolute; left:230px; top:440px;" width="70" />
<center>
<div id="tittle3"><span style="color:#aaa">Why</span><span style="color:#ccc;">?</span> <span style="color:#aaa;">So Serious</span></h1></div>
</center>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type='text/javascript' language='Javascript'>
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (1=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="http://i.imgur.com/Gfv7w.png"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ center of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
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:"Fly High !"})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
<body>
<div id="dhtmltooltip"></div>
<script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var offsetxpoint=10 //Customize x offset of tooltip
var offsetypoint=-20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}
function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
</script>
<div style="background:#f7f7f7;color:#fff; position:fixed; top:0px;right:220px;width:10px;height:100px; box-shadow:2px 2px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;">
</div>
<div style="background:#f7f7f7;color:#fff; position:fixed; top:0px;right:270px;width:10px;height:100px; box-shadow:2px 2px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;">
</div>
<div style="position:fixed; top:100px;right:200px;width:100px; color:#aaa;">
<div style="background:url(http://i.imgur.com/XxFg8hV.jpg);color:#fff;width:100px; box-shadow:2px 2px 4px #bbb;text-align:center; font-size:12px; text-transform:uppercase;">
Welcome</div>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRorkzkwfP5ukG_HE5BNKsq72ioZNRlwAMUhqyNSIt_rmCBCfu9" style="width:80px;border:10px solid #eee;margin-top:5px;box-shadow:2px 2px 4px #ddd;" >
<a class="raejun" href="LINK HERE"title="Home"> ♠ </a>
<a class="raejun" href="LINK HERE"title="About"> ☯ </a>
<a class="raejun" href="LINK HERE"title="Stuff"> ✉ </a>
<a class="raejun" href="LINK HERE"title="Affies"> ∞ </a>
<a class="raejun" href="http://www.blogger.com/follow-blog.g?blogID=BLOGID" title="follow"> ✚ </a>
<div style="float: left;"title="Older"><a href=<$OlderPosts$>>⇦</a></OlderPosts></div>
<div style="float: right;"title="Newer"><a href=<$NewerPosts$>>⇨</a></NewerPosts></div>
</div>
<div id="icy">
<center><b></b></center>
<center>KODE CHATBOX (AMBIL YANG BAGIAN KEDUA SAJA)
</div>
</div>
</center>
<center>
<div style="margin-top:-11px;margin-bottom:-15px;background:none;border-left:30px solid #cccccc;border-right:30px solid #cccccc;width:400px;height:20px;display:">
</div>
<Blogger>
<div id="icy">
<div class="f1"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="f2"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> • <$BlogItemDateTime$> • <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>> <$BlogItemCommentCount$> comment(s)</span></a></BlogItemCommentsEnabled> </div><$BlogItemBody$>
<center><br><MainPage>
<BlogItemCommentsEnabled>
<BlogItemCommentsEnabled><a href="<$BlogItemCommentCreate$>"
</BlogItemCommentsEnabled></BlogItemCommentsEnabled>
</MainPage>
<br>
<div style="text-align:right;" ">
</div>
</Blogger>
</body>
<div class="f3"><center>Template by <a href="http://www.blogskins.com/me/nurah">Nurah</a>. Design by <a href="http://auliasuciwardinaa.blogspot.com/">Auliaa</a>. Tuto from <a href="http://hafizzulkafly.blogspot.com/">S</a><a href="http://nurulatiqahjaidin.blogspot.com/">N</a><a href="http://wanaseoby.blogspot.com/">S</a><a href="http://chocollyheart.blogspot.com/">D</a>. Colour from <a href="http://html-color-codes.info/">HTML</a> </center></center>
</html>
Wassalamu'alaikum ^^
Full Name: Aulia Suci Wardina 
