Showing posts with label Blogger Templates. Show all posts

Full Blog Posts on Notable Theme's Homepage in Blogger Blogs

In the new themes the page break in post editor is just for the name as the themes auto-truncates the posts and shows snippets and a preview thumbnails only on the homepage. Page break / Jump break is good only for feeds now.

There is no setting to make the theme show full posts on the home, index and archive pages and that is why we feel the need of writing this tutorial.


Previously on StramaXon we published a tutorial to show how it was done on Contempo theme, this tutorial will guide you through the steps to achieve the same with Notable theme, so if you are a Notable Theme user in Blogger then follow the steps given below to get your blog posts to show up as full.

Important: As with all of our tutorials where we are supposed to touch the theme code it is highly recommended that you take a backup of your current Blogger theme.

Video walk-through. 

We've prepared a video tutorial of the same so you can watch it and follow the steps with more ease. 

Link to the video tutorial.



Editing the XML / HTML Code in Theme

  1. Open a new tab in the browser and Log-into your Blogger Dashboard
  2. Go to the Theme   section
  3. Click on "Edit HTML"
  4. When the Theme code editor opens, focus into the code editor and hit CTRL + F / CMD + F to open the in-page search
  5. Look for the following line of code|

    <b:include cond='data:this.postDisplay.showSnippet ?: true' data='post' name='postBodySnippet'/>

  6. Upon searching you will get the result like this,



  7.  Copy the following HTML / XML markup

    <b:if cond='data:widget.type != &quot;PopularPosts&quot;'>
    <div class='post-body-container'>
    <b:include data='post' name='postBody'/>
    <div class='post-sidebar invisible'>
    <b:with value='data:widget.instanceId + &quot;-normalpostsidebar-&quot; + data:post.id' var='sharingId'>
    <b:include cond='data:post.shareUrl' data='{ shareButtonClass: &quot;post-share-buttons-top&quot;, overridden: true }' name='maybeAddShareButtons'/>
    </b:with>
    <b:if cond='data:post.labels and !data:post.labels.empty and data:this.allBylineItems.labels'>
    <div class='post-labels-sidebar'>
    <h3><data:messages.labels/></h3>
    <b:include data='post' name='postLabels'/>
    </div>
    </b:if>
    </div>
    </div>
    <b:else/>
    <b:include cond='data:this.postDisplay.showSnippet ?: true' data='post' name='postBodySnippet'/>
    </b:if>

  8. Go back to the theme editor where we previously found the line of code from step 5. Replace that line of code with the code you just copied. This is what it the XML code should look like when you have replaced it.


  9. Now click on "Save theme" to save the changes and go to your blog to see the change. The posts should now appear full on all the pages. 

You may have noticed that the "Read More" button is still there even though the post shows up full, it's because the Jump link is added by another code that we didn't touch yet and it isn't even necessary, we will be using CSS to simply hide the links.

CSS to hide the Jump Link

This CSS snippet should hide the "Read more" links from the posts on home, archive and index pages.
.widget.Blog .jump-link {
    display: none;
}

Here's a complete guide with screenshots on adding CSS in Blogger blogs

  1. Log-into your Blogger Dashboard
  2. Go to the Theme   section
  3. Click on "Customize" 
  4. In the Theme Designer go to Advanced > Add CSS
  5. Paste the CSS snippet into the text area on the theme designer page and click on "Apply to Blog" on the top right
Refresh your blog to see the changes live on your blog.

Showing full blog posts on other new themes

The same can be done on other themes and here are the links for the tutorial to do it on other new Blogger theme(s)


Semi-Transparent Header on Blogger's Notable Theme

The header on the Notable theme in Blogger sticks to the top when you are scrolling down, that's a neat design and good thing for mobile users who may otherwise find it difficult to scroll all the way up to access the navigation menu.

In this post we will use a small CSS snippet that let's you make the header semi-transparent or in simple words a see-through navigation menu. You can set the opacity yourself to fit your needs since you may want it to be less or more opaque. 


Our posts are known to stretch a little bit too much so we are going to keep this short because there's not even much to it. There's a CSS snippet that you add to your blog's theme, that's all. 

The CSS we will need. Note that this is for the Notable Blogger Theme, this may or may not work with other themes. 

header.centered-top-container.sticky {
opacity: 0.8 !important;
}

The value 0.8 is the opacity of the header, it can be anywhere from 0 to 1.0, setting it 0 will cause the header to be completely transparent so we do not want that. You may change the value to your needs and then add it to your blogger.

How to add the CSS code?


  1. Log-into your Blogger Dashboard
  2. Go to the Theme   section
  3. Click on "Customize" 
  4. In the Theme Designer go to Advanced > Add CSS
  5. Paste the CSS snippet into the text area on the theme designer page and click on "Apply to Blog" on the top right
That's done. Now refresh your blog to see the changes. 

If you have request for tutorials for other Blogger themes then please do comment below. 

Customizing Body Width of Soho Blogger Theme

