31 January, 2010

Making Mobile Friendly version of your blog using google reader

Making the mobile version of your blog using google reader.
You may have heard about mofuse.com on which you enter your blog address,Sign up for free account and you get a mobile version of your blog just for free.I am a google fan and love to use google services. Nothing will be better if you could use google to make mobile version of your blog.

 Things You require :

  •  A google reader account which is same as your google account
  •  A feedburner account connected with your blog. 

Interesting and easy thing about this is that all you have to do is append your blog feed address to the following URL[without brackets]

Replace feed_address with your blog feed address (http://myfundoo-blog.blogspot.com/feeds/posts/default)

 Example :

 Now all you have to do is link any image or text with this url .Click image to see mobile version of this blog.

Some more posts you may like to read :

30 January, 2010

Widget to display backlinks to your blog

One of the main factor that really matters to bloggers are the number of backlinks pointing to his blog.This is a widget which allows to display latest backlinks received by the blog.It can be an encouragement to the visitors to see that this blog is bonded with many places on the net.Since it is based on search feature ,this widget automatically updates.

You may like to look at some of my previous posts-
  1. Add your feeds to twitter using feedburner
  2. Online Tool -Backlink checker
  3. Expand collapse Hide/Show element

To add this widget to display your backlinks :
Layout > Page Element >Add a gadget >Feed

And enter the following URL

Replace myfundoo-blog.blogspot.com with your own url.

Once the URL is added you will get a window having different options to choose according to your need
and click   SAVE 

End result of the widget will be some thing like this :

28 January, 2010

40 Free 125X125 Ads Banner

Here is my collection Of 40 Free 125X125 size banner.Since 125 x 125 are the most commonly used Ads slots on blog.125 x 125 ads are an attractive option for both bloggers and advertisers.Darren on problogger explains its popularity among bloggers and advertisers in his own balancing way.

More FREE Graphics For your blog.
1. Like this blog! Buy me a Pepsi/Coffee banners.
2.Rss Seasonal icons[Spring Summer Fall Winter]

You can right click and 'save image as'  individually for each image or you can download this All In One Pack which i have uploaded to google sites.
In the next post i will write about how to add this to your sidebar using Only HTML and Both HTML & CSS.
You can subscribe to my post Using Rss OR Can Receive all posts to your e-mail

23 January, 2010

Animated jquery sharing bar with 360 revolution

Today i am sharing with you  an awesome animated sharing option (from Martin Angelov on tutorialzine) by using pure JavaScript with the jQuery framework. which will enable your website visitors to share posts on a number of social networks. Social networking place a very important role in the popularity of the blog,blogger that communicate better and understand the power of social media are generally the most popular ones.
Before we start you make also like to look at  some of my previous posts: Tiny facebook gadget (add to your blogger) Another social bookmarking using image swapping
Now,Installing it to the blogger below every post is like every other social bookmarking bar ,there is an Html with a css supporting it, on the top of it working the Jquery.

Copy this CSS code and paste it above  ]]></b:skin> in your template code ,no need to expand widget template.

For get this working we need to install these two JavaScript between head sections :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ikb.fileave.com/rotating%20social.js"></script>
First one includes jquery library from google's CDN and the second one is rotating social file.

To show the code below every post paste this HTML code below <data:post.body/>

And save your template Click on view blog to see it working.

21 January, 2010

Modernizing Your BlockQuotes -9 unique styles

Block quotes are a  selection of text that is pulled out and quoted in a larger typeface. They are a great way to attract attention to a particular point, especially in long articles.Most websites, especially if they are blogs, will come across the need for a block quote at one time or another. HTML provides us with the perfect element for such a task, the

The tag blockquote in html has a special beauty than any other tags by default. And when you use blockquote in your post, it gets more meaning than merely a text.

Hope You would also like to Read :
Increase your text size Widget
First letter of your post Big and Unique
Google friend connect in Various Forms 

Here i am collecting some of the best blockquote designs which i have found over the web ! Hope You like them :

Basics And Specification
W3C: Blockquote specs
Wikipedia: Blockquote
W3 Schools: Blockquote

#blockquote1 {
background: #f5f5f5;
border-left: 0.8em solid #ccc;
border-right: 0.8em solid #ccc;
font: italic 120% Georgia, "Times New Roman", Times, serif;
padding: 0.75em;

#blockquote2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;

#blockquote3 {
font: 12px/18px normal "Courier New", sans-serif;
padding-left: 70px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #000;
color: white;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(http://i48.tinypic.com/2hnxcmo.jpg);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
line-height: 1.5em;

#blockquote4 {
width: 20em;
background: url(http://i49.tinypic.com/23tmpmh.jpg) top left no-repeat;
color: #030;
font-size: 2em;
line-height: 0.9;
font-style: italic;
padding: 0.5em;
margin: 0;

#blockquote5 {
background: #ffffcc;
border: 5px double gold;
border-width: 5px 0;
color: #CC6600;
font: bold 150% Arial, Helvetica, sans-serif;
  padding: 0.5em 0.75em;
text-align: right;

.blockquote6 {
background: rgb(0, 0, 0) none repeat scroll 0% 0%;
color: green;

blockquote7 {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border: 5px dashed #fff;

blockquote8 {
color: #fff;
background-color: #111;
font-size: 0.9em;
padding: 10px 20px 20px 20px;
blockquote p {
margin: 0;

#blockquote9 {
font-family:Courier New;
margin:5px 10px;
padding: 2px 15px 2px 25px;
background:url(http://i50.tinypic.com/raomxl.jpg) left top;
Now adding to your Blogger :
  • Chose Any of the above blockquote :
  • Search for post.blockquote or some thing with blockquote in your Edit HTML tab.
  • IT will be Like this :
#post.blockquote{  //starting bracket
-- your blockquote css is here --

}  //closing bracket

  • Suppose you have chooses second block quote  (#blockquote2)
  • Copy only css parts which is inside the opening and closing brackets like shown in image below :

And replace it with your original block quote css  in this way it will not interfere with existing post.blockquote in our template.