Don't Miss

Latest Posts
Browsing Category "Templates"
Tags:

10 Best Magazine Style Blogger Templates

- 20 Comments
Are you Planning to start a Magazine Blog? Are you looking for the best Magazine Template to use on your Blog? Choosing the best template has always been a headache for bloggers. There are thousands of template available on the internet and it's almost impossible to check all those templates. So, in order to help you in choosing a template for your magazine blog. Today we're going to share a collection of 10 Best Magazine Style Blogger Templates. Previous we also shared 20 Best Blogger Templates of 2014, 7 Best Blogger Templates for Video Blogs and we also launched our 2nd website Themeolect, visit Themeolect now and browse hundreds of free blogger templates. Here's a collection of 10 Best Magazine Style Blogger Templates:
10 Best Magazine Style Blogger Templates

Awesome Mag


Awesome Mag Blogger Template is fully responsive theme that comes with features that are never seen before in a BlogSpot blogger template. It has a unique fluid design concept with robust elements, which make it a complete package of theme that could be converted into any niche site or blog. It is a 3 column template that can be customized into a portfolio, magazine, personal blog, products, list based sites and etc. It is optimized for both on-page and off-page SEO that gives enough flexibility to rank your post higher in the search engine results, and allows to index your posts 99% faster than the rest of the Blogger templates available on the internet.

Expose



Expose is a blogger theme with responsive layout and it’s High User Friendly Blogger Template. It’s design simple and clean, perfect for a variety of purposes, although focused towards Photographers and those using Portfolios to display their past and present work collections. Requirement: You need to save your own image on Blogger rather than do hotlinking from the various sources to run this template.

Social Mag



Social Mag is a based on Modern UI with futuristic interface. With features that makes it social media friendly. You'll find almost all key features on this template that are needed to run a blog or a magazine based site. This template gives extra importance to your social media network by giving more options to your users for sharing the content to subscribing to your social network.

Grid Mag



Grid Mag is a Magazine Style Blogger Template having 3 Columns, the header is divided in two portions, the left one is your header while on the right side we've implemented a banner ad section.  A beautiful sticky navigation menu on the top and one on bottom. The footer is divided in three portions, which means you can add 3 widget in its footer.

Spray Mag



Spraymag is a magazine style free blogger template. Spraymag is a clean and modern blogger template which is suitable for magazines, newspapers and the blog websites. Spraymag blogger template is very flexible and super easy to use. Spraymag is completely responsive and fast loading blogger template.  Spraymag comes packed with a lot of features like featured slider, Carousel , Featured Posts and a lot more. Features of Spraymag Magazine Blogger Template.

Sora Red



Sora Red is a blogger template with a awesome functional design that not only looks great but also performs exceptionally too. It is a responsive design; which means it can fit seamlessly into any screen size without any visual jerks.

Grid



Grid is a grid-based, responsive minimalistic Blogger theme suitable for any kind of creative, personal or business use. It is the fully responsive HTML5 & CSS3 template that best used for blogging, personal portfolio, even business portal. Grid works seamlessly on a wide range of devices including PCs, mobiles, laptops, etc.

Brand Mag UX



Brand Mag UX is pure and fully responsive Blogger Template builds with latest technologies like HTML and CSS3. It has a unique design concept with multiple elements to customize and turn it around. It has variation in the header, as you can add either Slider or Advertisements. You can use it for design, portfolio, magazine, personal blog, products, presentation and landing page etc. It is also pre-optimized for on-page SEO providing enough functionality to index your posts 80% faster than the other Blogger Templates available on different websites.

Mazaya



Mazaya is a Complete Blogger theme for a news or magazine site with the focus of attracting and keeping visitors on their site. Mazaya is a elegant and professional news theme which is great for anyone looking to display a lot of content in a clean and user friendly manner. Mazaya focuses your images, pictures including video files and allow them a better exposure for your fans and audience so that they can get engaged with your blog's content. Practically every typographic element has been endlessly tweaked for different screen sizes to make sure it looks great no matter what the device.