Blogger's new themes are responsive and you get a very little option to change the set width of the main area. The theme designer doesn't even an option to adjust the widths either.

We will use custom CSS codes to customize the width of the Soho theme's blog area to stretch more than the default setting.




This post would be very short, the reason for this being short is that this tutorial will simply teach you how to do a specific thing - here setting the width and that doesn't require too much technical background. Also we will be posting a series of customization tutorial for Blogger's new Themes (Soho, Contempo, Emporio and Notable), be sure to subscribe to our blog for updates.

Getting Started

Currently the largest width Soho theme stretches is 1000px, if the screen is more than 640px the blog post area as well as header & footer will stretch as much as 1000px.

The width of the parts of the theme is dependent on the available screen width, this is the nature of response web design. Nowadays everybody has screens larger than 1000px in width so it is a good idea to stretch the blog wider on larger screens than to leave empty areas.

CSS Snippet

Following is what we need, you don't have to customize it, it works well with existing standard screen widths and stretches the areas as required. Copy the CSS code -

/* For screen widths less than 1280px */
/* For screen widths less than 1280px */
@media screen and (min-width:1280px) {
.centered-bottom, .centered-top {
width: 1180px;
}

body.item-view .widget.Blog .post {
width: 800px;
}
}


/* For screen widths less than 1400px */
@media screen and (min-width:1400px) {
.centered-bottom, .centered-top {
width: 1300px;
}

body.item-view .widget.Blog .post {
width: 1060px;
}
}



After copying keep it in a notepad / textedit app since we are going to need it in the next step.

You can customize the values according to your needs if you know what you are doing else it is suggested you post a comment down below explaining how you want it to be different for your use so that we can help.

Applying the CSS

For a complete guide on adding CSS codes in Blogger refer to this tutorial - How to add CSS to your Blogger Blog.
  1. Open your Blogger Dashboard and choose the blog
  2. Go to the Theme section
  3. click on Customize
  4. Navigate to Advanced Add CSS
  5. In the Add custom CSS text field enter the copied CSS code from the previous section. It should look like this -




  6. Click on Apply to Blog to save the changes and go to the blog to see it live. 

That's it. Once the CSS is applied you will start seeing the customized width live on the blog. 

What's next?

We plan on posting more small tutorials like this on customizing parts of new themes. If you have any suggestions email it to us on depy45631@gmail.com or post your idea in the comments below. 

Show Full Blog Posts in Homepage of Contempo Theme in Blogger

After so many years Blogger has finally brought advanced and modern themes, which are responsive, optimized for mobile devices and are beautiful!

The need of every Blogger is different, same is in the case of snipped post that appears in homepage for Contempo Theme. The theme will only show a small excerpt of your blog posts on the home page, in this tutorial you will learn how you can change this behavior and have the full post on home and index pages.



For years blog owners want to have a way to show automatic post summaries, there still exists hundreds of tutorials for the templates that came out before these new modern themes. But not all blog owners wants to show a snipped version of their posts on the main page of their blog.



Blogger doesn't give you any option in the settings to disable / enable post snippets so we figured out a way to do that directly from the theme code.

Getting Started with the Tutorial

IMPORTANT - Since you will be working with template codes of your blog it is highly recommended that you take a backup of your Blog's theme before proceeding

Follow each step carefully and in steps that deals with codes we've provided screenshots of what you should be looking for to make the process easy and fast.

Changing the Theme XML Code

The first and most important part is to change the XML code in the theme code that is responsible for showing blog posts in different styles. 
  1. Sign-into your Blogger profile
  2. Select your blog from the blog list 
  3. Go to the Theme section > click on Edit HTML button on the page
  4. When the theme code editor opens, put the cursor inside of it and press CTRL+F / ⌘ + F to open the in-page search box
  5. In the code editor you will be looking for the following block of code

    <b:if cond='data:view.isSingleItem'>
    <b:include data='post' name='postBody'/>
    <b:else/>
    <b:include data='post' name='postBodySnippet'/>
    <b:include data='post' name='postJumpLink'/>
    </b:if>

    You do not have to enter the entire block of code in the search box, use only a small part from the code block which should bring you to the same exact code in a few tries.

    This is how the code that you are looking for in the theme code editor



  6. Once the code is visible on your theme editor, use your cursor to select from <b:if... part to the ending </b:if.. part,

  7. Upon highlighting it, delete the highlighted part. 
  8. Copy the following code which we will be placing in the place of the previous code (that we deleted in the last step)

    <b:if cond='data:view.isSingleItem'>
    <b:include data='post' name='postBody'/>
    <b:else/>
    <b:include data='post' name='postBody'/>
    </b:if>

    After successfully placing the code given above, the theme code editor should look like this with the code in place :


  9. Now click on the "Save theme" button to save the theme.
  10. Visit your blog to see the changes live, you may need to clear caches if you are not able to see any changes. 
If you noticed that the blog posts are not snipped now but still aren't showing as full then probably you have put a page break in your blog post, removing it should fix this, see the section "Remove Page Breaks from Post" below. 

