Create a blog, blogging: posts

Showing posts with label posts. Show all posts

Monday, June 4, 2012

How to Create Drop Caps (Big First Letters) in Blogger/Blogspot

Here's another way you can customize your Blog. In this case, your Posts and Comment's first letter. The effect is a large first letter stretching down three or four lines with the text wrapped around. The drop cap letter can also use a different font and can be a different color to the rest of the text. You often see this style in newspapers, literature, magazines. In this tutorial i will show you how to apply automatically Magazine text style in Blogger Posts and Comments. So let's start adding it!

-> Add Drop Caps For Blogger Posts

-> Add Drop Caps For Blogger Comments

Big First Letter for your Blogger / Blogspot Posts

Step 1.

If you are using the old Blogger interface:

Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Search (CTRL + F) for this piece of code:

]]></b:skin>

Step 3. Just above it, add the following:

.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}

Customize:

Color - change the color highlighted in blue with the value of your desired color
Size - to change the letter size, increase/decrease the value highlighted in pink.

Step 4. Now search for this code:

<data:post.body/>

Step 5. Then immediately before and after add the red fragments you see in the example below:

<div class='capital'><data:post.body/></div>

Step 6. Save your template.

Important! If the above code is not working, add one of following codes from this example:

<p class="capital"><data:post.body/></p>

<span class="capital"><data:post.body/></span>

Big First Letter For Blogger/Blogspot Comments

Step 1. Log in to your Blogger account, then go to Design (Layout) >> Edit HTML >> check the "Expand Widget Templates" box

Step 2. Search (CTRL + F) for this piece of code (if you have already added this code, skip step 2 & 3):

]]></b:skin>

Step 3. Add the following code just above ]]></b:skin>:

.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}

<data:comment.body/>

Step 5. Add the red codes before and after <data:comment.body/> as you can see in my example below:

<p class="capital"><data:comment.body/></p>

Step 6. Save your Template.

That's it! Now you have a cool drop cap first letter on your blog.
If you have any question, leave a comment below!

Saturday, June 2, 2012

Saturday, May 5, 2012

Show Blogger Image only in Homepage and Hide it in Post Page

Want to know how to hide specific images from blogger posts pages and to appear only in homepage? In this tutorial we'll learn how we can do this! So let's start hiding our images from posts pages:

Step 1.

If you are using the old Blogger interface:

Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Find (CTRL + F) this code in your template:

}]]></b:skin>

Step 3. Copy and paste the following code just below it

<b:if cond='data:blog.pageType != "index"'>
<style>
.hidepic{
display: none;
}
</style>
</b:if>

Step 4. Save the Template.

Now everytime you create a post, firstly add the pic you want to hide and then switch to Edit HTML tab where you'll see the HTML code of the image you have added that will look something like this:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaqBLo3Cco4jjICb6WVrydPvRU7DHj8yRDtZcVvzG2FFqC4RE3rqZKYgnMBgTUHmrPHkal0I5NkXQSwLfW5JNrcO22-pmQUd5E0AvTUJRBGYJLdwnEqszrYy1hTauX_lhRax7rIA9KA5A/s1600/fire_bird_by_fhrankee-d32af8v.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaqBLo3Cco4jjICb6WVrydPvRU7DHj8yRDtZcVvzG2FFqC4RE3rqZKYgnMBgTUHmrPHkal0I5NkXQSwLfW5JNrcO22-pmQUd5E0AvTUJRBGYJLdwnEqszrYy1hTauX_lhRax7rIA9KA5A/s320/fire_bird_by_fhrankee-d32af8v.png" width="320" /></a></div>

Note: it should be at the exact location where your image has been added (if the image is at the middle of the text, then the code should be located also at the middle)

All you have to do is to replace "separator" with "hidepic" as you can see in this screenshot below:

That's it!

Friday, May 4, 2012

Saturday, April 28, 2012

Simple Recent Posts Widget for Blogger/Blogspot

This Recent Posts widget will show not only post titles but also post excerpts or snippets on your blog.

What you can do with this widget:

display post titles only
change the number of posts
change the number of characters of the post snippet/excerpt
show the post dates