Movie Mag



Movie Mag is a unique Entertainment Blogger Template which is suitable for any type of Cinema, Movie Promotion, Theatres, Blogs and Movie Communities no matter the size. Movie Mag comes with a separate framework that is built with latest technologies like CSS3 and HTML5. Movie Mag has banner areas, so it allows you to show ads and earn money without making damage to your website overall look. Movie Mag will help you get a professional video site up and running quickly, it is inspired and support by the popular websites like YouTube, Vimeo and Dailymotion.

Share your thoughts about this collect in the comments section below. Share this post with your friends and don't forget to subscribe us!
Posted by Zohaib Liaqat at 07:22 20 comments
Labels:
Tags: /

Launching Our Second Website - Themeolect

- 8 Comments
Surprise! It gives me great pleasure to present to you Our 2nd Website entitled as "Themeolect". Yes, Themeolect, its the 2nd blog under our Network. The purpose of creating this blog is to provide you Highly Professional and Unique Blogger Templates. By its name anyone can guess that what this website is actually about, yeah Theme (Template).

Visit Themeolect Now


After receiving a lot of requests from BGT readers and our fans on Facebook for Blogger Templates. An idea came to my mind to start a Blogger Resource Blog. After spending hours on research, finally I came to my result and started to design my new website "Themeolect".

My Mistakes

1 Year back when I started Blogolect, I was a beginner blogger with no skills and experience. I made countless mistakes in my first 6 months due to which Blogolect didn't rank well but after hours and hours of daily research and improving my skills. I said to myself "Oh Sh**", I was doing all wrong and I wasted my six months. After that I started to blog regularly, writing top quality posts and improving my skills. Today after writing hundreds of posts on Blogolect for Helping Newbies, I'm going to enter into the next phase by launching my 2nd website Themeolect.

Don't forget to Like Themeolect on Facebook http://www.facebook.com/themeolect

Our Goal

At Themeolect, we'll share only the best and professional Blogger Templates. Our team will collect the best templates from hundreds of professional designers and we'll share them with you on Themeolect. Now you don't have to surf hours on the internet searching for the perfect template because Themeolect is one stop for blogger templates. Our main aim is to help newbie bloggers so that they can run a well-designed website.

Don't forget to share our new website on your social profiles, friends and on your website and help us in making it the No. 1 Blogger Template Resource website.
Posted by Zohaib Liaqat at 03:28 8 comments
Labels: ,
Tags: /

7 Best Blogger Templates for Video Blogs

- 56 Comments
Here's a Collection of 7 Best Templates for Video Blogs.
Recently we shared an article on 20 Best Blogger Templates of 2014 and today again, we're going to share another article on Blogger Templates. Blogger is a flexible and easy to use platform. Apart of its hundreds of features one of its best features is that you can easily install/upload custom templates within just a few minutes. Thousands of Professionally designed templates are available on the internet, but the problem is to choose the best one, that fulfill your requirements.
7 Best Blogger Templates for Video Blogs
If you're looking to start a new Video Blog on Blogger and you're confused about its template, then just take a look at this collection of 7 Best Blogger Templates for Video Blogs. All these are handpicked templates having clean design, professional look and eye catching layout.

Movieism

Movieism is a unique and stylish entertainment blogger template which is appropriate for any kind of movie blog, cinema, movie promotion, film blogs and movie communities. Movieism comes with a separate framework that is built with latest technologies like CSS3 and HTML5. You can create a custom homepage or can use the default one which entirely depends upon your needs. It is responsive which makes it almost one of its kind movie templates for blogger BlogSpot blogs.

Video Box

VideoBox is a very professional video gallery blogger themes with great feature like wooden design and gray color for basic design this themes, ads space widget at top right sidebar, professional video gallery blogger themes and 4 columns layout, drop down menu for main navigation, 1 right sidebar, auto thumbnail post at homepage, 4 column widget at footer, ads space ready, fast themes on browser and you must try this themes for music or video sites.

Moviexpose

