Add attractive style to the Header section of Blogger Template
Add attractive style to the Header section of Blogger Template
I started the fourth episode of creating professional blogger templates. Header is an important part of our episode blog today We will share with you today how to give a professional look to the Header section of Blogger Template? From today's episode we will be able to see the changes in the visual structure of Blogger templates.
In the figure above, there are several Manubar and Social Media buttons. This section will be on top of the Blogger Template. It is called Top Nav Bar in web design language. We added the Menu Bar to it as well as the Social Media button. This will make Top Nav Bar more attractive. In addition, its social media buttons have interesting Css3 effects. Adding it to your blog allows you to have more clear ideas about it. This type of Top Bar is only seen in the professional blogger template.
How to Customize Header?
Login to your blog first.
Then click on Template> Edit HTML.
By pressing Ctrl + F to the keyboard, you can see the <header> section as shown below.
In order to understand the above figure, I have added two screenshots together. First, search the <header> section. After looking at the <header> section of the template, you can see the image on the left side.
Then, after clicking on the number marked on the mark with the figure 1, you can see the image on the right side.
Now mark the image of the 2nd header <header> ... </ header> with the mouse or keyboard cut.
Then, when you search for the blogger template <body section, you will see the following code.
<body expr: class = '& quot; loading & quot; + data: blog.mobileClass'>
Now paste the cut portion of <header> ... </ header> under the top line.
Now again copy the code below <body .... and paste it below.
<div class = 'header-top'>
<div class = 'max-wrapper'>
<div id = 'header-top-nav'>
<ul>
<li> <a href='#'> ABOUT </a> </ li>
<li> <a href='#'> CONTACT </a> </ li>
<li> <a href='#'> PRIVACY </a> </ li>
<li> <a href='#'> SITEMAP </a> </ li>
<li> <a href='#'> OTHER </a> </ li>
</ ul>
</ div>
<div id = 'header-top-media'>
<ul>
<li class = 'Rss'> <a class='Rss' href='#' title='RSS'/> </ li>
<li class = 'Thumb'> <a class='Thumb' href='#' title='Thumbnail'/> </ li>
<li class = 'Instagram'> <a class='Instagram' href='#' title='Instagram'/> </ li>
<li class = 'Pain'> <a class='Pain' href='#' title='RSS'/> </ li>
<li class = 'Youtube'> <a class='Youtube' href='#' title='Youtube'/> </ li>
<li class = 'GooglePlus'> <a class='GooglePlus' href='#' title='GooglePlus'/> </ li>
<li class = 'Facebook'> <a class='Facebook' href='#' title='Facebook'/> </ li>
<li class = 'Twitter'> <a class='Twitter' href='#' title='Twitter'/> </ li>
</ ul>
</ div>
</ div>
</ div>
<div class = 'clear' />
Search again <div class = 'fauxborder-left header-fauxborder-left'> section.
Add the line <div class = 'max-wrapper'> to the top of the code above.
Then press Ctrl + F to return to the keyboard </ header>.
Now paste the </ div> section on the </ header> tag above.
Top Nav Bar Adding Style Sheet
By pressing Ctrl + F to the keyboard .header-outer {Search the section below.
.header-outer {
background: $ (header.background.color) $ (header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
Copy the code below to replace the code above and replace it.
.header-outer {
background: #FFF;
_background-image: none;
}
Now press Ctrl + F to move to the keyboard]]> </ b: skin> section.
Copy the following CSS codes]]> </ b: skin> paste on the tag.
/ * Top Wrapper
-------------------------------------------------- ------ * /
.header-inner .Header # header-inner {padding: 30px 0px}
.header-top {background: #FFF; height: 29px; margin: auto; padding-bottom: 1px; position: relative}
.header-top .max-wrapper {background: #fafafa; height: 29px; overflow: hidden; border-bottom: 1px solid rgba (0,0,0,0.03); border-left: 1px solid rgba (0,0 , 0,0.03); border-right: 1px solid rgba (0,0,0,0.0.0)}
.max-wrapper {max-width: 1000px; margin: 0 auto}
# header-top-nav {width: 100%; max-width: 65%; display: inline-flex; margin: 0 auto; height: 29px; overflow: hidden; font-size: 13px; font-weight: 700}
# header-top-nav ul {margin: 0; list-style: outside none none; padding: 0}
# header-top-nav ul li {float: left; list-style: none; padding: 8px 0}
# header-top-nav ul li a {font-size: 12px; border-right: 1px solid #ECECEC; padding: 0 10px}
# header-top-nav ul li a: hover {color: # F53B3B; text-decoration: none; transition: all 0.25s ease 0s}
# header-top-media {location: relative; float: right}
# header-top-media .widget-content {background: transparent; margin: 0; padding: 0; overflow: hidden}
# header-top-media ul {margin: 0; list-style: none}
# header-top-media li {float: right; padding: 0}
# header-top-media li a {display: block; width: 30px; height: 30px; border-left: 1px solid rgba (0,0,0,0,0,03); background: url (http: //4.bp. blogspot.com/-hQcdzhfWnE0/VpeL3AsxrTI/AAAAAAAAGkc/AhaixeDQA0U/s1600/media.png) no-repeat #fff; text-indent: -9999px; transition: background .3s}
# header-top-media .Twitter a {background-position: -4px 3px}
# header-top-media .Twitter a: hover {background-color: # 40BFF4; background-position: -4px-57px}
# header-top-media .Facebook a {background-position: -40px 3px}
# header-top-media .Facebook a: hover {background-color: # 5C82D0; background-position: -40px-57px}
# header-top-media .GooglePlus a {background-position: -74px 3px}
# header-top-media .GooglePlus: hover a {background-color: # EA5D4B; background-position: -74px-57px}
# header-top-media .Youtube a {background-position: -113px 3px}
# header-top-media .Youtube a: hover {background-color: # CC181E; background-position: -113px-57px}
# header-top-media .Pain a {background-position: -150px 3px}
# header-top-media .Pain a: hover {background-color: # bd2126; background-position: -150px-57px}
# header-top-media .Instagram a {background-position: -185px 3px}
# header-top-media .Instagram a: hover {background-color: # 2a5b83; background-position: -185px-57px}
# header-top-media .Thumb a {background-position: -220px 3px}
# header-top-media .Thumb a: hover {background-color: # 34465d; background-position: -220px-57px}
# header-top-media .Rss a {background-position: -255px 3px}
# header-top-media .Rss a: hover {background-color: # ff9900; background-position: -255px-57px}
Finally
I started the fourth episode of creating professional blogger templates. Header is an important part of our episode blog today We will share with you today how to give a professional look to the Header section of Blogger Template? From today's episode we will be able to see the changes in the visual structure of Blogger templates.
In the figure above, there are several Manubar and Social Media buttons. This section will be on top of the Blogger Template. It is called Top Nav Bar in web design language. We added the Menu Bar to it as well as the Social Media button. This will make Top Nav Bar more attractive. In addition, its social media buttons have interesting Css3 effects. Adding it to your blog allows you to have more clear ideas about it. This type of Top Bar is only seen in the professional blogger template.
How to Customize Header?
Login to your blog first.
Then click on Template> Edit HTML.
By pressing Ctrl + F to the keyboard, you can see the <header> section as shown below.
In order to understand the above figure, I have added two screenshots together. First, search the <header> section. After looking at the <header> section of the template, you can see the image on the left side.
Then, after clicking on the number marked on the mark with the figure 1, you can see the image on the right side.
Now mark the image of the 2nd header <header> ... </ header> with the mouse or keyboard cut.
Then, when you search for the blogger template <body section, you will see the following code.
<body expr: class = '& quot; loading & quot; + data: blog.mobileClass'>
Now paste the cut portion of <header> ... </ header> under the top line.
Now again copy the code below <body .... and paste it below.
<div class = 'header-top'>
<div class = 'max-wrapper'>
<div id = 'header-top-nav'>
<ul>
<li> <a href='#'> ABOUT </a> </ li>
<li> <a href='#'> CONTACT </a> </ li>
<li> <a href='#'> PRIVACY </a> </ li>
<li> <a href='#'> SITEMAP </a> </ li>
<li> <a href='#'> OTHER </a> </ li>
</ ul>
</ div>
<div id = 'header-top-media'>
<ul>
<li class = 'Rss'> <a class='Rss' href='#' title='RSS'/> </ li>
<li class = 'Thumb'> <a class='Thumb' href='#' title='Thumbnail'/> </ li>
<li class = 'Instagram'> <a class='Instagram' href='#' title='Instagram'/> </ li>
<li class = 'Pain'> <a class='Pain' href='#' title='RSS'/> </ li>
<li class = 'Youtube'> <a class='Youtube' href='#' title='Youtube'/> </ li>
<li class = 'GooglePlus'> <a class='GooglePlus' href='#' title='GooglePlus'/> </ li>
<li class = 'Facebook'> <a class='Facebook' href='#' title='Facebook'/> </ li>
<li class = 'Twitter'> <a class='Twitter' href='#' title='Twitter'/> </ li>
</ ul>
</ div>
</ div>
</ div>
<div class = 'clear' />
Search again <div class = 'fauxborder-left header-fauxborder-left'> section.
Add the line <div class = 'max-wrapper'> to the top of the code above.
Then press Ctrl + F to return to the keyboard </ header>.
Now paste the </ div> section on the </ header> tag above.
Top Nav Bar Adding Style Sheet
By pressing Ctrl + F to the keyboard .header-outer {Search the section below.
.header-outer {
background: $ (header.background.color) $ (header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
Copy the code below to replace the code above and replace it.
.header-outer {
background: #FFF;
_background-image: none;
}
Now press Ctrl + F to move to the keyboard]]> </ b: skin> section.
Copy the following CSS codes]]> </ b: skin> paste on the tag.
/ * Top Wrapper
-------------------------------------------------- ------ * /
.header-inner .Header # header-inner {padding: 30px 0px}
.header-top {background: #FFF; height: 29px; margin: auto; padding-bottom: 1px; position: relative}
.header-top .max-wrapper {background: #fafafa; height: 29px; overflow: hidden; border-bottom: 1px solid rgba (0,0,0,0.03); border-left: 1px solid rgba (0,0 , 0,0.03); border-right: 1px solid rgba (0,0,0,0.0.0)}
.max-wrapper {max-width: 1000px; margin: 0 auto}
# header-top-nav {width: 100%; max-width: 65%; display: inline-flex; margin: 0 auto; height: 29px; overflow: hidden; font-size: 13px; font-weight: 700}
# header-top-nav ul {margin: 0; list-style: outside none none; padding: 0}
# header-top-nav ul li {float: left; list-style: none; padding: 8px 0}
# header-top-nav ul li a {font-size: 12px; border-right: 1px solid #ECECEC; padding: 0 10px}
# header-top-nav ul li a: hover {color: # F53B3B; text-decoration: none; transition: all 0.25s ease 0s}
# header-top-media {location: relative; float: right}
# header-top-media .widget-content {background: transparent; margin: 0; padding: 0; overflow: hidden}
# header-top-media ul {margin: 0; list-style: none}
# header-top-media li {float: right; padding: 0}
# header-top-media li a {display: block; width: 30px; height: 30px; border-left: 1px solid rgba (0,0,0,0,0,03); background: url (http: //4.bp. blogspot.com/-hQcdzhfWnE0/VpeL3AsxrTI/AAAAAAAAGkc/AhaixeDQA0U/s1600/media.png) no-repeat #fff; text-indent: -9999px; transition: background .3s}
# header-top-media .Twitter a {background-position: -4px 3px}
# header-top-media .Twitter a: hover {background-color: # 40BFF4; background-position: -4px-57px}
# header-top-media .Facebook a {background-position: -40px 3px}
# header-top-media .Facebook a: hover {background-color: # 5C82D0; background-position: -40px-57px}
# header-top-media .GooglePlus a {background-position: -74px 3px}
# header-top-media .GooglePlus: hover a {background-color: # EA5D4B; background-position: -74px-57px}
# header-top-media .Youtube a {background-position: -113px 3px}
# header-top-media .Youtube a: hover {background-color: # CC181E; background-position: -113px-57px}
# header-top-media .Pain a {background-position: -150px 3px}
# header-top-media .Pain a: hover {background-color: # bd2126; background-position: -150px-57px}
# header-top-media .Instagram a {background-position: -185px 3px}
# header-top-media .Instagram a: hover {background-color: # 2a5b83; background-position: -185px-57px}
# header-top-media .Thumb a {background-position: -220px 3px}
# header-top-media .Thumb a: hover {background-color: # 34465d; background-position: -220px-57px}
# header-top-media .Rss a {background-position: -255px 3px}
# header-top-media .Rss a: hover {background-color: # ff9900; background-position: -255px-57px}
Finally
No comments