Loading...

Tutorial : Make Your Own Blogskins

Tuesday, 13 March 2012 | 23:15 | 1 comments

amaran ! entry ini gile panjang so , paham betul-2 okay ? thanks :)

basecode : Lettha

let's go kita buat ! yeah , bersedia ? :)

1. bukak notepad or what ever yang boleh letak code korang .

2. first : basic code

<html><head><center><img src="your header url" /></center><title>TITLE BLOG</title><link rel="shortcut icon" href="URL FAVICON"><style type="text/css">#navbar-iframe {display: none;}
[code pertama]
</style></head>
<!----main wrapper code-----!><table style="font-size: 11px; color: GREY; line-height: 17px; background:white; border-radius:20px;" width="800" align="center" border="0" cellspacing="8">
<tbody><tr>
<!----sidebar wrapper code-----!><td valign="top" style="line-height:15px; letter-font-size:10px; width:220px; padding-right:10px;">
[code kedua]
</body></html>

information ;

delete code <!---- ayat die macam kat atas ----!> yang ada di atas
warna merah tukar sendiri . ikut kesesuaian warna blog korang
kalau korang rase nak tukar width blog korang cari : <!----main wrapper code-----!> - cari width dalam code tu .
nak tukar width sidebar pulak cari code : <!----sidebar wrapper code-----!> - cari width jugak .

3. then , copy code dibawah niey dan paste die dekat tempat [code pertama] tu . paham ?

body {

background:url(URL BACKGROUND);background-attachment: FIXED / SCROLL;font-family: NAMA FONT;font-size: 11px;text-align: left;}
a:link, a:visited {color: #CODE COLOR;text-decoration: none;-webkit-transition:0.5s;}
a:hover{text-decoration: none;color: #CODE COLOR;-webkit-transition:0.5s;}
.maintitle {color: #CODE COLOR;font-family: NAMA FONT;font-size:15px;line-height:17px;text-align: right;background: #COLOR CODE;border-radius: 10px;}
.date {font-family: NAMA FONT;font-size:12px;line-height:20px;color: #CODE COLOR;text-align: right;}
blockquote {color: #CODE COLOR;background: #CODE COLOR;border-right: 10px solid #CODE COLOR;padding: 4px;margin:1em 20px;}
u {text-decoration:none;border-bottom: 2px solid #CODE COLOR;}
b {text-decoration:none;color: #CODE COLOR;}
strike {text-decoration:none;color: #CODE COLOR;}
a.navigate {padding:4px;color:#CODE COLOR;font-size:11px;background: #CODE COLOR;}
header {padding-left: auto;padding-top: auto;}
header:hover {padding-left: 60px;padding-top: 0px;}

information ;

macam biase yang warna merah dengan code atau ape-2 je .
niey basic je , kalau nak cantik lagi buat sendiri :P

4. bawah niey pulak second code die . copy and paste it dekat code : [code kedua]

<!----sidebar punya code-----!>

<div class="title">bounjour</div><br>
Replace with your profile;
<br><br>
<div class="title">navigate</div><br>
<center><a class="navigate" onClick="document.getElementById('entry').innerHTML=document.getElementById('one').innerHTML" title="Entry">Story</a> <a class="navigate" onClick="document.getElementById('entry').innerHTML=document.getElementById('two').innerHTML" title="Owners">About</a> <a class="navigate" onClick="document.getElementById('entry').innerHTML=document.getElementById('three').innerHTML" title="Links">Links</a> <a class="navigate" onClick="document.getElementById('entry').innerHTML=document.getElementById('four').innerHTML" title="Tutorials">Goodies</a> </center>
<br><br>
<div class="title">shout out !</div><br>
Replace with your cbox code. Jangan lebih dari 210px :3
<br><br>
<div class="title">credss</div><br>
Credit kepada owner items yang korang guna. Ingat! :D
<br><br>

<!----main code-----!>

<td valign="top" style="width:500px; padding-left:5px; border-left:1px solid #f0f0f0; padding-right:13px; "><div id="one"><!----post title code-----!><blogger><div class="title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div><!----code untuk date-----!><div class="com"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> panda</a></BlogItemCommentsEnabled></div><$BlogItemBody$></br></blogger><br><!----older/newer post code-----!><center><OlderPosts><a href=<$OlderPosts$>>Older Post</a></OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div></td></tr></tbody>
<div id="two" style="display: none;"><!----CODE TITLE PAGE TU-----!><div class="title">I'm In Charge</div><br>
Change with your own profile :3
</div></table>
<div id="three" style="display: none;"><!----post title code-----!><blogger><div class="title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div><!----date code-----!><div class="com"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> panda</a></BlogItemCommentsEnabled></div><$BlogItemBody$></br></blogger><br><!----code older.newer-----!><center><OlderPosts><a href=<$OlderPosts$>>Older Post</a></OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div>
<div id="four" style="display: none;"><!----title pages code-----!><div class="title">Let's Exchange Link</div><br>Wanna exchange link?<br><br><a href="">FRIEND</a><br><a href="">FRIEND</a><br><a href="">FRIEND</a><br><a href="">FRIEND</a><br><a href="">FRIEND</a><br><a href="">FRIEND</a><br><a href="">FRIEND</a><br><a href="">FRIEND</a><br><a href="">FRIEND</a><br>

<div id="five" style="display: none;"><!----lil page code-----!><div class="title">Goodies and Tutorials</div><br><u>BLOG TUTORIALS</u><br><br>Tutorial: <a href="">Your Tutorial Link</a><br>Tutorial: <a href="">Your Tutorial Link</a><br>Tutorial: <a href="">Your Tutorial Link</a><br>Tutorial: <a href="">Your Tutorial Link</a><br>
<br>
<u>Stuff</u><br><br>Stuff: <a href="">Your Freebies Link</a><br>Stuff: <a href=""></a><br>Stuff: <a href=""></a><br>Stuff: <a href=""></a><br>
</div>

note pad ;

delete kesemua code <!---- ayat----!> yang ada kat atas tu .
tolong jangan tukar code dekat navigate tu kecuali kalau korang betul-2 paham tentang code tu .

5. dah siap semua tu , copy semua code yang korang dah buat tu , paste dekat Template dalam blog tu .

6. one more thing , kalau dah siap jangan save dulu , preview dulu takut tak jadi kang merana seumur hidup pun tak guna . kene buat balik :)

kalau tak paham just inform kat namiey , insyaAllah namiey tolong :) namiey dah try dah code niey kat blog test namiey . jadi je :) just die punya code kene susun bagi cantik je :)

◀

▶