Someone asked me about my blog template."It's cool!!How you designed it?"...HA?Its totally not my own design..haha...i stole it somewhere and put it in my template.Thats all!There are some tricks(about how to steal someone else design) and you can apply it to your own blog.But,here i want to share with you the way i design this blog...
I got this template from blogging secret and you can download it here(48.21kb).
Its in xml file and its mean this template you can use only in new blogger(blogger beta?not the old one la..).Ok..?(you can ask me if you dont understand my explanation)
Copy your template code and then go to template>>edit html and paste the code there..
Then,you needs to change several part in this template[depends on you].For me,i changed:(change it before you click the save button!)
[1]Header
- find out in this template the url of header image (http://photos1.blogger.com/blogger2/4171/1279/1600/kubrickheader.jpg) and then change it with your header.Remember that your header size must same with the original one..and your header are in
- http://photos1.blogger.com/blogger2/4171/1279/1600/kubrickbgwide.jpg (body)
- http://chenkaie.googlepages.com/kubrickbgcolor.jpg
- http://photos1.blogger.com/blogger2/4171/1279/1600/kubrickfooter.jpg (footer)
.post h3 { ------->find this in your template and then replace it with this code
.post h3 {
padding-bottom: 3px;
font: normal bold 120% 'Trebuchet MS','Lucida Grande';
color: #ff6633;
border-bottom:5px solid #AC0432;
background: url(YOUR IMAGE) no-repeat;
padding-left: 30px;
}
[4]sidebar style
find out your sidebar css code in the template and then replace it with this one:
/* ---( sidebar )--- */--------->find this in your template
.sidebar h2 {
background:#000000 url(Your image) ;
border: 12px solid #fff;
border-bottom: 0px;
height: 25px;
margin: 0 0 0px 0;
padding: 3px 0 0 0;
text-align: center;
font: normal bold 100% 'Lucida Grande','Gill Sans MT','Trebuchet MS';
color: #ffffff;
}
.sidebar h2 a{
color: #e1771e;
font-variant:small-caps;
text-decoration: none;
font-size:16px;
letter-spacing:0.8px;
}
.sidebar .widget-content {
color:#333;
background: #ffffff;
padding: 10px 5px 0 10px;
border: 0.7px solid #ccc;
border-top: 5px solid #ccc;
border-bottom: 5px solid #ccc;
}
.sidebar .widget-content h3{ /*Google Reader*/
font-size: 100%;
}
.sidebar li {
/*list-style-image: url(Your image); */
list-style-image: url(Your image);
list-style-type: square;
padding-left: 0px;
margin: 0px 0 0;
line-height: 1.8em;
border-bottom:1px dotted #00CC33;
}
.sidebar li:hover{
list-style-image: url(Your Image);
background: #f0f0f0;
}
.sidebar li a:hover{
color: #009900;
text-decoration: none;
}
you also can change block quote and whatever you want...you can play with your template,change the color, image, etc...
to be continue....
