Buat blogskins sendiri 1coloumn+Navi
Sunday, 29 April 2012 • 23:28 • 2 comments

                                         بِسْــــــــــــــــــمِ ﷲِالرَّحْمَنِ الرَّحِيم


Assalammualaikum....
hari ni,,,,,saya nak share tutorial daripada cik Mira tentang cara-cara membuat blogskins sendiri yang
jenis 1coloumn+Navi....
nak belajar tak?nak belajar?

Ok,,sebelum kita buat,,,,kita kena sediakan beberapa 'bahan' dulu...yelah,,,macam buat kek,,
mana boleh kalau takda bahan langsung kan kalau nak buat dyerrr??hehehe....

*Blog Tester (ini penting so,,taklah korang menangis terkangkang-kangkang manatahu tak jadi nanti.hahahaahahaa)
*New tab ==>kode warna






Before we start,,,kena pergi design dulu,,dekat blog tester yang baru buat tu then pergi edit html.
lepastu,,scroll kebawah sekali after that click lah revert to classic template.Nanti akan keluar satu pop-out
window then korang ok-kan aje keh.



Haaa...first step,,
kosongkan medan di dalam kotak html tu...alaaa,,yang selalu korang letak code blogskins tu.
then,copy code bawah ni,,,, boleh guna CTRL+C untuk copy :)



<html>
<head>
<center><img src="URL IMAGE HEADER ANDA" /></center>
<title>TITLE BLOG ANDA</title>


paste kan kode di atas di ruangan kosong tadi.

a.di bawah kode atas ni,,korang boleh letaklah berbagai jenis widget yang hendak diletakkan di
header seperti navbar,follow and dashboard button dan lain-lain.
b.selepas itu,copy kode dibawah ni pula degan menggunakan CTRL+C dan kemudian paste
 di bawah kode tadi tu.


<style type="text/css">
#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>


hijau : kode scrollbar 
kuning: kode highlight
fuchsia: Code main title
coklat:lebar body blog






Ni pulak,untuk tulisan bold,italic,strike dan blockquote.
paste kan code ini di atas kode </style>



i {
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;
}
 merah: boleh ubah mengikut citarasa masing-masing.






c.oke,,selepas itu,copy kode ini lagi.pastekan di bawah kode </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 ganti bagi 'comment' xD








Oke,,sekarang time untuk buat navigation dan page :)

korang tekan CTRL+F atau F3 then cari kode </style>
then,korang paste kode bawah ni, di ATAS/SEBELUM kode </style> tu oke







.navigator {
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;
 }
Yang warna merah tu, boleh edit ikut suka hati korang lah k.. :)
oke,,,sekarang,copy lagi kode bawah ni,dan paste selepas kode </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>

fuchsia: blog id blog awak.ni supaya senang difollow





<div id="me" style="display:none;">
<div class="main-title">Meet the Owner!</div><br>
<center><img src="URL GAMBAR"/></center><br>
Letak biodata korang. ..
<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>




oke,,,dahh siap...cer try preview...jadi takk?jadi takkk??
heeeheeee,,kalau tak jadi,,bagitahu la ehhh.. :)

Labels:


? Newer Posts ? Older Posts ?
SOME WORDS!


Welcome to Eniq Fanfict blog tutorial.Don't change my tutorial to Your's k? copycat without permission is PROHIBITED !!
Diary
Profile
Links
Stuff
Tagboard

Rewind



Credits


Template By: Nurul Afiqah
Big helped: Aulia Septiya
Edited: Eniq