2014년 8월 11일 월요일

Reducing The Header Size

http://prof.johnpile.com/2013/01/20/reducing-the-header-size-in-blogger/

/* Header
----------------------------------------------- */
.header-outer {
background: transparent none repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 {
font: normal normal 30px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #152568;
text-shadow: -1px -1px 1px rgba(0, 0, 0, .2);
margin-bottom: 0px;
}
.Header h1 a {
color: #152568;
}
.Header .description {
font-size: 100%;
color: #000000;
}
.header-inner .Header .titlewrapper {
padding: 0 30px;
}
.header-inner .Header .descriptionwrapper {
padding: 0 30px;
}



=================================================================================
http://www.bloggertricks.biz/2012/02/change-width-of-headerfooterany-section.html

Modifying the Width of Blogger Layout Elements

Go to your blogger dashboard --> Template --> Edit Html ( tick the expand widget template option).

To Change Width Of Outer Wrapper

Find This Code:
 body{background:#111 url(); width:980px; color:#333;
 font-size:12px; font-family:Arial,Tahoma,Verdana;
 margin:0 auto 0; padding:0}
OR
#outer-wrapper{background:#111 url(); width:980px;
color:#333; font-size:12px; font-family:Arial,Tahoma,
Verdana; margin:0 auto 0; padding:0}
Change 980px to your desired width and you are done!!..

To Change Width Of Header::

Find This Code:
#header{background:#000 url(); width:960px; height:155px;
 color:#fff; font-size:11px; margin:0; padding:0;
overflow:hidden; margin-top:-4px;}
Change 960px to your desired width and you are done!!..

To Change Width Of Sidebar Wrapper::

Find This Code::
#sidebar-wrapper{float:right; width:320px;
margin:0; padding:0 0 10px; display:inline}
Change 320px to your desired width and you are done!!..

To Change Width Of Footer Wrapper::

Find This Code::
#footer{width:660px; clear:both; margin:0 auto;
 padding-top:15px; line-height:1.6em;  text-transform:uppercase; letter-spacing:.1em;  text-align:center}
Change 660px to your desired width and you are done!!..


Hint:-
If you are unaware of finding a particular code in your blogger template html. There is nothing to worry. Just press Ctrl and F buttons together and you will notice a search bar on your browser, enter the code to be searched in it and press enter.

Backup the Template before modifying!!!

Before doing any modifications in your template Html, make sure to backup your template i.e., 
go to your blogger dashboard --> Template, you will find the backup/restore option. Just click on it and download your template before doing modifications.


댓글 없음:

댓글 쓰기