Hide the "Keep Reading" Link

The "Keep Reading" jump link might have not gone away. This following CSS code will help in hiding the link from the posts on home page. 

Copy the following CSS code :

.jump-link {
display: none;
}

And add it to your blog. [See how to add CSS in a Blogger Blog]

Remove Page Breaks from Post

In case you put page breaks in your posts the posts may not appear full. So if you want a post to be shown full instead of till the page-break part remove the page break from the post.

  1. Sign in to Blogger.
  2. Click the post in the post editor.
  3. In the composer box, place your cursor after the page-break element (it is a grey horizontal line with dashes) 
  4. Hit backspace to remove it.
  5. Save the post. 

What about other themes like Soho, Emporio and Notable

We're glad you asked this - the same code doesn't exist in other themes so this tutorial isn't applicable for other new themes. Following are the tutorials for other new Blogger themes to do the same on it.




Solving Blogger Template Error for AdSense Ad Implementation

If you are recently enrolled in AdSense and you are trying to implement ad code that you got from AdSense directly in your Blog's template you might have run into problems, we will walk you through fixing it.



If you are trying to add code from AdSense which looks something like this (there is a difference between the two codes, which we will explain)

Demonstration of the ad code in Blogger template and the error that occurs


<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js"></script>
<!-- leaderboard -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

OR

<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

The the only difference between the two snippet is that the first one displays an ad, whereas the second one is used only to load AdSense's JavaScript files.

In many cases to improve page load speed you just want to load the scripts once because AdSense ad codes always include the ad-block HTML code as well as the scripts. Or when you are enabling Page Level Ads the script tags needs to be added in the template once, the following code is give, which you are supposed to implement in your Blogger's template / theme




The error that you might be getting when trying to add these code snippet in your template is

Attribute name "async" associated with an element type "script" must be followed by the ' = ' character. 

Fixing the error

There's nothing wrong with the code, according to HTML5's standard it is an error free code, but Blogger's template / thee is coded in XML and it fails to parse it because of a small part in the codes

Right now we have (note that we are only displaying the part of code that requires modification, rest should be left untouched),

<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js [...]

The problem here is that the "async" attribute has no values passed into it, for e.g "src" has a "=" sign with a value in it. All we need to do is pass a value to the attribute and Blogger will accept it.

<script async="async" src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js [...]

Notice the difference between the two snippets. We have set it async="async", that makes it comply with XML thus Blogger accepts it and saves the template without any error.



That's pretty much everything to it. Follow the steps given above and save the template, it must parse the code without any problems. If you are facing problems implementing ad-code other than this then don't hesitate to let us know in the comments (add a screenshot for better help)







How to Backup Your Blogger Theme / Template

A step-by-step guide on backing up a Blogger.com Theme / Template for the newest Blogger UI updates.

We have another guide on backing up the template in Blogger but since the roll-out of the newer UI and the changes in the design we are updating the steps with a new tutorial for relevant visual demos.

You can still check the old tutorial on backing up the template here though it is not relevant anymore : http://www.stramaxon.com/2012/03/backup-your-template-of-your-blogger.html

Why back-up a template / theme ?

In the Blogger environment we often want to add a new widget or a functionality in our blog and tutorials ask us to make changes to our templates, it is important we have a backed-up template so if anything goes wrong we can always fallback to the previous version.

There are more reason why -
  1. Making changes to Blogger templates to add functionality or change design
  2. When trying out new themes / template
  3. Using the template / theme again on another blogger blog
Read below for steps on backing up a template / theme, note that we are going to use the terms "template" and "theme" interchangeably. 

Backing Up the Template / Theme on BlogSpot

Let's start with backing up the template.
  1. Log-into your Blogger account to go to your Dashboard. 
  2. From the blog's drop-down list choose the blog

  3. On the left pane choose the "Theme" option

  4. In the Theme section page, click on the "Backup / Restore" button on the top right corner of the page

  5. A dialog box may appear, to download the template backup click on the orange "Download" button as shown below -

  6. A file with a name similar to theme-2887119284088758674.xml will be downloaded. This file is the backup template / theme file, it can be used to recover your template / theme on Blogger. 

That's it, save the theme .xml file at a safe place where you can access it in the future in case you have a broken template. Make it a practice to take a backup of the template before making any changes to it. 

Restoring the Template / Theme Using the XML file

In the previous section you learn how to download a backup of your template. Restoring the template is simple as well, 

  1. in the last section follow till Step #4
  2. Now in the dialog box that opens, which looks like this click "Choose file" (maybe labelled differently on different browsers) -

  3. Browse to the template's XML file and then click on "Upload" 
  4. Once the upload finishes your template will be restored. 
That's it. Do let us know if you have any questions or suggestions regarding this tutorial. 

PiSquare - Responsive and Search Optimized Blogger Template

A template plays a very important role in the exposure of your blog on the web and major search engines, if your blog is lacking search visibility then it obviously needs improvement in it's structure and design.




