Blogger Blog Templates

Showing posts with label Blue and Gray. Show all posts

Johny Magstore Shopping Blogger Template

Posted by Bhavika On Wednesday, May 30, 2012 4 comments

Johny Blackstore is a beautiful e-commerce blogger template created by Maskolis. The shopping store template is packed with features like a dual menu bar, slider to display latest products, grid and list view of products on home page, simple panner and zoomer for users to take a better look at the product, social media profiles and more.

Johny Magstore Shopping Blogger Template

Lets start with the horizontal bar on top where the social media icons are displayed along with the search box. To add your links, go to Edit Html and search for this code, and replace '#' with your facebook, twitter etc., account ids.

<ul class='isocial'>
<li><a class='rss' href='#' target='_blank' title='Subscribe via RSS'/></li>
<li><a class='facebook' href='#' target='_blank' title='Become a Fan'/></li>
<li><a class='twitter' href='#' target='_blank' title='Follow Us'/></li>
<li><a class='google' href='#' target='_blank' title='Google Plus Profile'/></li>
<li><a class='youtube' href='#' target='_blank' title='Watch The Video'/></li>
</ul>

Coming to the first menu bar with drop down, look for this code in Edit Html -

<ul id='top'>
<li><a href='/'><span>Welcome</span>Homepage</a></li>
<li><a href='#'><span>This is</span>About Us</a></li>
<li><a class='arrow' href='#'><span>Support</span>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>

Now replace '#' with category links or any page links, this template shows a small tagline below each heading in the menu bar, you can change the text to display, like in the above code its given 'This is' .....'About us', edit it if you like.

Similarly, for the second menu bar, look for this code -

<li><a href='http://feeds.feedburner.com/JohnyTemplate' title='Posts RSS'>Posts RSS</a></li>
<li><a href='http://johnytemplate.blogspot.com/feeds/comments/default' title='Comments RSS'>Comments RSS</a></li>
<li><a href='http://johny-darktube.blogspot.com/p/sample-page.html'>Sample Page</a></li>

Change the links, title, category name etc., and save the changes. Coming to setting up the product details, the below code has to appear in each post, instead of copying and pasting everytime, insert it in Settings--Posts and Comments--Post Template click on 'add' and paste the below code -

<div class="product_image">
<div class="pancontainer" data-orient="center" data-canzoom="yes" style="width:150px; height:150px;">
<img border="0" class="item_thumb" src="product_image.jpg" /></div>
<span class="item_price">$00.00</span> </div>
<div class="product_describe">
Descriptions... </div>

Every time when you to go to create a new post or add a new product, the code will be there in the posting area. You need to change the below details in the code -

src="product_image.jpg" /> - add your product image url, image size should be 300px-300px.
$00.00 - Price of the product
Descriptions... - product description

This template uses simplecart of wojodesign.com and it supports top currency like Dollar, Pound Sterling and Euro. To replace the Paypal account with yours, find the code below -

<script type='text/javascript'>
simpleCart.email = "johnytemplate@gmail.com";
simpleCart.checkoutTo = PayPal;
simpleCart.currency = USD;
simpleCart.taxRate = 0.02;
simpleCart.shippingFlatRate = 3.25;
simpleCart.shippingQuantityRate = 1.00;
simpleCart.cartHeaders = ["thumb_image" , "Quantity_input" , "Total", "remove" ];
</script>

Replace the text marked in bold with your email id and save the changes.

setting up the featured slider for shopping blogger template

The slider automatically picks up posts based on the label you have selected, to enable that feature go to Layout, click on 'edit' featured content slider, put in the label of your choice, save and the slider will be functioning. The product will be displayed when you hover on the image. Below the slider you will find the Grid and list view icon, you can see how the display changes, its a cool feature of this template.

Shopping cart is on top left which shows the costing details and checkout. The template has 2 columns on either side and also a related products widget at end of each post.

Download the Johny Magstore Shopping Blogger Template Read More or Download this Blogger Template

Light Space Blogger Template

Posted by Bhavika On Thursday, October 21, 2010 6 comments

