HOME TUTORIALS FREEBIES TWITTER FACEBOOK INSTAGRAM

Tutorial : Make Your Own Blogskins

Assalamualaikum.

Now, nisa dah ada masa nak ajar korang buat blogskins sendiri. Btw, Entri agak panjang dan nisa harap korang kena faham betul-betul.

Basecode : Proud Of You | Lovely_Bunny

1. Buka notepad or what ever yang boleh letak kod ini.
2. First, base code :
<head>
<center><img class="header" src="URL HEADER" / ></center>
<link rel="shortcut icon" href="URL FAVICON" />
<title>TAJUK BLOG KORANG.</title>

<script type="text/javascript">
document.ondragstart = function () { return false; }; </script>
<link href='http://fonts.googleapis.com/css?family=Short+Stack' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bad+Script' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC|Tulpen+One|Sofia' rel='stylesheet' type='text/css'>


<style type="text/css">
#navbar-iframe {display: none;
}
\Code Pertama/
</style>
<body>
<!---------Sidebar Wrapper Code------>
<table style="font-size: 12px; color:grey; line-height: 17px; background:#fff; border: 1px solid #565454; border-radius:15px;" width="900" align="center" border="0" cellspacing="8">
<tbody><tr>
<td valign="top" style="width:240px; padding:2px; border-radius:20px; background: transparent; font-size:11px;">
<br><br>
\Code Kedua/
</td>
<!---------Main Wrapper Code------>
<td valign="top" style="background: #fff; width:700px; height: 385px; padding-left:2px; padding-right:11px; padding-left:2px;">
<br><br>
\Code Ketiga/
</td></table></style>
<br>
</head></html>
</body></html>
Information:
  • Warna Merah boleh tukar dengan kesesuaian blog korang.
  • Warna Biru boleh tukar warna untuk tulisan blog korang.
  • Warna Hijau nanti akan ditukar dengan koding yang akan diberi sebentar lagi.
