Customizing ‘Education Time’ blogger template

As said earlier Education Time blogger template is good for those blogs who give updates on educational and career opportunities. The Education Time template can be easily customized to match your own blog niche and content. Let’s start making some key customizations to make it look real your blog.

Download Education Time blogger template here

Important:

• To edit the template, got to Template > Edit HTML.
• To find the code in the edit HTML section, Ctrl+F, type or paste the code in the ‘find’ area and hit ‘Enter’.

Customizing Header

You can find the header CSS code in the following section. Modifying CSS would reflect changes in the blog’s design.

/* Header-----------------------------------------------*/
#header-wrapper{width:930px;margin:0 auto 0;height:60px;padding:29px 0px 29px 0px;overflow:hidden;}
#header-inner{background-position:center;margin-left:auto;margin-right:auto}
#header{margin:0;border:0 solid $bordercolor;color:$pagetitlecolor;float:left;width:47%;overflow:hidden;}
#header h1{color:#ffffff;margin-top:0px;margin-left:0px;padding:0px 0px 8px 0px;font-family:Arial, Helvetica, Sans-serif;font-weight:bold;font-size:30px;line-height:30px;text-shadow:0px 1px 0px #000;}
#header .description{padding-left:2px;color:#ffffff;font-size:14px;padding-top:0px;margin-top:-25px;text-shadow:0px 1px 0px #000;}
#header h1 a,#header h1 a:visited{color:#ffffff;text-decoration:none}
#header h2{padding-left:15px;color:#ffffff;font:14px Arial,Helvetica,Sans-serif}
#header2{float:right;width:51%;overflow:hidden;}
#header2 .widget{padding:0px 0px 0px 0px;float:right}
.social-profiles{padding-top:0;height:32px;text-align:right}
.social-profiles img{margin:6px 0 0 6px !important}
.social-profiles img:hover{opacity:0.8}

Modify the width of the header if you wanted by replacing width=930px; with the length you desired. I recommend not to change the width of the header as it can spoil the exactness of the layout of the template.

Header wrapper in the layout can be identified with the following starting line of code:

<div id='header-wrapper'>

By default, you can just have only one widget in this area. The following code is responsible for the limitation of adding widgets:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Set maxwidgets=’1’ to any limited number if you wanted to add more widgets this this section. Also set showaddelement=’yes’  to enable the ‘Add a gadget’ option in this header section. Remember that setting maxwidgets only is not enough to enable adding more widgets, you must set showadelement=yes also.

To lock/unlock the widgets, you should change the locked attribute in the widget code. For example to unlock the header widget, I would change locked=’true’ from the following code to ‘false’.



Original code:

<b:widget id='Header1' locked='true' title='EducationTime (Header)' type='Header'>

Modified code:

<b:widget id='Header1' locked='false' title='EducationTime (Header)' type='Header'>

Customizing Drop-Down Menu

To customize the drop down menu, find the below code from the template from which the drop down menu links starts.

<div class='menu-secondary-wrap'>

Customizing Body

To customize the background color of the blog, replace #F2F2F2  in the attribute background: with the color you wish. You may give color names like red,green,blue,magenta or their hexadecimal codes directly.

body{background:#F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt3GFfCgR8ZIHCJOua8RAlOL1_j0dsAC5XOJY8-XTXb98H8hPq4kybrzjY_q2EGvoi_41mucoiE0iKNpzm2eEGQe7kALGQLWS7op567bu62LtZCn0OMKNCvgd_O3noC9T61s-fj2jrai4/s1600/background.png) left top repeat-x;color:#333333;font-family:Arial,Helvetica,Sans-serif;font-size:13px;margin:0px;padding:0px 0px 0px 0px;}

To customize the body fonts, simply add or change the font-family fonts you wished for. The reason why several fonts are specified at a time for this attribute is to eliminate the error with the several web browser renderings. Not every font is supported in every browser, I specifically mean the browsers in our handheld devices and so on.

Customizing Footer

To customize the footer, consider the the following code from the template to blend it in to our required design and look.

Hint: To find the footer section code simply search for FOOTER in your template.

/* FOOTER */
#footer{}
#copyrights{color:#FFF;background:#045399;text-align:center;padding:20px 0;text-shadow:0 1px 0 #000}
#copyrights a{color:#FFF}
#copyrights a:hover{color:#FFF;text-decoration:none}
#credits{color:#333;text-align:center;font-size:11px;padding:10px 0;text-shadow:0 1px 0 #fff}
#credits a{color:#333;text-decoration:none}
#credits a:hover{text-decoration:none;color:#333}
#footer-column-container {clear:both;padding:0px 0px 10px 0px;background:#fff;color:#313131;font-size:13px;}
#footer-column-container a{text-decoration:none;color:#313131;}
#footer-column-container a:hover{text-decoration:underline;color:#065295;}
#footer-column-container h2{color:#414445;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJzA2EU-YqHDYkosdRvFefQuctruIH26ApGNV1kALS-seO_1a8c1sNwmGChWacJ9ocZS5RvZKVz5xh3c9e8RvCKruJ4SJqCPinscL9LNkEY4iFeXCVUP27nXaGidK_hwsaGSaVj8fSe_E/s1600/widgettitle-bg.png) left top repeat-x;font-size:16px;line-height:16px;font-family:Arial,Helvetica,Sans-serif;font-weight:bold;margin:0 0 10px 0;padding:9px 10px;text-transform:uppercase;border-left:4px solid #187EB8;}
#footer-column-container ul{list-style-type:none;list-style:none;margin:0px;padding:0px;}
#footer-column-container ul li{padding:8px 0 8px 12px;margin:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlaWTAzOXf1nFFhYKQVq20hNTbu5hoO2l54XC1xp8-oF4u6VhKNCMRWatIqW3vJZisFuuFnz8VK_ibrFwm_YpTldKZKMyF6H8ptCMHgE71PRHC0F18Iz2n48rePD5pJHtLY14i2H8KVTQ/s1600/widget-list.png) left 11px no-repeat;border-bottom:1px solid #EAEAEA;}
#footer-column-container .widget{margin: 0 0 15px 0;padding:0px;}
.footer-column {padding: 4px 10px;}