Recent posts Widget with images for Blogger

Recent Posts with Images Blogger Are you tired of using the recent posts widget for blogger that only displays recent post Titles with links? Here’s one new widget that displays the recent posts along with the thumbnail included in your post. Isn’t it interesting widget? Of course it is. Well, recent posts widget is the most have widget for your blog and this thumb nailed widget is more interactive to showcase your recent posts. I am sure you gonna drive some more traffic through this widget by displaying your recent posts with adjacent to the thumbnails. One more interesting thing is that if you have added recent posts widget through that RSS method, it only has the option to display up to five posts and now with this widget you can display as many posts as you want along with your desired colors and proper customization.

Widget Adding Instructions:

Follow these simple steps to get this widget on your blog.

1. Login to your Blogger Dashboard

2. Click on the blog’s Layout on which you want to add this widget.
Blogger Dashboard Layout

3. click Add a Page Element on spot you want to add this widget
Blogger Add a Gadget

4. Add Html/ Javascript (click “add to blog” under the page element Feed)
Blogger Add Html Javascript

5. Just copy and paste this code.

<script language="JavaScript">

imgr = new Array();


imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "http://bloggeruser.blogspot.com/";

</script>

<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

6. Save the Widget.

Widget Customization

Customize Blogger Widget Edit the values under the following headings in the above html code to make the widget suitable for your blog.
(Edit the values to fit your blog)

boxwidth – Width of the widget
cellspacing – Space between cells (default one is good)
borderColor – Border color (add the background color of your template to perfectly blend it in the template)
thumbwidth & thumbheight – Width and Height of the thumbnail (default are good)
fntsize – Font size of the title
acolor – Color of the title
aBold – you want bold titles? (true or false)
numposts – How many posts you want to show?
home_page : http://yourblogurl.com/ (change this to your blog url)
Please download this script ( http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js )and upload to your server or some free pages.

Help and Comment

This widget is developed by Kranthi for her blog Blogger Tricks. Really thanks. If you have any problems or any queries related to this widget, Please leave a comment below and I would be glad to help you !You can also comment if this widget has really helped you as i said.
You may also be interested in exploring the Rss method of adding recent posts widget.

Adding Adsense Ads in Blogger Posts

Google Adsense Blogger Adsense Ads in Blogger posts has relatively higher CTR (Click through Ratio) and can also significantly increase the number of clicks you receive. Adding Adsense Ads along side bars or between different posts is an easy task but to place Adsense ads directly in the blog post requires some trick. Have you seen most bloggers placing Adsense ads right after the Title of the post? This is really crucial to increase your adsense earnings. But Adsense ads are not displayed if you directly add the adsense code in the blogger post or even in the template. Ok so through this method, you can add adsense in two most popular spots in blogger posts; either just below the title or at the end of the posts. You can also align them to left or right on these spots according to your need and look. In this post we shall discover how to add such Adsense ads in your posts so that you could earn more from them.

This adsense adding method is found very beneficial for bloggers to increase their adsense earnings. The idea of writing this post came to my mind when I stumbled Themelib’s article for increasing adsense earnings for better design. And the main section I can relate to the article is
“Inside Blog Posts – If we display Adsense ads inside post, it is found that it has relatively higher CTR. People mostly think this ads as a part of the content and click it often. And these ads have almost related words to the topic or key words you have in your specific blog post. (Thanks BloggerUser)”

Well, now let’s move on if you are really interested to add Ads in such way. Specifically, we shall be discussing two main steps in order to add such Adsense ads style.

Widget Adding Instructions:

1. First get your Adsense Ad code from your Adsense Account.

2. Parse the code to replace special characters with HTML entities. You can take help of the Blog Crowds Parse Code Website.

3. Navigate to the Layout of your blogger blog
Blogger Dashboard Layout
4. Now Go to the Edit Html Tab
Blogger Edit Html

5. Click on Expand Widget Templates
Blogger Expand Widget Templates
Wait: Before Editing your Template, Save a copy of your current template by clicking ‘Download Full Template’ in ‘Edit HTML’ page of the Blogger ‘Layout’ Window and ‘Preview’ the changes before Saving.
6. Search for the following code inside your template html.
or

7. Now you can add your adsense code before the code in step 6 if you want to make the Adsense ads appear before the content or after the code in step 3 if you want to make Adsense ads appear after the content.

Adsense Ads In Posts Only on Single Post

Be careful you can only add 3 AdSense for Contents on each page. So if you want to display the Adsense ads only when the blog post is explored, wrap your adsense code with the below code.


PUT YOUR parsed Adsense code HERE

OK if you have done correctly, it should be working fine. Your final codes should look like this.

<script type="text/javascript"><!–
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
google_ad_host = "pub-xxxxxxxxxxxxxxxx";
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 336;
google_ad_height = 280;
//–>
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

This trick will certainly boost your adsense earnings. If you want to increase your adsense earning (which i hope most of you want to), then you should be applying this trick.
If you have any problems or any queries related to this widget, Please leave a comment below and I would be glad to help you !You can also comment if this widget has really helped you as i said.

Top 10 Google Services for Blogger

Google and Blogger
In a sentence, “Google owns blogger”. Ok, so the giant internet Industry Google is behind the blogger you use. It’s really a matter of great thing probably because of the reasons which we shall be discussing ahead in this blog post.First of all, let me make you aware most blog’s future relies upon the giant search engine “Google”. After all it’s the only most popular search engine that drives the most traffic to your blog. And also the page rank which most bloggers take care of is determined by the same Google. Well, these are just simple examples of why Google connection to the blogger is important. The most important thing why Google is important to your blog is that Google owns a lot of services which in many ways are very important to enhance and enrich your blog and blogging career.

