Cara membuat Blogskins
Minggu, 05 April 2015 | 03.59 | 2 Friends
Cara buat Blogskins Sendiri
Credit : Jesslyn
saran: kalau mau buat sendiri, mendingan di blog percobaan saja yaaa.. karena kalau langsung di blog, lalu salah kode, kemudian error..wwaduuuhhh... oke, coba sekarang yuk!!
- Copy dan pastekan kode ini:
<center><img class="header" src="URL HEADER KAMU" /></center>merah: url header
<title>Judul blogskins kamu</title>
<link rel="shortcut icon" href="icon blogskins kamu" />
<style type="text/css">
#navbar-iframe {
display: none;
}
hijau: judul blogskins
kuning: url icon
- Di paling paling atas pastekan kode ini:
<html>kode warna merah edit sendiri yaa.. kalau mau pakai: http://litbloggie.blogspot.com/2015/03/back-to-top-button-own-made.html.
<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 paling bawah, pastekan kode:
<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 kemauan kalian ya, kan sudah ada tulisannya...
- Lalu, pastekan lagi kode ini:
a:link, a:visited {kalian edit yaa.. sudah ada keterangannya.
color:#FFA4C1;
font-family: Short Stack;
font-size: 12px;
text-decoration:none;
-webkit-transition:1s;
cursor: url(URL CURSOR SETELAH MENYENTUH 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>
- cari kode: </style>, pastekan kode dibawah ini diatas kode </style>
blockquote{Nah, edit sendiri yaa...
background:url(URL BACKGROUND BLOCKQUOTE);
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, pastekan kode ini:
<style>edit yaa.. sudah?? Pastekan kode ini dibawah semua kode diatas..
.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 kan? pastekan kode ini dibawah semua kode:
<a class="jieun" onClick="document.getElementById('entry').innerHTML=document.getElementById('journal').innerHTML" >HOME</a>
<a class="jieun" onClick="document.getElementById('entry').innerHTML=document.getElementById('about').innerHTML" >ABOUT</a>
<a class="jieun" onClick="document.getElementById('entry').innerHTML=document.getElementById('links').innerHTML" >LINKIES</a>
<a class="jieun" onClick="document.getElementById('entry').innerHTML=document.getElementById('tutobies').innerHTML" >STUFF</a>
<a class="jieun" href="<$NewerPosts$>">NEWER</a>
<a class="jieun" href="<$OlderPosts$>">OLDER</a>
<a class="jieun" href="http://www.blogger.com/follow-blog.g?blogID=<$BlogID$>">FOLLOW</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, pastekan dengan url gambar yang kamu mau, isi sidebar, pastekan tulisan singkat yang kamu mau, cth halo, namaku bla bla... 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 pastekan kode ini:
<td valign="top" style="width:630px; padding-left:5px; border-left:1px solid #f0f0f0; padding-right:7px; padding-left:12px;">
<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="link" style="display: none;">
<div class="tit">friends</div><br>
<center><img src="url gambar yang kamu mau" 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="blog" style="display: none;">
<div class="tit">tutorial and freebies</div><br>
<center><img src="url gambar yang kamu mau" 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>
Replace With Your Own Rules