Tips and Tricks Blogger

Add Social Bokmarking Button

2009-12-17T13:23:00.005+07:00

Hey all. it has been a long time since i posted the latest trick about how to add social bookmarking button for blogger???

with this blogger widget your visitors will be able to share and bookmark your posts with the following networks.

Stumbleupon
Digg
Reddit
Delicious
Yahoobuzz
Blinklist
Technorati
Facebook
Twitter
Myspace
Mixx
Scriptstyle
Designfloat
Comfeed
Newsvine
Linkedin
Google
Friendfeed

now let’s go,

Caution : Please backup your template (Download Full Template) Before making any changes.

Step 1

Go to blogger.com and sign in to your blogger account, And go to Dashboard >> layout >> Edit html and before doing any thing,

make sure to check
Expand Widget Templates

then, find the following code.

]]></b:skin>

and just before it, add the next code.

/* start share the love css by allblogtools.com
----------------------------------------------- */
div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important} 
div.sexy-bookmarks-expand{height:29px; overflow:hidden} 
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url('http://img31.imageshack.us/img31/176/sexytrans.png') !important; background-repeat:no-repeat} 
div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important} 
div.sexy-bookmarks ul.socials{width:100% !important; margin:0 !important; padding:0 !important; float:left} 
div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important} 
div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important} 
div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important} 
div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important} 
.sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url('http://img512.imageshack.us/img512/3131/sexysprite.png') no-repeat !important;border: 0;outline: none;} 
.sexy-digg{background-position:-980px bottom !important} 
.sexy-digg:hover{background-position:-980px top !important} 
.sexy-reddit{background-position:-700px bottom !important} 
.sexy-reddit:hover{background-position:-700px top !important} 
.sexy-stumbleupon{background-position:-630px bottom !important} 
.sexy-stumbleupon:hover{background-position:-630px top !important} 
.sexy-delicious{background-position:-1190px bottom !important} 
.sexy-delicious:hover{background-position:-1190px top !important} 
.sexy-yahoobuzz{background-position:-1120px bottom !important} 
.sexy-yahoobuzz:hover{background-position:-1120px top !important} 
.sexy-blinklist{background-position:-1260px bottom !important} 
.sexy-blinklist:hover{background-position:-1260px top !important} 
.sexy-technorati{background-position:-560px bottom !important} 
.sexy-technorati:hover{background-position:-560px top !important} 
.sexy-myspace{background-position:-770px bottom !important} 
.sexy-myspace:hover{background-position:-770px top !important} 
.sexy-twitter{background-position:-490px bottom !important} 
.sexy-twitter:hover{background-position:-490px top !important} 
.sexy-facebook{background-position:-1330px bottom !important} 
.sexy-facebook:hover{background-position:-1330px top !important} 
.sexy-mixx{background-position:-840px bottom !important} 
.sexy-mixx:hover{background-position:-840px top !important} 
.sexy-scriptstyle{background-position:-280px bottom !important} 
.sexy-scriptstyle:hover{background-position:-280px top !important} 
.sexy-designfloat{background-position:-1050px bottom !important} 
.sexy-designfloat:hover{background-position:-1050px top !important} 
.sexy-newsvine{background-position:left bottom !important} 
.sexy-newsvine:hover{background-position:left top !important} 
.sexy-google{background-position:-210px bottom !important} 
.sexy-google:hover{background-position:-210px top !important} 
.sexy-comfeed{background-position:-420px bottom !important} 
.sexy-comfeed:hover{background-position:-420px top !important} 
.sexy-linkedin{background-position:-70px bottom !important} 
.sexy-linkedin:hover{background-position:-70px top !important} 
.sexy-friendfeed{background-position:-1750px bottom !important} 
.sexy-friendfeed:hover{background-position:-1750px top !important} 
.sexy-link{ margin-left:25px; float:left} 
.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}
/* end share the love css by allblogtools.com
----------------------------------------------- */

Step 2

Find next code

</head>

