How to Display Most Recent Twitter Tweets Using JQuery

Tweet

 

Are you looking for an easy way to display your recent Twitter tweets inside your website or Blogger blog? Then ypu’ve come to the right place. In this short post I am going to show you how you can add recent tweets to your website with the use of JQuery. One of the advantages of this method is that your recent tweets will load fast. Another plus is that it is very easy change the number of tweets that will be displayed on your blog or website. Advanced details about this method can be found at: http://www.thewebsqueeze.com/web-design-tutorials/displaying-your-tweets-on-your-website-with-jquery.html

How to display most recent Twitter tweets using JQuery

Please follow these steps to add this recent tweets widget to your Blogger blog.

1. Sign in to Blogger, then go to Dashboard --> Design --> Edit HTML.

2. Search for (Ctrl + F) the </head> tag.

3. Copy the following code and paste it just before the </head> tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
function showTweets(elem, username, number)
{
var html = '<ul>';
var tweetFeed = 'http://twitter.com/status/user_timeline/' + username + '.json?count=' + number + '&callback=?'
$.getJSON(tweetFeed, function(d)
{
$.each(d, function(i,item)
{
html+='<li>'+item.text+'</li>';
})
html+="</ul>";
elem.children().fadeOut('fast',function() {
elem.append(html);
})
})
}
$(function() {
$('#error').remove();
$('#preload').show();
showTweets($('#tweets'), 'ebloggertricks', 5)
});
</script>
<style type="text/css">
#preload {display: none;}
#tweets ul li{
list-style-type:square;
list-style-position:inside;
list-style-image:url('http://4.bp.blogspot.com/_HJvXUqHmf9Y/TGISCT-W4yI/AAAAAAAAABI/VdnChTmVqUs/s1600/twitter.png');
margin:0 0 0;
padding:0 0 0;
}
</style>

NOTE: Replace ebloggertricks with your twitter username.

5: Number of tweets must appear.

4. Save your template.

5. Now go to Layout --> Page Elements.

6. Click on 'Add a Gadget'.

7. Select 'HTML/Javascript' and add the following code:

<div style="font-size:12px;font-family:Arial;">
<div id="tweets">
<h3 id="error">There was a problem fetching tweets</h3>
<h3 id="preload">Currently loading your tweets...</h3>
</div>
<ul><li style="list-style-type:none;"><a href="http://www.twitter.com/ebloggertricks">Follow me on twitter</a></li></ul>
</div>

8. Save.

That’s all!

Good luck!

How to Hide Deleted Comments in Blogger

Tweet

 

When you simply delete a comment on your Blogger blog you will see an message along the lines of „This post has been removed by the author“. This messages give your blogger blog a rather ugly appearance. But with the little trick I am going to show you in this post you can hide deleted comments easily. If you would like to hide all deleted comments on your Blogger blog, then simply follow the steps below.

How to hide deleted comments in Blogger

1. Sign in to Blogger, then go to Dashboard --> Layout --> Edit HTML.

2. Click on "Expand Widget Templates".

3. Search for (Ctrl + F) for the following line of code:

<b:loop values='data:post.comments' var='comment'>

<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'><img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/></b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'><data:comment.authorAvatarImage/></b:if>
<data:comment.author/>
<data:commentPostedByMsg/></dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'><span class='deleted-comment'><data:comment.body/></span><b:else/><p><data:comment.body/></p></b:if></dd>
<dd class='comment-footer'><span class='comment-timestamp'><a expr:href='data:comment.url' title='comment permalink'><data:comment.timestamp/></a><b:include data='comment' name='commentDeleteIcon'/></span></dd>
 </b:loop>

4. Copy the code below and paste it immediately after <b:loop values='data:post.comments' var='comment'>.

<b:if cond='data:comment.isDeleted'>

<b:else/>

5. Copy the following code and paste it just before </b:loop>.

</b:if>

6. Save your template.

That’s all!

Good luck!

How to Add Flickr Photostream to Your Blogger Blog

Tweet

 

In this post I am going to show you how you can add a Flickr photostream to your Blogger blog. If you would like to add this cool widget to your Blogger blog please follow the steps given below.

1. Login to your Flickr account.

2. Click on "Your Photostream".

3. Now you are on your Flickr Photostream page.

4. Look at the address in the address bar of your browser. It will look something like this:

5. You can see your Flickr ID. It will be something like this:

38647261@N03

6. Copy your Flickr ID.

7. Sign in to Blogger. Go to Dashboard --> Layout --> Page Elements.

8. Click on 'Add a Gadget'.

9. Select 'HTML/JavaScript' and add the following code:

<style type="text/css">
.flickr_badge_image { float: left; }
#flickr_badge_wrapper { width: auto; border: 1px; }
#flickr_badge_uber_wrapper { width: auto; }
</style>

<script src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=8&display=random&size=s&layout=y&source=user&user=YOUR-FLICKR-ID" type="text/javascript"></script>

Note: Replace YOUR-FLICKR-ID with your Flickr ID.

10. Save.

That’s all!

Good luck!

How to Add Random Rotating Images to the Header of Your Blogger Blog

Tweet

 

In this short tutorial I am going to show you how to add random rotating images to your Blogger blog’s header background. After adding this neat feature to your blogger blog, the header image of your blog will rotate/change with each page refresh. Before implementing this tweak, you need to create (or find) header images that suit the topic of your blog. In this tutorial I am going to show how to rotate 5 header images.

How to add random rotating images to the header of your Blogger blog

1. Log in to Blogger, then go to Dashboard --> Design --> Edit HTML.