PiSquare Blogger template is a clean and minimalist Blogger template with a lot of customization options like color scheme editor and header image customization.

It is a responsive blogger template which means you don't have to switch between mobile and desktop template to view your blog on mobile phones and tablets or any small device.

Features

You will be able to experience the feature of the templates only when you install it on your own blog and have the full access to customize it according to your needs but let us tell you a few features of this template

RWD: Responsive Web Design

As already discussed, Responsive Web Design let's your blog display on mobile devices without having to scroll horizontally or zoom in or out to view the content properly. The columns automatically adjusts itself to fit the view port and provide the reader a seamless experience.

Search Engine Optimized

As always we make a template one thing in mind and that is to make it comply with all the search engines with proper methods and techniques. The template is search optimized which means your blog's content will appear on search engines in a well manner which might increase traffic to your blog.

Insanely Fast

Being fast is one of the most important aspects of SEO, if your blog isn't fast and it takes time to load then it's a disaster and search engines might not give you any priority even though you have great content. PiSquare uses techniques that loads the most important part and resources first and then the rest.

These are some of the major features of the template, other visual and customization features are on the following list:

  1. Color Scheme Customization: Change the default color scheme to anything you like in the Blogger's Template Editor, under "Advanced" option (listed in the documentation)
  2. Video and Image Post Summary: The template displays your posts as summaries with a big image or video from the post and a short text snippet. 
  3. Responsive Videos: If you post videos on your blog then you might want to make them responsive too, well we have got you covered! Make videos responsive as you like (listed in the documentation)
  4. Pre-added Sharing Button: Sharing buttons of the major social sites are already present on the blog posts so that users can share your content easily. 

This Template is For ?

This template is multi-purpose Blogger template which means you can use it for any niche or topic. Travel, Cooking, Sport, Video Blogger, Photography or anything you can think of. With a little customization you can personalize the template to make it fit your blog.

Buy or Download for Free

You can either buy or download the template for free from MasTemplate.com. The premium version costs only $10 and you can get support and free updates with the ability to use the template without the the attribution in the footer.

The Thriller Template - Premium Blogger Template for free

Some months back I published a search engine friendly blogger template, which is a Wordpress class template and was premium too.
Do remember, that the template I am going to giveaway for free was a premium template. The reason I am giving it for free is that many blogger users, who weren't able to spend money on templates wanted it for free.

The name of this template is "The Thriller Template", yeah, it's thrilling and don't look like a dull blogger template. Not only it's good with the looks but also for search engine optimization, the process of creating this template wasn't limited just to designing the front-end look, the work was divided into two parts, one was to design it's look and other was to optimize it for search engine and yes, hours of our hardwork will give you an instant ranking on search engines.

Features

Note: Search engine optimization in templates is not considered as a feature.
The list of features of this template is long and we have previously listed it on this page 
http://www.stramaxon.com/2012/07/listverse-template-blogger-seo-friendly.html

Search Engine friendly, how?

There's no magic charm to make a template or layout search engine friendly, what we do is learn how search engine works and set the layout according to webmaster guidelines by Google. It includes using the correct heading tags for post titles, limiting the number of particular heading on a page and placing ads at it's correct place.

It is believed that WordPress blogs are better in terms of search engine optimization, but did anyone tried to know why ? It's because of there huge theme store where themes are kept up-to date according to the current web standards, there's no other reason, rest depends on your content. So even you using a template on your blogger with latest web standards used into, you can make your blog show up great on Google, Yahoo and other search engines. 


But we are bringing all the benefits to you for free. Here are the links to download it.
Thriller Template - Server 1 Thriller Template - Server 2


If you find any broken links or bugs in the template, report it in the comments.

Reiulanus Responsive Blogger Template

Reiulanus Blogger Template is the newest and the most advanced Blogger template with a Responsive design  and fluid layout. Responsive Design is what every site owners would like to have for their blog and especially for Blogger users, I have put my knowledge about responsive design in making this template.

Reiulanus Blogger Responsive Template Premium

You will see responsive site layout mostly in WordPress themes, because the authors of those themes are the real professional and they earn thousands of dollars selling those themes to hundreds of people each for $100.Getting responsive design on your site can be expensive if you want to hire a web designer to make that only for your site but if you are on Wordpress you can buy a responsive theme for as less as $100 but what about the guys on Blogger, no matter if you are using WP or Blogger, responsive design and fluid layout is same everywhere and required too. And that's why it was too important to develop such Blogger Template. Following are the price and information about the template.

Preview Template Buy Template for $49 Download for Free

The template is a premium one but due to heavy user request we've made it available for everyone for free. SBTemplates is now hosting the template on their website, you can find more free blogger templates on SBT.

If you want to see how this blogger template appears in different devices, you may check this
http://mattkersley.com/responsive/?reiulanus-template.blogspot.com

Features of this Template

The template includes all the features the features from my previous templates. Like we used correct markups for important elements of a page for good rankings in search engines and that makes the template a SEO friendly template plus the template is using minimal but beautiful design that can keep a visitor onsite for a longer time. Some of the notable features of this template are below.