and before it, add the next code

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/> 
<script type='text/javascript'> 
jQuery(document).ready(function() { 
// xhtml 1.0 strict way of using target _blank 
jQuery(&#39;.sexy-bookmarks a.external&#39;).attr(&quot;target&quot;, &quot;_blank&quot;); 
// this block sets the auto vertical expand when there are more than 
// one row of bookmarks. 
var sexyBaseHeight=jQuery(&#39;.sexy-bookmarks&#39;).height(); 
var sexyFullHeight=jQuery(&#39;.sexy-bookmarks ul.socials&#39;).height(); 
if (sexyFullHeight&gt;sexyBaseHeight) { 
jQuery(&#39;.sexy-bookmarks-expand&#39;).hover( 
function() { 
jQuery(this).animate({ 
height: sexyFullHeight+&#39;px&#39; 
}, {duration: 400, queue: false}); 
}, 
function() { 
jQuery(this).animate({ 
height: sexyBaseHeight+&#39;px&#39; 
}, {duration: 400, queue: false}); 
} 
); 
} 
// autocentering 
if (jQuery(&#39;.sexy-bookmarks-center&#39;)) { 
var sexyFullWidth=jQuery(&#39;.sexy-bookmarks&#39;).width(); 
var sexyBookmarkWidth=jQuery(&#39;.sexy-bookmarks:first ul.socials li&#39;).width(); 
var sexyBookmarkCount=jQuery(&#39;.sexy-bookmarks:first ul.socials li&#39;).length; 
var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth); 
var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth; 
var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2; 
jQuery(&#39;.sexy-bookmarks-center&#39;).css(&#39;margin-left&#39;, sexyLeftMargin+&#39;px&#39;); 
} 
}); 
</script>

Step 3

This is the last step, we are about to do it.

Find this code

<data:post.body/>

if you can’t find this code, please check on Expand Widget Templates and you’ll find it.

and after it, add the following code.

<div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'> 
  <ul class='socials'> 
  <li class='sexy-delicious'>

<a class='external' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li> 
  <li class='sexy-digg'>

<a class='external' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li> 
  <li class='sexy-stumbleupon'>

<a class='external' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li> 
  <li class='sexy-reddit'>

<a class='external' expr:href='&quot;http://reddit.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li> 
  <li class='sexy-google'>

<a class='external' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li> 
  <li class='sexy-twitter'>

<a class='external' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' rel='nofollow' title='Tweet This!'>Tweet This!</a></li> 
  <li class='sexy-facebook'>

<a class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li> 
  <li class='sexy-mixx'>

<a class='external' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li> 
  <li class='sexy-comfeed'>

<a class='external' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow' title='Subscribe'>Subscribe</a></li> 
  <li class='sexy-yahoobuzz'>

<a class='external' expr:href='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li> 
  <li class='sexy-linkedin'>

<a class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li> 
  <li class='sexy-designfloat'>

<a class='external' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li> 
  <li class='sexy-technorati'>

<a class='external' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li> 
  <li class='sexy-scriptstyle'>

<a class='external' expr:href='&quot;http://scriptandstyle.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to Script &amp; Style'>Submit this to Script &amp; Style</a></li> 
  <li class='sexy-myspace'>

<a class='external' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=http&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li> 
  <li class='sexy-blinklist'>

<a class='external' expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li> 
  <li class='sexy-friendfeed'>

<a class='external' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li> 
  <li class='sexy-newsvine'>

<a class='external' expr:href='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li> 
  </ul> 
  <div style='clear:both;'/> 
  </div> 
  <div class='sexy-link'>

<font size='1px'>Widget by <a href='http://www.cssreflex.com/'

title='Web Design Blog, Blogger Hacks and Blogger templates'>Css Reflex </a>|

<a href='http://www.tutzone.org/' title='Tutorials, Rare Downloads, Link Heaven,

Tips Tricks, Hacks, Make How, Blogger Tricks And Tutorials, Internet, News, And Many More'>

TutZone</a> | Brought to you by : </font><a href='http://www.allblogtools.com'

target='_blank' title='Blogger templates'><font size='2'>AllBlogTools.com</font></a></div>

Now you are done, Click SAVE TEMPLATE

Add Back to TOP Button (More Styles)

2009-12-17T12:28:00.001+07:00

Today we’ll learn a very easy and important trick, Specially if you have got a lot of content on you blog pages, And if you want your blog to be easy to use for your visitors, A back to top link or button on your blogspot blog will make it easier and faster to your visitors when it comes to fast exploring and browsing.
Ad
Now we’ll see how to add

1. Image Back To Top Buttons With 19 Different Styles
2. Text Back To Top Link with different styles And Colors

Do This Step:

1. Image Back To Top Buttons With 19 Different Styles

Step 1

Ok, now go to your blogger account and go to, Dashboard >> Layout >> Edit html >> and please find the following code.

]]></b:skin>

And before it add this code

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}

Step 2

Now find the following code.

</body>

and before it add the next code.

<a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a>

But before adding this code to your template please choose your favorite button of the following And change the words in red, Image-Url to the button url.

http://3.bp.blogspot.com/_JwD5r652h00/SvDAnTlDfDI/AAAAAAAAAQY/y-NAytkDXjI/s1600/bttp-5.png

http://2.bp.blogspot.com/_JwD5r652h00/SvDAnGbH7qI/AAAAAAAAAQQ/qKtrVmPCBXY/s1600/bttp-4.png

http://1.bp.blogspot.com/_JwD5r652h00/SvDAmyqvA9I/AAAAAAAAAQI/hACE99TswzU/s1600/bttp-3.png

http://1.bp.blogspot.com/_JwD5r652h00/SvDAmXE1tvI/AAAAAAAAAP4/pQk69X73NIo/s1600/bttp-1.png

http://1.bp.blogspot.com/_JwD5r652h00/SvDAmVOZPMI/AAAAAAAAAQA/_Y2Nd0UZVMM/s1600/bttp-2.png

http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png

http://2.bp.blogspot.com/_JwD5r652h00/SvDBCN6PpfI/AAAAAAAAARA/oEpqkKnL0Jw/s400/bttp-10.png

http://2.bp.blogspot.com/_JwD5r652h00/SvDBBw_U6MI/AAAAAAAAAQ4/KDKaH8OTDO4/s400/bttp-9.png

http://1.bp.blogspot.com/_JwD5r652h00/SvDBBzoz4II/AAAAAAAAAQw/n9hIomKpQxY/s400/bttp-8.png

http://3.bp.blogspot.com/_JwD5r652h00/SvDBBlYeFHI/AAAAAAAAAQo/lzY3WpZpwPA/s40

http://4.bp.blogspot.com/_JwD5r652h00/SvDBWWig4UI/AAAAAAAAARI/28cXbIDOaqk/s400/bttp-11.png

http://4.bp.blogspot.com/_JwD5r652h00/SvDBWmm_WTI/AAAAAAAAARQ/xfyALfcAbZ4/s400/bttp-12.png

http://3.bp.blogspot.com/_JwD5r652h00/SvDBW6QlhXI/AAAAAAAAARY/6ZxECjTlMxM/s400/bttp-13.png

http://3.bp.blogspot.com/_JwD5r652h00/SvDBW-al_pI/AAAAAAAAARg/Aoxlzmp3Kw0/s400/bttp-14.png

http://1.bp.blogspot.com/_JwD5r652h00/SvDBXF2WGRI/AAAAAAAAARo/FIPZOwsTTBc/s400/bttp-15.png

http://3.bp.blogspot.com/_JwD5r652h00/SvDBloI2NZI/AAAAAAAAARw/VI-Li7cPUvM/s1600/bttp-16.png

http://1.bp.blogspot.com/_JwD5r652h00/SvDBl9PLQ7I/AAAAAAAAAR4/5fV05DNfZ9o/s400/bttp-17.png

http://3.bp.blogspot.com/_JwD5r652h00/SvDBl0UhsvI/AAAAAAAAASA/ge0GmH0HkyE/s400/bttp-19.png

http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png

After Replacing the Image-Url with your favorite button url, it should looks like this

<a href="#" id="backtotop"><img src="http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png" alt="back to top" /></a>

paste it into your template code,

Step 3

Find the following code

<head>

And paste this code after it.

&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;

and then click Save Template
And you are done.

Link Exchange

2009-12-17T10:41:00.000+07:00

Hi All... Who want to link exchange...

Do this step:

First, copy - paste this code below into your blog:

<a href="http://bloxtrix.blogspot.com/" title="Tips and Tricks Blogger"><span id="goog_1254218701080"></span>Tips and Tricks Blogger<span id="goog_1254218701081"></span></a>

Then you confirm it to me in Guest Book or commenting this post (recommended in comment)

After it, I'll be back link your Blog...

Keep Blogging

Thanxxx...

Adding Facebook Share

2009-12-15T02:21:00.000+07:00

About The Widget.

This is the official facebook sharing button and here are it’s features.

2 Styles. Button Or Link
With / without Counter.

Step 1. Get Your Code.

Go to this page click here,
And make your button ( customize it ). there are some easy options and you can check the preview button to see your button.
See the following image to see the button different styles.

After Finish you button customization, please copy your button code and go to the next step.

Step 2. Add It To Your Blogger Blog.

Log into your blogger account, and go to Layout >> Edit Html.
Before doing any thing you must check Expand Widget Templates box.
And find the next Code

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

And after it, paste your button code we made the button it in step 1
What, If you didn’t find the code above in your template, The try to find the following,

<data:post.body/>

And paste the button code Before it.
That’s It.

Auto Hide Blogger Nav Bar

2009-12-15T02:13:00.000+07:00

It’s very easy and it’s one step process and it’s all done by tweaking blogger navbar code.

Please read before adding it to your blog.

If you already applied the hack ( How To remove or hide Blogger Navbar ) to your blog, please undo it before you start.
This hack is compatible with all browsers but some times it’s not working correctly with some IE versions.
And I added a hack for the code to make the navbar work normally in case of finding any IE bugs.

Adding the code to your blog.

Please log into your blogger account.
Now navigate to Layout >> Edit html >>
and find the following code :

]]></b:skin>

And Before it, add the next one :

#navbar-iframe {
  height:5px;
  }

/* IE7, IE8, IE6 */
  #navbar-iframe { height/*\**/: 30px\9; }


#navbar-iframe:hover {
  height:40px; !important; 
  }

