How To Choose And Customize Blogger Template

In this article, I am covering the following topics.

  • What is Business Goal for the Website
  • Home Page Influence
  • Compare Blogger Template Advantage and Disadvantages
  • Types of  Blogger Template and their layout
  • Template Implementation Process
  • Coding 16 Parts | My Blogger Editing Experience 
  • Same Template with Different Loading Time
  • How to choose the blogger template?

While choosing a blogger template, we need to find who is our target audience/visitor, depending on that we need to choose our template.

 Two Types of Blog
1)SEO Site
2)Technical blog
if your site is related to providing services like SEO, blogger support, Digital marketing. Then you need to focus on design.
1)Attractive images
2)Long scrolling Home page
2.1)Good contact us page 
2.2)Good about me pages 
2.3)About your clients/Their Projects
2.4)Then Organisation portfolio
At the same time if your page is more related to the content-oriented. Technical articles, programming, Problem/Solution. Then you can write Focus on the simple site which focuses on
1)Home page
1.1)Good Navigation Link and organized in a structured way.(rather than too much image/design-oriented)
2)Individual page(SEO Friendly).
2.2)breadcrumb navigation
2.3)site loading speed
2.4)Less site size
2.5)Mobile friendly site
There are things you need to focus on.
   Really choosing the correct blogger template time consuming one. So take enough time. Then choosing blogger template should serve your site for at least 3 years.
1)it should meet all the latest SEO techniques(like breadcrumbs)
2)Good link navigation
3)gmetrix score.
4)Mobile user friendly

How much important for the HOME page

         The HOME page is very important for all the sites. Because it drives more visitors to your site.if you have a good site with proper designing, you can increase 50% internal traffic.you can get this information, from the following option in Google Analytics

From google analytics,
1)Behavior - Site Content - All Pages and Landing Pages Bounce rate is very less
2)session duration you can get the information from the Landing page
3)Behavior Tab ( Site content ( All pageviews - Landing Pages) while comparing you can get the information about how much traffic your homepage is increasing.
4)My site Home page

Landing Pages
a)avg session duration is 3 times higher compared to other pages.
b)Bounce Rate is 30% is less compare to the Avg Bounce Rate.

while Compare HOME page vs All Pages
c)Avg time on page is 1:10 is less compared to individual page(since home page user will move to another link)
d)Bounce Rate is 32 % less
e)Exit 44% is less
So, my site's home page plays a very vital role.

Compare Blogger Template Advantage and Disadvantages

  While choosing a template all the templates have some advantages and disadvantages. So rather than go ahead with some report. you have to get all the information and make sure How much is properly fit for your blogger's success. Because some  blogger template

1)make a good design but need a lot of coding knowledge and page design also good, another type
2)Design is medium level and no need to focus too much on design/coding. At the same time, you can present your content well and it will give a more user friendly rather than a profound website.

Types of sites - Technology(SEO/Coding) Vs Design 

1)Some sites have less site size, good loading speed but need to do a lot of modification in coding, need to know the coding.
2)At the same time in another part site, size and loading time is a moderate level. but no need to focus on code modification too much.
Note: how will you measure the blog template size. blog size we can't just simply evaluate with GTmetrix - size/speed. Because of the same template when you are applying with your site with a huge no of posts. the size of the individual post will automatically increase. Try to mainly focus to deliver content or service. it is not important about who we are initially.You can check different demo blogger template speed using gtmetrix,size,yost , loading time. speed.

Template Implementation Process 

1)Good planing 2)Implementation 3)Testing
If we face any error understand the specific part where we are facing the error
If we approach this in a firm manner, we can do it successfully or else a complete blogger will become a disorder.
Good Expert troubleshooting: Each and every step is important.

Coding 16 Parts | My Blogger Editing experience 

  1. How To Change The Whole Blogger Background Layout
  2. How To change complete Blogger content Width
  3. How To Change Line-height
  4. For font name,size,color
  5. How To Change Body Margin 
  6. How To change template header h2 color
  7. Change the header Padding
  8. How To Reduce the no of requests.
  9. How To Increase website Page speed?
  10. To Change the complete header
  11. How To Make the fixed menu 
  12. Particular Post - Change element
  13. Inside Post sidebar
  14. Post Border
  15. Post alignment
  16. Search Box Architecture
Customize BLogger template with source code

1)How To Change The Whole Blogger Background Layout. -- Line 59
a)Find out, This is how it is defined in the xml using Firefox/google chrome div element
once find goto the particular part change width
#outer-wrapper{max-width:1250px;margin:0 auto;background-color:#fff;box-shadow:0 0 5px rgba(0,0,0,.1)
2)How To change complete blogger content Width(header,header menu,post,sidebar) --Line 59 Just try it or else play with code, you may get a clue.
.row{width:1200px} (compare to outer-wrapper it should have less 50, automatically configured for padding)
3)How To Change Line-height - line number - 273
item-post .post-body{width:100%;line-height:3em;overflow:hidden;padding:20px 0 0}
it should be em not px.em will create an issue
4)for font name/size/color- line number -58
body{background:$(body.background);background-color:$(body.background.color);font-family:'Montserrat',sans-serif;font-size:18px;font-weight:400;color:$(body.text.color);word-wrap:break-word;margin:0px 0px 0px 50px;padding:0}
post-body post-content- (declare - font-and other elements) Most of the things, you can get this information from the firefox inspect element.
What I have understood.
 The coding part is always somewhat tough. For me to change the blogger width it took some time and a bit frustrating and daunting job. Because I have tried around 3 to 4 hours with no fruit. then I got the answer. We need to work discipline or else we will pollute everything.