2. Find (Ctrl + F) the <body> tag.

3. Copy the following code and paste it immediately below the <body> tag.

<script type='text/javascript'>
 
var HeaderImage= new Array()
 
HeaderImage[0]=&quot;URL-OF-HEADER-IMAGE-1&quot;
HeaderImage[1]=&quot;URL-OF-HEADER-IMAGE-2&quot;
HeaderImage[2]=&quot;URL-OF-HEADER-IMAGE-3&quot;
HeaderImage[3]=&quot;URL-OF-HEADER-IMAGE-4&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-5&quot;
var random=Math.round(4*Math.random());
 
document.write(&quot;<style>&quot;);
document.write(&quot;#header-wrapper {&quot;);
document.write(&#39; background:url(&quot;&#39; + HeaderImage[random] + &#39;&quot;) no-repeat left TOP;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);
 
</script>

Important note: Replace "URL-OF-HEADER-IMAGE-X" with the URLs of your images.

If the above code doesn't work for your blog, then replace "#header-wrapper" with "#header". (ID or Class of your header section).

You can add any number of images, it doesn’t have to be 5. But remember to change "4*Math.random()" according to the number of images you want to add. For example, if you want to add 8 different images to your blog header background, the code should be changed to "7*Math.random()". Look at the following example:

<script type='text/javascript'>
 
var HeaderImage= new Array()
 
HeaderImage[0]=&quot;URL-OF-HEADER-IMAGE-1&quot;
HeaderImage[1]=&quot;URL-OF-HEADER-IMAGE-2&quot;
HeaderImage[2]=&quot;URL-OF-HEADER-IMAGE-3&quot;
HeaderImage[3]=&quot;URL-OF-HEADER-IMAGE-4&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-5&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-6&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-7&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-8&quot;
var random=Math.round(7*Math.random());
 
document.write(&quot;<style>&quot;);
document.write(&quot;#header-wrapper {&quot;);
document.write(&#39; background:url(&quot;&#39; + HeaderImage[random] + &#39;&quot;) no-repeat left TOP;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);
 
</script>

4. Save your template. Refresh your site few times to see the result. Your header image will be rotate.

That’s all!

Good luck!

How to Add an Attactive Subscribe Section with Search Box to Your Blogger Blog

Tweet

 

In this post I am going to show you how you can add a more attractive Subscribe Section + Search Box to your Blogger blog. This neat subscribe section includes Feedburner feed and Email subscriptions boxes, Twitter and Facebook boxes for your respective profiles and some major Social networking buttons (Digg,Twitter, Facebook, StumbleUpon, Delicious) to share your posts on social networks. These social network buttons are powered by Assthis.com. A Search box can be found above the Subscribe section. You should not change anything in the search box code. To be able to add this widget to the sidebar of your Blogger blog without doing any modification, the sidebar must be at least 305 px wide. Adding this Subscribe Section + Search Box, which is very easy to configure, to your blog will only take a few seconds. If you would like to add this widget to your blog or a website,then follow the steps given below.

How to add an attactive Subscribe Section with Search Box to your Blogger blog

1. Login to Blogger. Then go to Dashboard --> Design --> Edit HTML.

2. Search for (Ctrl + F) the </head> tag.

3. Copy the following code and paste it just before the </head> tag:

<style type="text/css">
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}>
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>

4. Save your template.

5. Now go to Design --> Page Elements and click on "Add a gadget".

6. Select "HTML/JavaScript" and add the code given below, then click save.

<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="http://2.bp.blogspot.com/_4HKUHirY_2U/TKgvwDojM1I/AAAAAAAADgU/tBRpYkXIVho/rss.png"  alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/TKgvv1xjnUI/AAAAAAAADgE/XnHFsRwk1Js/email.png"  alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="http://2.bp.blogspot.com/_4HKUHirY_2U/TKgvvhhVo_I/AAAAAAAADf8/IE38PfZs7sE/twitter.png"  alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="http://2.bp.blogspot.com/_4HKUHirY_2U/TKgvv-pobaI/AAAAAAAADgM/1wAlSk8_1yY/facebook.png"  alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://www.ebloggertricks.com/" target="_blank">Eblogger Tricks</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='http://2.bp.blogspot.com/_4HKUHirY_2U/TIb9fsSTv4I/AAAAAAAAB90/lJxosSNM6jE/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='http://4.bp.blogspot.com/_4HKUHirY_2U/TIb9MH_zqNI/AAAAAAAAB9E/PahHr5GN6dI/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='http://2.bp.blogspot.com/_4HKUHirY_2U/TIb9NTh41aI/AAAAAAAAB9U/2RkBR3wbLBY/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='http://4.bp.blogspot.com/_4HKUHirY_2U/TIb9M5a4BZI/AAAAAAAAB9M/xoWTjnPVepc/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='http://1.bp.blogspot.com/_4HKUHirY_2U/TIb9e_Kpo-I/AAAAAAAAB9s/1WqjOIz3B_A/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='http://2.bp.blogspot.com/_4HKUHirY_2U/TIb9eJ5RTWI/AAAAAAAAB9c/tYvdT6xgaLw/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='http://3.bp.blogspot.com/_4HKUHirY_2U/TIb9egD8XSI/AAAAAAAAB9k/rZY5eofO2SY/more.png' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div>

Important: Don’t forget to replace

FEEDBURNER-ID with your real Feedburner ID.(4 times).
TWITTER-USERNAME with your real Twitter username.
FACEBOOK-USERNAME with your real Facebook username.

That’s all!

Good luck!