Showing posts with label header. Show all posts
Showing posts with label header. Show all posts
Wednesday, November 23, 2016
How To Divide Blogger Header Into Two Sections NairotechBlog
How To Divide Blogger Header Into Two Sections NairotechBlog
Blogger template designer gives you the opportunity to customize your blog template but as at the time of publishing this post, you cant use it to divide the header of your blogger blog into two.
I am sharing with you, how I split my blogs header into two after following a tutorial at
Realcombiz , making it possible for me to add extra gadgets beside my blog logo.
Dividing your blog header into two sections can make your blog look more professional, making your logo to appear on the left side of your blog header, while you have some space to add any other gadget or advertisement banner to the right of the logo.
Below is what my Blog header looks like after splitting it into two columns:
How Can I Divide My Blogs Header into Two Columns?
==> Log in to your Blogger dashboard via www.blogger.com
==> Click Template
==> Click Edit HTML tab
==> Back up your blog template
==> DO NOT tick the "Expand Widget Templates" checkbox
==> Use CTRL F to find the code below:
<b:widget id=Header1 locked=true title=My Blog (Header) type=Header/>
</b:section>
==> Copy and paste the code below, right under (after) it
<div style=clear: both;/>
==> Hence, your code should now look like this:
<b:section class=header id=header maxwidgets=1 showaddelement=no>
<b:widget id=Header1 locked=true title=My Blog (Header) type=Header/>
</b:section>
<b:section id=header-right showaddelement=yes/>
<div style=clear: both;/>
==> Use CTR F to find ]]></b:skin>
==> Copy and add the code below right above the ]]></b:skin> line
#header, body#layout #header {width:35%;display:inline-block;float:left;padding:15px;}
#header-right, body#layout #header-right {width:50%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}
==> Save your template.
Go to "Layout" and you should now notice a "Add a gadget" link right beside the header. Click it to add any widget right beside your blog logo.
.
Go to link Download
Sunday, September 25, 2016
How to change the appearance of the blog header
How to change the appearance of the blog header
The steps to change the appearance of the blog header are, as follows :
The first step,
let us know, how the size of the header before we create an image that will be added in it, this is done, for the size of the image were really fit with the size of the header, so the picture will looking good and fit.
and, to know the size of a blog header, please follow the steps below:
- Login to blogger.
- Click Layout ( desain ) >> Edit HTML.
the code usually written something like this :
# Header-wrapper {
background: transparent url (http://lingua-mysite.blogspot.com/images/flash/bg.jpg) no-repeat scroll 0 0;
border-bottom: 1px solid # A6A6A6;
margin-bottom:-13px;
}
In the listing above, we got the value of the header width = 936 px and height = 90 px, So, the width and height are the size of the header we need to determine the size of the image that we will create. and now we can specify the size of the image should we made is, 936 x 90 px.
The second step,
After knowing the size of the header, it is time to create a good picture, and try to draw the theme of the image is matches with the theme of the blog, you can create images using Photoshop, or other.
The third step,
when you finish drawing, upload images to your hosting, and get the Url link of the image, to be placed on your homepage.
The fourth step,
Change the codes on your homepage for the image appears as an imageheader,
Login to blogger >> and then click desain >> Edit HTML >>
check (tick) , the box of expand template widget.
Then, find the codes, # header-wrapper,
the complete codes are, as below :
# Header-wrapper {
background: transparent url () no-repeat scroll 0 0;
border-bottom: 1px solid # A6A6A6;
height: 90px;
margin-bottom:-13px;
width: 936px;
}
In the listing above , change the green codes and blink, with the url of the image.
If the background codes arent found in your the listing.
Add background code, as in the listing above.
After that, click Save template, and see the results.
note:
beckup and save the template, before changing or adding the HMTL code listing,
- to your blogging success -
Go to link Download
Subscribe to:
Posts (Atom)