Discussing some very important Google services and the ways we can use them to enrich our blogger blog can be really useful. So here are the Top 10 services from Google that you use to make the most of blogger.
1. Google Webmaster services:

Google webmaster services are crucial for blogger blogs. You can have more visibility in search engines with the proper use of this Google service. You can submit your site and sitemap to this Google webmaster service. You can also know how many pages or links of your blog are indexed in the Google search and much more. For details on using this service and other important tasks you can perform, you can read another blog post, “Google Webmaster for bloggers”.

2. Google Analytics:
With Google analytics, you can track all the details of blog visitors. You can have all details of your page views, unique visitors, site referrers, bounce rate and much more. You need not use any other stats counter if you use the Google analytics and even using this is simpler than using any other counter codes. You can use this service and know more about this on another blog post “Google Analytics for Bloggers”.
3. Google Docs:

Bloggers can easily create documents, spreadsheets and make presentations through this Google service. One more thing this Google Docs is helpful for bloggers is that they can directly publish their created documents to their blog.
4. Google Feedburner:

Feedburner is the most important tool for bloggers. It has not been much google realized its importance and made it own. It is a pompous online web content feed management program. Almost all bloggers use this tool to easily let other bloggers subscribe their blog content. The most advantageous thing is that your blog users can easily subscribe your latest content via email. This will certainly help to increase your blog readers. You can know more on using Feedburner in our post “Feedburner for Bloggers”.

5. Google Adsense:
If you are really interested in making money through blogger, then you need to go for the Adsense program seriously. You will be finding a lot posts in this blog about the Google Adsense and the ways you can benefit through it. Well, Blogger is also making the use of Google Adsense easy for bloggers and there is not too much to do to get started with it. You can learn more in general about the adsense program through our post “Adsense for Bloggers / Blogspot”.
6. Google Earth:

Using Google Earth really makes it easy for bloggers to create required maps for them.

7. Google Reader:
If you want online feed reader, Google Reader can be a good choice. You can subscribe to Blogs via Google Reader and follow them too. You can learn in detail about this program in our post “Using Google Reader for Bloggers”.

8. Google You Tube:
With this most popular video website, you can create videos and embed them directly in your blog. You can also search for the videos you need for your blog and use them directly. Most importantly you can help other bloggers by video blogging through this. This will certainly help you to drive traffic to your blog and thus make your blog popular.

9. Google Picasa:
You must have noticed the photos you upload in your blogger blog are stored in Picasa account. You can use this Picasa to manage your uploaded photos and much more. Read our another post “Google Picasa For Bloggers” to learn more about this.

10. Google Groups:
Using Google Groups is really useful for your blog in terms of driving traffic to your blog by creating your own group. You can also use Google groups to share common information with similar interest bloggers. You can learn in details of using Google Groups in our post “Google Groups for Blogger”.

Conclusion:
There are also other services such as Gmail, Google Toolbar, Orkut, Google Video… which you can use along with the above listed popular Google services. All these services in a way help to make your blogging career successful.

Make a good use of all those services and also let us know why any service is most important for you. Also let us know any other popular Google services for Blogger if we have missed any.
Enjoy blogging…..

Related Posts by Categories; Blogger Widget

Related Posts by Categories Blogger/ Blogspot widget “Related posts by categories” shows related posts according to user defined categories at the end of each post. Another widget “Related posts widget for blogger” displays only a list of related posts but this widget shows posts under different labels, categories or tags. You can display desired posts under desired categories and also can specify the number of posts to display in your blogger blog. Needless to say, this widget will help your blog users to explore more related posts under the categories they are interested in.
Follow the specific instructions below to add this hack widget to your blog.

Follow the below steps properly and in order to have the similar widget you see in the pic above.
Widget Adding Instructions / Steps:

1. Go to Blogger Dashboard – click Edit Layout – then click Edit HTML

Wait: Before Editing your Template, Save a copy of your current template by clicking ‘Download Full Template’ in ‘Edit HTML’ page of the Blogger ‘Layout’ Window and ‘Preview’ the changes before Saving.

2. Check the ‘expand Widgets Template Box” as shown in the figure below.

Check widgets Template Box

3.Then Search (Ctrl+F) the code given below in your template:

 <data:post.body/> 

4. Copy and Add the code given below just after the above code:

<b:if cond=’data:blog.pageType == “item”‘>
<div class=’similiar’>

<div class=’widget-content’>
<h3>Related Posts by Categories</h3>
<div id=’data2007′/><br/><br/>
<script type=’text/javascript’>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values=’data:posts’ var=’post’>
<b:loop values=’data:post.labels’ var=’label’>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

5. Save your Template. That’s it.

Widget Customization
Customize Blogger WidgetYou can change the number of maximum related posts being displayed, search for the code below (within the code given in step 4) and change the number “3″ to any desired number. Its good to have related posts in accordance with the space available to display. Generally, two or three categories is enough. However, you may display the number of categories and posts as you wish.
maxNumberOfLabels = 3;

Widget Use and Summary
In conclusion, this widget is not only an important widget for making your blog look professional but also an important widget to help users to quickly navigate or move on to other important and related posts.
Help and Comment

Help and comment
If you have any problems or any queries related to this widget, Please leave a comment below and I would be glad to help you !
Meanwhile, you can also visit “Related Posts Widget for Blogger / Blogspot” for a similar widget. You can also visit CELEBSIMAGE, one of the celebrity blogs which has this widget in action.
Also I want to know your view about this widget. So Comment !

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match