Light Space is a 3 column magazine-style template designed by Template Mo and converted to blogger by Best Theme.

lightspace corporate business blog template

The social bookmarking icons have been included right on top in the header space, you can modify the links from Edit Html. Simply look for this code -

<ul class='social_network'>
<li><a href='http://www.facebook.com/Your User Name'

Insert your facebook username and save the template, similarly, add your link for Twitter and Linkedin. The space below the horizontal menu bar is divided into two sections, one side you can include the company profile or about us and the other side is the vertical menu bar to display your services, support and so on.

This theme also features a middle bar to showcase additional categories or sections. In order to modify the default text, go to Edit Html and search for this code -

<div class='section_w940'>
<div class='box margin_r30 box_border'>
<h2>Web Design</h2>
<div class='box_image_wrapper'>
<img alt='product 1' src='http://4.bp.blogspot.com/_yPlAAAH9bEo/TEpZZLwvGaI/AAAAAAAADaQ/cYZPZTwoyAs/s1600/folder.png'/>
</div>

Change the text at relevant spots and save the template. Follow the same steps to edit other 2 sections. Below this are customisable banner ads of different sizes.

While in the main column, each post appears in a summarised manner with thumbnails and Read More links. A good feature of this blogger template is the inbuilt related post widget, along with the author box, where you get to display information about the author/writer.

The sidebar includes the Subscribe to email option and social media sites. You can utilise the remaining space to add blogger widgets, videos etc.

Download the Light Space Blogger Template Read More or Download this Blogger Template

Creative Press Blogger Template

Posted by Clyde On Monday, September 07, 2009 7 comments

The Creative Press theme is an originally created for wordpress by Jinsona and ported to blogger by Cahaya Biru.

As you may be familiar with Jinsona's style, this template is a full power theme that incorporates a lot of Jazzy features like the slider. For some reason this template structure resembles another of Jinsona's design the Scarlett theme. Perhaps because of the search button in the header section.

Although the creative press is functionally robust it does manage to fit into the slick design category, a good reason for that is the single drop down rather than a double and the open slider design gives it a free feeling.

The laptop in the header makes this blog suitable for a tech website and just above that the menu navigation and blog title on the top left is seen. The main column starts off with a welcome to the blog section.

Then you have the featured posts which I think is integrated with the main posts, maybe I am wrong. The posts on the home page have an automatic read more function. The right hand side holds a single sidebar that then breaks up into two. The sidebar starts off with a widget displaying the recent posts and below that is a twitter update display.

The ad that lies in the sidebar seems to be out of place as its not inline with the twitter section. This can be worked around, finally the sidebars break into two columns and the blog ends with a widget enabled footer section.

Download the Creative Press Blogger Template Read More or Download this Blogger Template

Daily Planet A & B Blogger Skins

Posted by Clyde On Wednesday, June 24, 2009 10 comments

I am a fan of Jinsona, I think Web 2 Feel has some of the best free templates available from wordpress. Thanks to Cahaya Biru so many of these templates have been made available for Blogspot. Today we have the Daily Planet blogger template in two versions for blogger!

There are a few differences between the two templates lets take a look at these first. The Daily Planet A is a direct conversion from the wordpress theme. This means it comes complete with mini posts on the home page with auto read more. While B is a simpler version that does not have the read more and has full posts on the home page.

Apart from this both these templates come complete with all the features of a premium template. It starts off with a header that you can easily change, under that is a navigation menu. Then the featured post section, the stories from this spot are also displayed in the sidebar.

Under the posts section is a tabbed widget that allows you to showcase quite a bit of content. This section ends with a division of the main column into three sections. While the sidebar also has a tab section under the search bar which is placed after the featured posts.

The sidebar then splits up into two columns, making this an extremely functional magazine style design for your blogspot blog.

Installation Instructions: (Taken from Cahaya)

MENU

This is HTML Structure of menu

<li><a href='YOUR-MENU-LINK-LOCATION' title='View Files Under MENU-TITLE'>MENU-TITLE</a></li>

Change the word:

YOUR-MENU-LINK-LOCATION with your menu link.
MENU-TITLE with your menu title. Example: About, Contact, or etc.