Now click Save Template
And You Are done.

Add Avatar to Custom Blogger Templates

2009-12-15T02:05:00.000+07:00

Hy.... all, in my previous post :
Display Your Avatar On Blogger Comments
I said that i’ll add a tutorial soon about adding avatar to your blogspot template if it’s not support or display it.

your template is acting like that because it’s a customized template, and to add the avatar to your comments you have to follow the steps in this tutorial, don’t worry it’s too easy.
Only two steps

Step 1

Log in to your blogger account and go to,
dashboard >> Layout >> Edit html
then make sure to check “Expand widget templates” box
And find the following code,

<dl id='comments-block'>

Now instead of this code past the next code.

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Note : depending on your template you may find the above code with div Instead of dl

if you found it in your template with div

then you should replace it with a div too. so you’ll add the next code.

<div expr:class='data:post.avatarIndentClass' id='comments-block'>

Step 2

Now find this code.

<a expr:name='data:comment.anchorName'/>

and exactly before it add the next code.

<a expr:name='data:comment.anchorName'/>

and exactly before it add the next code.

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' width='35px' style='margin-bottom:-2px;' />
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

now you are done.
Finally click Save Template
And now you are done, soon we’ll add some tutorials about customizing your avatar,
all comments are welcomed.

Display Your Avatar On Blogger Comments