MovieXpose is a unique Entertainment Blogger template which is suitable for any type of cinema, movie promotion, Movie Reviews, blogs and movie communities no matter the size. MovieXpose Template comes with two designs - dark background and light background. It is ads ready, two view mode (List and Grid) width cookies and Rating widget inbuilt.

Blog Tube

BlogTube is a Professional Responsive Video Blogger Template designed for video sites, video blog video portal. This template will help you to setup a professional video site quickly. It is inspired by popular websites including YouTube, Vimeo and Dailymotion. No two opinions to say that it is the most powerful Video Blogger theme ever. It is fast, responsive, minimal and packed with tons of features required to set up a professional video site.

Videoism

Videoism is a professional video hosting blogger template designed for video site and video blog portal. This template would help everyone in setting up a professional video site rather quickly. It is somewhat inspired from popular video hosting websites like YouTube, Vimeo, Dailymotion and etc. No modest to say that this is the most powerful and robust Video Blogger template ever. It has significant features that would surely make your visitors feel great. It is extremely light weight and has quite impressive features too.

Tube Mag

Tube Mag is a Professional Responsive Video Blogger Template designed for video site, video blog video Portal. This theme will help you get a professional video site up and running quickly, it is inspired and support by the popular websites: YouTube, Vimeo and Dailymotion.

Johny Crottube

Johny Crottube template is Johny Crott series that was made for video content only from Youtube. There's so many feature in this template. It's a white and black color with 5 column blogger in there, easy loading with elegant looks, 1 left sidebar in homepage and 1 right sidebar in post page, 3 columns footer, navigation drop down menu, grid and list style, pagination for blogger ready, clean design template, and more.

From Editors Desk

Do share your thoughts about these templates in the comments section below? Which one is your Favorite? Share this post with your friends and don't forget to subscribe us!
Posted by Zohaib Liaqat at 05:25 56 comments
Labels: ,
Tags: /

20 Best Blogger Templates of 2014

- 90 Comments
Today, we're going to share a collection of 20 Best Blogger Templates of 2014.

Blogger is an easy to use platform with millions of active users. Blogger is good for both beginners and professionals. In case of beginners, it just hardly takes 5 minutes to start your blog on blogger. It has a strong and unique dashboard with rich customization options. When it comes to our blog design, we choose custom templates as they give our blog a unique and professional look because our blog template is the first thing that our visitors notice. Thousands of blogger templates are available on the internet. But choosing the best one has always been a headache for bloggers. So, in order to help you, today we're going to share a collection of 20 Best Blogger Templates of 2014. We hope you find this collection useful.
20 Best Blogger Templates of 2014

1- Awesome Mag

Awesome Mag Blogger Template is fully responsive theme that comes with features that are never seen before in a BlogSpot blogger template. It has a unique fluid design concept with robust elements, which make it a complete package of theme that could be converted into any niche site or blog. It is a 3 column template that can be customized into a portfolio, magazine, personal blog, products, list based sites and etc.

2- Real Mag

RealMag is a modern, user-friendly and professional blogger template. It is clean and modern design for blogger users. It comes with several handy features that are both good to run a successful magazine blog, news blog or etc.

3- Torrentism

Torrentism is a responsive Blogger template for Torrent, file hosting and software download niche blogs. It is a multipurpose template and can be used in different ways, according to the desire needs.

4- Beta Commerce

5- Simplest

Simplest is a minimal style responsive blogger template fully loaded with lots of awesome features and clean design.

6- Colored

Colored is a minimal flat style template. Its has a clean design and has build-in tabber widget and lots more. A colorful navigation menu and clean design gives it a professional and eye catching look.

8- Krystal

Krystal is a responsive magazine style blogger template specially made for news, technology, blogging, multimedia and niche type blogs. Krystal is fast loading blogger template coded with latest HTML5 and CSS3 techniques. 

9- Simple Tech

Simple Tech is an awesome tech blogging templates which is ready right out of the box to display your content like the biggest, baddest magazines-turned-websites do it. Simple Tech is fast loading and responsive, we have added lots of seo settings to this theme which will help you to rank higher in SERP.

