Amfas Tech | Technology, Blogging & Internet Marketing: Blogger Templates

Meton Responsive Blogger Template | Download and Customization

Meton-Responsive-Seo-Blogger-Template

Customization:

I have made the customization easy for you by breaking the template code into sectional parts. Find the following pieces of code in the template after installation and make your customization over there.

Header:
.header-wrapper {
background: #272727;
display: block;
float: left;
width: 100%;
padding: 0;
padding-bottom: 25px;
border-bottom: 15px solid #fff;
}

Header Social Buttons:
.topbar-right {
text-align: right;
padding-right: 15px;
margin-top: 45px;
margin-bottom: 38px;
}

Header News Trending:
.top-bar {
background: none repeat scroll 0% 0% #fff;
color: #ACACAC;
padding: 0;
font-size: 12px;
line-height: 40px;
}


Header Menu Bar:
#menu-bar {
float: left;
width: 100%;
background: #fff;
margin-top: -63px;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
ul#menu-main {
padding: 5px;
margin: 0;
}
ol, ul {
padding: 10px 0 20px;
margin: 0 0 0 35px;
text-align: left;
}
ol, ul {
list-style: none;
}




Featured Posts(slideshow section):
.featured-posts-section {
background: #f9f9f9;
border-bottom: 1px solid #ddd;
padding-top: 20px;
}

Top 728x90 Ad:
<!-- google_ad_section_show_on_home_and_blog_start -->
<center>
<img src="http://3.bp.blogspot.com/-nW6nkZn6aSs/U_HNBciHa8I/AAAAAAAAAGU/-5Wo0JPs06U/s1600/ad-darker.jpg">
</center>

Sidebar:
.sidebar {
width: 32.33%;
overflow: hidden;
float: left;
margin-top: 8px;
}

Bottom 728x90 Ad:
<!-- google_ad_section_show_on_home_and_blog_end -->
<center>
<img src="http://3.bp.blogspot.com/-nW6nkZn6aSs/U_HNBciHa8I/AAAAAAAAAGU/-5Wo0JPs06U/s1600/ad-darker.jpg">
</center>

‘Load More Articles’ Button:
#load-more a:hover {
-webkit-box-shadow: inset 50pc 0px 0px #D34444;
-moz-box-shadow: inset 50pc 0px 0px #D34444;
box-shadow: inset 50pc 0px 0px #D34444;
}

#load-more a {
background: #e84c4c;
padding: 15px 0;
color: #fff;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 100%;
overflow: hidden;
font-weight: 700;
display: inline-block;
-webkit-transition: all 200ms;
-moz-transition: all 200ms;
-o-transition: all 200ms;
transition: all 200ms;
}






Footer:
#footer {
background: #202020;
display: block;
overflow: hidden;
width: 100%;
color: #959595;
}

Hope I covered the main elements that can be customized. Feel free to ask if you need any guidance in customizing this template.
Continue Reading

6 Coming Soon Counter Templates for Blogger 2014

There is a need to inform your visitors when you are about to change the template or making any other changes to your blog that the site is not down but just undergoing maintenance. The following are the list of coming soon counter blogger templates found to be best performing in attracting visitors even when in maintenance.
 

Launcher Template

launcher-blogger-template

 

Doorstep Template

doorstep-blogger-template

DEMO | DOWNLOAD

 

Coming Soon Template

comingsoon-blogger-template

DEMO | DOWNLOAD

 

WijayaKusuma Template

wijayakusuma-blogger-template

DEMO | DOWNLOAD

 

Landis Template

landis-blogger-template

DEMO | DOWNLOAD

 

Counter Template

counter-blogger-template

DEMO | DOWNLOAD

Continue Reading

Sorbet Responsive Blogger Template Download & Customization

Sorbet is a new responsive blogger template that was released by Automattic recently. It is a two column template with clean design and high readability.

'Sorbet Blogger Template

Customization

Customizing Header

