Latest Post

Showing posts with label customize blog. Show all posts
Showing posts with label customize blog. Show all posts

Free Awesom Looking Website Templates for Blogger

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.

Johny Storage Blue

 Johny Backup

Johny Tubeprett

 Johny Goreng

 

Bukan Johny

Johny Crottmag

 Johny Bingung

 

 Johny Simplemag

 

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 = &quot;yes&quot;; //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 == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> PostSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<data:post.snippet/>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>

Create your own Popular Posts and Recent Posts Widget


        As you already know, Blogger Popular Posts and Blogger Recent Posts Widgets will show Posts based on options selected in widget. Further you do not have any control as to what Posts will be shown.

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.

Blogger Tips and Tricks


Awesome Blogger Templates Translated From Wordpress

         We all know when it comes to themes provided in Blogger, Wordpress is the clear winner. And when you look those stunning mind blowing themes from Wordpress, we think of having those themes for our blogs. 


Simple HTML Syntax for Blogs


Modify your blog with some of simple but effective HTML codes that will make your blog stand from others...







Tutorials For Beginners


This tutorial would help you to learn how to create a blog and other features available that can make your blog stand out from others...
 
 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. BloggerTrails - All Rights Reserved
Template Created by Creating Website
Proudly powered by Blogger