3. Copy code di bawah dan paste di \Code Pertama/ tu okay?
.header {
margin-left: -1px;
margin-bottom: -53px;
border: 0px CODE WARNA dashed;
-webkit-transition:2s;
}
::-webkit-scrollbar {
width: 7px;
height: 7px;
background: url( URL BACKGROUND );
border: 3px solid  CODE WARNA;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background: url( URL BACKGROUND );
border: 1px solid  CODE WARNA;
}
body {
background:url( URL BACKGROUND );
font-family: NAMA FONT;
font-size: 11px;
color:  CODE WARNA;
line-height: 17px;
cursor: url(http://www.drikoti.net/Goodies/Cursor/News/02.cur), progress;
background-attachment:fixed;
background-position:center center;
}
.content {
background:#fff;
color:  CODE WARNA ;
font-size: 13px;
padding: 3px;
border-radius:20px;
border-left:1px solid  CODE WARNA ;
border-right:1px solid  CODE WARNA ;
-webkit-border-radius-bottomleft:10px;
-webkit-border-radius-bottomright:10px;
}
a:link, a:visited { font:8px ;text-decoration: none;color:  CODE WARNA;-webkit-transition: 1.3s}
a:hover { cursor:url(http://www.drikoti.net/Goodies/Cursor/News/09.cur),progress;text-decoration:none; color: CODE WARNA; -webkit-transition: 1.3s;}
.sidebar {
padding:3px;
border-radius:20px;
background: transparent;
}
.sidebar2 {
padding: 5px;
}
.h1 {
margin: 4px;
padding: 6px;
font-size: 12px;
font-family: short stack;
text-align: center;
background-color:   CODE WARNA;
border:1px solid   CODE WARNA;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top: 6px solid   CODE WARNA;
padding: 4px;
}
.h2 {
color: CODE WARNA ;
text-align:right;
padding-right:2px;
font-family: NAMA FONT;
font-size:11px;
letter-spacing:3px;
margin-bottom:7px;
}
blockquote {
border: 1px dotted   CODE WARNA ;
border-radius: 10px;
background-position:bottom right;
background-repeat:no-repeat;
background-image: url( URL BACKGROUND );
padding: 4px;
-webkit-transition:1s;
-moz-transition:1s;
}
blockquote:hover {
border: 1px solid   CODE WARNA ;
border-radius: 30px;
-webkit-transition:1s;
-moz-transition:1s;
}
a.Qis{
cursor: url(http://www.drikoti.net/Goodies/Cursor/News/09.cur), progress;
background:  CODE WARNA ;
padding:4px;
padding-left:6px;
padding-right:6px;
font:8px tinytots;
text-transform:uppercase;
color:white;
-webkit-transition:1s;
-moz-transition:1s;
}
a.Qis:hover {
background:  CODE WARNA ;
padding-left:69px;
margin-left:-69px;
-webkit-transition:1s;
-moz-transition:1s;
text-align:center;
}
b, strong { color:  CODE WARNA ; }
s, strike { color:   CODE WARNA ; }
i, italic { color:   CODE WARNA ; }
u, underline { border-bottom: 2px solid   CODE WARNA ; -webkit-transition: 0.5s; margin-top:-2px; }
u:hover, underline:hover { color: transparent; -webkit-transition: 0.5s; }
Information :
  • Warna Merah tu tukar dengan perkataan yang dimerahkan.
4. Copy code di bawah dan paste di \Code Kedua/ tu okay?
<div class="sidebar">
<div class="h1">Velkam Here;</div>
<center><img src="URL IMAGE" width="200" /><br>
<a class="Qis" onClick="document.getElementById('content').innerHTML=document.getElementById('post').innerHTML">Diary</a>
<a class="Qis" onClick="document.getElementById('content').innerHTML=document.getElementById('about').innerHTML">Bio</a>
<a class="Qis" onClick="document.getElementById('content').innerHTML=document.getElementById('link').innerHTML">Loves</a>
<a class="Qis" onClick="document.getElementById('content').innerHTML=document.getElementById('leebie').innerHTML">Heart</a><br>
Hello guys, Nisa say you can use this template but <font color="red">PLEASE</font> do not delete the credit. Thank you.<br>
<a class="Qis" href="http://www.facebook.com/nisasayakinie">facebook</a> <a class="Qis" href="https://twitter.com/#!/Sayakinie">twitter</a> <a class="Qis" href="http://www.blogger.com/follow-blog.g?blogID=<$BlogID$>">++follow</a> <a class="Qis" href="http://www.blogger.com/home">dashboard</a><br>
PUT YOUR CBOX CODE HERE! JANGAN LEBIH DARI 240px<br><br>
</center>
</div>
<div class="sidebar">
<div class="h1">Credits;</div>
<!----TOLONG JANGAN DELETE KREDIT DI BAWAH INI ATAU AWAK AKAN MENDAPAT DOSA YANG SETIMPAL!-----!>
<center>Basecode from <a href="http://nysnyesa.blogspot.com/">Nisa</a><a href="http://www.blogskins.com/me/lovely_bunny">Sayakinie</a>. Edit by <a href="//YOUR URL BLOG"> Me</a><br><br>
<!----TOLONG JANGAN DELETE KREDIT DI BAWAH INI ATAU AWAK AKAN MENDAPAT DOSA YANG SETIMPAL!-----!>
</div>
Information :
  • Warna Oren boleh tukar dengan tajuk sidebar korang sendiri.
  • Karang ayat korang sendiri pada Warna Ungu.
  • Warna Merah tukar apa yang disuruh.
  • Warna Biru tukar dengan link facebook dan twitter korang.
  • Btw, tolong jangan buang credits tu. Nisa merayu sangat-sangat dekat korang ni.
5. Copy code di bawah dan paste di \Code Ketiga/ tu okay?
<div id="content">
<blogger><div class="h1"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> Students</a></BlogItemCommentsEnabled></div>
<$blogitembody$><br>
<iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkURL$>&amp;layout=standard&amp;show-faces=true&amp;width=490&amp;height=25&amp;font=arial&amp;";action=like&amp;colorscheme=dark; colorscheme="dark" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:280px; height:30px;"></iframe><br></br>
</blogger><br>
<center><OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div>
</div>
<div id="about" style="display:none;">
<div class="h1"><span class="Apple-style-span" style="color: #FFADAD;"> ★ </span> Super Student's</div><br>
<center><img src="http://i52.tinypic.com/bio0fs.jpg" width="400" /></center>
Who I am? I am a little girl who is still studying in secondary school. I already 15 years old, still young right? But in siblings I am the eldest/oldest sista -,- Btw, I'm happy because I am now stay at Malaysian. The country is very beautiful and pleasant. Wanna know more about me? <a href="http://nysnyesa.blogspot.com/">CLICK HERE!!</a>.Thankyou for visit my Template ^^<br><br>
</div>
<div id="link" style="display:none;">
<div class="h1"><span class="Apple-style-span" style="color: #FFADAD;"> ★ </span> Hello Sunshine</div><br>
<center><img src="http://i39.tinypic.com/am9ir5.jpg" width="400" /><br>
<a class="Qis" href="http://nysnyesa.blogspot.com/">NisaSayakinie</a>
<a class="Qis" href="http:/">Next?</a>
<a class="Qis" href="http:/">Next?</a>
<a class="Qis" href="http:/">Next?</a>
<a class="Qis" href="http:/">Next?</a>
<a class="Qis" href="http:/">Next?</a>
<a class="Qis" href="http:/">Next?</a>
<a class="Qis" href="http:/">Next?</a>
<a class="Qis" href="http:/">Next?</a>
<a class="Qis" href="http:/">Next?</a></center><br>
</center><br>
</div>
<div id="leebie" style="display:none;">
<div class="h1"><span class="Apple-style-span" style="color: #FFADAD;"> ★ </span> Sharing Is Caring</div><br>
<center><img src="http://i52.tinypic.com/99mf52.jpg" width="400" /></center>
<div style="font-size: 12px; font-family: short stack;"><font color="#9952C6;">★</font> Tutorial</div>
<ul>
<li>Tutorial: <a href="/">One</a></li>
<li>Tutorial: <a href="/">Two</a></li>
<li>Tutorial: <a href="/">Three</a></li>
</ul>
<div style="font-size: 12px; font-family: short stack;"><font color="#9952C6;">★</font> Freebies</div>
<ul>
<li>Freebies: <a href="/">One</a></li>
<li>Freebies: <a href="/">Two</a></li>
<li>Freebies: <a href="/">Three</a></li>
</ul>
</div>
<div id="post" style="display:none;">
<blogger><div class="h1"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> Students</a></BlogItemCommentsEnabled></div>
<$blogitembody$><br>
<iframe src="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkURL$>&amp;layout=standard&amp;show-faces=true&amp;width=490&amp;height=25&amp;font=arial&amp;";action=like&amp;colorscheme=dark; colorscheme="dark" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:280px; height:30px;"></iframe><br></br>
</blogger><br>
<center><OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div><br>
Information :
  • Tukar biodata anda di Warna Ungu.
  • Warna Merah tukar dengan URL IMAGE. If tak nak tukar pun takpa :)
6. Lepas dah habis copy code diatas dan dah edit dengan apa yang disuruh korang bolehlah letak code tersebut di template.
7. Ehh, kalau korang dah paste dekat template jangan terus SAVE pula. Preview dulu, manalah tahu tak jadi kangg korang marah nisa pula.
Kalau tak jadi korang boleh tanya nisa okay? Nisa sedia membantu korang :>
at
Labels: ,

15 comments:

Shafiqah Syika said...

Wah ! Terima kasih sebab buat tuto ni. Dh lama sangat saya cari tutor ni.

May 31, 2012 at 10:16 PM
Shafiqah Syika said...

Nisa. Awak sudi tak jadi sponser untuk contest saya. Kalau awak sudi email saya shafiqahsyika@yahoo.com.

May 31, 2012 at 11:05 PM
Makcik Hijau said...

thanks thanks thanks ! :) menjadi ahh ^^ camne nak buat account blogskin sendiri ? please reply kat blog saye :) jgn reply kat cbox ^^

June 1, 2012 at 1:09 AM
Makcik Hijau said...

oh thankss :) hihi , free ke kene bayar eh ?

