Saturday, March 10, 2018

March 10, 2018

Blogger template basic layout.

 Hello friends,
Today i discuss about Blogger template basic layout.

First of all, you have to understand that your Blog Layout consists of several sections.
The standard Blogger template has a header section, a sidebar section, a main section and a footer section. Inside these section Bloggers puts the widgets, these are the Page elements that you can select from the template tab.



Then, let's take a look at the common structure of a standard Blog. If you create a fresh and new Blog site, the Page Elements Tab looks like this:

Know about blogger template basic layout.


Before adding second side bar to blogger blog first of all, you have to understand about the how looks like the Blog layout?? Basically, Blog Layout consists of several sections. The standard Blogger template has a header section, a sidebar section, a main section and a footer section. Inside these section Bloggers puts the widgets, these are the Page elements that you can select from the template tab.
Then, let's take a look at the common structure of a standard Blog. If you create a fresh and new Blog site, the Page Elements Tab looks like this:


This Layout has 4 sections:

  •     Header
  •     Main (with the Blog Posts),
  •     Sidebar
  •     Footer



The HTML-template looks like this (the line-numbers are added for reference only):


010: <body>
020: <div id='outer-wrapper'>l<div id='wrap2'>
030: <!-- skip links for text browsers -->
040: <span id='skiplinks' style='display:none;'>
050: <a href='#main'>skip to main </a>
060: <a href='#sidebar'>skip to sidebar</a>
070: </span>
080: <div id='header-wrapper'>
090: <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
100: <b:widget id='Header1' locked='true' title='Second Sidebar (Header)' type='Header'/>
110: </b:section>
120: </div>
130: <div id='content-wrapper'>
140: <div id='main-wrapper'>
150: <b:section class='main' id='main' showaddelement='no'>
160: <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
170: </b:section>
180: </div>
190: <div id='sidebar-wrapper'>
200: <b:section class='sidebar' id='sidebar' preferred='yes'>
210: <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
220: <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
230: </b:section>
240: </div>
250: <!-- spacer for skins that want sidebar and main to be the same height-->
260: <div class='clear'> </div>
270: </div> <!-- end content-wrapper -->
280: <div id='footer-wrapper'>
290: <b:section class='footer' id='footer'/>
300: </div>
310: </div></div> <!-- end outer-wrapper -->
320: </body>


Lines 010 and 320 are the body-tags. All code has to be between these two tags.
Lines 020 and 310 are the div-tags for two wrappers, that wrapper called "outer-wrapper" and the wrapper called "wrap2". In CSS you
can define fonts, colors and other styling for these wrappers. We can look about CSS code after that.
Lines 080 - 120 contain the header. There is a div-wrapper (080 and 120) as you can see, section tags (090 and 110) and the widget that contains the header itself (100).
Lines 130 - 270 contain the content. That content means by blog posts and sidebars. There is a div wrapper called "Content wrapper"
(130 and 270) and inside this wrapper there are 2 more wrappers, they are the "Maun wrapper" (140-180) and the "Side wrapper" (190-240).
Inside the Main wrapper we find the Main section (150 and 170) with the Blog widget (160). This widget contains our posts.
Inside the Sidebar wrapper we find the Sidebar section (200 and 230) with an Archive widget (210) and a Profile widget (220).
 Finally, we have a Footer (280-300).


Now that we understand the common structure of standard blog site layout, then let's take a look at How about the formatting of this template. In the stylesheet you will find the following code:


#outer-wrapper {
width: 660px;
padding: 10px;
....... }

#main-wrapper {
width: 410px;
float: left;
....... }

#sidebar-wrapper {
width: 220px;
float: right;
........ }

The outer wrapper has a width of 660 pixels. The padding is set to 10 pxl, so that everything that is inside the Outer wrapper stays
10 pxl from the border. So that leaves 660 - 20 = 640 pixels for main wrapper and sidebar wrapper.
The main-wrapper has a width of 410 pixels, and floats to the left.
The Sidebar wrapper had a width of 220 pixels and floats to the right. Together, Main wrapper and Sidebar wrapper have a width of
410 + 220 = 630 pixels. In the middle there is a space of 640 - 630 = 10 pixels.

Ok. then with that above details i think you have a better idea about Blogger template basic layout.
Enjoy your blogging.

How to Add second  sidebar for blogger blog...>>>

How to Display Elements only on specific Pages in Blogger- Conditional tags1....>>>

How to Use conditional tags?......>>>

How to Show and Hide Sidebar wadgets in Blogger.......>>>

How to Hiding Sidebar in Post Page......>>>


For more reading THEWONDERSPOT

........................................................................................................................................................................................................................
EMoneySpot  -  Earn with us..........................................................................................>>>
........................................................................................................................................................................................................................

 How to earn money online.......................................................................................>>>

Improve organic SEO rankings while EARN MONEY (0.05/0.10$) per view.......>>>

How to take screenshots in windows 10 : Different Methods?................................>>>

Free Bandwidth Monitoring Tools For windows PC?.............................................>>>

Abnormally high internet bandwidth usage, c-0001.c-msedge.net of window 10....................>>> 

How to Speed up Internet connection on Windows 10..............................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?.................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?..................................................>>>

How to Block Windows 10 "Spying"? ........................................................................................>>>

How to start a Blog?.....................................................................................................................>>>

How to Choose the Best Blogging Platform, advantages & disadvantage.................................>>>

How to make your blog SEO friendly?........................................................................................>>>


All in one SEO pack for Blogger blog.........................................................................................>>>

Thank you for reading.
Good Luck.

Don’t forgot to Subscribe us to get latest news letters and give your feedback in below comment section ;-) ;-)

0 comments:

Post a Comment

Thank you for visit us.
Give your feedback. Don't worry. Your email is safe with us.
Subscribe us to get latest news letters.

amazon

 
Copyright © The WonderSpot All Right Reserved
Powered by Blogger