1. Light Design

We have used simple design but good looking design which is in trend now. We rarely used images in making the template's design and that's why the template is light and very clear, it's not too fancy and that makes it easier for the users to navigate through the blog.

2. No "Auto Summarize" technique used

These techniques gives you a good result but it also reduces the performance of your blog and is very messy in the back-end. Using it is just a foolishness if you want a SEO friendly blog, it's better to use the Blogger's Page Break option given in the post editor. 

3. Better Search Widgets

Often people don't use search function on a blog just because of their dull looks not intentionally but it usually happens, making it more interactive will attract the visitor to use the search function. We have included not one but two different search forms in the template, one at the top and one at the bottom, it's for the ease of the user as they don't need to scroll much to find content on your site, especially for mobile users where scrolling is the most difficult job in browsing a page. 

4. Content is given more importance

We believe that content is the most important element on your blog and people comes on the blog to read that content so we keeping it in mind we made sure there's nothing in the template that can distract a user from the content or even make them leave the page. Do you know, 3 seconds is enough for a user to visit a site through a search engine and decide if it is what they needed and again we made sure the main content (article) is visible on the page as soon as the page is opened in a browser.

5. Used no Fancy Elements

No Fancy Pop-up or anything like that! People may like it but not everyone, it can be annoying for some people who is serious about the content and that doesn't makes a blog look professional, so if you are serious about your blog then you might don't want your visitors to go away from your site.

6. Used Popular Post and Related Post Widget

Design is not only about filling colors, it's also about managing things and placing it at correct place. I have done everything that will keep a reader engaged with your website. Popular Post widget is place in the bottom and related post is below the posts and both of them are designed beautifully so people will love to try the links in those widgets and that will increase your pageviews and visitor's time on site.  

7. Easily Customizable 

Despite of being an advanced template with responsive design you can always customize it just like any other default templates in Blogger. You can add more remove gadgets, change the backgrounds or even add your own CSS to modify it, we have used simple layout so you won't have any difficulties in understanding the markup and modifying a style. 

Fresh New Responsive Design

Now there's no need of side scrolling on mobile device in your blog just because the the screen size is smaller than the blog's width, it's not a problem anymore with the responsive design in this template. You can see how the responsive design works by clicking on the "Preview Template" link above. If you don't have a mobile with you to check how your blog will look with the template on a handheld device you can simply resize the browser window to see it working live and that's how it will work on mobile phones or tables or device with any screen size and not even need to turn on the mobile template on Blogger for your blog, when you buy this template just turn it off because you won't need it anymore to display a better version of your blog on handheld devices with different screen sizes.

When you are getting a template with responsive design then why spend hundreds of dollars to hire a web designer to make your blog responsive ? Buying this template means you are saving money for the future, as responsive design is now very popular and everybody will be using Responsive Site Templates so why not buy now with a low price.

I decided to make such template because templates you find online for Blogger are coded very poorly and that's what you will see on most of the Blogger blogs and that's bad for Blogger's reputation, but with this template your readers will be amazed to see such technology on Blogger templates for the first time, it's going to be a though competitor for WordPress responsive themes.

It's in trend! Responsive Web Design is listed #2 in top web design  trend for 2012. So what are you waiting for ? Don't you feel that your blog should be following the trend and should really look new and fresh.

Learn more Responsive Design

If you are gonna use a responsive design then you would want to learn about Responsive Web Design, there many more things you can learn about in Responsive Web Design (RWD). Here are some links which will take you to the world of responsive web design.
  1. What the Heck is Responsive Web Design : A fun but informative web project on GitHub by some web geeks tells you all about responsive web design in an interesting manner. Even the site is responsive, just try resizing the browser/
  2. Smashing Magazine's Post about RWD : This post on Smashing Magazine is all you need to know about responsive web design and how to use it, that's a little serious but informative post. As a client you must always expect a web designer to provide you a design which is coded according to the standard.
I think those two links are enough to learn the concept and uses of responsive web design but you may always check new articles online or even buy some books to learn more about it.

No fees for Newer Versions

We will make more improvements in the template in the future to keep up with the standard and there's a good news, you won't have to pay for newer version if you are already a customer, you will get it for free. We care about you and always want you to use the best thing for your blog, so we won't charge even a single penny for upgrades.

Note: You will be charged if you want an upgrade on demand. That includes change of design, adding functionality etc. 

Lifetime Support

We will provide lifetime support for the template. Whenever and whatever help you need we will be there to help you. Just mail us on depy45631@gmail.com for any help regarding the template and we will get it done.

Buy the Template

You can buy the template for $49 and to buy it please send an email on depy45631@gmail.com. You can pay via PayPal on this account deepakblogger45631@gmail.com.
Paypal is the most secure method of payment by credit card, if you don't have an account on Paypal then there's no need to sign-up for a new account, you can simply pay with your credit card and they have a very secure system so you don't need to show your credit card number to anybody.

