MXfluity - responsive design

blogger template
Features :
responsive design, magazine-style, right sidebar, gallery-style, posts thumbnails, drop down menu,remoticons, infinite scrolling, related posts support

Designer : mkr-site

Description : MXfluity is a free blogger template with 2 columns
Read more

Metro-Classic blogger template. Windows 8 Look

blogger template
Features :
2 columns , left sidebar , exclusive design for Blogger , navigation bar , Colors : black white , Windows 8 Look , Left Full Height Sidebar , Responsive Theme , SEO-Friendly , Featured Area

Designer : Templateism

Description : Metro-Classic is a free blogspot theme , This template has 2 columns , with colors black white , lot of place to put your widgets 

Instructions  : http://g.blog4temp.com/14RYKhw
Read more

Fresh Life - a blogger templates for magazine blogs

blogger template
Features :
2 columns , right sidebar , Search field , Social icons , Navbar , Colors : white

Designer : bloggertheme9

Description : Fresh Life is a Blogger theme that is designed by Naveed Iqbal . theme-junkie. The design is best suited for personal and magazine and tech blogs This template has 2 columns with colors white , lot of place to put your widgets , Recommended for tech blogs

Instructions  : http://g.blog4temp.com/14yDi52
Read more

TravelBlue - customized blogger theme

blogger template
Features :
2 columns , right sidebar , exclusive design for Blogger , Social icons , footer columns , Navbar , Colors : blue white

Plugins ( custom blogger templates ):

  • Open external links in new tab
  • Lazy load plugin
  • jQuery scroll to top
  • Remove 'Showing post with label' message
  • Page Navigation
  • Sharing buttons below Posts
  • Auto 'Read more' plugin with posts thumbnails
  • SEO friendly


Designer : Deluxetemplates

Description : TravelBlue is a free blogger design , This template has 2 columns and other columns in footer , with colors blue white , lot of place to put your widgets , Recommended for tech blogs
Read more

NewGray - customized blogger templates

blogger template

Features :
3 columns , right and left sidebar , Search field , Social icons , Navbar , Colors : blue white


Plugins ( custom blogger templates ):

  • Open external links in new tab
  • Lazy load plugin
  • jQuery scroll to top
  • Page Navigation
  • Auto 'Read more' plugin with posts thumbnails
  • SEO friendly


Designer : Deluxetemplates


Description : NewGray is a free blogger design , This template has 3 columns this blogger template has a search field , with colors blue white , lot of place to put your widgets , Recommended for personal blogs

Read more

How to add ' read more ' plugin to blogger templates

In this tutorial i will explain how to add a summary posts with thumbnails , summarized automatically by adding a ' Read more ' or ' Continue reading ' link below each post
read more blogger


DEMO :

1/ Go to blogger dashboard and choose your blog --> click on  ' Template ' --> click on ' Edit HTML' and then click on the ' Expand Widget Templates ' checkBox

2/ Search for <head/> ( Press Ctrl + f from your keyboard )

3/ Now add  before ( above ) </head> tag this code :

<script type='text/javascript'>
summary_noimg = 450;
summary_img = 400;
img_thumb_height = 128;
img_thumb_width = 128;
</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 = summary_noimg;
 if(img.length>=1) { 
  imgtag = '<span style="float:left; padding:0px 0px 5px 5px;margin:0 5px 0 0;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }
 
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}
//]]>
</script>
Customize :

summary_noimg = 450; The number of characters that will be displayed when there is no image
summary_img = 400;  The number of characters that will be displayed when there is an image
img_thumb_height = 128; height of the post thumbnails
img_thumb_width = 128;  width of the post thumbnails

* Image floating :


LEFT :
float left

* if you want to add the post thumbnails on the left of the summary , do not change them , keep it

RIGHT :

float right


* if you want to add the post thumbnails on the right of the summary replace the above ( yellow )  code with :



imgtag = '<span 
style="float:right; padding:0px 0px 5px 5px;margin:0 0 0 5px;"><img
 src="'+img[0].src+'" width="'+img_thumb_width+'px" 
height="'+img_thumb_height+'px"/></span>';


CENTER :

center

* if you want to add the post thumbnails on the center of the summary replace the yellow code with :


imgtag = '<div style="clear:both; text-align:center;"><img 
src="'+img[0].src+'" width="'+img_thumb_width+'px" 
height="'+img_thumb_height+'px"/></div>';


4/ Now search for <data:post.body/> and replace it with :
( Important Note : If you find more than one , choose the first  )
replace the first <data:post.body/>  with :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
 <data:post.body/>
<b:else/>
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
 <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 style='float:right;padding-top:20px;'><a expr:href='data:post.url'>Read more...</a></span>
 </b:if>
 <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
</b:if>

Customize : 

Read more...  You can replace it with another word , such as ' Continu reading...' Or with image by replacing Read more... with : <img src="URL-OF-IMAGE"/>  change URL-OF-IMAGE with your image link .

Done , save your template .
Read more

GrayOrange - free blogger theme

blogger templates

Customized blogger theme :

Features :

Platform Type : Blogger / Blogspot theme
Template Name : GrayOrange
Designer :Deluxetemplates
Template Features :3 columns , right and left sidebar , Search field , Social icons , Navbar , Colors : orange white
customized by :Custom Blogger template
Plugins :
  • Open external links in new tab
  • Lazy load plugin
  • jQuery scroll to top
  • Remove 'Showing post with label' message
  • Page Navigation
  • Sharing buttons below Posts
  • Auto 'Read more' plugin with posts thumbnails
  • SEO friendly
Descriptions : GrayOrange is a free blogger design , This template has 3 columns this blogger template has a search field , with colors orange white , lot of place to put your widgets , Recommended for personal blogs
Read more

GrayBlack - free blogger templates

blogger templates

Customized blogger theme :

Features :

Platform Type : Blogger / Blogspot theme
Template Name : GrayBlack
Designer :Deluxetemplates
Template Features :3 columns , right and left sidebar , Search field , Social icons , Navbar , Colors : grey black white
customized by :Custom Blogger template
Plugins :
  • Open external links in new tab
  • Lazy load plugin
  • jQuery scroll to top
  • Remove 'Showing post with label' message
  • Page Navigation
  • Sharing buttons below Posts
  • Auto 'Read more' plugin with posts thumbnails
  • SEO friendly
Descriptions : GrayBlack is a free blogger design , This template has 3 columns this blogger template has a search field , with colors grey black white , lot of place to put your widgets , Recommended for personal blogs
Read more

All rights reserved

Facebook Google + Twitter