See the screenshot below:

How to add Recent Posts Widget to Blogger

1. Log in to your Blogger Dashboard >> go to Design >> Add a Gadget >> choose HTML/JavaScript
2. Choose & Copy the code of one of the options below and paste it into the new HTML/JavaScript:

Option 1: Recent posts widget with snippets

<div id="hlrpsa">
<script src="http://bloggingcreate.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://bloggingcreate.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://bloggingcreate.blogspot.com" title="Recent Posts Widget">Helplogger</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCQIlSm079ameX_qFSMhq70IxDE4bCAjzZs5TsAhNb-TuaD292lctsXJbCwvW3780CsAq06Lu5IRGnanWMhW3HbbXhisQLJyF05bwrO7fwLXyYUbPW3qc5p7K3IM_nzOnqn9wX4o3lvo7j/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

Option 2: Recent Posts Widget Showing Post Titles Only

<div id="hlrpsb">
<script style="text/javascript" src="http://bloggingcreate.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://bloggingcreate.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://bloggingcreate.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCQIlSm079ameX_qFSMhq70IxDE4bCAjzZs5TsAhNb-TuaD292lctsXJbCwvW3780CsAq06Lu5IRGnanWMhW3HbbXhisQLJyF05bwrO7fwLXyYUbPW3qc5p7K3IM_nzOnqn9wX4o3lvo7j/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsb { }
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

3. Change 5 (option 1) and 10 (option 2) with the number of posts you want to show. Change false to true if you want the posts dates to appear, and change 100 (option 1) if you want more characters to be displayed.
Don't forget to change your-blog text with the name of your blog or if you have a custom domain change all the bolded line with your address like in this example:

http://www.your-site.com/feeds/posts/default....

4. Save your widget. That's it!! Enjoy

Please let me know what you think of this widget by leaving a comment below.
And if you liked this post, please consider sharing it. Thanks!

Saturday, April 14, 2012

How to Add Different Background Color or Image in Each Blogger Post

If you have multiple authors in a blog or want to make a specific post stand-out, you can make your posts to appear in different color or place a background image behind your posts.
In this tutorial i will show you how you can do this by adding some simple codes in your Blogger posts. (observation: this won't take effect if you have the read more function enabled on your blog...)

See the Demo

Change the color of the post background

When you create a post, switch to Edit HTML, near the Compose tab.
Add the following code just at the beginning and at the end of your post content.

<div style="background-color: #DCC368; padding: 5px 8px 5px 8px;">
Your text goes here...
</div>

place the red line at the BEGINNING of your post.
add the div tag in blue at the END of your post.
replace the part in green with preferred color hex value.
instead of "Your text here...." you will have your Post content.

It's done by wrapping your Post content into a "div" element. You can apply this setting anytime to your already published posts too or change/remove it.

Here's the example of the placed code in the Post Edit box:

blogger posts color, backgrounds, blogger tricks

Add a background image behind the Blogger post

<div style="background-image: url(IMAGE-URL-HERE); background-repeat: no-repeat; ">
Your text goes here...
</div>

in green, you need to place the URL address of your hosted picture (use Photobucket, Tinypic etc.)
in red is the line you have to place at the BEGINNING of your post.
in blue is the line you have to place at the END.
instead of "Your text here...." you have your Post content (if not, switch back to Compose tab, type your post content and then come back to edit your post)

Now click PUBLISH POST and you are done.

Sunday, April 8, 2012

Add a Popular Posts Gallery just above your Blogger posts

The most strong and popular web design trend over last couple of years is a sliding horizontal panels also known as Sliders or Carousels. It's a very effective method to increase the web site usability and engage the user. This widget shows the most popular 10 posts on your blog just above your Blogger posts. You can see the Demo on my blog.

Let's start adding it

Before adding it you should know that this widget is not fully compatible with all templates, so please make a backup before making any changes to your blogger template. Now, follow these steps:

1. If you are using the old Blogger interface:

Go to Dashboard - Design - Edit HTML - (make a backup) Expand Widget Template

If you are using the new Blogger interface:

Go to Dashboard - Template - Edit HTML - Proceed - (make a backup) Expand Widget Template

2. Search (CTRL + F) for this piece of code:

]]></b:skin>