Note: Don't trust any other person offering you this template. Distribution of this template without the owner's permission is prohibited and we can take legal action in such situation. Buy from the original and respect the hardwork of this template's author (Deepak Kamat). 

Listverse like Template for Blogger - 'The Thriller Template' premium

This template is the Blogger version of the theme used on the site Listverse.com,  the original theme is for Wordpress and it's for $70, i thought of making template for Blogger that looks like it and make it affordable.
This blogger theme is premium, because it took a lot of hard work to create the template and it's worth it. On WordPress, templates of this standard are sold for over $70 and they are worth it.

Many readers are impressed with the theme on listverse and as many of them were on Blogger platform they weren't able to find a template which looks exactly like the theme on LV (Listverse).

Preview Buy it for $30 Get it for free!

Note: If this is not the template that attracted you then you can contact me on my email depy45631@gmail for more premium templates in less than $32

Features of this Template

It has almost all the features and design on Listverse, from header to footer, you will find everything similar to it but due to some reasons some features couldn't be added. But that's not a huge matter, you will yet love the template. Read some selective features of it below

Custom Header

Let's start from the top, the good looking black header box with 728x90 advertisement banner and Social network links in separate boxes in the header. And the most important element is the search box, it gives the users more accessibility to your website.


Note : You have the edit the links HTML of the social network links in the header to point it to your profiles.

Blog title and PageList

The smart placement of blog title and pagelist brings the page to life.It has the same looks with better technique used for backgrounds, instead of using pictures, we used CSS3 background image property and that improves the page load time.


One more thing that's amazing about the blog title and pagelist is that it's full size and expands to the sides of screen, you won't see this design on every blogger template.

Post display

It's almost like the interface in Listverse and i focused on it mainly, as it was the main element which users see. The title is in the center, on it's left is the date when it was published and on it's right is the comment link to the post with comment count. Here's a quick preview of it.


Great ! Isn't it ? The post separator gives the post body a professional look.
You have the read more button next to the post excerpt and the author name below it, the author name is fetched automatically, so you don't have to make changes to anything.

Subscribe Gadget

The subscribe gadget is a plus point of the template, the sidebar is on the sidebar and it's what on the listverse site. Although, you have to edit it's HTML to point it to your profiles just as in the header. You can do it by editing your template or editing the gadget by going to Layout.


As the template is premium, i will do it for you when you place an order. You just have to provide the links to your profiles and i will edit the HTML which will work for you.

Categories Gadget

It is the default label gadget but has been styled with CSS. Each label are of different colors and in order like on the listverse website. You have to configure the label gadget to be list for this CSS to work.

Social share buttons below and above the post

I have put 3 social share buttons which are Facebook like, Tweet and AddThis share. The share buttons have been placed into boxes that makes it look cleaner and the reader will often use the share buttons which is good for your traffic and readership.

Numbering list design

This is the exclusive feature of this template, if you are a fan of listverse and always wanted the numbering list like on listverse then this is what you need. The design is already on the template, now all you need is to know how to put it on your posts. This tutorial will help you http://stramaxon.blogspot.com/2012/07/listverse-number-list-design-blogger.html


Note : Don't include the CSS provided in the tutorial, those CSS are already applied on the Template, all you need is the HTML.

Custom Footer

One more great element in the template is this footer, which has all the links to your important pages on your blog and attribution. You have to edit the HTML in the template to place correct values in the anchor links. But this is a premium template, so i will do it for you, you just have to give the links.

Buy this Template

If you are impressed with the template and want to buy it then just contact us via email depy45631@gmail.com or deepakblogger45631@gmail.com. The template is the $30, but as promotional offer we are taking it down to $28 for the first 10 buyers.

Keep updated

If you want discount on the template then subscribe to us and we will be happy to sell you the template with discount.
Enter your email address:


Delivered by FeedBurner

'Dream blog' - 2nd version of best SEO template

This is the second version of our best SEO template called 'Dream Blog', we got positive feedback about 'Dream Blog' template and also got some suggestion regarding the Template. This new version is more better than the older one but both works great for SEO.
We decided to launch 'Dream blog' as a free template so that everyone can enjoy the benefit of a SEO friendly template.
Preview Template Download - Server 1 Download - Server 2

Downloading and installing

Extracting the files : You can find the .xml file inside the RAR file you can download in the above links, use WinRAR program to easily extract files from the zip file.
Installing the template : The first step to install 'Dream blog v2' template on your blog, you have to upload the xml file on your template section, check this tutorial.


Note : Always Backup your template when you try to make any changes to your blogs Template.

About the dreamblog-V2-CSS.css file

Once you extract the template, you will see two text file, one xml (the template) and a CSS file named dreamblog-V2-CSS.css, the CSS file contains overall CSS code to design the template and if it's not linked in the template then your blog will have no good style with 'Dream blog' template.


I am already hosting the CSS file on dropbox and it's where the CSS file is downloaded on your template, it means that i can make changes in design by applying CSS style on the CSS file hosted on dropbox anytime. You may host the CSS file on your own server or dropbox so that you have control on it or if it ever gets deleted on my dropbox then you will have the CSS file with you and you can use it yourself.


