Blogger Templates provide you a very basic interface. But if you want to have a website like interface to your blog you need to install templates available on internet. Here are some of the best looking website template available for free.
Latest Post
Showing posts with label customize blog. Show all posts
Showing posts with label customize blog. Show all posts
Show Posts with Thumbnail and Read More in Blog
Show summary of Posts with a thumbnail in Blog homepage in three simple steps.
Step 1:
Take Backup:Very important part of any customization. Never forget to take backup before making any changes. If you forget/don't want to take backup thinking that you can rollback the changes by altering code, trust me it'll be like working entire new blog from scratch (it from my experience).
Now, goto Template>select Backup/Restore>save the .xml file
Step 2:
- Go to Template>Edit HTML
- Check the Expand widget templates
- Copy and Paste following code before
</header>
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 90;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function PostSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag ;
div.innerHTML = summary;
}
//]]>
</script>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 90;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function PostSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag ;
div.innerHTML = summary;
}
//]]>
</script>
Step 3:
Search for first occurrence of code
<data:post.body/>
Now, replace this line with the following code:
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> PostSummaryAndThumb("summary<data:post.id/>");
</script>
<data:post.snippet/>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> PostSummaryAndThumb("summary<data:post.id/>");
</script>
<data:post.snippet/>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
How to Check Blog Posts are Indexed in Google
Getting indexed in Google Search is one of important thing in to get traffic to your blog. Now you can check is your all blogger posts indexed in Google Search.
How to Create/Remove Shadow Behind Images in Blogger Posts
Change the background of images in your Posts like shadow behind images, remove borders of images as in shown in this image in simple steps.
Labels:
blog tutorial,
customize blog,
How To Do,
shadow behind images
Tutorials For Beginners
Labels:
blog tutorial,
customize blog,
feature content
Subscribe to:
Posts (Atom)