TUTORIAL

How to centre the blog tittle in blogger ?

1. Log in to your blogger account

2. Click Template.

3. Go to your Customize> Advanced > Add CSS

4. Add this code:

#header-inner img {margin: 0 auto !important;}

#header-inner {text-align: Center ;}       

5. Click Apply to blog

6. Enjoy!

Tutorial Full Border for sidebar

1. Dashboard > Template

2. Type CTRL + F and find the code below

h2 {

3. COPY the code below and PASTE it below the code ( h2 { ) that you find just now.

text-align:center;

font: normal 12px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;

-moz-border-radius:20 0 10px 10px;

-webkit-border-top-left-radius:10px;

-webkit-border-top-right-radius:10px;

background:none repeat scroll 0 0 #FAAFBE;

padding:5px 8px;

border: 1px solid #FAAFBE;

}

.sidebar .widget-content {

-moz-border-radius:0 0 10px 10px;

-webkit-border-bottom-left-radius:10px;

-webkit-border-bottom-right-radius:10px;

background:none repeat scroll 0 0 transparents;

padding:5px 8px;

border: 2px dotted #F660AB;

}

3. Save template and you’re done !

How to insert background in blogger

1. Log in to your blogger account

2. Click Template.

3. Go to your Customize>background

4. Insert your background and apply !

How to insert background inside sidebar ?

1. Dashboard > Template > Edit HTML

2. Now find this code.

h2 {

text-align:center;

font: normal 12px 'Trebuchet MS',Trebuchet,Verdana,sans-serif;

-moz-border-radius:20 0 10px 10px;

-webkit-border-top-left-radius:10px;

-webkit-border-top-right-radius:10px;

background:none repeat scroll 0 0 #FAAFBE;

padding:5px 8px;

border: 1px solid #FAAFBE;

}

3. Then copy the code below.

.sidebar .widget-content {

-moz-border-radius:0 0 10px 10px;

-webkit-border-bottom-left-radius:10px;

-webkit-border-bottom-right-radius:10px;

background: #ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7t-IdJJ6DlhlDzedgMnEd9HjmOEUZWpDyAXCubvh9qybyVajE0mPC1njmu62YboZe1_DrfSkehAJpUDuIihV7TVl7ZTyru3FC7BS6KH66F99zkHehg2BXpAbBYLHh89rra_rc9Dy1DgM/s1600/white-vintage-background-tumblrviewing-gallery-for-white-background-tumblr-wtfxqgds.png) repeat scroll bottom center;

padding:5px 8px;

border: 2px dotted #F660AB;

}

4. Paste the code that you already copy  below h2 {. You can insert your background url inside the Red colour

5. It will be like this.

How to adjust the size of sidebar?

1. Find h2 }

2. Adjust the size of sidebar in the highlight section and save template

How to remove background at header for simple template ?

1. Dashboard > Template > tick expand widget template

2. Type CTRL + F and find this keyword :-

/* Mobile

3. Copy the code and Paste it above the code that you find just now.

.header-outer, .content-inner { background-color: transparent; }

.main-outer, .tabs-outer { background-color: $(content.background.color);}

4. Save template and you’re done !

Tutorial for  Menu tab (navigation bar )

1. Log in > Dashboard > Design > Add Gadget > Html/JavaScript

2.     For dashboard and home, copy the link of the dashboard and home. Then paste it into code below.

How to make a hyperlink code ?

href="http://www.hyperlinkcode.com/">Hyperlink Code</a>

2.     Insert your dashboard and home link as below.

href="https://www.blogger.com/home">Dashboard</a>|<a href="http://mgmb263.blogspot.com/">Home</a>|<a

3.     Dashboard - New Post - Edit Pages - New Page

2. Post entry such as CONTACT US.

3. Done? Publish it as usual !

Tutorial Curved Post Blog Simple Template

1. Dashbord > Design > Edit HTML

Type CTRL+F and find this code

.post {

Copy the code below and paste it below the code .post { .

-moz-border-radius: 25px;
-webkit-border-radius: 25px;
margin:0 0 1.5em;
padding:20px;
font-size: 95%;
background:#ffffff;
border: 2px solid #ff00ff;
line-height:1.9em;
} 

2. Dashbord > Design > Edit HTML

Ctrl + F and find this code

/* Widgets
----------------------------------------------- */

3. Copy and Paste the code below, after  the code above. ^

.sidebar {
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
margin:0 0 1.5em;
padding:20px;
font-size: 95%;
background:#ffffff;
border: 2px solid #ff00ff;
line-height:1.9em;
} 

4. Done? SAVE TEMPLATE

Tutorial : Scroll Bar

1. Log In > Dashboard > Design > Edit HTML > Tick Expand Widget Templates

2. Type Ctrl F and find this code :

<div id='ArchiveList'>

But before that you will find this code first

<div class='widget-content'>

3. Exchange this code <div class='widget-content'> with the code below.

<div class='widget-content' style='overflow:auto; height:200px'>

p/s : you can change the size as the word in red colour.

4. Save template and you’re done !