3. Just above/before it, add the following code:

#gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHTg2XTf69LT0-lSPPYhtGB3njwMWuSBAZ-qlnaAj6-RrVI0782wqEvrOzEueone3jm5TmYorBZOz5EVD8G6RW6vJ1DIsmh3cwcBJYO8FIoVXnNQv3YDK80LEP4hkVSMYODZbar4jFX1bY/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

Note: you can adjust the size of gallery, changing the values in red (590 and 126).

4. Now search for the following piece of code:

</head>

5. Just above/before it, add this code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://bloggingcreate.googlecode.com/svn/trunk/auto-slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhedAtN4koHgGN06JDCH1evFx3DoSPgK-cFLXdD1qHQqiQ77nb1o3G-WFVUNkJhwdER-DAYBkJei7ftdxKcmEzU9urUv8fPCSGcrPeBduD12ozX8ToU3h616z1SiHNMZJcjKelY3XTMnjw/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid6DvL-xv-MoyY6ew9D8yViLsZYmTm40xzgE2mcaEJj6u2QdvZLC8ncFN_4HfpyxhM_Cy6_du89uvowMB0aRaVK8TQCeD7h_n2AoCFMrLM4ylUQIgM0xUAhwNKzJnkwYL5a47dlAxwPLC5/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

Next thing to do is to place the widget just above the blogger posts.

6. Search for this code:

<b:section class='main' id='main' showaddelement='yes'>

...or if you can'find it, search for this one:

<b:section class='main' id='main' showaddelement='no'>

7. Just below it, add the following code:

<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
<div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <b:if cond='data:showThumbnails == "false"'>
       <b:if cond='data:showSnippets == "false"'>
        <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2rq3iWxIAsXiqbnYW5IaD4czMWBTmB5sf0rJ0N3NE5z9-B-F94fa6ezZkjk4yZ2TWHQeKrsVzhVnZjLp-Y38LhJG6gP-8gFj-2hKYHwEiffC3lQIBeR5m4IkWRrIEvpWU5y3fTtZBz7-M/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
</div></div></b:if>
</b:includable>
</b:widget>

Note: delete the fragments of code in blue if you want this widget to be displayed in posts pages also.

8. Preview and if everything is ok, Save the Template.

Thursday, April 5, 2012

A Simple Related Posts Widget For Blogger

In the last tutorial, i've been talking about the Related Posts widget that shows related posts along with thumbnails just at the end of your blog articles. Some of the users, however, would prefer a simpler and cleaner displaying of their related posts so that it would show just the posts titles. So let's begin adding it!

related post, related post blogger, blogger tricks

How to add Related Posts Widget to Blogger

Step 1. Go to Template >> Edit HTML and tick the "Expand Widget Templates" checkbox

Step 2. Find the below tag

</head>

Step 3. And just above it, paste the following code:

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
margin-top: 20px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 17px;
font-weight: normal;
color: black;
font-family: Arial Narrow;
margin-bottom: 0.75em;
padding-top: 0em;
}
#related-posts a{
font-size:16px;
color: #555555;
font-variant:small-caps;
}
#related-posts a:hover{
text-decoration: none;
color: #ffffff;
font-weight: bold;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:none;
text-color:#000000
}
#related-posts ul li{
list-style-type: none;
border-left: 2px solid #1399CF;
border-bottom: 1px dotted #1399CF;
margin-bottom: 3px;
padding-left: 30px;
padding-top:0px;
}

#related-posts ul li:hover{
background-color: #1399CF;
border-left: 2px solid #B3CA3D;
border-bottom: 1px dotted #B3CA3D;
}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggingcreate.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/>
</b:if>

Note:
- if you want to change the size and color of 'Related Posts' title, change the bolded values (17 for the font size and black for the color)

-to change the related post title color, replace the value in red;
-to change the background color on mouseover, replace the color value in blue;

Step 4. Now find (CTRL + F) the below line:

<div class='post-footer'>

Step 5. Just above it, paste the code below:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> </b:if>

