Tutorial+Freebies: Cara Membuat Blogskins (dengan kodenya)

Haii!! baca yuk! kali ini, buat blogskins dengan kode. Yuk simak!

First, ke Dashboard kalian=>klik Revert to classic template/kembali ke template klasik.=>klik ctrl+A delete semua kode.

Second, kalian copast kode dibawah ini.
<html>
<head>
<center><img src="URL HEADER" /></center>
<title>JUDUL BLOG</title>
(Ket: Pink muda: Image background title, Pink agak muda: Judul blog kalian.)

Lalu, copast kode ini, dibawah tulisan: <html>
<div style="display:scroll; position:absolute; top:0px; right:2px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=BLOG ID" target="_blank" rel="nofollow" title="Follow" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL GAMBAR TOMBOL FOLLOW" /></a><br /><div style="display:scroll; position:absolute; top:0px; right:185px;"><a class="linkopacity" href="http://blogger.com/home" rel="nofollow" title="Dashboard" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL GAMBAR TOMBOL DASHBOARD" /></a></div></div>
(Ket: Pink muda: Blog ID kamu, Pink agak muda: URL gambar tombol follownya, Pink agak sedikit tua: URL gambar tombol Dashboard nya.)

Terus, copast kode dibawah yang kode yang tadi. Usahakan, di spasi untuk jarakin.
<style type="text/css">
#navbar-iframe {display: none;}body {
background: url(URL BACKGROUND);
background-attachment:fixed;
font-family: arial;
font-size: 11px;
}
a:link, a:visited {
color:#000000;
text-decoration:none;
}
a:hover {
border-bottom:1px solid #87689;
}
</style>
<body><br>
(Ket: Pink muda: URL Background kalian, Pink agak muda: kayaknya, warna link nya, Pink agak sedikit tua: warna text.)

Copast kode ini, diatas tulisan: </style>
.main {
background:#ffffff;
color:#666666;
padding:14px;
width:500px;
border-radius:10px;
text-align:justify;
}
.sidebar {
background: #ffffff;
color: #666666;
padding: 8px;
width: 240px;
border-radius: 10px;
text-align: justify;
}
.h1 {
color:#FF9FCC;
font-size:18px;
padding:3px;
border-bottom:1px solid #c0c0c0;
}
.h2 {
font-style:italic;
font-size:10px;
margin-bottom:2em;
}
(Ket:

ABC = Warna Font Di Blog
ABC = Panjang Main Blog
ABC = Panjang Sidebar
ABC = Warna Dont Post Title)

Copast kode ini, di bawah tulisan: <body>

(Ket: Pink muda: panjang blog+campuran sidebar.)

Copast kode ini, di paling bawah kode kode diatas.

<br>

Lalu, copast lagi dibawah tulisan: <br>

<td valign="top" width:550px;">
<div class="main">
<blogger><div class="h1"><BlogItemTitle><$BlogItemTitlegt;</BlogItemTitle></div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDategt;</BlogDateHeader> | <$BlogItemDateTimegt; | <a href="<$BlogItemCommentCreategt;"<$BlogItemCommentFormOnClickgt;><$BlogItemCommentCountgt;comments</a></BlogItemCommentsEnabled></div>
<$blogitembodygt;</blogger><br>
<center><OlderPosts><a href=<$OlderPostsgt;>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPostsgt;>Newer Post</a></NewerPosts></center></div>
</div>
</td>

Copast kode ini, di bawah kode atas okeh?

<td valign="top" width="250px">
<div class="sidebar">
<div class="h1">TITLE SIDEBAR</div>
ISI SIDEBAR</div>
<br>

Mau tambah sidebar lagi? oke!

<td valign="top" width="250px">
<div class="sidebar">
<div class="h1">TITLE SIDEBAR</div>
ISI SIDEBAR</div>
<br>

(Ket: Pink muda: Judul sidebar, Pink agak muda: isi sidebarnya.)

Oke, akhiri semua kode tadi, dengan kode:

</table></body></head></html>

Tutorial+Freebies

Jumat, 31 Januari 2014

Cara Membuat Blogskins (dengan kodenya)

1 komentar: