CustomizeMe Blogger Template (Helplogger Style)

CustomizeMe is a highly customizable Blogger template and SEO optimized to index your blog faster. It has been designed in a way that it can be easily customized according to your needs without having to touch the code of your template. All you need to do is to hit the "Customize" button and you are ready to start customizing your blog. Just try the template settings and be creative with the theme fonts, colors and backgrounds.

Some of the Template Features include:

- Both Flat and Grid Design
- Sticky/Fixed Left Navigation Menu Bar
- Customized Popular Post
- Recent Posts
- Recent Comments
- Page Numbering
- Expandable Search Bar
- Floating Social Bar Widget
- Author Bio with Image
- Related Posts with Thumbnails
- 404 Error Page
- Seo friendly


How to install the CustomizeMe Template

1) Sign in to your Blogger blog and head to "Template"
2) Backup the current template by clicking the "Backup / Restore" button > "Download full template"

blogger template backup

3) Download and open the CustomizeMe.xml file with a Notepad

open xml with notepad

4) Select all the code and to copy it to clipboard

select all code in notepad

5) Go again to Template and click the "Edit HTML" button

blogger template, edit html

6) Select all the code of your current template and delete it, then paste the code that you just copied earlier
7) Preview your blog and if everything is ok, hit the 'Save Template' button.

Please note that this method might delete some of your widgets, so if you want to keep any of them, just Browse for the CustomizeMe.xml file (step 2) and click on the "Upload" button (ignore the rest of the steps).

And that's it! Now you are ready to use the CustomizeMe Blogger template.

Adding menu items

Go to Template > Edit HTML, click anywhere inside the code area and press the CTRL + F keys. Inside the search box, type "item 1" and hit Enter to find it - see the screenshot below

change blogger template html

Change Item 1, 2, 3... with your page titles and replace "add-url-here" text with your url. Finally, click the "Save template" button to save the changes.

Recent Posts & Comments Widgets

Search (CTRL + F) for the following address and replace it with your own (you will find it twice and you must change it in both places):
http://helplogger.blogspot.com

blogger template html

Please pay attention to not have two forward slashes at the end of your address, otherwise the scripts will not be able to read the blog's feeds. Save your template after you have made these changes.

Enabling "About the author" profile

Go to "Layout" and click the "Edit" link of the "Blog posts" element. In the pop-up window that appears, check the "Show Author Profile Below Post" option and hit Save.

blogger author profile

Changing colors and fonts in the CustomizeMe Template

Go to Template > click the "Customize" button. Here you can do lots of cool stuff, like change all the default fonts, text and background colors - basically, anything you want.

Some of the customizations that you can make:
Add a Background image: Background > Upload Image > Browse and hit Done

blogger template designer, backgrounds

Change Fonts, Texts and Background Colors: go to Advanced > select the Element that you want to customize > select your favorite colors and fonts.

blogger advanced designer

To remove a color, just type "transparent" inside the text box as you can see in the above screenshot (4).

Once you're satisfied with the result, hit the "Apply to blog" button and view your blog. That's it!
Have fun customizing it ;)
Our web today is a wonderful place. It's increasingly become a knowledge hub for strollers around the globe. And you know what the best part is? It does not have a religion, race or color, that's where perhaps its strength lies in. Point being, no matter what you are after, from details of products to how to use them, from fruit varieties to language origins, from how to hack Facebook account to how to set up a custom domain name in Blogger. Each and everything is there, in abundance and easily available. Now I know you are here to understand how you can setup/host your custom domain on your Blogger account. So let's get on with it, without further delay.
blogger custom domain, godaddy

Before we start

It's important that you realize, it isn't difficult to add a custom domain into your blogger account. If you are a blogger, it's perfect if you already own your own blog, it shows your passion and love for blogging and provides you with freedom to move from one platform to another, when and if you need. Also from users perspective, it's much easier for them to remember and visit your blog at customized address like myblog.com than myblog.blogspot.com.

One of the best things about Blogger is that it does not push you to host your site with blogger. It is entirely your own choice to choose from either of two hosting plans 'hosting on BlogSpot' with address myblog.blogspot.com, or going with a custom domain with address myblog.com.

Some Popular Web Hosting Sites:

If you don't already have purchased yourself a custom domain, these are the places that you should be looking for to get one:

- EasyDNS
- 1and1
- GoDaddy.com
- Yahoo! Small Business
- No-IP
- ix web hosting