The header section of this template has the following defaults:
.site-header {
background: #242d36;
border-bottom: 5px solid #1e252d;
margin: 0;
position: relative;
width: 100%;
z-index: 100;
You can change the ‘background’ and ‘border-bottom’ colors as per your wish. For e.g., If Changing the default background color of header section from

customizing deafult header
to
newly customized header

and border-bottom color to ‘#9B1111’ with extended border to ‘15px solid’ looks like as follows,

customized header border

You can also change ‘position’ from ‘relative’ to ‘absolute’. Don’t edit this property unless you are a pro designer. Because the improper value of ‘position’ property can spoil the layout of the template.

Note: Changing ‘width’ property to pixels would affect the responsiveness of the template.

Customizing Titles & Body Background

Post Titles in the template has the following defaults:
.entry-title a {
color: #f45145;
text-decoration: none;
}
You can change the color of the post title by replacing the default value ‘#f45145’ to any other value of your wish.

If you want to see the title differently, change the ‘text-decoration’ value to ‘overline’ or ‘line-through’ or ‘underline’.

Post body in this template has the following defaults:
.hentry {
background-color: rgb(56, 37, 37);
border-top: 8px solid #f45145;
margin: 0 0 81px;
padding: 27px 27px 22px;
position: relative;
}
Replace the ‘background-color’ with either hexadecimal or rgb color codes.

Customizing Fonts

The body fonts have the following defaults:
body {
color: #656e7f;
font-family: "PT Serif","Source Sans Pro", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 27px;
}
Change the defaults to your custom values. Customizing fonts doesn’t need any pro designer experience.

Go to www.google.com/fonts, choose a font name and replace it with primary ‘PT Serif’ and secondary ‘Source Sans Pro’ font positions.

Customizing Footer

The footer section of the sorbet template has the following defaults. Find the ‘site-footer’ code in the template and customize it to your needs.
.site-footer {
background: #242d36;
border-top: 5px solid #1a2027;
clear: both;
color: #f0f1f3;
font-size: 0.73333em;
line-height: 1.8em;
margin: 27px auto 0;
padding: 27px;
text-align: center;
width: 100%;
}

These are the basic customizations one can do for a template. Comment below if you need any assistance in customizing the template! We’re happy to help you!
Continue Reading

Top 10 free SEO friendly blogger templates 2014

Search engine optimization is the necessary thing for blogger. Applying SEO after template installation would be a hill hiking task for non-tech bloggers. In such a case, it is better to install SEO optimized template for your blogs before posting something in it. Here are some SEO friendly blogger template that loads faster and well optimized to index your blog in search engines.

1. Ada Theme

Ada SEO friendly blogger template

2. KasKus SEO friendly template

Free Template Shadow With Slider (Fast,SEO,Clean)

3. Super SEO blogger template

super-seo-blogger-template-500x360

4. Kontify SEO friendly blogger template

kontify-blogger-template-500x360

5. Flat Mag blogger template

flatmag-blogger-template-500x360

6. Pinfinity blogger template

pinterest like blogger template

7. Mintify blogger template

mintify seo friendly

8. Maggner blogger template

Maggner Blogger Template

9. Press Online blogger template

pressonline

10. Big Mag blogger template

BigMag-Blue

What do you think? comment your opinion!
Continue Reading

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’.
Education Time_thumb[4]

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(http://1.bp.blogspot.com/-yB7SjJ1BUG8/To9N5ToaUTI/AAAAAAAAEJs/UcWMCcjrdC8/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(http://1.bp.blogspot.com/-0MHglX_1QFs/To9OC8_11fI/AAAAAAAAEKw/RoiYaka77cM/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(http://3.bp.blogspot.com/-fWD7PfxQYjk/To9OCUeW2HI/AAAAAAAAEKs/0JuakfsIHWw/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;}
Continue Reading

Education Time blogger template | Download & Customization

Education Time blogger template is well suited for the blogs that provides frequent updates. The layout is divided into 3 columns in content space and 3 columns in footer space. It features multi-level drop down CSS menu, slider with featured posts.

Education Time

This  template was designed by ‘premium blogger templates’ team. Demo of this template is available for preview. Take a look at it.

About the template

Template Name : Education Time
Designer             : Lasantha Bandara / Free WordPress Themes
Released Date    : October 8, 2011

Download

You can download the template from the following links:
Download from Mediafire
Download from PremiumBloggerTemplates

Customization

Customizing this template is simple. Learn how to do it
Continue Reading

Top 10 Free Responsive Blogger Templates 2014

After successful pick out of ten new blogger templates and ten professional blogger templates of 2013 in the past, Amfas Tech has set its first step to write about blog templates in this new year. As responsiveness has become one of the top most considered issues of blog design, the demand and desire to have a responsive templates is increased. I give you links of some top responsive latest blogger templates that are available on the internet. Style your blog with new template for this new year.

 

1. Codify Responsive Blogger Template

Codify-Magazine-Blogger-Template (1)

Demo | Download | Customize

 

2. Red Hood Portfolio Responsive Blogger Template

Red-Hood-Portfolio-Blogger-Template

Demo | Download | Customize

 

3. News Magazine Responsive Blogger Template

News-Magazine-Blogger-Template

Demo | Download | Customize

 

4. Montric Magazine Responsive Blogger Template

Montric

Demo | Download | Customize

 

5. Notify Minimal Responsive Blogger Template

Notify-Blogger-Template

Demo | Download | Customize

 

6. Plazify Responsive Responsive Template

plazify

Demo | Download | Customize

 

7. Sentify Responsive Blogger Template

fbsentify

Demo | Download | Customize

 

8. Resizable Responsive Blogger Template

Resizable-Blogger-Template

Demo | Download | Customize

9. Flat Diary Responsive Blogger Template

flat diary premium blogger template

Demo | Download | Customize

 

10.  Geekiesm Responsive Blogger Template

geekiesm premium blogger template

Demo | Download | Customize

Continue Reading

10 New Blogger Templates for Free

After listing out the Top 10 Professional Templates for Blogger, there came many such ones. The following are the some of those templates that are ready to sway on the internet for the year 2014. You can watch the demo, download the template by simply clicking on the concerned buttons below.

 

1. SoundStage

Latest Blogger templates 2013, Blogger templates flat design model, Blogger templates magazine theme, New blogger templates 2013

 

DEMO | DOWNLOAD


2. Point

Latest Blogger templates 2013, Blogger templates flat design model, Blogger templates magazine theme, New blogger templates 2013

 

DEMO | DOWNLOAD


3. UTurn

Latest Blogger templates 2013, Blogger templates flat design model, Blogger templates magazine theme, New blogger templates 2013

 

DEMO | DOWNLOAD


4. Andrioder

Latest Blogger templates 2013, Blogger templates flat design model, Blogger templates magazine theme, New blogger templates 2013

 

DEMO | DOWNLOAD


5. Videoism

Latest Blogger templates 2013, Blogger templates flat design model, Blogger templates magazine theme, New blogger templates 2013

 

DEMO | DOWNLOAD


6. Loenpia Portfolio

Latest Blogger templates 2013, Blogger templates flat design model, Blogger templates magazine theme, New blogger templates 2013

 

DEMO | DOWNLOAD


7. 25-Pixel

Latest Blogger templates 2013, Blogger templates flat design model, Blogger templates magazine theme, New blogger templates 2013

 

DEMO | DOWNLOAD


8. Vortex

Latest Blogger templates 2013, Blogger templates flat design model, Blogger templates magazine theme, New blogger templates 2013

 

DEMO | DOWNLOAD


9. Codify

Latest Blogger templates 2013, Blogger templates flat design model, Blogger templates magazine theme, New blogger templates 2013

 

DEMO | DOWNLOAD


10. Montric

Latest Blogger templates 2013, Blogger templates flat design model, Blogger templates magazine theme, New blogger templates 2013

 

DEMO | DOWNLOAD

 

Don’t hesitate to share your opinions on these templates! Thank you!

Continue Reading

Top 10 Free Professional Blogger Templates 2013

Blogger templates becoming much more adaptive from other blogging platforms. Template is the first impression gainer for a website or blog. The following collection is the top 10 & latest professional templates for blogger for free.




1. Digital Inspiration-Labnol Template


Digital Inspiration template


2. MBT Template


MBT template

3. Sensational-Responsive Blogger Template


Sensational Blogger Template


4. Estyle Blogger Template


Estyle blogger template

5. WebDesign Blogger Template


WebDesign Blogger Template


6. Flat UI Blogger Template


FLAT UI Responsive Blogger Template


7. Eleven40 Blogger Template


Eleven40 Blogger Template



8. Chopstick Responsive Blogger Template


Chopstick Responsive Blogger Template



9. Balance Responsive Blogger Template


Balance Responsive Blogger Theme Demo


10. B-responsive Blogger Template


B-responsive Blogger Template


Is this template collection good? Share your thoughts in comments..:)
Continue Reading