Auto hide social bookmark gadget for blogger 0 Comments

How to add 'social bookmark icons' below each post is already posted. Here is another gadget for social bookmark icons, in which all icons are partially hidden and when moves hovers them the icons are visible.

Here is the demo :

To add this gadget to your blog just follow these simple steps :

Step 1 :

• Login to Blogger
• Go to > Layout > Edit HTML and select 'Expand Widget Templates'
• Now find(CTRL + F) </head>
• And immediately above it, paste this code :

Step 2 :

<!--Autohide Bookmarks Starts-->
<style type='text/css'>
div.beauty-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
}
div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.beauty-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}
div.beauty-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}
div.beauty-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}
.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover {
background:url('http://i44.tinypic.com/1znbj83.png') no-repeat !important;
}
.beauty-furl {
background-position:-300px top !important;
}
.beauty-furl:hover {
background-position:-300px bottom !important;
}
.beauty-digg {
background-position:-500px top !important;
}
.beauty-digg:hover {
background-position:-500px bottom !important;
}
.beauty-reddit {
background-position:-100px top !important;
}
.beauty-reddit:hover {
background-position:-100px bottom !important;
}
.beauty-stumble {
background-position:-50px top !important;
}
.beauty-stumble:hover {
background-position:-50px bottom !important;
}
.beauty-delicious {
background-position:left top !important;
}
.beauty-delicious:hover {
background-position:left bottom !important;
}
.beauty-yahoo {
background-position:-650px top !important;
}
.beauty-yahoo:hover {
background-position:-650px bottom !important;
}
.beauty-blinklist {
background-position:-600px top !important;
}
.beauty-blinklist:hover {
background-position:-600px bottom !important;
}
.beauty-technorati {
background-position:-700px top !important;
}
.beauty-technorati:hover {
background-position:-700px bottom !important;
}
.beauty-myspace {
background-position:-200px top !important;
}
.beauty-myspace:hover {
background-position:-200px bottom !important;
}
.beauty-twitter {
background-position:-350px top !important;
}
.beauty-twitter:hover {
background-position:-350px bottom !important;
}
.beauty-facebook {
background-position:-450px top !important;
}
.beauty-facebook:hover {
background-position:-450px bottom !important;
}
.beauty-mixx {
background-position:-250px top !important;
}
.beauty-mixx:hover {
background-position:-250px bottom !important;
}
.beauty-script-style {
background-position:-400px top !important;
}
.beauty-script-style:hover {
background-position:-400px bottom !important;
}
.beauty-designfloat {
background-position:-550px top !important;
}
.beauty-designfloat:hover {
background-position:-550px bottom !important;
}
.beauty-syndicate {
background-position:-150px top !important;
}
.beauty-syndicate:hover {
background-position:-150px bottom !important;
}
.beauty-email {
background-position:-753px top !important;
}
.beauty-email:hover {
background-position:-753px bottom !important;
}

</style>
<!--Autohide Bookmarks Ends bloggerflick.blogspot.com-->

You also change the URL in red to your own image link.

Step 3:

Now find this tag <data:post.body/> and after that, paste this code:

<b:if cond='data:blog.pageType == "item"'>
<div class='beauty-bookmarks'>
<ul class='socials'>
<li class='beauty-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='beauty-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='beauty-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='beauty-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='beauty-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='beauty-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='beauty-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='beauty-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='beauty-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
<li class='beauty-syndicate'><a href='http://feeds.feedburner.com/bloggerflick' title='Subscribe to RSS'/></li>
<li class='beauty-email'><a expr:href='&quot; mailto:?subject=&quot; data:post.url &quot;&amp;title=&quot; data:post.title' target='_blank'/></li>
</ul>
<span class='beauty-rightside'/></div>
</b:if>

Change the link in red to your blog feed URL.

Now, save your template. If you face any problems just post a comment.

Read More »

Orkut Share Button without Javascript 0 Comments

Previous tutorial How to add 'Orkut Share' button to every post requires javascript to work. Here is an updated version of the share button which do not require any script. Simply, add this code to your template and this enables to share every post on orkut.

Updated version of orkut code :

 
To add this Orkut share button go to > Layout > Edit HTML and search for <div class='post-header-line-1'/> by using Ctrl + F and add the code above this tag.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a expr:href='&quot;http://promote.orkut.com/preview?nt=orkut.com&amp;du=&quot;   data:post.url   &quot;&amp;tt=&quot;   data:post.title' target='_blank'><img src='http://code.google.com/apis/orkut/docs/images/share.gif'/></a></b:if>

 Now save your template.  If you face any difficulties please do post comments.

Read More »

To show list of top commentors on your blog 0 Comments

This gadget is used to display list of top commentators on your blog. You can include any number of commentors or can exclude anyone from the list. This gadget is useful only if your blog has many number of comments.

To add this gadget to your blog go to > Layout > Add a Gadget > HTML/Javascript and add the below code :

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i )
{
var href = "'" obj.value.items[i].link "'";
if(obj.value.items[i].link == "")
var item ="<li>" obj.value.items[i].title "</li>";
else
var item = "<li>" "<a href=" href ">" obj.value.items[i].title "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=7b5e76fd684f11e94320abd4e00fbbca&url=http%3A%2F%2Fbloggerflick.blogspot.com&num=10&filter=Author" type="text/javascript"></script>

Replace the code in red with your blog url and num=10 indicates the number of commenters to be displayed in the list. If you want to exclude anyone then replace Author with Commenter Name.

Now, save your gadget.

Read More »

Popular Posts gadget for blogger 0 Comments

Here is a gadget for your blog to show popular posts on your blog. The posts displayed are selected based the number of comments on the post. This gadget is customizable and you can show any number of posts.

To add this gadget to your blog go to > Layout > Add a Gadget > HTML/Javascript and add the below code :

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i )
{
var href = "'" obj.value.items[i].link "'";
var item = "<li>" "<a href=" href ">" obj.value.items[i].title "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1a1c6e4e6d4f148e3650fda46910e15f&url=http%3A%2F%2Fbloggerflick.blogspot.com&num=10" type="text/javascript"></script>

Replace the code in red with your blog url and num=10 indicates the number of posts to be displayed.

Now, save your gadget. This gadget does not works on all blogs try your luck or use Random Posts gadget for blogger.

Read More »

Random posts gadget for blogger 1 Comments

Random posts gadget is used to display posts from your blog at random. All the posts will be selected from your blog archive. Each time the blog page is refreshed the posts displayed by gadget also changes. This gadget helps in digging your old posts from blog archieve.

To add this gadget go to > Layout > Add a Gadget > HTML/Javascript and add the below code.

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=6;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i  ]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k  ){if(entry.link[k].rel=='alternate'){var item = "<li>"   "<a href="   entry.link[k].href   ">"   entry.title.$t   "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

To change the number of posts to be displayed, change the code in red to your required value.

Read More »

Recent Posts with thumbnails gadget 0 Comments

After posting 'Recent posts gadget for blogger' here is another gadget for recent posts but this time to show up thumbnails in the post along with the post titles. This gadget is actually by BloggerTricks designed for a template and can be used for your blog too.

Here is the screenshot of the gadget :

To add this gadget go to > Layout > Add a Gadget > HTML/Javascript and add the below code.

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i48.tinypic.com/mwz9ec.jpg";
imgr[1] = "http://i48.tinypic.com/mwz9ec.jpg";
imgr[2] = "http://i48.tinypic.com/mwz9ec.jpg";
imgr[3] = "http://i48.tinypic.com/mwz9ec.jpg";
imgr[4] = "http://i48.tinypic.com/mwz9ec.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = false;
icon = " ";
text = "Comments";
showPostDate = false;
summaryPost = 100;
summaryFontsize = 10;
summaryColor = "#000";
icon2 = " ";
numposts = 6;
home_page = "http://bloggerflick.blogspot.com/";
</script>

<script src="http://h1.ripway.com/BloggerFlick/Scripts/RecentpostsThumbnails.js" type="text/javascript"></script>

Replace the code in red with your blog URL.

• boxwidth > Width of the widget
• cellspacing > Space between cells (default one is good)
• borderColor > Border color
• thumbwidth > Width of the thumbnail
• thumbheight > Height of the thumbnail
• 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://YOURBLOG.blogspot.com/

Everything in the code can be customizable and you can change any value based on your requirement.

Join mybloglog community for more hacks : BloggerFlick On MyBlogLog

Read More »

Feed the fish gadget for blogger 0 Comments

'Feed the fish' is an iGoogle gadget or module created by aBowman. In this gadget you can feed the fishes moving around with simple click of your mouse button.



To add this gadget to your blog go to > Layout > Add a Gadget > HTML/Javascript and add the below code.

<object type="application/x-shockwave-flash" style="outline:none;" data="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/fish.swf?" width="300" height="250"><param name="movie" value="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/fish.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param><param name="scale" value="noscale"/><param name="salign" value="tl"/></object>

If you want more customization or want more options go to publishers site http://abowman.com/google-modules/fish/

Read More »

Simple recent comments gadget for blogger 3 Comments

After posting about 'Recent Posts' here is a similar gadget but this time its about comments. 'Recent comments gadget' is used to show up recent comments on your blog. By using this you can show the title, summary and date of the comment published. Any number of comments can be shown in your sidebar using this gadget.

To add this gadget go to > Layout > Add a Gadget > HTML/Java Script and add the below code :

<script src="http://h1.ripway.com/BloggerFlick/Scripts/RecentComments.js">
</script>
<script>
var numposts = 10;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>

<script src="http://bloggerflick.blogspot.com/feeds/comments/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>

Replace the code in red with your blog URL and save the gadget.

You can also customize this gadget as :

• var numposts = 10;                         > Shows number of posts to display.
• var showpostdate = false;               > Used to display the date of post.
• var showpostsummary = false;        > To display summary of your post.
• var numchars = 100;                       > Lenght of the post summary.

 Change the value false to true to display 'Comment Date' and 'Comment Summary' in the gadget.

Read More »

Simple recent posts gadget for blogger 0 Comments

'Recent Posts gadget' is used to show up recent posts in your blog. By using this you can show the title, summary and date of the post published. Any number of posts can be shown in your sidebar using this gadget.

To add this gadget go to > Layout > Add a Gadget > HTML/Java Script and add the below code :

<script src="http://h1.ripway.com/BloggerFlick/Scripts/RecentPosts.js">
</script>
<script>
var numposts = 10;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>

<script src="http://bloggerflick.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>

Replace the code in red with your blog URL and save the gadget.

You can also customize this gadget as :

• var numposts = 10;                         > Shows number of posts to display.
• var showpostdate = false;               > Used to display the date of post.
• var showpostsummary = false;        > To display summary of your post.
• var numchars = 100;                       > Lenght of the post summary.

 Change the value false to true to display Post Date and Post Summary in the gadget.

Read More »

Posts and comments : Statistics widget for blogger 0 Comments

Your blog may contain many number of posts and comments, if you want to show the statistics then you can use this widget. The count for number of posts and number of comments will be displayed. If your blog has hundreds of posts and comments then this will be very useful.

To add this widget go to  > Layout > Add a Gadget > HTML/JAVASCRIPT  and add below code :

<script style="text/javascript">
function numberOfPosts(json) {
document.write('Total Posts: <b>' json.feed.openSearch$totalResults.$t '</b><br>');
}
function numberOfComments(json) {
document.write('Total Comments: <b>' json.feed.openSearch$totalResults.$t '</b><br>');
}
</script>

<ul><li><script src="http://bloggerflick.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>

<li><script src="http://bloggerflick.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul><noscript><a href="http://bloggerflick.blogspot.com" target="_blank">Blogger Widgets</a></noscript>

Now replace the code in red with your blog URL. Number of posts and comments will be displayed.

Read More »

How to add Drop Down List In Blogger 2 Comments

Drop Down list is a user interface control GUI element, which allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value. When activated, it displays (drops down) a list of values, from which the user may select one. When the user selects a new value, the control reverts to its inactive state, displaying the selected value.

Here is the demo of it :

- Choose an option - Cricket4FansTech MillionCSE @ MICFree Widgets

Its easy to make this drop down list.Just go to  > Layout >Add Gadget >HTML/JavaScript  and add the below code and save it.

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size=1 name=menu>

<option>- Your Title - </option>

<!-- change the links with your own -->

<option value="http://Link 1">List Item 1</option>

<option value="http://Link 2">List Item 2</option>

<option value="http://Link 3">List Item 3</option>

<option value="http://bloggerflick.blogspot.com">Free Widgets</option>

</select></form>

Change the text in red and add your links, change text in blue and add link titles.

Additional Features

1. You can increase the number of option value in code, if you want more links.
2. Width of drop down menu depends on the length of the titles.
3. Drop-down lists use far less space due to their show/hide functionality.
   

Read More »