daebaek-ii
× × ×
{
}

hello humans! bbh, khc, kth, skj, jjk, pjm, nwh ruin my life.
about home affiliates stuff tagboard flavors follow dashboard



Shared some header~
Oct 21, 2012 // 0 comments
Hello~ Aku baru post banyak 10 header. Ini penampakannya..
 
Lihat lebih lanjut...

Oh, aku baru aja nge-cek cbox, ada yang nanya gimana cara aku buat template kayak begini. Namanya Zara. Ini dia 'buktinya'

Ok, sekarang aku kasih deh tips-nya -.-" gyahaha

Pertamanya, aku bikin blog itu biasa aja, fancy banget banget banget. Aku pakai template desigener. Ilmu-ku mulai berkembang tentang blog itu mulai aku kelas 5. Hmm.. hap, hap, hap. Ok, selesai bincang-bincangnya, akan kubuat tutorial buat skin blog yang penampakannya seperti ini.. (skin yang baru ku submit).


Caranya gampang, tinggal ikuti step aku berikut ini yaa~

step 1.
buka template, dan hapus semua kode yang ada di dalam box itu.
Sudah? copy kode ini dan paste di box itu..
<html><head>
<title>TITLE</title>
<link rel="shortcut icon" href="URL FAVICON" />
--------------------- MULAI BAGIAN STYLE BLOG -----------------------

setelah itu, copy kode ini, dan paste dibawah kode di atas..

<style>
body{
font-family: trebuchet ms;
color: #999;
font-size: 11px;
background:url(BACKGROUND URL);
background-attachment:fixed;}
#main{
position:absolute;
top: 280px;
padding:10px;
width: 700px;
right:300px;
background-color:#fff;
}
#sidebar{
position:absolute;
top: 0px;
padding:10px;
width: 700px;
right:300px;
background-color:#fff;
border-left:1px solid #eee;}
Sudah? sekarang bagian title, dan blockquote. Copy kode dibawah ini dan paste di bawah kode di atas.