from studentcpu.
font-family - "Open Sans",sans-serif
color -#343434;
Blogger Attributes
font-size - 2
font-family 'Montserrat',sans-serif
font-size 18px
width - 1200
post-1150
padding 50

Problem: Main problem - Able to increase the width, but unable to change the left margin.
Solution: if we properly set the whole layout- there template outer layout- then the whole blog will be centralized automatically no need to set the margin. if we did anything wrongly like inner content width increase but didn't increase the outer-wrapper then my whole blogger alignment will suffer. Then I need to look at the margin and other elements. Once I have set up in proper order.
1)Outer wrapper width of 1200
2)Inside content - 1150
Then the whole blog is working properly without any issue.
What I have done mistake
1)outer wrapper width - 960
2)Inside content - 1200
That creates a complete mess.
Then I worked around the margin, But it took a lot of my time. But anyhow if you want to know how to change the margin please read below
How To Change Body Margin
5)Body Content CSS - Line number 58
body{background:$(body.background);background-color:$(body.background.color);font-family:'Montserrat',sans-serif;font-size:14px;font-weight:400;color:$(body.text.color);word-wrap:break-word;margin:0px 0px 0px -50px;padding:0}
Here it is mention margin - 50px(+/- we can adjust left from the standard scale)
6)How To change template header h2 color - Line number 582
color: #3D85C6;-Current Blue color
7)Change the header Padding - After size - Padding - Line 125
.header-header{background-color:   padding:10px
8)How To reduce the no of requests.
Gtmetrics - Good to tool find the no of request and their size.- Waterfall
9)How To Increase website Page speed? | Same Template why Different Loading Time
    To Increase the website page speed, if the website is lightweight there possibility will increase. So, it is always trying to keep less no of post.which will help you to make a lightweight individual page.it is a simple and effortless technique.
Relationship between individual page vs Total no of pages while the page is loading internally the script will load the related label and post. which may increase the page size and loading time that is the reason the best recommendation is always to try to keep a minimum post and minimum page size. if there is any zombie page, remove it.
This information you can get clear on gtmetrix.
a)I need to Check two Thing - template, Removing post increasing SEO or not.and page speed
---> Using Google Analytics find the last 100 pages of 200 in the last one month which is giving less traffic. Move into student sweat.
--->Using GTmetrics - find which is taking huge load time if any external javascript or CSS. if it is not necessary remove it.
b)Cloudflare increasing page not(we can do it later also, we know it.)
But template as soon as possible, so SEO breadcrumb error will fix.
10)To Change the complete header width Line 125
.header-header{background-color:$(header.bg);width:1380px;height:60px;position:relative;overflow:hidden;padding:10px 0;margin:-10px 0 0 -80px;}
11)How To Make the fixed menu - line number 125
.header-header {
postiong:fixed;
overflow:initial;
margin:-40px 0 0 -80px
z-index:60
border-width:5px
border-style:solid;
border-color:#e794a9
Postion:fixed : z-index will help menu fixed
Line 205 - ul.hot-posts add the margin with below position
margin:65px -5px 0px 0px;
Why are we adding Line 205 hot-post margin?
since we change the previous div position into fixed it will affect the next div position.
So to adjust the margin properly. we need to set this margin.
ul.hot-posts{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;min-height:140px;margin:50px -5px 0px 0px;}
Since, home page and individual page has different div tag, we need to change INDIVIDUAL PAGE div margin also
blog-post -254
margin:55px 25px 0 55px;
top 55px
right 25px
bottom 0px
left 55px
.sidebar .widget-content - Line number - 406
margin 35px 0p;
12)Particular Post - Change element
.item-post h1.post-title
13)Inside Post sidebar - Align the width
Complete Layout
#outer-wrapper - Max-width -1250
.row - 1200px
Home Page
#main-wrapper - Wdith 72% -69%
#sidebar-wrapper -27%
14)Post Border
.blog-post -line 254
margin:55px
border-width:1px
border-color:#b61c43;
border-style:dashed;
padding:15px
15)Post alignment
<div class='blog-posts hfeed container' style="margin: 0 -60px 0 -55px;">
1409 -
There is no need to set the post width, instead set margin it will automatically increase left and right width.--> index-post-wrap
16)Search Box Architecture
-----------------------------
->nav-search
----->search-form
-------->search-input
-------->hide-search
->show-search
---->::before
Property explained
-------------------
->nav-search
----->search-form
-------->search-input (font-size-20px -> search query font size)
-------->hide-search
->show-search
---->::before -1) font size:22px (How much icon should display) 2)font-weight:100 icon density 3)search represent as content \f002
background clolor - #b61c43

Post a Comment

0 Comments