10- Grid Mag

Grid Mag is a Blogger Template having 3 Columns, the header is divided in two portions, the left one is your header while on the right side we've implemented a banner ad section.  A beautiful sticky navigation menu on the top and one on bottom. The footer is divided in three portions, which means you can add 3 widget in its footer.

11- Flat Mag

Flat Mag Responsive Blogger Template is a multi-purpose straight Blogger template precisely designed for multimedia, news bulletin, Entertainment and Technology blogs. With elegant green color scheme, Flat Mag gives you visitors the experience of their life as they go though the responsive and flexible design.

12- Shoot Pics

Shoot-pics is a ideal blogger template for photographers. It's loaded with best features which makes your blog a perfect showcase for your photography skills. You will also get a complete guided documentation with this template which will make you the best curator of this template.

13- Greenchilli

GreenChilli is a SEO Friendly, Clean and Responsive, 2 Columns Blogger Template with Elegant Look. GreenChilli Blogger Template has a Top Dropdown Menu, Related Posts, 3 Columns Footer, Google Fonts, Social Profile Buttons and Post Share Buttons and More Features.

14- Videoism

Videoism is a professional video hosting blogger template designed for video site and video blog portal. This template would help everyone in setting up a professional video site rather quickly. It is somewhat inspired from popular video hosting websites like YouTube, Vimeo, Dailymotion and etc.

15- Your Mag

Your Mag is a complete Responsive Blogger Template for a news or magazine site with the focus of attracting and keeping visitors on their site. This theme perfect for Search Engine Optimization. Its High User Friendly Blogger Template. Its perfect for News, Magazine or portofolio websites.

16- Iconic One

Iconic one is a minimal responsive template with a number of great features. The Best part of IconicOne template is that it has every minor function added with minimal spacing.

17- Go Green

GoGreen is a multipurpose Blogger template with lots of new and indifferent functionalities. It is elegantly clean with a touch of FLAT UI but it is not totally flat. The dynamics of this theme are extremely pure and it gives a sparkling shine to your blogger site.

18- PickPress

PickPress is one of the editor's choice template with retina display. It has unique style logo and featured post area with mouse hover rotating option. PickPress blogger template is for those bloggers who want to give their blog elegant plus professional look.

19- Delivery

Delivery is a modern WP theme which was published by theme-junkie, fresh and creative template best suited for Magazines, News or Tech Blogs, with tons of features to make your blog elegant. Best thing of 'Delivery blogger template' is, it's well suited for both beginners with no coding knowledge and experience.

20- Retina

Retina Blogger template is a versatile magazine style theme designed for those blogs which are multi-niched, or covers a lot of stories of different categorize at just one place. It is still ideal for all kind of blogs like Technology, Entertainment, News, Magazine, Gadgets. It has the tendency to accommodate almost anything. It is jam-packed with lots of customized widgets.

From Editors Desk

Do share your thoughts about these templates in the comments section below? Which one is your Favorite? Share this post with your friends and don't forget to subscribe us!
Posted by Zohaib Liaqat at 04:20 90 comments
Labels: ,
Tags:

Releasing "Grid Mag" Free Blogger Template

- 2 Comments
Name: Grid Mag
Platform: Blogger
Layout: 3 Columns
Footer: 3 Columns
Release Date: 21 Feb, 2014
License: Creative Commons Attribution 3.0
Author: www.blogolect.blogspot.com




Today we're releasing a stylish template which is named as "Grid Mag". This is having 3 Columns, the header is divided in two portions, the left one is your header while on the right side we've implemented a banner ad section.  A beautiful sticky navigation menu on the top and one on bottom. The footer is divided in three portions, which means you can add 3 widget in its footer.

Download Template

Note: The template contains a footer credit to our blog. Kindly don't remove footer credits. In any case of violation i would be compelled to complain that Blog URL to DMCA.