h2 {
font:8px lucida console;
text-transform:uppercase;
letter-spacing:1px;
border-top:1px dashed #E1D8F1;
border-bottom:1px dashed #E1D8F1;
padding:2px;margin-bottom:7px;}
h1 {
font: 28px georgia;
color: #999;}
blockquote{
background: url(URL BACKGROUND);
border: 1px dashed #c6a49a;
padding: 5px;}
Sekarang, copy kode ini, dan paste di bawah kode di atas. Kode dibawah ini adalah kode untuk link, link hover, dan scrollbar.
a:link, a:visited{
-webkit-transition:.5s;
color:#c6a49a;
text-decoration: none;}
a:hover{
color:#99bba2;
-webkit-transition:.5s; }
::-webkit-scrollbar {
height: 5px;
width: 5px;
background:url(URL BACKGROUND SCROLLBAR);}
::-webkit-scrollbar-thumb {
background-color: #F8BABA;
-moz-border-radius: 10px;
border-radius: 10px;
Sekarang, bagian navigation, dan highlight~ copy kode ini, dan paste dibawah kode diatas.


a.navi {
cursor:default;
background:#FFA8A3;
opacity:1;
padding: 5px;
display: inline-block;
text-transform: uppercase;
font: 6pt trebuchet ms;
letter-spacing: 0px;
width: 40px;
text-align:center;
margin: 0px 2px 3px;
color: #fff; border: 1px solid #eee; opacity:.8
}
::-moz-selection {background:#B8DFC2;
color:#fff;}
::selection {background:#B8DFC2;color:#fff;}


Kode di bawah ini, untuk underline dan image hover.
u {
text-decoration:none;
color:#777;
padding: 0px;
line-height: 10px;
border-bottom: 2px solid #ef8680;
-webkit-transition: 0.5s;
}
u:hover {
border-bottom: 4px solid transparent;
-webkit-transition: 0.5s;
}
img, a img { border: 0px;  opacity: 100; filter: alpha(opacity=100); -o-transition: opacity 1.5s linear; -webkit-transition: opacity .5s linear; -moz-transition: opacity 1.5s linear; }
img:hover, a:hover img {opacity: .50; filter: alpha(opacity=100); -o-transition: opacity 1s linear; -webkit-transition: opacity .8s linear; -moz-transition: opacity 1.5s linear; }
</style>

--------------------- SELESAI BAGIAN STYLE BLOG --------------------- 

Waktunya untuk bagian body~ Copy kode ini dan paste dibawah kode </style>
<body>
<div id="main"><Blogger>
<h1><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></h1>
<h2><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> || <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> (+)</a></BlogItemCommentsEnabled></h2></br>
<$BlogItemBody$>
</Blogger><div style="float:left"><a class="post" href="<$NewerPosts$>"title="newer" target="_blank"><font color=#ccc font size=5px>←</font></a></div><div style="float:right"><a class="post" href="<$OlderPosts$>"title="older" target="_blank"><font color=#ccc font size=5px>→</font></a></div></div>
Sudah? sekarang copy kode di bawah ini, dan paste di bawah kode di atas.
<div id="sidebar">
<center><img border="0" src="URL HEADER" /><br>
<a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" >about</a>
<a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('entries').innerHTML" >entries</a>
<a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('affiliates').innerHTML" >affiliates</a> <a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('stuff').innerHTML" >stuff</a> <a class="navi" href="http://facebook.com">facebook</a> <a class="navi" href="http://twitter.com">twitter</a> <a class="navi" href="http://tumblr.com">tumblr</a> <a class="navi" href="http://blogskins.com">blogskin</a><br></center>
</div> 
Bagian yang terakhir~ yey! Copy kode dibawah ini dan paste dibawah kode yang ada diatas. Dibawah ini adalah kode untuk bagian-bagian about, affiliates, stuff, dan entries.
<div id="about" style="display: none;">
<h1>short biodata</h1></br>
Name: <br />
Korean Name: <br />
Japanese Name: <br />
Born on: <br />
Age:<br />
Blood type:<br />
Biases:<br />
Religion: <br />
Nationality:<br />
Hometown:<br/>
School: </div>

<div id="entries" style="display: none;">
<blogger>
<h1><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></h1>
<h2><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> || <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> (+)</a></BlogItemCommentsEnabled></h2></br>
<$BlogItemBody$>
</Blogger>
<div style="float:left"><a class="post" href="<$NewerPosts$>"title="newer" target="_blank"><font color=#ccc font size=5px>←</font></a></div><div style="float:right"><a class="post" href="<$OlderPosts$>"title="older" target="_blank"><font color=#ccc font size=5px>→</font></a></div></div>
</div>
<div id="affiliates" style="display: none;">
<h1>affiliates</h1></br>
<center>
<a class="navi" href="/">next</a>
<a class="navi" href="/">next</a>
<a class="navi" href="/">next</a>
<a class="navi" href="/">next</a>
<a class="navi" href="/">next</a>
<a class="navi" href="/">next</a>
<a class="navi" href="/">next</a>
<a class="navi" href="/">next</a>
<a class="navi" href="/">next</a>
<a class="navi" href="/">next</a><br>
<a class="navi" href="/">next</a>
<a class="navi" href="/">next</a>
<a class="navi" href="/">next</a>
<a class="navi" href="/">next</a>
<a class="navi" href="/">next</a>
<a class="navi" href="/">next</a>
<a class="navi" href="/">next</a>
<a class="navi" href="/">next</a>
<a class="navi" href="/">next</a><br>
</center>
</br>
<h1>tell me a secret~</h1>
<center><blockquote>Put your cbox here.</blockquote></center>
<h1>credits</h1>
Layout made by <a href="http://lilalilaa.blogspot.com">Lilaa</a><div>
<div id="stuff" style="display: none;">
<center><blockquote>put your tuto and freebies here. Or, you can change this area into your bias list room, etc.</blockquote>
</div></div>
</body></html> 
------------------------------ SELESAI ------------------------------ 

Ok, kalau kalian terlalu males untuk copy kode diatas itu, aku udah kusediain kode skinnya.. ini..
DOWNLOAD

Hmm.. that's all from me, bye~