Cara Buat Blogskins Sendiri

Aku buka ex banner lho!! yang mau bannernya dipasang, bilang di cbox yaa, atau di comment box laman linkies.. bannerku ada di laman linkies.

Request menumpuk nihh, jadi harus diselesaikan, karena janji adalah hutang. oke deh,karena yang request pertama Neira, maka neira yang pertama di buat. Ini bukan cuma untuk Neira, tapi untuk SEMUA.
Cara buat Blogskins Sendiri
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>
<title>Judul blogskins kamu</title>
<link rel="shortcut icon" href="icon blogskins kamu" />
<style type="text/css">
#navbar-iframe {
display: none;
}
merah: url header
hijau: judul blogskins
kuning: url icon

  • Di paling paling atas pastekan kode ini:
<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- &#169; 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'>
 kode warna merah edit sendiri yaa.. kalau mau pakai: http://litbloggie.blogspot.com/2015/03/back-to-top-button-own-made.html.

  • 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 {
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>
kalian edit yaa.. sudah ada keterangannya.

  • cari kode: </style>, pastekan kode dibawah ini diatas kode </style> 
blockquote{
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;
}
Nah, edit sendiri yaa...

  • Lalu, di paling paling paling bawah, pastekan 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>
edit yaa.. sudah?? Pastekan kode ini dibawah semua kode diatas..
<div class="hyosung">
<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>
sudah kan? pastekan kode ini dibawah semua kode:
 <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">
<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>
 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..

  • 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="links" 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="tutobies" 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>
selesai.. edit sendiri ya.. sudah kan?? na

9 komentar:

  1. Jesslyn, kok waktu aku bikin, terus aku cek navigasi-nya satu-satu. kok yangbisa dibuka cuma yang 'About'?

    BalasHapus
  2. Hai jessylin!saat aku coba buat skins udah bisa..Nah...'home' nya koq enggak bisa dibuka?yang lain koq bisa?

    BalasHapus
    Balasan
    1. kalo ini aku ga bisa bantu, ga tau, hehe.. maaf yaa

      Hapus
  3. Iya, kak, yang bisa di buka, kok, cuman stuff sama follo

    BalasHapus
  4. Balasan
    1. mungkin ada kesalahan kode, saya sudah tahu cara membetulkannya

      Hapus