Edit simple template ( My Style )

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

1. How to add header ?
2. How to add border like mine ?
3. How to add footer ?
4. 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... ^^,

HERE THE RESULT OF MY EDIT

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.