Tutorial : Cara Membuat Blogskin
Selasa, 23 April 2013 | 20.49 | 0 Atashinci
Ada yang menarik nih, kita lihat ya!
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,
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, kalau gak bisa add Facebook aku : Pinkan Sii Lily Evans untuk bertanya.
Label: Tutorial