June 1, 2012 at 2:42 PM
Makcik Hijau said...

oh okayy ^^ thnks ^^ :)

June 1, 2012 at 3:28 PM
Unknown said...

Tengss .. Cute coding ;)

June 9, 2012 at 4:27 PM
Anonymous said...

Terima kasih untuk codenya :)

June 23, 2012 at 5:21 PM
Rainbowish Art said...

wah, nice tuto. ainin guna ye. hehe , thanks :)

September 15, 2012 at 4:24 PM
♥ Lia Abdillah ♥ said...

Dah jadi, tepi dia punya navigate tk kuar p0n (home, tutor, etc) macam mane??

December 4, 2012 at 1:43 PM
♥ Lia Abdillah ♥ said...
This comment has been removed by the author.
December 13, 2012 at 1:59 PM
Nisaa Razie said...

Ada la adik -.-

December 13, 2012 at 11:35 PM
Unknown said...

Makasih untuk Codenya~ Udah lama nyari code macam ni tapi tak ketemu-ketemu lah tu XD

February 16, 2013 at 7:14 PM
zuraa said...

hai, saya dah blog blogskin yang awak kasi tuto tu but why my all post takde? kena update post dalam html tu ke? tq.

August 29, 2015 at 10:35 PM
Nisaa Razie said...

Hi Zuraa, sorry mungkin awak silap edit coding. If awak dah follow code, dia tak akan effect dkt mana mana. Sorry reply lambat

November 11, 2015 at 8:58 PM
Unknown said...

thank youuuu

December 5, 2016 at 6:04 PM

Post a Comment

Subscribe to: Post Comments (Atom)
Template By NisaaRazie