So now if you have bought yourself a domain, from either of these you would have an IP address and a name. Let's assume our is 'mynewdomain'.com.

Well, it's time to start adding a custom domain to your blogger account.

Remember:

Here we are using setup for GoDaddy.com, the most popular domain name provider. For custom domains from other sites, the steps are almost same, so don't vanish.

Setting Up Blogger Custom Domain

Step 1. Login to your Blogger account at www.blogger.com.

Step 2. Click on your blog and then go to "Settings", choose "Basic".

blogger custom domain

Step 3. Under "Publishing" section, click "+ Setup a 3rd party URL for your blog".

Step 4. Under "Third-party domain settings" next to "http://" type your domain that you just purchased and make sure that you don't forget to add the "www" prefix to the domain name.

set up custom domain in blogger

Step 5. Click "View settings instructions" to get the blogger's official instructions. On the Blogger instruction page, choose the "On a top-level domain (www.example.com)" option.

custom domain in blogger

Step 6. Under the point 9 of instructions, 4 IP addresses will be given, copy and save all 4 of them.

Step 7. Go back to your Blogger Settings and press Save. It won't get saved and an error will appear saying 'We have not been able to verify your authority to this domain. Error 32.'

setting up blogger custom domain

Step 8. Under the error, you will see two fields "Name, Label or Host Field" and "Destination, target, or Points To" field. Copy data of both rows from these fields.

Step 9. Now log in to your GoDaddy.com account and click on "My account" on the upper right corner > select "Manage my Domains".

godaddy manage domains

Step 10. Here you should see your purchased domain name > just click on your domain name.

godaddy domains

Step 11. Click on the "DNS Zone File" tab next to Settings and choose "Use Classic DNS Manager".

use classic dns manager

Step 12. Next, click the "Edit" button to edit your DNS Zone File. 

blogger custom domain

Step 13. Under the "CNAME (Alias)" menu, click "Quick Add" button at the bottom of the screen (see image 1 in the below screnshoot).

Step 14. In the Edit box that now appeared, enter "www" in the first box and "ghs.google.com" in the second.

blogger custom domain

Step 15. Click "Quick Add" again and enter details from second row of the data we saved in step 8.

Step 16. Under the "A (Host)" menu, again choose Quick Add (see the below image).

Step 17. Host will be @ and the "Points to" value should be the one provided by Google IPs, saved in step 6 above. These are the Google IPs that you should get:

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21
Step 18. Add all 4 of them one by one and delete old host as you won't need it anymore. 

custom domain in blogger

Step 19. At the top of the page, click on the "Save Zone File" button to save your setings.

Step 20. Now go back to Blogger and try to save settings again. The registration process takes 24-48 hours, so don't worry if you get an error again. Come again later to Blogger after 24-48 hours, repeat step 2 to 4, press Save and the error should be gone.

Step 21. After your URL starts working, click on the "Edit" link next to domain name on setting page.

Step 22. Check the "Redirect... to..." checkbox below your site address to ensure that even if the visitors will miss out the www part, they will still be able to reach your site.

blogger custom domain

Step 23. And that's it. Enjoy your new URL!

So this was easy, right? Only a handful of steps and we have successfully completed our mission of adding our custom domain in our blogger account. In case you haven't yet, stay patient wait for 2 days and try again. Or repeat steps 1-22, and make sure you don't miss any. Otherwise your new URL is ready and all set to roam around the wonderful world of web.
Read more »
Are you one of modern day bloggers without much knowledge of technical details, looking to enhance your blog's ratings and audience but don't know how to and your blogger friend told you that you can get a hike into your site visitors via editing your Robots.txt file? Or maybe you don't want search engines spiders to crawl through your pages? Or you do have a technical background but don't want to risk making changes without expert's words on topic? Well in either case, this is the right place for you to be. In this tutorial, you will see how to add Custom Robots.txt file in Blogger in a few easy steps.
custom robots.txt

But before we open and start working on Robots.txt, let's have a brief overview of its significance:

What is Robots.txt?

With every blog that you create/post on your site, a related Robots.txt file is auto-generated by Blogger. The purpose of this file is to inform incoming robots (spiders, crawlers etc. sent by search engines like Google, Yahoo) about your blog, its structure and to tell whether or not to crawl pages on your blog. You as a blogger would like certain pages of your site to be indexed and crawled by search engines, while others you might prefer not to be indexed, like a label page, demo page or any other irrelevant page.

How do they see Robots.txt?

Well, Robots.txt is the first thing these spiders view as soon as they reach your site. Your Robots.txt is like a hour flight attendant, that directs you to your seat and keep checking that you don't enter private areas. Therefore, all the incoming spiders would only index files that Robots.txt would tell to, keeping others saved from indexing.

Where is Robots.txt located?

You can easily view your Robots.txt file either on your browser by adding /robots.txt to your blog address like http://myblog.blogspot.com/robots.txt or by simply signing into your blog and choosing Settings > Search engine Preference > Crawlers and indexing and selecting Edit next to Custom robots.txt.

blogger custom robots

How Robots.txt does looks like?

If you haven't touched your robots.txt file yet, it should look something like this:
User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Allow: /
Sitemap: http://myblog.blogspot.com/feeds/posts/default?orderby=UPDATED
Don't worry if it isn't colored or there isn't any line breaks in code, I colored it and placed line breaks so that you may understand what these words mean.

User-agent:Media partners-Google:
Mediapartners-Google is Google's AdSense robot that would often crawl your site looking for relevant ads to serve on your blog or site. If you disallow this option, they won't be able to see any ads on your specified posts or pages. Similarly, if you are not using Google AdSense ads on your site, simply remove both these lines.

User-agent: *
Those of you with little programming experience must have guessed the symbolic nature of character '*' (wildcard). For others, it specifies that this portion (and the lines beneath) is for all of you incoming spiders, robots, and crawlers.

Disallow: /search
Keyword Disallow, specifies the 'not to' do things for your blog. Add /search next to it, and that means you are guiding robots not to crawl the search pages /search results of your site. Therefore, a page result like http://myblog.blogspot.com/search/label/mylabel will never be crawled and indexed.

Allow: /
Keyword Allow specifies 'to do' things for your blog. Adding '/' means that the robot may crawl your homepage.

Sitemap:
Keyword Sitemap refers to our blogs sitemap; the given code here tells robots to index every new post. By specifying it with a link, we are optimizing it for efficient crawling for incoming guests, through which incoming robots will find path to our entire blog posts links, ensuring none of our posted blog posts will be left out from the SEO perspective.

However by default, the robot will index only 25 posts, so if you want to increase the number of index files, then replace the sitemap link with this one:
Sitemap: http://myblog.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500
And if you have more than 500 published posts, then you can use these two sitemaps like below:
Sitemap: http://myblog.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500
Sitemap: http://myblog.blogspot.com/atom.xml?redirect=false&start-index=500&max-results=1000

How to prevent posts/pages from being indexed and crawled?

In case you haven't yet discovered yourself, here is how to stop spiders from crawling and indexing particular pages or posts:

Disallow Particular Post
Disallow: /yyyy/mm/post-url.html
The /yyy/mm part specifies your blog posts publishing year and month and /post-url.html is the page you want them not to crawl. To prevent a post from being indexed/crawled simply copy the URL of your post that you want to exclude from indexing and remove the blog address from the beginning.

Disallow Particular Page

To disallow a particular page, you can use the same method as above. Just copy the page URL and remove your blog address from it, so that it will look something like this:
Disallow: /p/page-url.html

Adding Custom Robots.Txt to Blogger

Now let's see how exactly you can add Custom Robots.txt file in Blogger:

1. Sign in to you blogger account and click on your blog.
2. Go to Settings > Search Preferences  > Crawlers and indexing.

blogger custom robots.txt

3. Select 'Edit' next to Custom robots.txt and check the 'Yes' check box.
4. Paste your code or make changes as per your needs.

custom robots.txt

5. Once you are done, press Save Changes button.
6. And congratulations, you are done!

How to see if changes are being made to Robots.txt?

As explained above, simply type your blog address in the url bar of your browser and add /robots.txt at the end of your url as you can see in this example below:
http://helplogger.blogspot.com/robots.txt
Once you visit the robots.txt file, you will see the code which you are using in your custom robots.txt file. See the below screenshot:

custom robots

Final Words:

Are we through then bloggers? Are you done adding the Custom Robots.txt in Blogger? It was easy, once you knew what those code words meant. If you couldn't get it for the first time, just go again through the tutorial and before long, you will be customizing your friends' robots.txt files.

In any case, from SEO and site ratings it's important to make that tiny bit of changes to your robots.txt file, so don't be a sloth. Learning is fun, as long as its free, isn't it?
Read more »
Over time, most blogs may go through many changes, like posts being added or deleted. In some occasions, you don't want people to get 404 messages when they surf to posts or pages that don't exist on your blog and instead, make all requests to a specific link to be redirected to another page. One of the best way to avoid broken links and keep your traffic flowing in the right direction is setting custom redirects via the Blogger Custom Redirects tool.

In this post, we will see how to set custom redirects for Blogger posts and redirect an old URL to a new URL. But before redirecting any URL, you must know that there are two types of redirects:

A 302 redirect means that the page has moved temporarily. This redirect doesn't pass the URL value to the new location and instead, it will take the visitors to an appropriate location so that you aren't showing them a 404 page not found, or an error page. You can use a 302 redirect for coming soon pages or maintenance pages.

A 301 redirect means that a page has moved permanently to a new location. Use the 301 redirect when you deleted or changed the URL of your post. In most instances, the 301 redirects are always recommended for SEO because they will pass link juice (ranking power) to the redirected page and visitors will also benefit from this. However, 301s aren't suitable when you change your custom-domain, because it only supports redirection within the same blog, not to an external URL.

Now that we've established which is which, let's see how to set custom redirects for Blogger posts.

How to redirect old URL to new URL in Blogger


Step 1. Login to you Blogger account with email and password.

Step 2. Click on your blog > go to Settings \ Search Preferences and click "Edit" next to "Custom Redirects."

search preferences, custom redirects, 301, 302 redirect

Step 3. Enter the old URL in the "From" field, and the new URL in the "To" field including the forward slash "/" (see the screenshot below)

custom redirects, redirect old url to new url

Note: Do not enter the full URL in these fields. Just omit the address of your blog and type only the rest of the link. Again, this works only if you wish to redirect within your blogger blog and not to any external links.

Step 4. Click the "Save" link (1) and the "Save changes" button (2), and you're done!

blogger custom redirects
blogger custom redirect

If you want to redirect more pages, just click the "New redirect" button.
Read more »
If you ever considered working on a blog with multiple authors and you'd like to add others to publish posts or moderate comments, you can invite multiple authors on your Blogger blog. These additional authors have blog posting rights and can be either a guest author or blog administrator.
  1. An author can create and edit only his/her own posts and have restricted access to some of the blog' Settings. There, he or she will be able to access the Posting options and Add a mobile device, or remove themselves from the blog membership. 
  2. An administrator, on the other hand, will have FULL access to the blog' settings and template. Users with this privilege can edit or delete posts made by other members of the blog, add/remove other members or transfer the ownership of a blog.
invite multiple authors on blogger

Related: Add Author's Profile Picture and Name in Multi Author Blog

How to Invite Authors on Blogger


To invite multiple authors on a Blogger blog is really easy. Just follow the steps below:

Step 1. Log into your blogger account at blogger.com and click the name of your blog

Step 2. Click "Settings" on the left side of the page and go to the "Basic" tab:

invite multiple authors on blogger
Invite multiple authors on Blogger
Step 3. Look for the Permissions/Blog authors section and click on the "Add authors" link. Enter the email address for each author you would like to invite, separating each address with a comma.

Step 4. Click "Invite authors" button at the bottom once you're done. And that's it!

Managing Authors


The invited Authors will be listed after the invitations have been sent. They will need to click the "Accept Invitation" button in the invitation email in order to get started. Authors which have yet to accept or decline the invite will be listed under 'open invitations'. To remove an author from the blog, simply click the Remove icon next to the author's email address:

invite multiple authors on blogger
Cancel the invitation
Once the invited member accept your invitation, they will be listed as an "Author" by default. To give a person full admin privileges, you can change the "Author" status in the "Permissions" section of the Settings > Basic tab to "Admin":

add second admin on blogger
Changing an Author into an Admin in Blogger

Please proceed with caution! Administrators have as much power over your blog as you do, including the ability to permanently delete it!

So this is how you can invite multiple authors in blogger. With this feature, everyone on your team can help create different engaging content for your readers to enjoy.
Read more »
So you really messed something up and need to delete a Blogger blog permanently, but don't know how? You might have encountered an error message you can't get rid of, or it might be something wrong with the appearance. Blogger lets us to create up to 100 blogs without worrying about bandwidth, but sometimes we just want to reduce the number of junk blogs from list to keep it short and simple. In this case, we may have decided that it is time to delete it. So how do you delete a blog on Blogger permanently?
delete a blogger blog permanently

  Important: Removing or deleting your Blogger blog will also delete all of your blog data, including your existing blog posts. This means that your blog visitors won't be able to view your blog anymore, and that posts and pages associated with Blogger will be removed from your blog. 