2009-12-15T01:52:00.000+07:00

Hay... all, this must by a happy day for all blogspot users, today blogger announced new feature as part of the Blogger Birthday feature series.

And blogger called it, Show Your Face.

This feature allow you to show your profile photo next to your comment on any blogger blog post,

And you have the full control to enable or disable it.

Check out the Next image to see how it looks like.

So, How It Works?

This feature imports the photo from your profile, so if you already uploaded an image to your profile, it’ll be displayed automatically when you post a comment on a blogger blog,

But if you don’t have a profile photo, you may do it in two ways,

. Go to blogger dashboard >> and on the left sidebar you’ll see Edit Profile link, click it, and then scroll down till you see Photograph, and throw this form you can add your photo for your profile, after uploading your photo, scroll to the bottom and click Save Porfile.

. The second way to do it is to go to comment on any blogspot post, and type your comment, then don’t press Post Comment, Press Preview.
and click click Add Profile Picture. and upload your picture,
See the next Image.

Add Multi-Color Effect link On Hover

2009-12-14T20:55:00.003+07:00

Hi All, i should add some fun to my tricks so today i’ll talk about how to add Cool effect to your links when your visitors hover it.

It’s easy and one step processes.

How To Add It?

Go To you blogger dashboard, and navigate to : Dashboard >> Layout >> Edit html, And find the following code,

</head>

And exactly before it add the next code :

<script type='text/javascript'>

 //<![CDATA[

 var rate = 15;

 if (document.getElementById)
  window.onerror=new Function("return true")

 var objActive;  // The object which event occured in
  var act = 0;    // Flag during the action
  var elmH = 0;   // Hue
  var elmS = 128; // Saturation
  var elmV = 255; // Value
  var clrOrg;     // A color before the change
  var TimerID;    // Timer ID

 if (document.all) {
  document.onmouseover = doRainbowAnchor;
  document.onmouseout = stopRainbowAnchor;
  }
  else if (document.getElementById) {
  document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
  document.onmouseover = Mozilla_doRainbowAnchor;
  document.onmouseout = Mozilla_stopRainbowAnchor;
  }

 function doRainbow(obj)
  {
  if (act == 0) {
  act = 1;
  if (obj)
  objActive = obj;
  else
  objActive = event.srcElement;
  clrOrg = objActive.style.color;
  TimerID = setInterval("ChangeColor()",100);
  }
  }


 function stopRainbow()
  {
  if (act) {
  objActive.style.color = clrOrg;
  clearInterval(TimerID);
  act = 0;
  }
  }


 function doRainbowAnchor()
  {
  if (act == 0) {
  var obj = event.srcElement;
  while (obj.tagName != 'A' && obj.tagName != 'BODY') {
  obj = obj.parentElement;
  if (obj.tagName == 'A' || obj.tagName == 'BODY')
  break;
  }

 if (obj.tagName == 'A' && obj.href != '') {
  objActive = obj;
  act = 1;
  clrOrg = objActive.style.color;
  TimerID = setInterval("ChangeColor()",100);
  }
  }
  }


 function stopRainbowAnchor()
  {
  if (act) {
  if (objActive.tagName == 'A') {
  objActive.style.color = clrOrg;
  clearInterval(TimerID);
  act = 0;
  }
  }
  }


 function Mozilla_doRainbowAnchor(e)
  {
  if (act == 0) {
  obj = e.target;
  while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
  obj = obj.parentNode;
  if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
  break;
  }

 if (obj.nodeName == 'A' && obj.href != '') {
  objActive = obj;
  act = 1;
  clrOrg = obj.style.color;
  TimerID = setInterval("ChangeColor()",100);
  }
  }
  }


 function Mozilla_stopRainbowAnchor(e)
  {
  if (act) {
  if (objActive.nodeName == 'A') {
  objActive.style.color = clrOrg;
  clearInterval(TimerID);
  act = 0;
  }
  }
  }


 function ChangeColor()
  {
  objActive.style.color = makeColor();
  }


 function makeColor()
  {
  // Don't you think Color Gamut to look like Rainbow?

 // HSVtoRGB
  if (elmS == 0) {
  elmR = elmV;    elmG = elmV;    elmB = elmV;
  }
  else {
  t1 = elmV;
  t2 = (255 - elmS) * elmV / 255;
  t3 = elmH % 60;
  t3 = (t1 - t2) * t3 / 60;

 if (elmH < 60) {
  elmR = t1;  elmB = t2;  elmG = t2 + t3;
  }
  else if (elmH < 120) {
  elmG = t1;  elmB = t2;  elmR = t1 - t3;
  }
  else if (elmH < 180) {
  elmG = t1;  elmR = t2;  elmB = t2 + t3;
  }
  else if (elmH < 240) {
  elmB = t1;  elmR = t2;  elmG = t1 - t3;
  }
  else if (elmH < 300) {
  elmB = t1;  elmG = t2;  elmR = t2 + t3;
  }
  else if (elmH < 360) {
  elmR = t1;  elmG = t2;  elmB = t1 - t3;
  }
  else {
  elmR = 0;   elmG = 0;   elmB = 0;
  }
  }

 elmR = Math.floor(elmR).toString(16);
  elmG = Math.floor(elmG).toString(16);
  elmB = Math.floor(elmB).toString(16);
  if (elmR.length == 1)    elmR = "0" + elmR;
  if (elmG.length == 1)    elmG = "0" + elmG;
  if (elmB.length == 1)    elmB = "0" + elmB;

 elmH = elmH + rate;
  if (elmH >= 360)
  elmH = 0;

 return '#' + elmR + elmG + elmB;
  }

 //]]>

 </script>