Features

  • Compatible with all browsers
  • Top Navigation Menu
  • Bottom Navigation Menu
  • 3 Footer Columns
  • Magazine/Grid Style

Top Navigation Menu


 <div class='menu-container' id='menu-secondary'>

        <div class='wrap'>
            <div class='menu'><ul class='' id='menu-secondary-items'><li class='menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-home menu-item-194' id='menu-item-194'><a href='/'>Home</a></li>
<li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-185' id='menu-item-185'><a href='#'>General</a></li>
<li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-186' id='menu-item-186'><a href='#'>Games</a></li>
<li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-188' id='menu-item-188'><a href='#'>Doctors</a></li>
<li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-188' id='menu-item-188'><a href='#'>Technology</a></li>
<li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-188' id='menu-item-188'><a href='#'>Booking</a></li>
<li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-188' id='menu-item-188'><a href='#'>Movies</a></li>
<li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-189' id='menu-item-189'><a href='#'>Category</a></li>
<li class='menu-item menu-item-type-taxonomy menu-item-object-category menu-item-190' id='menu-item-190'><a href='#'>Uncategorized</a></li>
</ul></div>        </div>

    </div>

Replace # tags with URL's and the bolded text with their names. You can also add or remove tabs.

Bottom Navigation Menu


<div class='menu-container' id='menubgt-primary'>
<div class='clear'/>
        <div class='wrap'>
            <div class='menubgt'><ul class='' id='menubgt-primary-items'><li class='menu1-item menu1-item-type-custom menu1-item-object-custom current-menu1-item menu1-item-home menu1-item-194' id='menu1-item-194'><a href='/'>Home</a></li>
<li class='menu1-item menu1-item-type-taxonomy menu1-item-object-category menu1-item-185' id='menu1-item-185'><a href='#'>General</a></li>
<li class='menu1-item menu1-item-type-taxonomy menu1-item-object-category menu1-item-190' id='menu1-item-190'><a href='#'>Uncategorized</a></li>
</ul></div>        </div>
  </div>

Replace # tags with URL's and the bolded text with their names. You can also add or remove tabs.

From Editors Desk

Got a problem? Leave your comment below. Give us your feedback about this template. Any Suggestions? Let us know in the comments.
Posted by Zohaib Liaqat at 09:58 2 comments
Labels:
Tags: / /

How to Create a Magazine Style with Post Summaries and Thumbnails in Blogger

- 18 Comments
Today, we've another interesting blogger trick and using this trick you can change your blog's simple posts view to a magazine style view. This trick will change your blog posts simple appearance i.e. List style to a beautiful magazine style. There are several ways for creating a magazine style and today we are going to learn one of them. How a magazine style looks like ? Here's a preview of magazine style template. -->

Creating a Magazine Style with Post Summaries and Thumbnails

Step 1. Log in to your Blogger Dashboard
Step 2. Select a Blog >> Go to Template and Backup your template
Step 3. After the Backup click on Edit HTML Button
Step 4. Search (CTRL + F) for the following Tag

<data:post.body/>

Note : You'll find the above tag many times but you've stop at the second one
Step 5. And Replace the above code ( <data:post.body/> ) with the following one (Remove <data:post.body/> and paste the following code instead of it)

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Continue Reading &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Note: You can replace the text Continue Reading with another you like
Step 6. Now search (CTRL + F) for the following tag

<b:include data='post' name='post'/>

Step 7. And replace it with the following code

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-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'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary1&quot; + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb1(&quot;summary1<data:post.id/>&quot;);</script>
<span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Continue Reading &#187;</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Note: You can replace the text Continue Reading with another you like
Step 8. After that search (CTRL + F) for </head> tag
Step 9. And paste the following code just before/above it

<script type='text/javascript'>
posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 600;
first_thumb_sum = 540;
img_thumb_height1 = 145;
img_thumb_width1 = 165;
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}

  var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

function createSummaryAndThumb1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = first_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="first-post-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';
summ = first_thumb_sum;
}

var summary1 = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary1;
}