Note: In order to change the number of maximum related posts being displayed for each label, search for the code max-results=5 and change the number "5" to any desired number.

Step 6. Save Template

Enjoy!!!

Wednesday, March 28, 2012

How To Add Related Posts Widget To Blogger with Thumbnails

Now here is a wonderful hack for displaying related posts beneath each of your blog posts, along with thumbnails. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.

related post, related posts blogger, blogger widgets

Steps adding the Related Posts Widget to Blogger/Blogspot

Step 1. Go To Blogger Dashboard >> Template >>Edit HTML;

Step 2. Check the "Expand widgets template" box;

Step 3. Search (CTRL + F) for this piece of code:

</head>

Step 4. Copy and paste the below code just before/above </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPKHlicr49-Ez82erWrcz4fIsj-5_nhzm_HlzzoU9zl9ul4l2I6goUCLAUvnZVlu1l0XGtGr8QbuWTYdlGZ_bNTr9ebmaZ2oogiEY627-JbfBEzO5UKNL0hI389-kDsr8rjAKKXun4YO86/s1600/no_image.jpg";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggingcreate.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
</b:if>

Note:
- to change the default picture, replace the URL in blue with your own
- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
- remove the code in violet if you want the related posts to be displayed in homepage too

Step 5. Now find the following code:

<div class='post-footer'>

Step 6. And just above it, copy and paste the below code:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://bloggingcreate.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5PStQ4X6UACUL5zZbAxVOc8OOuw6f7oigKzKBb0bDP9DN44G1_49q06dDKKISHuWK_aK17T0R4Pku19vdELShLM5yPsq_rMgpZAeq_v49GiXwu0Mh-pBYiZ15Oe_uHgCCymo7GaVCI7Ya/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>

Note:
- change the 6 value from max-results=6 with the number of posts you want to be displayed.
- If you want the related posts to be displayed on homepage too, remove the code in violet.

Step 7. Save the Template

Enjoy :)

Credit goes to: bloggerpluggins.org . Modified by me

Saturday, March 17, 2012

Auto Read More with thumbnail for Blogger/Blogspot Posts

This hack will summarize content and show only summary in Home page, Archives Page and Label Page using Automatic Read More simple script in your template. Using automatic read more on your blog will make your blog load faster by showing few post instead of the full post on the homepage.
Automatic read more for blogger posts can be done by inputting some code into your blog templates.

How to install Automatic Read More Hack for Blogger

There are two options you can choose from:

1. Auto readmore for all the posts:

Step 1. Find (CRTL + F) this code:

<data:post.body/>

Step 2. And replace with this:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
   </b:if>
   <data:post.snippet/>
</div>
<div class='jump-link'>
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

2. Read more only for older posts (your latest post will appear normal):

Find (CTRL + F) and replace <data:post.body/> with:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == "true"'>
    <data:post.body/>
     <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
       <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
     </b:if>
   <b:else/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     </b:if>
     <data:post.snippet/>
    </div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
   </b:if>
<b:else/>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    </b:if>
    <data:post.snippet/>
   </div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
   </div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Settings:

A. If you want the thumbnail to appear on the left:

Step 1. Find (CTRL + F) the following piece of code:

]]></b:skin>

Step 2. Just above it, paste this code:

.post-thumbnail{float:left;margin-right:20px}

B. If you want the thumbnail to appear on the right,

Paste above ]]></b:skin> this code:

.post-thumbnail{float:right;margin-left:20px}

Click Preview and if it works, click Save Template.

That's it, enjoy!

Sunday, March 11, 2012

Add Random Posts Widget to Blogger

If you want to increase the number of page impression, this widget might help you.The Random Posts Widget will show random posts you have added to your blog. The main advantages of this widget is that it is loading pretty fast and shows thumbnails of your posts too, along with the comments link.

How to add Random Posts Widget to Blogger

Step 1. Log in to Blogger Dashboard, go to >> Design >> Edit HTML
Step 2. Check "Expand Widget Templates"
Step 3. Find the following piece of code:

]]></b:skin>

Step 4. Just above it, paste the code below :

#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}

Save Template.

Step 5. Go to Design >> Page Elements and Add a new HTML/JavaScript Gadget

