Assalamualaikum and hello peeps..The first thing that come in my mind before making this post is the fact that it gonna be a long and hard tutorial to make..But,never mind, I will write this tutorial to help you guys..^^
This tutor is all in one tutorial of basic things that I customize in my template
- How to add header ?
- How to add border like mine ?
- How to add footer ?
- Most basic things here
ALERT THIS First of all, back up your current template because all customization that you had made will gone.
Choose a new simple template ( like the example below ) if you had already use simple template revert it to default.
Go to template --> customize
Let's add background.. Background --> Choose File --> Done
Adjust width as you like
Remove blog title (time to move) by :
Click on advance --> Blog title --> Size 0px , color Transparent
How to add header ?
Go to Layout
Choose your header file
After uploading your header, save it.
Then, go to Template --> Edit HTML
Search using ctrl + F
To remove shadow around blog.
Search .content-outer {
remove the following code below it
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
margin-bottom: 1px;
And replace it with
margin-bottom: 0px;
Basic things to be edit.
1. Search /* Header
then, add below code above it
.header-outer, .content-inner { background-color: transparent;}.main-outer, .tabs-outer { background-color: $(content.background.color);}.tabs-inner .widget ul { margin: 0px -15px;}.content-inner{padding: 0px;}
2. Search .header-outer {
Then remove the following code below it
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
3. Search .Header .description {
add this code below it
display:none !important;
How to add main background with border.
search .main-outer {
paste this code below it.
padding-left:30px;padding-right:15px;
background:url(MAIN BACKROUND URL);
( Change it with your MAIN BACKROUND URL )
How to remove attribution ( Powered by Blogger )
Click jump to widget and choose ATTRIBUTION1
Then, you can see this code
<b:widget id='BlogArchive1' locked='true' title='Blog Archive' type='BlogArchive'>
Change true to false
Next, go to layout and edit attribution widget
Now you can remove it.. try it many time if it does not work on the first time.
How to add footer image ?
Search /* Accents
Add below code above it.
footer {
background: url(FOOTER URL);
padding-bottom:80px;
background-repeat: no-repeat;
}
( Change it with your FOOTER URL , 80px can be change with the size and suitability of footer )
To remove gray line between footer and post, search .footer-outer {
Delete the following code below it
border-top: $(footer.bevel) dashed #bbbbbb;
Change it with border-top:none;
Okay, now everything is done !! finally... ^^,
Other thing are up to you on how to customize it.
Do comment if u don't understand or if it doesn't work..
Mind to follow and credit my blog after using this tutor?
Refer to this tutor to help you make a suitable header, post background and footer.
Refer to this tutor to help you make a suitable header, post background and footer.
