Cara buat blogskin
Kamis, 16 Mei 2013 | 0 comments
Pertama, kamu harus ubah ke template classic. dashboard >> template >> revert to classic template.
Select semua kode yang ada di kotak itu, lalu hapus.
Paste kode ini di kotak itu,
<html>
<head>
<center><img src="URL IMAGE HEADER" /></center>
<title>TITLE BLOG</title>
- dibawah kode ini, kalian boleh masukin kode-kode widget seperti follow dan dashboard button.
- Lalu, copy kode ini dibawah kode tadi
<style type="text/css">hijau : kode scrollbar
#navbar-iframe {display: none;}
body {
background: url(URL BACKGROUND);
font-family: Century Gothic, Tahoma, Calibri;
background-attachment:fixed;
cursor: url(http://i.imgur.com/ZOrzC.png), auto;
}
::-webkit-scrollbar {
height:12px;
width: 8px;
background: #FFF;
}
::-webkit-scrollbar-thumb {
background-color: #FF0000;
}
::-moz-selection {
background: #000;
color:#FFF;
}
::selection {
background: #000;
color:#FFF;
}
a:link, a:visited {
color:#DF0101;
text-decoration:none;
}
a:hover {
color: #a4a4a4;
}
.content {
background:#ffffff;
font-size: 11px;
padding:14px;
width:600px;
border-radius:10px;
text-align:justify;
}
.main-title {
text-align: right;
color:#DF0101;
font-size:14px;
padding:3px;
border-bottom:1px solid #A4A4A4;
letter-spacing: 0.1cm;
}
</style>
kuning: kode highlight
fuchsia: Code main title
coklat:lebar body blog
Nah, ini untuk tulisan bold,italic,strike dan blockquote.
paste ini diatas kode </style>
i {merah: tukar dengan apa yang patut.
text-style: italic;
color: #000000;
}
u {
text-underline: underline;
border-bottom: 2px solid #ff0000;
}
b {
font-weight: bold;
color: #FA5858;
}
blockquote {
background-color: #E6E6E6;
border-left: 18px solid #FF0000;
padding: 2px;
}
s {
text-style: line-through;
color: #000;
}
- Paste kode ini di bawah </style>
<body oncontextmenu='return false;'><br>
<table style="line-height: 17px;" width="600" border="0" align="center" cellspacing="5">
<tbody><tr>
<td valign="top" style="width:600px; padding:10px; border-radius:10px; background:#ffffff; font-size:11px;">
<div id="content">
<blogger><div class="main-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="sec-title"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> Atashinci</a></BlogItemCommentsEnabled></div>
<$blogitembody$></blogger><br>
<center><OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div>
</div>
</td>
Ungu: nama untuk 'comment'
Dan sekarang buat navigation & page.
Paste kode ini diatas </style>
.navigator {merah: edit sesuka hatimu :D
position:fixed;
top:205px;
left:321px;
font-size:10px;
text-align:center;
}
.navi {
padding-left:5px;
padding-right:5px;
color:#FF0000;
background:#FF0000;
line-height: 13px;
display: block;
text-transform: lowercase;
-webkit-transition:0.5s;
transition:0.5s;
margin-bottom:5px;
cursor: crosshair;
padding:5px 0px 0px 30px;
border-top-left-radius: 15px;
border-bottom-left-radius: 20px;
}
.navi:hover, .navi_active {
background:#FF0000;
color:#FFF;
-webkit-transition:0.5s;
transition:0.5s;
}
Ok, paste kode ini di bawah </style>
<center><div class="navigator">
<a class="navi" onClick="document.getElementById('content').innerHTML=document.getElementById('me').innerHTML">About</a>
<a class="navi" onClick="document.getElementById('content').innerHTML=document.getElementById('love').innerHTML">Links?</a>
<a class="navi" onClick="document.getElementById('content').innerHTML=document.getElementById('you').innerHTML">Entries</a>
<span class="navi" onclick="window.open('http://www.blogger.com/follow-blog.g?blogID=BLOG ID'); return false;">Follow</span>
</div>
<br>
<div id="me" style="display:none;">
<div class="main-title">Meet the Owner!</div><br>
<center><img src="URL GAMBAR"/></center><br>
Letakin biodatamu
<br>
<div class="main-title">My wishlist</div><br>
<form name=myform>
<input type="checkbox" name="mybox" value="satu" checked />wishlist <br />
<input type="checkbox" name="mybox" value="satu" checked />wishlist <br />
<input type="checkbox" name="mybox" value="satu" disabaled />wishlist <br />
<input type="checkbox" name="mybox" value="satu" checked />wishlist <br />
</form>
</div>
<div id="love" style="display:none;">
<div class="main-title">Tagboard</div><br>
put your cbox/shoutbox here. Tagboard width must below: 550.<br>
<div class="main-title">Affies&Links</div><br>
<a href="blogger.com"/>Friends</a> | <a href="blogger.com"/>Friends</a> | <a href="blogger.com"/>Friends</a> | <a href="blogger.com"/>Friends</a> | <a href="blogger.com"/>Friends</a> | <a href="blogger.com"/>Friends</a><br>
<div class="main-title">Credits</div><br
---credits section korang---
</div>
<div id="you" style="display:none;">
<blogger><div class="main-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="sec-title"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div>
<$blogitembody$></blogger><br>
<center><OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div>
Selesai deh..
Kalian boleh tambahin kode kode lain, oce?
Kalau ragu, silahkan komentar. :)
Credit to: Eniq
Label: tutorial