//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.first-post-thumb {
margin-right: 10px;
border: 1px solid #fff;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
background: none;
border: none;
box-shadow: none;
padding: 0;
}
#first { /* styles for first post container */
width: auto;
height: 250px;
float: left;
margin-bottom:10px;
background-color: #F4F4F4; /* background color for the first post */
border: 1px solid #E5E5E5; /* color and size of first post border */
}
.first-body { /* first post summary styles */
color: #545454;
font-size: 13px;
text-align: justify;
padding: 5px 10px;
line-height:1.5em;
}
#first h3 a, #first h3 a:visited { /* First Post title styles*/
border-bottom: 2px solid #DFDFDF;
color: #515151;
font-size: 20px;
display:block;
margin: 10px auto;
width: 95%;
font-size: 20px;
padding: 0px 0px 4px 0px;
font-weight: bold;
text-align:left;
line-height: 1.4em;
background: none;
}
#first h3 a:hover { /* mouseover color for the First Post title */
color: #1061A1;
}
.post { /* small posts container styles */
float:left;
margin-right: 10px;
width: 290px;
height: 210px;
padding: 0px 5px 5px 5px;
background: #FCFCFC; /* background color for the small posts */
border: 1px solid #E5E5E5; /* color and size for small posts border */
overflow: hidden;
}
.posts-thumb { /* small posts thumbnails styles */
margin-right: 5px;
background: #ddd;
padding: 3px 3px 0px;
border: 1px solid #C4C4C4;
border-radius: 4px;
}
h3.post-title a{ /* small posts titles styles */
font-size: 14px;
color: #747474;
background-color: #F4F4F4; /* background color for the small posts titles */
width: 95%;
font-weight: bold;
font-family: 'Arial Narrow', sans-serif;
padding: 5px;
}
h3.post-title a:hover { /* mouseover color for the Small Posts Ttitle */
color: #005B77;
}
h2.date-header { /* Post date */
display:none;
}
.post-footer { display: none;}
h3.post-title {margin: 0px;}
.readmorebutton { margin-top: 5px;}

.readmorebutton a { /* Read More link styles */
color: #767676;
border: 1px solid #E1E1E1;
background: #EAEAEA; /* Background color for the Read More link */
text-decoration:none;
padding: 3px 5px;
font-weight: bold;
font-size: 11px;
}
.post-comment-link {
float: right;
display: inline;
margin: -35px 0px;
border: 1px solid #E1E1E1; /* border for the comment bubble */
background: #EAEAEA; /* background color for comment bubble */
font-size: 11px;
position: relative;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
#first .post-comment-link { /* style for the comment bubble of first post */
margin: -200px 10px;
}
.post-comment-link a{
padding: 10px;
color: #6A6A6A;
text-decoration:none;
font-weight: bold;
}
#blog-pager {clear:both;}
</style>
</b:if>
</b:if> 

Customization :
  • In posts_no_thumb_sum = 290; Replace 290 with the number of characters you want to show for the small posts when there is no image available in the post
  • In posts_thumb_sum = 240; Replace 240 with the number of characters you want to show for the small posts when the image is available in the post 
  • In img_thumb_height = 80; Replace 80 with the height of small posts thumbnails
  • In img_thumb_width = 80; Replace 80 with the width of small posts thumbnails
  • In first_no_thumb_sum = 600; Replace 600 with the number of characters you want to show for the first post when there is no image available in the post 
  • In first_thumb_sum = 540; Replace 540 with the number of characters you want to show for the first post when the image is available in the post 
  • In img_thumb_height1 = 145; Replace 145 with the height of first post thumbnail
  • and At last in img_thumb_width1 = 165; Replace 165 with the width of first post thumbnail
To change the height and width for the first post container edit the below codes

width: auto;
height: 250px;

To change the width and height for the small posts container edit the below codes 

width: 290px;
height: 210px;

Step 10. Hit the Save Template button
Now take a  deep breath and check your blog
Posted by Zohaib Liaqat at 09:58 18 comments
Labels: , ,
Subscribe to: Posts ( Atom )