Step 6. In the HTML box, paste this code:

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP0fsL9cadqBoqvfGhCumWq0IdNn-FUjdut8CgTZ5hCfopzkYeApcVabEkeaSWY3gnfMnSbiHVJeVbWyNFgECM-hEO1uTOEwZp6ClNxk7OTWO-UlTzRgtabiIXA5xuGqHzNBkkOFXIyJE/s1600/default.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Note: Replace no. 5 with the number of posts you want to be show.

Step 7. Press Save and Enjoy :)

Add Multi-Colored Popular Posts to Blogger

Popular Posts Widget is a widget provided by Blogger, showing the most viewed posts on the blog in the last 7 days, last month or of all time. It also has three displaying modes: display title only, display title with image thumbnail or display title along with the posts snippets.

To customize the popular posts widget, we must add a new variable and some css codes to our blogger template.

How to add multi-colored popular posts to Blogger

Step 1. Login to your Blogger Dashboard, go to Design >> Edit HTML >> check "expand widget templates" (make a backup first) and search for the following tag:

/* Variable definitions
====================

Step 2. Copy and paste just below/after this tag, the next code:

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
</Group>

Step 3: Search for the following piece of code:

]]></b:skin>

Step 4. Just above/before it, add this code:

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

Step 5. Now find the following code:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

Step 6. Delete it until you reach at this tag (delete this also):

</b:widget>

Note: Be very careful when removing it. The entire fragment of code should look like this:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Step 7. After you have deleted the above code, paste this in its place:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
   <b:if cond='data:title'>
    <h2><data:title/></h2>
   </b:if>
   <div class='widget-content popular-posts'>
    <ul>
     <b:loop values='data:posts' var='post'>
      <li>
       <b:if cond='data:showThumbnails == "false"'>
        <b:if cond='data:showSnippets == "false"'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == "false"'>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP0fsL9cadqBoqvfGhCumWq0IdNn-FUjdut8CgTZ5hCfopzkYeApcVabEkeaSWY3gnfMnSbiHVJeVbWyNFgECM-hEO1uTOEwZp6ClNxk7OTWO-UlTzRgtabiIXA5xuGqHzNBkkOFXIyJE/s1600/default.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP0fsL9cadqBoqvfGhCumWq0IdNn-FUjdut8CgTZ5hCfopzkYeApcVabEkeaSWY3gnfMnSbiHVJeVbWyNFgECM-hEO1uTOEwZp6ClNxk7OTWO-UlTzRgtabiIXA5xuGqHzNBkkOFXIyJE/s1600/default.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
</b:includable>
</b:widget>

Step 8. Save template.

Settings

- Go back to Design >> Page Elements and click on the edit link of Popular Posts widget.
Select to "display up to 5 posts", then Save the widget.

- You can easily change the background color of the popular posts widget, going to Design >> Template Designer >> Advanced >> PopularPostsBackground and there you can select any color you want.

If you are enjoying reading this blog, please like & subscribe for more tutorials.
For any questions or suggestions, leave a comment below.

Create a blog, blogging

Monday, June 4, 2012

How to Create Drop Caps (Big First Letters) in Blogger/Blogspot

Saturday, June 2, 2012

Recommended Post Slide out Widget for Blogger

Saturday, May 5, 2012

Show Blogger Image only in Homepage and Hide it in Post Page

Friday, May 4, 2012

Recent Posts Widget with Thumbnails for Blogger/Blogspot

Saturday, April 28, 2012

Simple Recent Posts Widget for Blogger/Blogspot

Saturday, April 14, 2012

How to Add Different Background Color or Image in Each Blogger Post

Sunday, April 8, 2012

Add a Popular Posts Gallery just above your Blogger posts

Thursday, April 5, 2012

A Simple Related Posts Widget For Blogger

Wednesday, March 28, 2012

How To Add Related Posts Widget To Blogger with Thumbnails

Saturday, March 17, 2012

Auto Read More with thumbnail for Blogger/Blogspot Posts

Sunday, March 11, 2012

Add Random Posts Widget to Blogger

Add Multi-Colored Popular Posts to Blogger