1. If you are not already logged in, log into your Blogger account at http://blogger.com

2. From the Dashboard (that's the area you see right after logging in that lists all your blogs) select the blog you want to delete. Make sure that you click on the right blog if you have more than one.

3. Navigate to the Settings tab and just below it the Other option. Click on it.

blogger settings, delete blogger blog

5. On the right side is the Blog tools section. To proceed with the deletion then click on the Delete blog link.

If you think you may want to come back to your blog or you've got posts that you want to keep, you can use the Export blog tool to export your blog before you delete it. You can either download your blog posts to your desktop or export it in a format that can be imported into other popular blogging formats.

6. Confirm that you want to delete it and you're done.

how to delete blogger blog

Once you've pressed the Delete This Blog button, you will be redirected to the Dashboard. Notice that your blog is no longer displayed in the list of blogs. If you want to view your deleted blog you can click on the Deleted blogs link on the left side of your Blogger Dashboard to see your recently deleted blogs.

deleted blogger blogs

Here you'll be able to see your deleted blog including details of its deletion date. To restore your blog, click on the Undelete button. Please keep in mind that deleted blogs can be restored within 90 days.

undelete blogger blog

In this tutorial, we have covered some basic reasons why we might want to delete a Blogger blog permanently and the steps involved in deleting a Blogger blog. Instead of deleting the blog, you also have the option of making your blog private. By making it private, the blog will be kept in your Blogger account but no one will be able to view the blog without your permission.
Read more »
Some visitors have asked about how to position the title and summary of the Blogger post next to the thumbnail, or about how to position the thumbnails above title and post summary. Here I tried to make a special post XML code that I made ​​as flexible as possible for the purposes of customization in the future. This code already includes post snippets/summaries, so if you've implemented this modification, then you don't need to bother implementing the auto read-more hack.
stylish post summary and thumbnail for blogger

But before adding anything, please consider that this will change the overall structure of the post, this means that some of your old customizations like widgets added previously - related posts, social media buttons or any other customization - will disappear. Therefore, I would highly recommend you to keep a copy of your template before doing this modification.

Let's proceed to implementing the code. There are only a few simple steps you need to follow...

The first step is to edit the XML template:

Step 1. Go to your Blogger dashboard > Template > Edit HTML

blogger template, edit html

Step 2. Click inside the code area and press the CTRL + F keys to open the search box.

blogger search box CTRL + F

Step 3. Copy and paste the following code inside the search box and hit Enter to find it:
<b:includable id='post' var='post'>
blogger posts, edit html

Step 4. After you found <b:includable id='post' var='post'>...</b:includable> (if you don't see this line, make sure that the code is not expanded, otherwise click on its corresponding number on the left side - in the screenshot above, it is 1812), replace it with this code:
<b:includable id='post' var='post'>

  <article expr:class='&quot;blogger-post blogger-post-&quot; + data:blog.pageType' expr:id='&quot;post-&quot; + data:post.id'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <div class='blogger-post-part blogger-post-thumbnail-area'>
          <b:if cond='data:post.thumbnailUrl'>
            <a expr:href='data:post.url'><img class='blogger-post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' width='72'/></a>
          </b:if>
        </div>
      </b:if>
    </b:if>

    <div class='blogger-post-part blogger-post-body-area'>

      <h3 class='blogger-post-title'>
        <b:if cond='data:post.title'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
          <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            <b:else/>
              <data:post.title/>
            </b:if>
          </b:if>
        <b:else/>
          [Untitled]
        </b:if>
      </h3>

      <div class='blogger-post-body'>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <data:post.body/>
        <b:else/>
          <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
            <data:post.body/>
          <b:else/>
            <b:if cond='data:post.snippet'>
              <data:post.snippet/>
            <b:else/>
              No content.
            </b:if>
          </b:if>
        </b:if>
      </div>

      <footer class='blogger-post-footer'>
        <div class='blogger-post-footer-line blogger-post-footer-line-1'>
          <span class='blogger-post-author vcard'>
            <b:if cond='data:top.showAuthor'>
              <data:top.authorLabel/> <span class='fn'>
              <b:if cond='data:post.authorProfileUrl'>
                <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='Author Profile'><data:post.author/></a>
              <b:else/>
                <span class='g-profile'><data:post.author/></span>
              </b:if>
              </span>
            </b:if>
          </span> <span class='blogger-post-timestamp'>
          <b:if cond='data:top.showTimestamp'>
            <data:top.timestampLabel/> <a class='blogger-post-timestamp-link' expr:href='data:post.url' rel='bookmark' title='Permanent Link'><time class='blogger-post-published published' expr:datetime='data:post.timestampISO8601'><data:post.timestamp/></time></a>
          </b:if>
          </span> <span class='blogger-post-comment-link'>
          <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              <b:if cond='data:post.allowComments'>
                <a expr:href='data:post.url + &quot;#comments&quot;'><data:post.commentLabelFull/></a>
              </b:if>
            </b:if>
          </b:if>
          </span>
        </div>
        <div class='blogger-post-footer-line blogger-post-footer-line-2'>
          <span class='blogger-post-labels'>
            <b:if cond='data:post.labels'>
              <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'>
                <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
              </b:loop>
            </b:if>
        <b:include data='post' name='postQuickEdit'/>
          </span>
        </div>
      </footer>
    </div>
  </article>
</b:includable>

The next step is to add the CSS. Select one of the following styles and copy the code below:

1. Post Summaries with Round Thumbnails on the left: 


rounded thumbnails for blogger post summaries
.blogger-post {padding: 5px 0px 0px; background: #F6F6F6; border-right: 1px dashed #E3E3E3;height:150px; margin:0 0 20px; overflow:hidden; *zoom:1;}
.blogger-post:after {  content:" "; display:block;clear:both;}
.blogger-post-title { font:normal bold 20px/1.2 Arial,Sans-Serif; margin:0 0 10px;padding:0;}
.blogger-post-title a{color: #888;}
.blogger-post-thumbnail-area {border-radius: 330px;-webkit-border-radius: 330px; -moz-border-radius: 330px;  border: 10px solid #E5E5E5;margin-left: 20px;width:120px;height:120px; background-color:#2D3957;float:left;overflow:hidden;background: url('http://4.bp.blogspot.com/-1EWHdOSKo4U/U6SRtdpyfnI/AAAAAAAAJS8/pGyE9nTVSFM/s1600/no-image-available.png'); background-repeat: no-repeat; background-size: 100%;}
.blogger-post-body-area:before {border-bottom:40px solid transparent;border-right:40px solid #E4E4E4;border-top:40px solid transparent; width:0;height:0; content:"";margin: 10px 0px 20px -60px;display:inline-block;float: left;}
.blogger-post-thumbnail {display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:none;position:static;}
.blogger-post-body-area {padding:20px;margin-left:200px;font-size:12px;border-left: 1px solid #E3E3E3;}
.blogger-post-footer {margin:10px 0 0;padding:10px 0 0;border-top:1px dotted #ddd;font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif;text-transform:uppercase;color:#999;}
.blogger-post-footer a {color: #888;}
.blogger-post-item,
.blogger-post-static_page {height:auto}
.blogger-post-item .blogger-post-body-area,
.blogger-post-static_page .blogger-post-body-area {margin:0;padding:20px;font-size:13px;}
.blogger-post-item .blogger-post-title,
.blogger-post-static_page .blogger-post-title {font-size:30px}
.icon-action {width: 10px;height:10px;}

2.  Thumbnails with Title and Post Summary on the right


blogger post summaries and thumbnails style

.blogger-post {background: #F6F6F6;border-right: 1px dashed #E3E3E3;height:200px; margin:0 0 20px; overflow:hidden; *zoom:1;}
.blogger-post:after { content:" "; display:block; clear:both;}
.blogger-post-title {font:normal bold 20px/1.2 Arial,Sans-Serif;margin:0 0 10px; padding:0;}
.blogger-post-title a{color: #888;}
.blogger-post-thumbnail-area {width:200px; height:200px;background-color:#2D3957;float:left;overflow:hidden;background: url('http://4.bp.blogspot.com/-1EWHdOSKo4U/U6SRtdpyfnI/AAAAAAAAJS8/pGyE9nTVSFM/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%;}
.blogger-post-thumbnail {display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;margin:0;padding:0;border:none;outline:none;position:static;}
.blogger-post-body-area {padding:20px;margin-left:200px;font-size:12px;}
.blogger-post-footer {margin:10px 0 0;padding:10px 0 0; border-top:1px dotted #ddd;font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase; color:#999;}
.blogger-post-footer a {color: #888;}
.blogger-post-item,
.blogger-post-static_page {height:auto}
.blogger-post-item .blogger-post-body-area,
.blogger-post-static_page .blogger-post-body-area { margin:0; padding:20px; font-size:13px;}
.blogger-post-item .blogger-post-title,
.blogger-post-static_page .blogger-post-title {font-size:30px}
.icon-action {width: 10px;height:10px;}

3. Blogger Posts Side by Side with Title and Summary Below Thumbnail (Newspaper Style Layout)


style for post summary and thumbnail in blogger

#blog-pager {clear: both;}
.blogger-post {background: #F6F6F6;  border-right: 1px dashed #E3E3E3;  border-left: 1px dashed #E3E3E3; height: 405px; width:200px;  margin:0 20px 20px 0;  padding: 10px 10px 0px;  overflow:hidden;  float: left; display:inline-block; *zoom:1;}
.blogger-post:after {  content:" ";  display:block;  clear:both;}
.blogger-post-title {  font:normal bold 16px/1.2 Arial,Sans-Serif;  margin:0 0 10px;  padding:0;}
.blogger-post-title a{color: #777;}
.blogger-post-thumbnail-area a img{  width:200px;  height:200px;  background-color:#fff;overflow:hidden;background: url('http://4.bp.blogspot.com/-1EWHdOSKo4U/U6SRtdpyfnI/AAAAAAAAJS8/pGyE9nTVSFM/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%;}
.blogger-post-thumbnail { display:block; width:100%; height:100%; max-width:none;max-height:none;min-width:0; min-height:0; margin:0; padding:0; border:none; outline:none;position:static;}
.blogger-post-body-area { padding:10px 20px 20px; margin:10px 0 0; font-size:11px;}
.blogger-post-footer {background: #E9E9E9;  margin:10px -20px 0; padding:20px;  border-top:1px dotted #ddd; font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase;  color:#555;}
.blogger-post-footer a{color: #888;}
.blogger-post-item,
.blogger-post-static_page {width:auto;}
.blogger-post-item .blogger-post-body-area,
.blogger-post-static_page .blogger-post-body-area {  margin:0;  padding:20px;  font-size:13px;}
.blogger-post-item .blogger-post-title,
.blogger-post-static_page .blogger-post-title {font-size:30px;}
.icon-action {width: 10px;height:10px;}
Note:  
- to make the thumbnails bigger, modify the values in red (please note that some values are for the posts height/width which should be the same as the thumbnails size - except for the first example where you have to add another 30px (150px - posts height) );
-to change the image when there is no thumbnail, replace the url in blue with the address of your image;
-to change the background, change the values in violet: #F6F6F6 - for posts background and #E9E9E9 - for the posts footer

Step 5. Add the CSS code of the chosen style just above this tag (CTRL + F to find it):
]]></b:skin>

Changing the Resolution of Thumbnails

Now let's fix the image resolution which is currently in the s72-c resolution, that will make the thumbnails look blurry. For this, we will need to find the following piece of code (CTRL + F):
<b:widget id='Blog1'
Note: After you found it, you should see a right arrow next to it. In case there is no arrow, click on its corresponding number (in my example it is 943)

blogger blog1 widget

Just below the <b:widget id='Blog1' line, should be the </b:section> tag - copy and paste this script just below it (see the screenshot):
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
 <script type='text/javascript'>                 
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,&quot;s&quot;+size+&quot;-c&quot;);
var thumbnails = blogGadget.getElementsByTagName(&quot;img&quot;);
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize(&quot;Blog1&quot;,210);                 
</script>
  </b:if>
</b:if>
thumbnails resolution, blogger script

Note that 210 is the resolution of the new image that we want to apply and it depends on the size of each of the thumbnails that are included in the CSS above. If you increase the size of the thumbnails, you will need modify this value as well.

Step 7. Save the changes by clicking the Save template button. That's it!

The methods used here have been tried and tested for modifying the Simple Blogger Template. For other Blogger templates you may need to make more adjustments and possibly adjust the widths of your blog to accommodate the newspaper style layout (style 3).
Read more »