If you want to add more menu link. just copy-paste the structure above under the previous.

POSTLINK

This is the HTML Structure Of POST LINK in Daily planet.

<div class="panel">
<img width="100" alt="" src="YOUR-IMAGE-HERE" height="60"/>
<div class="fcats"><a href="YOUR-POST-CATEGORY-LINK-LOCATION" rel="category" title="LABEL-TITLE">LABEL-TITLE</a> </div>
<h2><a href="YOUR-POST-LINK-LOCATION" title="POST-TITLE">POST-TITLE</a></h2>
<div class="auth"> Posted by AUTHOR</div>
<div class="fmeta">

MM-DD-YYYY |
<a href="YOUR-POST-LINK-LOCATION#comments" title="Comments On POST-TITLE">ADD COMMENTS</a></div>

</div>

Change the word :

YOUR-POST-CATEGORY-LINK-LOCATION with your CATEGORY LINK LOCATION. Example: http://www.cahayabiru.com/search/label/Blogger%20Tricks
YOUR-POST-LINK-LOCATION with your post link location.
POST-TITLE with your post title.
YOUR-IMAGE-HERE with your image. The size is 100px width and 60px height.
AUTHOR with your name.

Here is The example code that you can use.

<div class="panel">
<img width="100" alt="" src="http://web2feel.com/dailyplanet/wp-content/uploads/bats.jpg" height="60"/>
<div class="fcats"><a href="#" rel="category" title="View all posts in Featured">Featured</a> </div>
<h2><a href="#" title="Batman is back">Batman is back</a></h2>
<div class="auth"> Posted by jinsona </div>
<div class="fmeta">

Nov-20-2007 |
<a href="#" title="Comment on Batman is back">ADD COMMENTS</a></div>

</div>

<div class="panel">
<img width="100" alt="" src="http://web2feel.com/dailyplanet/wp-content/uploads/music.jpg" height="60"/>
<div class="fcats"><a href="#" rel="category" title="View all posts in Featured">Featured</a>, <a href="#" rel="category" title="View all posts in Uncategory">Uncategory</a> </div>
<h2><a href="#" title="Post with links">Post with links</a></h2>
<div class="auth"> Posted by jinsona </div>
<div class="fmeta">

Nov-18-2007 |
<a href="#" title="Comment on Post with links">ADD COMMENTS</a></div>

</div>

<div class="panel">
<img width="100" alt="" src="http://web2feel.com/dailyplanet/wp-content/uploads/pitts.jpg" height="60"/>
<div class="fcats"><a href="#" rel="category" title="View all posts in Featured">Featured</a> </div>
<h2><a href="#" title="An ordered list">An ordered list</a></h2>
<div class="auth"> Posted by jinsona </div>
<div class="fmeta">

Nov-18-2007 |
<a href="#" title="Comment on An ordered list">ADD COMMENTS</a></div>
</div>

FEATURED HEADLINES
Here is the HTML Structure of Daily Planet Featured Content

<h2><a href="YOUR-POST-LINK-LOCATION" title="POST-TITLE">POST-TITLE</a></h2>

<div class="fentry">

<p> <a href="IMAGE-LINK-LOCATION"><img alt="" width="240" src="IMAGE-LINK-LOCATION" class="alignnone size-full wp-image-28" height="150" /></a>

YOUR TEASER TEXT

.</p>
<div class="clear"></div>
</div>
<div class="featmeta">

<span class="cats"> Posted under <a href=" YOUR-CATEGORY-LINK-LOCATION" rel="category" title="CATEGORY-TITLE">CATEGORY-TITLE</a> </span>

<span class="rm"><a href="YOUR-POST-LINK-LOCATION" title="Batman is back">Read More</a> </span>

</div>

Please, change the words:

YOUR-POST-LINK-LOCATION with your post link
POST-TITLE with the title of your post
IMAGE-LINK-LOCATION with your image location
YOUR-CATEGORY-LINK-LOCATION with the category of your post
CATEGORY-TITLE with the title of post category
YOUR TEASER TEXT with your post short texts, description, or short paragraph.