You can find the link in the template and replace it with your link to the hosted CSS file on your server of hosting service. Replace this link :
http://dl.dropbox.com/u/93278694/dreamblog-V2-CSS.css
Go to Blogger Dashboard > Template > Edit HTML > Use CTRL+F to find the link and then replace it with your own link.

Features

This template is second version of our 'Dream Blog' and many features are same as the previous one. Because this is a new version you will see lot more improvements and new features, just a quicklist of the features. 
  1. Best SEO template for blogger cause we kept the template as simple as possible to make your blog load faster and that helps in improving SEO.
  2. The structure of the template is well formed and that makes the template interface better and gives it more usability
  3. CSS file is hosted externally and that's 
  4. New CSS3 scroll bar in this template is what makes it a 2012 template, the scrollbar only works in Webkit browsers, other browsers don't support styles for scrollbars. 
  5. Content on this template is easier to understand
  6. Used small picture for the full page background to improve page load, you can get more background designs here
  7. Compact header to give more room to the contents
  8. SEO friendly page title i.e  Post Title | Blog title
  9. Gadget separated in different boxes.
  10. Search box at the top, visitors can search for the content they are looking for without scrolling throughout the page. 
  11. Post Author info and post timestamp added under the post title
  12. Customized Lightbox, giving the default blogger lightbox a brand new look.Customize it yourself using this tutorial
  13. Previous post link below the post title 
  14. Jump to comment button at bottom right corner of the page for quick reach to the comment section 
These were some specification of the template. 

Add more stuffs

Just as the previous template, this template also allows you to add new features in blog if they are well formed. We have just named our blog a blogger gadget resource, so here are some of our gadgets which will look good in the 'Dream blog v2' Template, some have been already added so check before you add.
  1. Hover effect on images in posts - Blogger
  2. Under line gadgets title in Blogger
  3. Hover effect and Expandable Search box for Blogger
  4. Advanced Feedburner Subscription gadget for Blogger
  5. Show/Hide effect for Gadgets in Blogger with JQuery
  6. Good looking search bar for your blog or website

Your feedback and suggestions

Now we want to know about our template by you. If you have any suggestion regarding the template then do comment in with your query or the message. We will love to hear from you.

'Dream Blog' best SEO friendly Blogger Template free

99% of Templates in Blogger aren't that SEO friendly so I thought of launching my own template to let other bloggers use it. This template is one of the best template in Blogger because it doesn't use much images for backgrounds and that makes your blog load faster. There are more other features of this template. 
SEO templates in WordPress are sold for more than $70, because they are worth it. But no one has made a start to make SEO templates in Blogger, but for the good of blogger users we are launching this template for free and everyone can use it.

First of all take the Demo and Download links and then read the features.
Preview Template Download - Server 1 Download - Server 2

Buy the new Responsive Blogger Template - Reiulanus Template

Downloading and installing

Extracting the files : The .xml template are inside the RAR file in download links. You have to extract the files with the help of WinRar program.
Installing the template : Check this tutorial for an easy way to upload this new template to your blogger blog. But do remember to backup your template before uploading the new one.    

Features