Now Click Save Template

And you are done.

Customize.

You can change this value

var rate = 15;

in the above code to control the speed of color transformation by increasing or decreasing the number 15

Blogger Recent Post Widget with Thumbnail

2009-12-14T20:26:00.000+07:00

If your blog have long posts and you want to help your visitors to find your recent posts quickly, with out spending time browsing you blog searching for your older posts.
you’ll definitely like this widget and you’ll add it to your blog sidebar.

Widget Features

This widget have a lot of customizations and you can:

Change Widget Title
Control Widget Height
Change the feed Blog Url, you can grab the posts from another blog
Display post thumbnails
Display post summaries
Adjust post Summary length
Display post date
Display the number of comments
Display the Read more link
Display a Separator b/w the posts

How To set up this widget

It’s very easy to setup this widget,
Please go to your blogger account, And click layout, on the Page Elements page, please click Add A Gadget on your sidebar,

In the new opened window you’ll find a search bar, please insert the following keyword and hit enter “recent posts with thumbnails”,
then in the results you’ll find a widget called : recent posts advanced
then click on ( add ) icon and make sure to click the add icon that next to recent posts advanced widget.

And on the next page, please customize you widget, and once you finish please click Save

Add MP3 Player (Music Background) for Blogger

2009-12-14T16:45:00.000+07:00

Aloha all, Lets see how to add cool and simple mp3 music player to blogger ( blogspot blogs ). it’s presented by mixpod
It’s the best one yet because you can choose you style from more than +20 styles, and you can also customize it, you can manage your play list and add any file you want from url or from the site database. it’s awesome choice so lets see how to do it.

First Of All

You need to register a free account at mixpod it won”t take you 2 minutes, then log in to your account and lets go.

Step 1. Choosing your mp3 style

Go to mixpod by clicking here
And choose your favorite style from over 20 different styles. then click on Create A Playlist

Step 2. Creating your play list

There are two ways to add you favorite music and songs

Search the site database, it’s easy and I think you’ll find what you are looking for.
Add new music file by adding it’s URL.

Step 3. Saving your playlist and Getting the code

Just give your Playlist a name and hit the button “ Save ( Get Code ) ”

Step 4. Adding it to your blog.

Now you’ve got the code, go to your blogger account dashboard, and navigate to Layout, and on your sidebar click add a gadget. and choose HTML/JavaScript Add
then paste your player code and click Save