Here is the example that you can try in your daily planet template.

<h2><a href="http://travellogsbook.blogspot.com/2009/03/hidden-overlapping-image-and-text-list.html" title="Batman is back">Batman is back</a></h2>

<div class="fentry">

<p>L<a href="http://web2feel.com/dailyplanet/wp-content/uploads/batmans.jpg"><img alt="" width="240" src="http://web2feel.com/dailyplanet/wp-content/uploads/batmans.jpg" class="alignnone size-full wp-image-28" height="150" title="batmans"/></a>orem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.</p>
<div class="clear"></div>
</div>
<div class="featmeta">

<span class="cats"> Posted under <a href="#" rel="category" title="View all posts in Featured">Featured</a> </span>

<span class="rm"><a href="#" title="Batman is back">Read More</a> </span>

</div>

Download the Daily Planet A Blogger Skin

Download the Daily Planet B Blogger Skin Read More or Download this Blogger Template

Puppet Blogger Template

Posted by Clyde On Monday, June 22, 2009 1 comments

The Puppet Template for blogger was brought to you by Klodian, who ported EZwpthemes theme for wordpress.

The puppet blogger theme is a simple two column template that has a fancy navbar that finds itself mixed with the header image. Just above the header section there is a strip that holds the title and the description. The right of it is the subscribe to feed RSS icon.

The search bar finds itself amidst the navigation size, the icons seem to be hanging with strings, this is perhaps why the theme gets the puppet title. The first section of the sidebar is tilted to one side and has a welcome message for your blog visitors.

There are minor flaws in the design, like the little glitch between the rounded parts and the sections. The template ends with a footer design of a city landscape, if you like ahead it go ahead and download it!

Download the Puppet Blogger Template Read More or Download this Blogger Template

Reflection the Business Blogspot Template

Posted by Clyde On Monday, April 27, 2009 2 comments

Its rare to come across a template for blogger that you can have as a front for your business, although the reflections template that has been originally designed by Ipietoon for blogger is not made with the thought of it being a business template but it fits those shoes perfectly.

Reflection the Business Blogspot Template

The template starts off with a bold blog title, under that is a menu bar that has a beautiful mouse hover, while on its right is a flushed search bar.

Like the Zinmag templates the Reflection blogger template has adapted the same glider and this is what starts off the main column, although the design has been changed to suit the theme, but the functionality is the same allowing you to display your featured posts.

Then come the posts with the author, time and comments placed below the headline and this template also has the Read More feature integrated in the code.

The right hand column has got a welcome section, where you can introduce your blog to the readers and then it splits into 2 more columns. So you can fill in the space with some widgets. The sidebars have no effects and are bland.

Download the Reflection Blogger Template Read More or Download this Blogger Template

Colorvoid Blogger Skin

Posted by Clyde On Tuesday, September 16, 2008 4 comments

The colorvoid blogger skin has been ported to blogger by Blog and Web and is an original design by Arcsin.

A two column template that looks attractive, has a couple of features and a neat design, is what summarises the Colorvoid blogger skin. It starts off with the blog title and description that lies above the header image. The title on the left while the description finds itself on the far right.

The header image is extremely attractive a flower design with spirals etc, with the navigational tabs present at the bottom of the header image. The blog has a tiny headline on a slightly darker background with the post date on its extreme right.

The author labels and comments link are at the bottom of the post. The sidebar lies on the right of the main column and has a nice rounded element for each of the widgets in it. All the four corners of the template are rounded giving it a nice feel.

Download the Colorvoid Blogger Skin Read More or Download this Blogger Template

Blogger Blog Templates

Free blogger templates for your blogspot blog...

Blogger Store

Lightroom Photo Blog Template

Magpress

Sens

Pop Out Social Bookmarking Widget

Johny Magstore Shopping Blogger Template

Light Space Blogger Template

Creative Press Blogger Template

Daily Planet A & B Blogger Skins

Puppet Blogger Template

Reflection the Business Blogspot Template

Colorvoid Blogger Skin

Archive

Recent Templates

Recent Comments

Video Guides