The features in this template are unlimited and awesome. I am sure you haven't seen any such template for Blogger. Although i thought of adding a quick list of features available in the template.
  1. The template is completely SEO friendly, doesn't leave any bad effect on your blog's content (which you don't find in other blogger template)
  2. 'Dream blog' Template is compatible for Google adsense ads and you can place it anywhere in the template or layout. 
  3. More room for the content, this template will give more priority to the content rather than sidebar gadgets. As said 'Content is king' so the king is at a easily noticeable area.
  4. Social shares are at the bottom of the post so your readers can share the content right after reading it.
  5. Template is clean and easy to navigate. Navigation in template is an important thing in blog and to improve quality of user interface the navigation is made easy. 
  6. No much confusions, the links are it correct places and doesn't create confusion to the visitors.
  7. Pages are well structured
  8. The beautiful search box gives it a more professional look, you have to edit some HTML in the search box to make it search your blog. This guide will help you. 
  9. Labels in the sidebar are vertical aligned and that makes the sidebar look more compact, it also saves space. 
  10. Blogger Comment design get's a new standard in this template, the new design is more easy to understand and also makes readers love to comment.  
  11. The posts are displayed separately in their own box which is again easy to understand. 
  12. 'Posted by' links and time-stamp are also designed well.
  13. Jump to comment button which is always at the bottom right corner in post pages, which takes anyone who clicks on it to the comment form. 
  14. Self created about me section in HTML. You have to edit the HTML in it to makes it look like yours.
  15. Template is independent and you can add more functionality such as subscribe box under post etc. You will find many resource which i publish every week.
  16. You can change whatever you want to change in template just by editing some CSS. But only play with it when you know what you are doing.  
  17. Less images used to design the template, it means fast loading site and fast page load means good search ranks for your blog. 
  18. Custom footer added in the template, if you want it to be removed then you can buy the rights from me just for $25
This is a quick list of the template's features. You can see how this template is user friendly and SEO friendly too.

Add more functions

This template gives you freedom of adding other Blogger functions of your choice. You can find some Blogger gadgets on this website also. Here's some of them
  1. Advanced Subscription box
  2. 'Next - Previous' buttons in a new design
  3. Blogger comment design like SYB
  4. Remove Blogger/G+ icon from About me gadgets
  5. Animated header in Blogger

Your Feedback

Do leave your comments about what changes needs to be made in this template, you can always suggest us something new to make this template the best. There can be small mistakes, if you find one then inform me.

If you want to get tips on hiring a rocking web designer then do read this article by Hannah Howard - Hiring website designers that rocks

If you want me to design your own template for under $45 then contact me on my email depy45631@gmail.com
    

    Buy a blogger template or use a free one ?

    Apart from the content, template design is also important. Search engines don't see your template design so design doesn't matter in SEO but the people seeing your blog needs a good user interface for navigating through your blog. Nobody wants to read a blog with no design or an outdated design blogs.
    Remember the days of 1990s when internet was only used for transferring data on a plain page with black text and nothing much. Internet was not utilized the way it is used today. Design has become one of the important element in an online web page. Especially in blogs where presentation is important.


    It was about the needs of design but the main topic this post is about buying a template for blogger or using a free theme. Considering a free template is easy, as you start blogging you are not aware of SEO which is the main and very important source of your readers. But is free template good for your blog ? If you don't know the how internet and search engines work you would think, they look great but there's a dark side of it. Read it below.

    What's bad in using Free templates

    You will find many sites on internet providing you free templates for Blogger and you will just download one for you blog and apply it. If you have a look at Wordpress theme store you will find professional paid themes and each of them are professional looking, they will look good on your blogs whichever topic it's on and that's the specialty of paid themes. But for free templates they aren't well formed or ever given a professional touch, they are just made to increase the numbers of templates in a free blogger templates sites. Free blogger templates also sometimes contains links to other sites just for backlink and you will never know about it because the author of the template hides it. Backlink to random sites from your blog will affect your blog's reputation for search engines. Even sometimes they contain iframes in which other web pages are embedded, it's the worst, they are integrated in a site template to increase pageviews of other's site just to get money from their customers for increasing traffic, it means your pageviews will also add the pageviews to the site in iframe.


    Even after reading this you want to use free templates, i won't stop you. But check if they have implemented any iframe or hidden links, if you found those in the template then keep from using that template.         

    The benefit of using paid blogger templates

    The best thing with paid templates is that you get a unique design for your blog. In paid templates you can ask the designer to make changes on your needs, so you have your own unique template. As these templates are not free, they are created with hardwork because designers are going to be paid for that.
    Also, it's on you to have the attribution or not. I would say that attribution is okay as it will encourage your blog viewers to know more about the template designer or author.


    I don't think it's a big deal to pay $20 for a premium template, if we talk about WordPress themes i have seen the lowest template @ $45.

    Where can i get my template designed and for what amount ?

    I am not sure what other designers expect but if you want me to design your template i will do it for less than $20, you will tell us what you want and we will convert it into a professional blogger template to fit your niche of your blog. I have couples of premium templates in my directory, so if you want then contact me on my email depy45631@gmail.com 

    Backup the Blog Template in Blogger

    A short and easy guide how to backup your template of your blogger blog, so that you will always have a copy of working template.

    Update for April 2017: This tutorial is obsolete, please go to the newer tutorial on backing up your blogger template in the new Blogger UI

    I have decided to make this post small so that you can do your work faster than just reading my text, i have provided screenshots so that you can easily understand.

    This tutorial covers guide on how to backup template in blogger in both New and Old Blogger Interface

    How to Backup in New Blogger Interface

    First i will show how to backup the template in New Blogger Interface, as most of the Bloggers now use New Interface. Follow the step-by-step instructions with picture demos.
    1. Log into your Blogger Dashboard and select Template from the drop down list next to your blog

    2. On the Template page, see the right top corner, there you will see a "Backup/Restore" button

    3. Click on it and a box will appear, there will be two option, one is to Download the full template and other will be to Upload a template. Click on "Download the full template" and your download will start.
    4. The XML template will be saved on your computer and you can keep it for future, so if you make any mistakes in editing the template you always have copy of working template
    There's no limit of how many times you can download the template, whenever you feel you want a backup of your template, just use this to keep a backup of your template.

      How Backup template in old interface

      If you are yet using the Blogger old interface then the instruction below will help you to backup your template in old UI
      1. Log into your Blogger account, on the Dashboard click on Design under your blog

      2. After clicking on Design , click on Edit HTML under the Design tab

      3. Below the Backup/Restore section in Edit HTML page, click on Download full template
      Once you click on Download full template your backup template will be downloaded

      Hope this tutorial was helpful to you, for more blogging ideas and tips please subscribe to free email newsletter