Showing posts with label Blogger Widgets. Show all posts

Thursday, February 4, 2010

SPICE UP YOUR BLOG USING BRILLIANT WAYS.

It is the dream of a blogger to make his blog beautiful.when u make or download and upload a template into ur blog u are just not doing anything creative.Customizing ur blog to make it pretty or handsome.

FIRST OF ALL LETS REMOVE THE BLOG BANNER {NAVBAR}

2- On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog's HTML.
*****download full template before you do any changes to the current template of your blog******
3- paste the CSS definition in the top of the template code:

...
    <b:skin><![CDATA[/*
    -----------------------------------------------
    Blogger Template Style
    Name:     Rounders
    Designer: Douglas Bowman
    URL:      www.stopdesign.com
    Date:     27 Feb 2004
    Updated by: Blogger Team
    ----------------------------------------------- */

    #navbar-iframe {
       display: none !important;
    }
    /* Variable definitions
      ====================
       <Variable name="mainBgColor" description="Main Background Color"
                 type="color" default="#fff" value="#ffffff">
       <Variable name="mainTextColor" description="Text Color" type="color"
                 default="#333" value="#333333">
       ...

RSS FEED ICONS FOR UR BLOG

Rss icons are provided by the feed service like feedburner itself but If u want to make them stylish.
here is a site that could herlp you to select and download rss feed icons.http://creativenerds.co.uk/freebies/ultimate-rss-feed-icon-collection-over-1500/
once downloaded go to LAYOUT ----Page elements-----add a gadget-----picture----type ur feed url and the url of your feed icon{after hosting it with free image hosting services.}
or edit ur script provided by the feed service and put ur feed icon url instead of the original one.

ADD AN ANIMATED TAG CLOUD FOR BLOGGER

Animated tag clouds are flash objects so you need a flash player like adobe flash to see it after implementing it in your blog.
steps to implement-:-
The name of this tag cloud is blogmus.
This will spin when the mouse pointer is over the desired label of your blog.
Sign in to blogger-Layout-Edit Html and search{ctrl+f}for the following code-

<b:section class='sidebar' id='sidebar' preferred='yes'>

Immediatly after this line, paste the following section of code:-

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Customizing Blogumus tag cloud

In this default installation, Blogumus includes the following preset variables:

Width is set to 240px

Height is set to 300px;

Background color is white

Test color is grey

Font size is "12"

If you would prefer to make your widget wider, shorter, change the color scheme, etc, you will need to do this by editing various parts of the code. I'll go through these options in the order they appear in the widget code. Editing width and height The variables for width and height are found in this line of the script:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

The width (currently 240) is highlighted in red, while the height (300px default) is highlighted in blue. These numerical values specify the width and height in pixels, so you can alter these of you prefer. Editing background color You can change the background color from white to any other color by altering the hex value in the same line: -

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

For example, if you prefer a bright red background, you may replace #ffffff with #ff0000. Take a look at this page for a list of commonly used hex color codes. Alter the color of text By default, the text is set to display as dark grey ( hex value #333333). You can alter this variable in the following line:-

so.addVariable("tcolor", "0x333333");

Be aware that "tcolor" is a Flash variable and doesn't include the usual hash symbol of hex color codes. Be sure to only replace the numbers! Adjust the font size The maximum font size of tags is specified in this line:-

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

You can alter this to ensure tags are displayed in a bigger or smaller font if you prefer by changing "12" to a larger or smaller number. While making any of these changes, you should be able to preview your widget and be certain that your new choice of color, dimensions and background are suitable for your needs.
JAVASCRIPT MUST BE ENABLED TO SEE THIS TAG CLOUD LABEL

Coloring the default text selection with CSS

When u cleck and drag on a blog to select a default color blue or green or black appears.But sometimes thay can be really booring.Imagine a blog with Pink template having the default selection color black ohhh thats horrible isn't it.Then here is a trick which will help you to change this color.

this post is refered from http://myfundoo-blog.blogspot.com/2010/01/coloring-default-text-selection-with.html

In order to get this working for your blog you need to add following styles to your stylesheet.Just above your ]]></b:skin>
in edit html in layout.
Till now it works only for Firefox and safari and does not supper IE.

::-moz-selection{background:#5eb7c3; color:#fff;} /* Firefox */
::selection {background:##5eb7c3; color:#fff;} /* Safari */

And save your template.

More :

You can use it for paragraphs with different classes like csstricks.com has explained (DEMO)

p::-moz-selection{background:#1259C7; color:#fff;}
p::selection{background:#1259C7; color:#fff;}

CREATE A SPRING EFFECT TO BLOGGER.

This is a beautiful trick which would make leaves fall from the top of your blog pages.

1. Demo
copy and paste the below html code to layout-add a gadget-html/Javascript.leave the title empty and save it.

<marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:504px;top:106px;width:auto;height:463px;z-index:1;" scrollamount=""><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:348px;top:45px;width:auto;height:639px;z-index:1;" scrollamount="6"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:685px;top:6px;width:auto;height:231px;z-index:1;" scrollamount="3"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:138px;top:29px;width:auto;height:584px;z-index:1;" scrollamount="2"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:847px;top:118px;width:auto;height:205px;z-index:1;" scrollamount="4"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:890px;top:69px;width:auto;height:418px;z-index:1;" scrollamount="6"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:2px;top:68px;width:auto;height:297px;z-index:1;" scrollamount="7"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:701px;top:110px;width:auto;height:435px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:229px;top:51px;width:auto;height:537px;z-index:1;" scrollamount="3"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:833px;top:74px;width:auto;height:282px;z-index:1;" scrollamount="2"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:771px;top:82px;width:auto;height:153px;z-index:1;" scrollamount="7"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:859px;top:51px;width:auto;height:444px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:554px;top:1px;width:auto;height:178px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:169px;top:21px;width:auto;height:206px;z-index:1;" scrollamount="3"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:786px;top:25px;width:auto;height:142px;z-index:1;" scrollamount="4"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:775px;top:74px;width:auto;height:771px;z-index:1;" scrollamount="1"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:450px;top:38px;width:auto;height:418px;z-index:1;" scrollamount="6"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:250px;top:92px;width:auto;height:775px;z-index:1;" scrollamount="4"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:173px;top:19px;width:auto;height:389px;z-index:1;" scrollamount="3"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:804px;top:49px;width:auto;height:493px;z-index:1;" scrollamount="7"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><marquee behavior="scroll" direction="down" style="position:absolute;border:0px;padding:0px;margin:0px;left:543px;top:72px;width:auto;height:397px;z-index:1;" scrollamount="2"><span class="falling1"><img src="http://i38.tinypic.com/2h3r7l4.jpg" /></span></marquee><a style="color: #000080; font-family: tahoma; font-size: 11px; text-decoration: none; border: 1px double #00ADEF; padding: 1px; background: #FFF"</a>

Changing the background image of your blogger

A blogger template comes packed with a background image like this one

Well there is a way to change it.

Step one sign in to blogger.

step two go to layout and then click edit html.

step three select expand widget templates.

step four look for this code:-

body {
margin : 0;
font : 13px tahoma, arial, helvetica, sans-serif;
background : transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8PDeXehHCbN2iQhz-brJEJHIKrp6dbR_63TRDW4dyoLGRunbSJO7qrUbB-zUImESz_zUfT_if-JJkmJiCC3JH1g9q0wf_Vgk1P2sOTyZUUe1gSrA_zhU72BnBhHwuhhoV-n8u3Fe4K2rS/s1600/backgroundbody.png) repeat scroll 0 0;
}

With emphasis on body tag

Step:4 Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8PDeXehHCbN2iQhz-brJEJHIKrp6dbR_63TRDW4dyoLGRunbSJO7qrUbB-zUImESz_zUfT_if-JJkmJiCC3JH1g9q0wf_Vgk1P2sOTyZUUe1gSrA_zhU72BnBhHwuhhoV-n8u3Fe4K2rS/s1600/backgroundbody.png with Your Image.
It might be possible that your template doesn't have a background image and u want to add on.
just paste this between body closing and ending tags { and }

background : transparent url(http://i38.tinypic.com/2q07m2e.jpg) repeat scroll 0 0;

Replace http://i38.tinypic.com/2q07m2e.jpg with Your Image url.

Step:5 Click Save Template.

And Your are done!!click view blog to preview your blog.
ALWAYS BACKUP YOUR TEMPLATE BEFORE DOING THIS.

Add an Email Subscribe Button Below Every Blog Posts

An email subscribe button helps your readers subscribe to your blog feeds.Well,Here is a way to add it to every post in ur blog.

***Copy the below code and paste it in notepad as you have to make some changes in it replace the red part in the code with your own feedburner address.

<br /><div style="border: 1px solid rgb(153, 153, 153); padding: 5px;">
<br /><img src="http://i263.photobucket.com/albums/ii150/mohamedrias/subscriberss.gif" align="left" border="0" height="18" width="44" />
<span style=";font-family:verdana;font-size:85%;" >
If you enjoyed this post, make sure you
<a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=Brilliantcomputing">
<b>subscribe to my regular Email Updates</b></a></span>!
<br /><a href="http://brilliantcomputing.blogspot.com">
<br /><img src="http://img1.orkut.com/img/castro/i_tool.png" align="right" border="0" width="14" height="14">
</a></div>

***Go to layout - edit HTML-Tick expand widget template and search for
<p><data:post.body/></p>; or <data:post.body/>
.And paste the copied code beneath <p><data:post.body/></p>; or <data:post.body/>

SAVE TEMPLATE AND U ARE DONE.

A COMFORTABLE MENU FOR YOUR BLOGGER

use our free css menu builder and create some pretty sweet menus for free Using free CSS menu buider

(http://www.cssmenubuilder.com)

features:

30+ horizontal menus
700+ vertical menus combinations
Breadcrumb menus that consist of more than 200+ combinations,
In total the site offers more than 1000 menu combinations
Not including the endless color combinations.

This is what they say but as far as i think it has:

A good and easy to use GUI.
An easy color chart to pick from
Mouthful of design which surely make your pick difficult.
More over it is free,what else u want MAN

Below is centain Screenshots Which i take while trying for my menubar

Add a Gtalk live chat button to your blog.

There are many services in the web which helps u put diffrent widgets and apps which help a blog visitor to email,comment or give feedbacks.Now there is another widget from google talk which allows a visitor to directly talk or chat to the administrator of a blog.

What U need in order to create one for your blog?
U need to be an Gtalk user.
If you're not a current Google Talk user, you'll need to create a new Google Account. If you have Gmail on your Google Account, you can use Google Talk with your Gmail account.

Click below to get one:
to create read the below details and visit : gtalk badge

Title: Text appearing in blue.

Your nickname: Name Displayed to guest.

Style :click on the drop down list to select to select from 6 options.

Click Update badge

Copy the HTML code From below And paste in your gadget list

and arrange it in order.

Animated jquery sharing bar with 360 revolution

Sharing is caring.Sharing posts and other topics plays an important role in a blogs popularity.There are many share icons but this is animated and beautiful.

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

#share{
/* The share box container */
width:500px;
background:#ececec;
height:220px;
margin:60px auto;
overflow:hidden;

-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
}

#share-label{
/* The image on the right */
background:url(img/share.png) no-repeat 50% 50%;
float:left;
height:220px;
width:200px;
}

#stage{
/* This is where the animation takes place */
position:relative;

border-right:1px solid #DDDDDD;
width:290px;
height:220px;
background:white;
float:left;

border-bottom-left-radius:12px;
border-top-left-radius:12px;

-moz-border-radius-bottomleft:12px;
-moz-border-radius-topleft:12px;

-webkit-border-bottom-left-radius:12px;
-webkit-border-top-left-radius:12px;
}

.btn{
/* This class is assigned to every share button */
background-color:white;
height:90px;
left:0;
top:0;
width:60px;
position:relative;
margin:20px 0 0 10px;
float:left;
}

.bcontent{
/* Positioned inside the .btn container */
position:absolute;
top:auto;
bottom:20px;
left:0;
}
/* Individual rules for every share button */

.digg{ background:url(img/digg_reflection.png) no-repeat -4px bottom;}
.reddit{ background:url(img/reddit_reflection.png) no-repeat -4px bottom;}
.facebook{ background:url(img/facebook_reflection.png) no-repeat bottom center;}
.tweetmeme{ background:url(img/twit_reflection.png) no-repeat -5px bottom;}
.dzone{ background:url(img/dzone_reflection.png) no-repeat -7px bottom;}

.thanksto{
position:absolute;
bottom:2px;
right:4px;
font-size:10px;
}

.thanksto a,.thanksto a:visited{
color:#BBB;
}

/* Customizing the facebook share button */

span.fb_share_no_count {
display:block;
}

span.fb_share_count_top.fb_share_no_count {
line-height:54px;
}

span.fb_share_count_nub_top.fb_share_no_count{
display:none;
}

span.fb_share_no_count span.fb_share_count_inner {
background:#3B5998 url(http://static.fbshare.me/f_only.png) no-repeat scroll 20px 5px;
display:block;
}

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/>

<div id="share">
<div id="stage">

<div class="btn digg"><div class="bcontent"><a class="DiggThisButton"></a><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script></div></div>
<div class="btn tweetmeme"><div class="bcontent"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div></div>
<div class="btn dzone"><div class="bcontent"><script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script></div></div>
<div class="btn reddit"><div class="bcontent"><script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script></div></div>
<div class="btn facebook"><div class="bcontent"><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div></div>

</div>

<div id="share-label">

</div>

</div>

And save ur template.

continue reading "SPICE UP YOUR BLOG USING BRILLIANT WAYS."

Sunday, January 10, 2010

Facebook Share Count Buttons For Blogger

Share |

Facebook has now officially introduced the Retweet like buttons for your blogs or sites. These buttons look much similar to the Retweet buttons by Tweetmeme. Facebook has 5 styles of Sharing buttons. Here we will see two of them.

Adding a Facebook share count button will show a neat count of how many times your blog post has been shared on Facebook.

Facebook Share Button Style 1

Code for Facebook Share Button Style 1

<div style="float:right;padding:4px;">

<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>

<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>

</div>

Facebook Share Button Style 2

Code for Facebook Share Button Style 2

<div style="float:left;padding:4px;">

<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>

<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>

</div>

Facebook Share Button Compact Style 1

Code for Facebook Share Compact Button Style 1

<div style="float:right;padding:4px;">

<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>

<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>

</div>

Facebook Share Button Compact Style 2

Code for Facebook Share Compact Button Style 2

<div style="float:left;padding:4px;">

<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>

<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>

</div>

How to install Facebook Share Count Button on your Blogger Blog?

1.Select one of the Share Button Styles and copy the Corresponding Code.

2.Now login to your Blogger Dashboard and navigate to Layout > Edit Html and expand the widget templates

3.Find this piece of code

<div class='post-header-line-1'/>

and immediately after that place our Facebook share button code(that you copied)

If you were unable to find this code in your template,then look for the first occurance of

<data:post.body/>

and immediately before that paste our Facebook Share button code(that you copied).

5.Save the template and you should get a facebook share count button near each of your blog posts.

If you liked this post and if it helped you in implementing the facebook buttons, then please consider sharing this post on Facebook.

continue reading "Facebook Share Count Buttons For Blogger"

Tuesday, December 1, 2009

Adding inline ads

Share |

Adding inline ads

Want to add advertisements into your posts for maximum exposure? By having your ads out their in front of peoples face they just might click them more often. I am not a big believer in ads. But maybe you are and by following these instructions from MyDigitialLife you can add adds in your post between post or even in the footer. It is not hard to do and involves a little modification to your template. Due to the fact that Blogger parses out some code and changes some characters when you enter it manually in the html this will show you a workaround for that.From their web site:

continue reading "Adding inline ads"

That’s a lot of comments!!

Share |

That’s a lot of comments!!

Replace your commenting system with Intense Debate for more control over comments with a social flare. It is really easy to do, check out this information from their web site:

Interested in the comments your friends make? What if there was a way to follow your friends and be notified when, where, and also what they comment? Intense Debate provides this functionality through RSS feeds for each user. Subscribers will be notified in their RSS readers with a direct link to view the context surrounding the comment as well. Give it a try!

Also, don’t waste anymore time checking back in on a blog to see if anyone responded to your comment. Now you can get email notifications of replies to your comments, letting you know when the conversation continues while you’re gone.

continue reading "That’s a lot of comments!!"

Friday, November 13, 2009

Recent Posts Widget for Blogger

Here’s how you can make a Recent Posts widget for your Blogger blog:
1. Login to your Blogger Dashboard
2. go to your blog’s Layout, and click Add a Page Element
3. add a Feed (click “add to blog” under the page element Feed)
4. Configure Feed:

A. Enter your blog’s feed URL in the box. Use the URL below..
Just replace the text indicated in blue with your own blog address.
http://YourAwesomeBlogHere.blogspot.com/feeds/posts/default?alt=rss

or

http://www.YourAwesomeBlogHere.com/feeds/posts/default?alt=rss
(for self-hosted blogs)
B. Click Continue.
C. Change the Title to “Recent Posts” or “Recent Entries” or whatever you prefer to call it. You can also choose to show the item dates and author.

SAVE CHANGES.There u got it!!!

continue reading "Recent Posts Widget for Blogger"

GOOGLE TRANSLATE!!!

Share |

Google Translate that and offers instant access to automatic translation of the pages.Quickly and Easily.
Click here for more information

continue reading "GOOGLE TRANSLATE!!!"

Youtube video downloader widget

Share |

Download youtube videos in mp4 format for your ipod and mobile phones.
One thing you got to remember is to right click and choose Save link as or Save target as then rename to video.mp4

there is a 400pixel large version and a 200 pixel smaller version

To get this 400 pixel version of youtube downloader for your blog/website
Copy and paste this code shown below.

<script src="http://downloadutube.googlepages.com/ytdemb.js" type="text/javascript"></script><a href="http://technojuice.blogspot.com/2007/11/download-youtube-video-widget-blogger.html"><img border="0" alt="Download youtube Video" width="5" src="http://i197.photobucket.com/albums/aa309/technojuiceblog/blank.gif" height="5" /></a>

There is a 200 pixel Mini version of this widget
To install this 200 Pixel "Download Youtube Video" Widget on your blog/website just copy and paste the below code:-

<script src="http://downloadutube.googlepages.com/ytdwid.js" type="text/javascript"></script><a href="http://technojuice.blogspot.com/2007/11/download-youtube-video-widget-blogger.html"><img border="0" alt="Download youtube Video" width="5" src="http://i197.photobucket.com/albums/aa309/technojuiceblog/blank.gif" height="5" /></a>

After the Download ?
Update: Once downloaded rename the file with extension .flv (eg somename.flv)
Updated: You can download also in mp4 format, most devices such as ipod, mobile phone support mp4 format !

To view the FLV files You need a FLV player, there are tons of free flv player available such as

http://applian.com/flvplayer/index_martijn.php
http://www.download.com/FLV-Player/3000-2139_4-10505954.html?tag=lst-0-1

You can even use VLC player !

go to this site for more information

continue reading "Youtube video downloader widget"

Thursday, November 12, 2009

Official retweet button

Share |

OFFICIAL RETWEET BUTTON
This is a 3D green retweet button with a 3D blue tweet button.
Copy and paste the following code where you want the widget to be displayed.

<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>

When the URL is not the same as the current URL

The button has a brain of its own and will automatically grab the URL of the page it is placed on without you having to change a thing. However if you want to place your button on more than one page or would like it in your feed, you will need to override the URL by following the directions below.

<script type="text/javascript">
url = 'http://www.example.com/2009/08/example-blog-post';
</script>
<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>

ust replace http://www.example.com/2009/08/example-blog-post with the URL of the page you want to retweet. The URL must be the final destination URL, not an alias, such as a link using a shortening service (eg. http://rt.nu).

Smaller Button

A 3D small blue retweet button.

We also offer a smaller version of the retweet button for you website and blog owners who prefer small and simple. The small button will fit anywhere so go crazy!

<script type="text/javascript">
size = 'small';
</script>
<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>

Specifying a different username

By default the retweet button will be in the format of “RT [title] [link]”. You can, however change the button to retweet your user account. By specifying the ‘username’ parameter in the JavaScript you can change the format to “RT @yourname [title] [link]”.

<script type="text/javascript">
username = 'mashable';
</script>
<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>

continue reading "Official retweet button"

THUMBNAIL RECENT POSTS WIDGET

Share |

THUMBNAIL RECENT POSTS WIDGET

In order to get the Thumbnail recent posts widget.
copy and paste this code into the html/javascript in add widget in page elements in your blogger blog.
Click here to get the code
home_page [In RED] to your blogs url.
If you want more information go to
this link

continue reading "THUMBNAIL RECENT POSTS WIDGET"