Blogger Reply Option Like Wordpress

B Share

If you Are using blogger platform for your blog than during some stage of your blogger life you must have noticed that blogger does not have Reply option to it comments.This is one of the major reason why people migrate towards Disqus or IntenseDebate comment Platform.
I suggest you to read this - Readers can't comment on your blog - Tip For You

With a very little change to your template you can add this hack to your blog.
This hack was originally posted on thisischen

ScreenShot :

Adding Comment Replies to your blog.

Step [1] In your dashboard Click 'Layout' > 'Edit Html'> Tick the 'Expand Widget templates' box.



Adding Comment Replies to your blog.

Step [1] In your dashboard Click 'Layout' > 'Edit Html'> Tick the 'Expand Widget templates' box.

Step[2] Find the following code in your blogs Html :


<data:commentPostedByMsg/>

Step[3]. Paste the following code Directly Below/After


<data:commentPostedByMsg/>


<span class='comment-reply'><a expr:href='"https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&postID=" data:post.id "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" data:comment.anchorName "%22%3E" data:comment.author "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450"); return false;'>[Reply to comment]</a></span>

Important !
In order to make this work you must add your blog Id .
What is your blog ID??
Simply go to your layout page, posting page or any of the pages and copy your I.D. from the address bar at the top of the page.

Replace [Reply to comment] With text of your choice like [Reply] or [reply back] OR you can add image instead of text By adding only image tag Like


<img border="0" src="http://2.bp.blogspot.com/_nqp-0VCwy0c/S_OfySBzXrI/AAAAAAAABIo/xs7lK1AOeJw/s320/reply-r.png" />

Make Post Titles Non Clickable Inside The Posts

B Share

As you might have noticed that the Title Links of the posts on my blog are not clickable when you open any post. This is done so that we don't violate the TOS of google adsense, if you planning to place ads under the Title Text. This tutorial will teach you how to achieve it in minimal steps. I assume that you know the basics of editing the theme and templates.

Code Box For Bloggers

B Share

I got few mails from my readers asking me to share How did I designed this blog and share the tips. So I will start with the Professional Looking Code Box. This tutorial assumes that you have at least little bit knowledge of working around with templates.

How To Add A Flash File In Blog

B Share

We are going to give a new year suprise gift to our friendz is that most of the very efficient bloggers know how to design their post and rest of the other are also efficient in flash but they didn't know how to add a flash file in blog's but these new year ur are going to have a creative blast in ur side bar or header by putting a flash file in your blog's with simple tutorial .........

How to add a flash file tutorial

If you want to post a Flash Banner on Blogspot, you can do it easily by following instructions below:

1. Make a Flash banner (.swf file) with Flash Studio or Flash Banner Maker software, for example Flash Intro and Flash Banner Maker at http://www.aleosoft.com

2. Upload the generated Flash SWF file to any web host, and get the URL address of the Flash SWF file. If you don't have a web host, you can upload your flash files on Google pages , Photobucket and Fileave for FREE.

• Open http://pages.google.com , sign in with your Gmail account. Check the option "I agree to the terms", click the button "I am ready to create my pages" below, and login.
• Click the link "Back to Site Manager" on the top left corner, and goto the Site Manager Home.

• Click "Upload" button on the right side, then browse and select the Flash SWf file on your local hard disk, upload it.
• Now, the uploaded file will be listed in the "Uploaded stuff".

3. Now you have uploaded the Flash SWF file to Google Page and other you should get the URL address of the SWF file and note it. In Internet Explorer, you can simply click the file, open it with IE, and copy the link address in the address bar. If you are using Firefox, you may right click on the file, in the popup menu, click "Copy Link Location", and get the link address. The link address should look like http://kevinleo2008.googlepages.com/myflash.swf

4. Now, the final step. You need to include the Flash banner to your Blogger post.

• Open your blogger editor then add the following Url code to any of the sections in your post.

• Open your blogger editor then add the following Url code to blog Header

• Open your blogger editor then add the following Url code to blog Header

• Then put the swf file url codes here
  

• After putting the url code then click to save you are done and you will get something like
  this.
  

Blogger Light Box Widget

B Share

Today i’ll write a tutorial about adding Updated and fixed lightbox widget for blogger. And I WISH it’ll be easy and you’ll like it.

What’s New About This Widget

• First of all we add the widget code to our template,
• You’ll be able to Link this widget to your single images in blogger.
• You can use it to make photo gallery.
• You can make Slide show with it.
• You can add it to your links.

How Is It Work

• First of all we add the widget code to our template,
• Then when we add an image to a new post we have to Link it to the widget by adding a tiny code to it by changing the post writing mode from compose to html don’t worry it’s easy, continue reading to figure it out

Step 1

GO to your blogger account dashboard and navigate to Layout >> Edit html and find the following code.</head>

And Before it add the following code.

<!--Code-By-TutZone1-->
<link href='http://www.mydatanest.com/files/tutzone1/32404_syskn/Blogger%20Light%20Box%20Widget.txt' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.mydatanest.com/files/tutzone1/32405_3g94u/blbw.txt' type='text/javascript'/>
<!--Code-By-TutZone1-->




Step 2 – How To Use

The way to make this widget works in your blog is very easy but you have to know what you do,
What you have to do is : add a small code to the images code. and you can find the images code in post writing area when you change the mode from compose to edit html Please see the next image.

What And How To Add :

Step 2.1 – Add It To Single Image

Go to blogger account, start writing your post in normal mode (compose)
And once you add an image to your post, please change your mode to edit html, see previous imsge

You’ll find the image code looks like the following.


<img style="cursor: pointer; width: 200px; height: 150px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.jpg" alt="" id="BLOGGER_PHOTO_ID_5409505597205757282" border="0" />


What we’ll need to add for this code is the next part

rel="lytebox"

Example Code For Single Image :

<a rel="lytebox" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 200px; height: 150px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.jpg" alt="" id="BLOGGER_PHOTO_ID_5406207422236379378" border="0" /></a>


• And you are done.

Step 2.2 – How To Make Photo Group Gallery

We’ll do the same as the previous step, but instead of adding Only

rel="lytebox"

we’ll have to add a name for this code so it’ll be

rel="lytebox[group]"

when you add this code for more than one image, all the images will open as a group.

Example Code For Images Album :


<a rel="lytebox[group]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

<a rel="lytebox[group]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>


Step 2.2 – How To Make A Slide Show

Instead Of adding

rel="lytebox[group]"

We’ll add

rel="lyteshow[group]"


Example Code For Slide Show :


<a rel="lyteshow[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>


<a rel="lyteshow[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcIxHb-_kE3zTGX_uoerUBZrq5gQr1xmOvjl9xuAurWELlmMqmAsJW5erK02ots9Aq6DXOiai809Eui0iTilno1zHXrCciwhxkWoZMDZc0mo8YqZ_JAFKqrG4ig5HLT9BcUZErNPfsDvD2/s200/Winter.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>




Step 2.3 – And You Can Add It To Links

The normal link code looks like this

<a href="http://www.google.com" title="Search Google"rev="width: 400px; height: 300px;">Google Search</a>


We’ll add the following Code to it.

rel="lyteframe"


So The Code will be

<a rel="lyteframe" href="http://www.google.com" title="Search Google"rev="width: 400px; height: 300px;">Google Search</a>


And you can apply the same settings for slide show and photo groups for the links.

Blockquote With Auto Number List - The Note Book Diary Style

B Share

I shared a tutorial yesterday on 14 amazing ways to stylize Blogger Blockquote and today I have a really interesting and exceptional blockquote for those who write tutorial based articles on their blogs and websites. I have created two blockquotes, the first one has no number list while the second one comes with automatic number list and looks like your notebook diary. The number list starts at #1 and end at #112. Both of these blockquotes can easily be customized to suit your web layout.

So let’s have a look at each one of them first.

Blockquote With Auto Number List:

Blockquote Without Number List:

Liked the difference? Now let’s learn how to add each one of them to your Blogger Blogs.

Adding Blockquote With Auto Number List To Blogger

To add this blockquote to blogger, follow the simple steps below,

1. Go to Blogger > Layout > Edit HTML
2. Backup your template
3. Search for .post blockquote and delete it along with all its occurrences. In most templates the codes look like this,

.post-body blockquote { line-height:1.3em; }OR.post blockquote{ bla bla bla}


1. If you couldn’t find such code then it is OK.
2. Now search for ]]> and just above ]]> , paste the code below,


blockquote {

background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD4p-KZ9uUFxfFTrU0YXe5_fGZFNIOsJ6nFK9pHYxdRrlOzyC3ahx9pbDrAb2aXB9vc7QjQHmUPT8Gc_9fOLSUAa-q5OXPp4By5WYBL12TVDRrF1mx2hC-oYSo0cOWFuj5AkPTIOt0hBQ/s1600/notebook-with-numbers.gif) repeat-y;

margin: 0 20px;
padding: 0px 20px 5px 55px;
color:#7a7a7a;
font: bold 0.9em "Comic Sans MS", verdana;
line-height: 153%;
}
blockquote p {
margin: 0;
}


Customization:-

You can also change the Number list background by replacing the bolded image link in the code above with the image URLs of one of these blockquotes.

Tip:- Right Click the links below each blockquote and choose Save Link As Or Copy Link Location to its image URL.

Blockquote with Yellowish Number List & Dark Brown Background

Blockquote with Greenish Number List & Dark Background

Blockquote with a soft touch

font :- It includes font style, size and type respectively. Match the colours with the code above for reference. Font style can be bold, normal , italic or bold italic

color :- This refers to text colour. You can use a different font colour using color chart

Adding Blockquote with No Number List To Blogger

To add this blockquote simply follow the same steps as shared for the blockquote with auto number list. But for step#4 paste the code below instead,


blockquote {

background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif79XUbJR8VykrnrXbMpVERW1rzLM1Imb3IOp6i7jruwt5Ej3vYlt1CF9SnbzgzYoEEedW__ga7uzhTBh7KJCn8C6kyXed7wrwgcBMGeIO73LVW4HEeUkAvMInTHOq8sqkqmipMEx2TY8/s400/notebook.gif) repeat-y ;

margin: 0 20px;
padding: 20px 20px 20px 55px;
color:#7A7A7A;
font: bold 0.9em "Comic Sans MS", verdana;
line-height: 155%
}
blockquote p {
margin: 0;
}


You can replace the Background Image link with one of these.

Tip:- Right Click any of the blockquote images below and choose Save Link As Or Copy Link Location to get its image URL.

That’s All!

Note:- If you want to increase the number range for the blockquote with auto number list or if you want to create an image with your custom colours than I can provide you the PDF source file for it. But it will be given to subscribers only. If you haven’t subscribed yet, kindly do so to avail unlimited download resources from us to you.

Let me know how was this new discovery :>>

Customized The Color of Word Press MP3 Player

B Share

Wordpress Audio player is a beautiful mp3 player and thanks to Mindy McAdams we can now actually make it work in blogger and can even change the entire colour scheme of this mini player! I hope you already now how to make it work with blogger if not read this post –> Flash Mp3 Player

Today I will let you know how to change the colour scheme of both versions of these useful mp3 players. Before we may begin check my customized player below,

This tutorial again consists of two parts,

1. Adding the JavaScript Inside Blogger
2. Adding The HTML Code For Mp3 Player To Appear

I have already explained both these parts in my previous post but this time we will work only on the second part i.e Adding The HTML Code For Mp3 Player To Appear

The HTML Code for our simple Mp3 Players looks like this,

<object type="application/x-shockwave-flash" data=http://tutzone.fileave.com/player.swf id="audioplayer1" height="24" width="290">
<param name="movie" value=http://tutzone.fileave.com/player.swf>
<param name="FlashVars" value="playerID=1&soundFile=URL of your MP3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent"></object>

And The HTML Code For Our New Customized Mp3 Will look like this,


<object type="application/x-shockwave-flash" data=http://tutzone.fileave.com/player.swf id="audioplayer1" height="24" width="290">
<param name="movie" value=http://tutzone.fileave.com/player.swf>
<param name="FlashVars" value="playerID=audioplayer1&
bg=0xf8f8f8&
leftbg=0xeeeeee&
lefticon=0x666666&
rightbg=0xcccccc&
rightbghover=0x999999&
righticon=0x666666&
righticonhover=0xffffff&
text=0x666666&
slider=0x666666&
track=0xFFFFFF&
border=0x666666&
loader=0x9FFFB8&
loop=no&
autostart=no&
soundFile=URL of your MP3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object&gt

The Green part is the portion responsible for the color scheme. View the image below to understand each code,

where,

rightbghover=0x999999& and righticonhover=0xffffff& refers to the color change on mouse hover. The red part in between the green text is the hexadecimal colour code. To change the colors according to your preferences use colour chart

Customization

This is the most important part and I want your full concentration here. You can observe that the green part is the main portion consisting of 12 options to change the color scheme of the Mp3 player. Once you have finalized all your colors using CSS Color Chart there is only one thing required to successfully dress up this player. You observe that the green portion of the code looks like this,

bg=0xf8f8f8&
leftbg=0xeeeeee&
lefticon=0x666666&
rightbg=0xcccccc&
rightbghover=0x999999&
righticon=0x666666&
righticonhover=0xffffff&
text=0x666666&
slider=0x666666&
track=0xFFFFFF&
border=0x666666&
loader=0x9FFFB8&
loop=no&
autostart=no&


You need to align all this vertical code into a single line like this,

bg=0xf8f8f8&leftbg=0xeeeeee&lefticon=0x666666&rightbg=0xcccccc&rightbghover=0x999999&righticon=0x666666&righticonhover=0xffffff&
text=0x666666&slider=0x666666&track=0xFFFFFF&border=0x666666&
loader=0x9FFFB8&loop=no&autostart=no&

Now your code will look like this,

<object type="application/x-shockwave-flash" data=http://tutzone.fileave.com/player.swf id="audioplayer1" height="24" width="290">
<param name="movie" value=http://tutzone.fileave.com/player.swf>
<param name="FlashVars" value="playerID=audioplayer1&bg=0xf8f8f8&leftbg=0xeeeeee&lefticon=0x666666&rightbg=0xcccccc&rightbghover=0x999999&righticon=0x666666&righticonhover=0xffffff&text=0x666666&slider=0x666666&track=0xFFFFFF&border=0x666666&loader=0x9FFFB8&loop=no&autostart=soundFile=URL of your MP3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>


Make sure you replace URL of your MP3 with the link of your Mp3 file. For example the URL for my Mp3 file looks like this,

Ali Maula (Remix) Mp3

Some Players With Different Flavors

Masked Red


<object type="application/x-shockwave-flash" data="http://tutzone.fileave.com/player.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://mustafastc.fileave.com/player1.swf"> <param name="FlashVars" value="playerID=audioplayer1&bg=0xffffff&leftbg=0xFF0000&lefticon=0xffffff&rightbg=0xFFCCCC&rightbghover=0xFF0000&righticon=0xffffff&righticonhover=0xffffff&text=0xFF0000&slider=0xffffff&track=0xFF0000&border=0xFF0000&loader=0xFF6666&loop=no&autostart=no&soundFile=URL Of Your Mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>


Masked Purple


<object type="application/x-shockwave-flash" data="http://tutzone.fileave.com/player.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://mustafastc.fileave.com/player1.swf"> <param name="FlashVars" value="playerID=audioplayer1&bg=0xffffff&leftbg=0x660033&lefticon=0xffffff&rightbg=0xC74988&rightbghover=0x660033&righticon=0xffffff&righticonhover=0xffffff&text=0x660033&slider=0xffffff&track=0x660033&border=0x660033&loader=0x660033&loop=no&autostart=no&soundFile=URL OF Your Mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>


Masked Black

<object type="application/x-shockwave-flash" data="http://tutzone.fileave.com/player.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="http://mustafastc.fileave.com/player1.swf"> <param name="FlashVars" value="playerID=audioplayer1&bg=0xffffff&leftbg=0x000000&lefticon=0xffffff&rightbg=0xcccccc&rightbghover=0x999999& righticon=0xffffff&righticonhover=0xffffff&text=0x000000&slider=0x666666&track=0x000000&border=0x000000&loader=0xffffff&loop=no&autostart=no&soundFile=URL OF Your Mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> </object>


Customized Bullet List Style With Image Hover Effect In Blogger Platform

B Share

Today we will learn how to change the bullet list using the

Image Hover effect. Hover your cursor over the bullet list below to see the effect.

• Isn’t the image turning green from shiney yellow?

• Liked it? Now learn it!

• Blogger > Layout > Edit HTML

• Search For]]></b:skin>

• and just above]]></b:skin> add the code below, (Tip:- Press Ctrl + F)


.post ul {list-style:none;
}
.post ul li {

line-height: 1.4em;

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7HzHg6ROzX0mUh9tJBqQf-7DM3fCxpiMR5vTGhkVE023un_bWCOBSxhfOL56YyMFgSrHLDnXlrBB6fyuMVsET6LzrmKgsjnaxsxCVsQun2VNbW9LgccoUY5QU_wa44NjWFHvMk5cct8o/s400/265.gif) no-repeat scroll 0px 4px;
margin: 0.3em 0;

padding: 0 0 0.8em 20px;
}
.post ul li:hover {

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSBKMJ5pS3_O_Ny2IXwFbPvSPTq6Yr8p-PgQo3_hoN0vPTm2HYBR_nGhKBYXZ7T-sarV52aVo5kvRO87lh4w4-VPy-U1JjsmN0X10yzAOShAkv7c6n7VY90l-F11C9Kxm1olcPgHacyV0/s400/261.gif) no-repeat scroll 0px 4px;
}


• Save Your Template and you are done!

Customization

The bullet image can be aligned horizontally with the text by increasing or decreasing the value 4px. You can change the value to 7px or more or less according to your blog alignment requirement.

You can also replace the bullets above with your own. To get a bullet of your own choice download up to 231 seductive bullets by subscribing to this blog.

Note:- Subscribers have already been emailed the Download copy

Once you have selected your preferred bullet simply upload it to blogger and replace the above two links (Green and Blue) with the URLs of your own bullets.

Multi Tab Widget For Blogger Users

B Share

Multi tab Widget is a must widget for every blog may that be wordpress hosted blog or Blogspot/Blogger. It helps to decrease the load time of a blog by combining three or more than three widgets into one! .You might have seen this widget on every blog and even on my blog (look at the sidebar) but the question is how do you add it? Well If you go and search in Google on how to add a multi tab widget to your blog you will land on various blogs with several tutorials but believe it or not, disappointment is what you will get in return. Now why is that?

This widget looks cool only if coded with CSS and JavaScript. Several blogs share different tutorials but unfortunately most of these tutorials are either very difficult to understand or they are written in a technical language that a newbie can’t understand. Moreover the codes that they offer are pretty lengthy which increase the load time of your homepage and often the widget doesn’t seem to work in browsers like Internet Explorer. And the worst part is that some bloggers who share this trick often add their blog link to the widget code and when you view that widget in your blog, at the bottom of that widget you will find this “ Widget by XYZ.com” or “Grab This Widget”. This link is surely injustice with the reader. In short give preference to anything which is easy to understand, interesting and which may give a professional look to your blog not a Grab this widget look.

Now how come my widget be very different. As I have mentioned in my About Me page that I am not an HTML or JavaScript expert but I have learnt the art of editing my template through trial and error. I read blogs day and night and when some blog catch my attention I start playing with its template via its Source File, which shows all their template coding in HTML, XML and CSS Language. Hence I have stolen many hidden and secret codes :D and thus I am ready to share those codes with you. Don’t worry I will never add a Grab this widget link to any widget that I share.

UPDATE:-

Most of you complained that the tabs are not working/clickable. I was amazed too because this widget was working perfectly alright in all my test blogs. Then how come its not working in your blogs? Well the answer was simple than I could imagine.

This widget uses a JavaScript which is responsible for making the tabs clickable. I saved this widget in Google sites and link it to this widget. This was the mistake that I commit. Google sites offers limited bandwidth and is far slow to respond than you can imagine. Hence when you guys would add this widget to your blog, the JavaScript would not load, as a result leading to static tabs.

Fortunately I have updated this post with all necessary steps to take. You will have to add the JavaScript directly to your blogger templates. Doing this will improve the widget performance and will also reduce your page load time. This update will solve all your problems!

Follow the Steps Below,

Go To Blogger > Layout > Edit HTML

Search for

And Just above paste the code below,

<script type='text/javascript'>

//<![CDATA[

function tabtampil_oom(TPID, id)

{
var Tabtampil = document.getElementById(TPID);
var TTs = Tabtampil.firstChild;
while (TTs.className != "TTs" ) TTs = TTs.nextSibling;
var TT = TTs.firstChild;
var i = 0;

do

{
if (TT.tagName == "A")

{
i++;

TT.href = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";
TT.className = (i == id) ? "Active" : "";
TT.blur();
}
}

while (TT = TT.nextSibling);
var Halamans = Tabtampil.firstChild;
while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
var Halaman = Halamans.firstChild;
var i = 0;

do

{
if (Halaman.className == 'Halaman')

{
i++;

if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";

Halaman.style.overflow = "auto";
Halaman.style.display = (i == id) ? 'block' : 'none';

}
}
while (Halaman = Halaman.nextSibling);
}
function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);
}
function tabtampil_inisial(TPID) { tabtampil_oom(TPID, 1);

document.write('');}
//]]>
</script>



Save your template

Adding the code for Multi Tab widget to HTML/JavaScript widget

The Code for Our Multi Tab Widget looks like this,

<style type="text/css">

div.TabTampil div.TTs

{height: 24px; overflow: hidden; }

div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active

{ background-color: #eee; }

div.TabTampil div.Halamans

{ clear: both; border: 1px solid #fff; overflow: hidden; background-color: #ffffff;}

div.TabTampil div.Halamans div.Halaman

{ height: 100%; padding: 0px; overflow: hidden; }

div.TabTampil div.Halamans div.Halaman div.Alas

{ padding: 3px 5px; }

div.TabTampil div.TTs a

{ border-left:1px solid #eee; border-right:1px solid #eee; border-top:1px solid #eee; border-bottom:0px solid #eee; float: left;

display: block; width: 95px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;

font-size: 11px; font-weight: 900; color: #000000}

</style>

<form action="tabtampil.html" method="get">

<div id="TabTampil" class="TabTampil">

<div style="width: 300px;" class="TTs"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a></div>

<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>

Tab 1 content goes here

</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>

Tab 2 content goes here

</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>

Tab 3 content goes here

</div>
</div>
</div>
</div>
</div></form>

<script type="text/javascript">tabtampil_inisial('TabTampil');</script>




Things To Note:

#eee : This is the background colour of the Tabs. The Default one is grey. If you want to change it to a different colour of your choice then use Embeddable Colour Chart

#fff : This is the colour of the border of your multi tab widget. The default one is white you can customize it to a colour of your choice using the same colour chart mentioned above.

#ffffff : This is the background colour of the main body of your widget. This is where you will add content to the widget. The default one is white. Use Colour Chart if you wish to use a different colour.

#eee : This is the colour of the borders around those rectangular tabs. The default one is grey. Use MBT Colour Chart if you wish to use a different colour.

#000000 : This is the colour of the text/font that you will write to name your tabs. In other words, it’s the colour of your tab titles. The default one is black.

Replace these with your tab titles

Tab 1 , Tab 2 , Tab 3

Replace these with your widget codes.

Tab 1 content goes here , Tab 2 content goes here , Tab 3 content goes here

Here goes the codes of your content/widgets, which can be your recent comments widget, recent posts widget, any written text, a picture etc. For example, to add a recent comments widget to the first tab, name Tab 1 as Comments and replace Tab 1 content goes here with the HTML code of your recent comments widget.

Adding the Multi Tab Widget To your Blog

After you have customized the code, do the following,

• Log into your blogger account
• Go to Layout > Page Elements

• Click on Add a Gadget

• Then Choose HTML/JavaScript Widget from the widget list that blogger provides

Now paste your customized code into this widget by leaving the title empty. Hit Save and You are Done! Check your blog to see the new dress :)

That’s All!

Feel free to ask or suggest. Your questions and suggestions are the only favour I get in return.

Multi - Color Link Hover Effect

B Share

You must have observed how my hyperlinks change color on mouse hover. Normally on mouse hover only a single color change is seen but thanks to Dynamic Drive we can now easily change the color of our links to several colors. I have modified the code a bit for simplicity. This tutorial is really simple to follow and uses a JavaScript which we will save inside Blogger so there will be no external linking at all. Let’s start now,

To add this Flashing Link effect to your blogs do the following,

1. Go To Layout > Edit HTML
2. Search For
3. And just above paste the code below,


<script type='text/javascript'>

//<![CDATA[

var rate = 20;

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>

You can change the value of var rate = 20. This controls the speed with which links change color.

That’s All!

Preview Your Templates To see The New Change.

12 Useful Tips To Reduce Your Blog Load time

B Share

Almost every newbie blogger fails when it comes to reducing blog load time. Most of the tutorials that are available on reducing the time taken for a website to load are often un-clear or incomplete. We decided to share our way of solving this problem. Below are 11 really interesting and important tips to decrease the load time of your blogs by almost 90%.

1. Link To All images Inside Your Template From Blogger

   I shared an important tip tomorrow about creating an Image Backup in Blogger and then Linking to All Images From there. Most of you use templates that are not officially provided by Blogger. These templates often contain images that are saved on services like tinypic or photobucket. When your blog loads the browser has to connect to all servers which link to your images, as a result leading to immense delay in the loading time of your blog. What you must do is replace all such images with those that you have saved inside blogger as explained in the my previous post. The advantage of doing so will be this that the browser will need to connect only to blogger while loading your images. Thus saving time.

2. Save All Images in GIF or PNG Format

   GIF stands for “Graphics Interchange Format” and PNG stands for “Portable Network Graphics” Both these formats are well compressed, smaller in size and widely supported by all browsers. But if size is concerned PNG compresses far better than GIF. In typical cases up to 5-25%. There are some transparency issues with PNG in IE6 but since IE7 is widely used these days, transparency is nor more an issue. Using any of these image formats will tremendously reduce the load time of your blogs by 60% i.e 70-90KB The size is an approximate for my blog and true size depends on the number of images you use.

3. Give Proper Dimensions To Images

   Giving each image a specific width and height will make it easy for the browser to load the image quickly. Always decrease the size of an image if the original size is larger. The general HTML code for an image looks like the one below,


<img width=”” height=”” src=”URL Of Image” />


1. The width and height will require a value in pixels. One pixel equals a dot on the screen. A Full size image on my blog will have a width=”590px” and height can be as long as I want. 590px almost equals the width of my posts. Hope that gives you an idea on how to choose width and height values for your images. Browsers find it easy to load images whose dimensions are specified. Make sure you make it your habit to specify a proper size for your images. If you use Windows Live Writer your life will become far easy.

2. Don’t Use An Image As A Background

   If you are using any image as a background then kindly remove it. A background Image repeats itself horizontally and vertically and is responsible for 50% slow load time. Just remove it and see the difference. To remove a background image simply find this CSS code inside your template, (Tip:- Its located just at the top of your blog. Simply search for body)


body { background: #7AA1C3 url(http://xyz.com/blabla.jpg);
width: 980px;
color: #333;
font-size: 14px;
font-family: Georgia;
margin: 0 auto 0;
padding: 0; }


1. This code will look different in your template but you should be concerned only with the bolded black text. Simply Delete url(http://xyz.com/blabla.jpg) and save your template. Give a simple color to your background. #7AA1C3 refers to Background Color. You can change it by using my Hexadecimal Color Chart

2. Save All JavaScript Inside Blogger

   Why should you link to external sites for storing your JavaScript whilst you can easily save it in Blogger! Save All your JavaScript codes inside your templates just above using the code below,
   

<script type='text/javascript'>
//<![CDATA[
Paste Your JavaScript Code Here
//]]>
</script>


1. The bolded text is where you must paste the JavaScript code that you use in your template by linking to an external site.

Word Press MP3 Player For Blogger

B Share

Updated Post On Readers Demand

I am pretty excited to share the trick of adding one of the best flash players to your blog. This player is different from rest of the Mp3 players found elsewhere. It is simple in design, supports music with a high range of frequencies and most importantly works with all browsers.
Adding this player will add a pro look to your blog because many bloggers don’t know about this player as yet, so be the first to use it. Many bloggers also think that this audio player works with WordPress only but with a little tweaking I will help you add this player successfully to your BlogSpot blogs.

This is how your cool flash player would look like,



To add this player to your blog post or sidebar, do the following,

Go to Layout > Edit HTML >

To add this player to your blog post or sidebar, do the following,

Go to Layout > Edit HTML >

Backup your template >

Press Ctrl + F and look for</head> by using the search box,

Immediately above</head> tag add this code,

Tip of Copying the Code Below:- Start Highlighting the Code from bottom to top and then Press Ctrl + C to copy it. To Paste it above simply press Ctrl + V

That’s it

<script type='text/javascript'>

//<![CDATA[

var AudioPlayer=function(){var F=[];var C;var E="";var A={};var D=-1;function B(G){return document.all?window[G]:document[G]}return{setup:function(H,G){E=H;A=G},getPlayer:function(G){return B(G)},embed:function(K,O){var I={};var M;var G;var P;var H;var N={};var J={};var L={};for(M in A){I[M]=A[M]}for(M in O){I[M]=O[M]}if(I.transparentpagebg=="yes"){N.bgcolor="#FFFFFF";N.wmode="transparent"}else{if(I.pagebg){N.bgcolor="#"+I.pagebg}N.wmode="opaque"}N.menu="false";for(M in I){if(M=="pagebg"||M=="width"||M=="transparentpagebg"){continue}J[M]=I[M]}L.name=K;L.style="outline: none";J.playerID=K;audioplayer_swfobject.embedSWF(E,K,I.width.toString(),"24","9",false,J,N,L);F.push(K)},syncVolumes:function(G,I){D=I;for(var H=0;H<F.length;H++){if(F[H]!=G){B(F[H]).setVolume(D)}}},activate:function(G){if(C&&C!=G){B(C).close()}C=G},load:function(I,G,J,H){B(I).load(G,J,H)},close:function(G){B(G).close();if(G==C){C=null}},open:function(G){B(G).open()},getVolume:function(G){return D}}}()/* SWFObject v2.1 <http://code.google.com/p/swfobject/>

Copyright (c) 2007-2008 Geoff Stearns, Michael Williams, and Bobby van der Sluis

This software is released under the MIT License <http://www.opensource.org/licenses/mit-license.php>

*/
var audioplayer_swfobject=function(){var b="undefined",Q="object",n="Shockwave Flash",p="ShockwaveFlash.ShockwaveFlash",P="application/x-shockwave-flash",m="SWFObjectExprInst",j=window,K=document,T=navigator,o=[],N=[],i=[],d=[],J,Z=null,M=null,l=null,e=false,A=false;var h=function(){var v=typeof K.getElementById!=b&&typeof K.getElementsByTagName!=b&&typeof K.createElement!=b,AC=[0,0,0],x=null;if(typeof T.plugins!=b&&typeof T.plugins[n]==Q){x=T.plugins[n].description;if(x&&!(typeof T.mimeTypes!=b&&T.mimeTypes[P]&&!T.mimeTypes[P].enabledPlugin)){x=x.replace(/^.*\s+(\S+\s+\S+$)/,"$1");AC[0]=parseInt(x.replace(/^(.*)\..*$/,"$1"),10);AC[1]=parseInt(x.replace(/^.*\.(.*)\s.*$/,"$1"),10);AC[2]=/r/.test(x)?parseInt(x.replace(/^.*r(.*)$/,"$1"),10):0}}else{if(typeof j.ActiveXObject!=b){var y=null,AB=false;try{y=new ActiveXObject(p+".7")}catch(t){try{y=new ActiveXObject(p+".6");AC=[6,0,21];y.AllowScriptAccess="always"}catch(t){if(AC[0]==6){AB=true}}if(!AB){try{y=new ActiveXObject(p)}catch(t){}}}if(!AB&&y){try{x=y.GetVariable("$version");if(x){x=x.split(" ")[1].split(",");AC=[parseInt(x[0],10),parseInt(x[1],10),parseInt(x[2],10)]}}catch(t){}}}}var AD=T.userAgent.toLowerCase(),r=T.platform.toLowerCase(),AA=/webkit/.test(AD)?parseFloat(AD.replace(/^.*webkit\/(\d+(\.\d+)?).*$/,"$1")):false,q=false,z=r?/win/.test(r):/win/.test(AD),w=r?/mac/.test(r):/mac/.test(AD);/*@cc_on q=true;@if(@_win32)z=true;@elif(@_mac)w=true;@end@*/return{w3cdom:v,pv:AC,webkit:AA,ie:q,win:z,mac:w}}();var L=function(){if(!h.w3cdom){return }f(H);if(h.ie&&h.win){try{K.write("<script id=__ie_ondomload defer=true src=//:><\/script>");J=C("__ie_ondomload");if(J){I(J,"onreadystatechange",S)}}catch(q){}}if(h.webkit&&typeof K.readyState!=b){Z=setInterval(function(){if(/loaded|complete/.test(K.readyState)){E()}},10)}if(typeof K.addEventListener!=b){K.addEventListener("DOMContentLoaded",E,null)}R(E)}();function S(){if(J.readyState=="complete"){J.parentNode.removeChild(J);E()}}function E(){if(e){return }if(h.ie&&h.win){var v=a("span");try{var u=K.getElementsByTagName("body")[0].appendChild(v);u.parentNode.removeChild(u)}catch(w){return }}e=true;if(Z){clearInterval(Z);Z=null}var q=o.length;for(var r=0;r<q;r++){o[r]()}}function f(q){if(e){q()}else{o[o.length]=q}}function R(r){if(typeof j.addEventListener!=b){j.addEventListener("load",r,false)}else{if(typeof K.addEventListener!=b){K.addEventListener("load",r,false)}else{if(typeof j.attachEvent!=b){I(j,"onload",r)}else{if(typeof j.onload=="function"){var q=j.onload;j.onload=function(){q();r()}}else{j.onload=r}}}}}function H(){var t=N.length;for(var q=0;q<t;q++){var u=N[q].id;if(h.pv[0]>0){var r=C(u);if(r){N[q].width=r.getAttribute("width")?r.getAttribute("width"):"0";N[q].height=r.getAttribute("height")?r.getAttribute("height"):"0";if(c(N[q].swfVersion)){if(h.webkit&&h.webkit<312){Y(r)}W(u,true)}else{if(N[q].expressInstall&&!A&&c("6.0.65")&&(h.win||h.mac)){k(N[q])}else{O(r)}}}}else{W(u,true)}}}function Y(t){var q=t.getElementsByTagName(Q)[0];if(q){var w=a("embed"),y=q.attributes;if(y){var v=y.length;for(var u=0;u<v;u++){if(y[u].nodeName=="DATA"){w.setAttribute("src",y[u].nodeValue)}else{w.setAttribute(y[u].nodeName,y[u].nodeValue)}}}var x=q.childNodes;if(x){var z=x.length;for(var r=0;r<z;r++){if(x[r].nodeType==1&&x[r].nodeName=="PARAM"){w.setAttribute(x[r].getAttribute("name"),x[r].getAttribute("value"))}}}t.parentNode.replaceChild(w,t)}}function k(w){A=true;var u=C(w.id);if(u){if(w.altContentId){var y=C(w.altContentId);if(y){M=y;l=w.altContentId}}else{M=G(u)}if(!(/%$/.test(w.width))&&parseInt(w.width,10)<310){w.width="310"}if(!(/%$/.test(w.height))&&parseInt(w.height,10)<137){w.height="137"}K.title=K.title.slice(0,47)+" - Flash Player Installation";var z=h.ie&&h.win?"ActiveX":"PlugIn",q=K.title,r="MMredirectURL="+j.location+"&MMplayerType="+z+"&MMdoctitle="+q,x=w.id;if(h.ie&&h.win&&u.readyState!=4){var t=a("div");x+="SWFObjectNew";t.setAttribute("id",x);u.parentNode.insertBefore(t,u);u.style.display="none";var v=function(){u.parentNode.removeChild(u)};I(j,"onload",v)}U({data:w.expressInstall,id:m,width:w.width,height:w.height},{flashvars:r},x)}}function O(t){if(h.ie&&h.win&&t.readyState!=4){var r=a("div");t.parentNode.insertBefore(r,t);r.parentNode.replaceChild(G(t),r);t.style.display="none";var q=function(){t.parentNode.removeChild(t)};I(j,"onload",q)}else{t.parentNode.replaceChild(G(t),t)}}function G(v){var u=a("div");if(h.win&&h.ie){u.innerHTML=v.innerHTML}else{var r=v.getElementsByTagName(Q)[0];if(r){var w=r.childNodes;if(w){var q=w.length;for(var t=0;t<q;t++){if(!(w[t].nodeType==1&&w[t].nodeName=="PARAM")&&!(w[t].nodeType==8)){u.appendChild(w[t].cloneNode(true))}}}}}return u}function U(AG,AE,t){var q,v=C(t);if(v){if(typeof AG.id==b){AG.id=t}if(h.ie&&h.win){var AF="";for(var AB in AG){if(AG[AB]!=Object.prototype[AB]){if(AB.toLowerCase()=="data"){AE.movie=AG[AB]}else{if(AB.toLowerCase()=="styleclass"){AF+=' class="'+AG[AB]+'"'}else{if(AB.toLowerCase()!="classid"){AF+=" "+AB+'="'+AG[AB]+'"'}}}}}var AD="";for(var AA in AE){if(AE[AA]!=Object.prototype[AA]){AD+='<param name="'+AA+'" value="'+AE[AA]+'" />'}}v.outerHTML='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'+AF+">"+AD+"</object>";i[i.length]=AG.id;q=C(AG.id)}else{if(h.webkit&&h.webkit<312){var AC=a("embed");AC.setAttribute("type",P);for(var z in AG){if(AG[z]!=Object.prototype[z]){if(z.toLowerCase()=="data"){AC.setAttribute("src",AG[z])}else{if(z.toLowerCase()=="styleclass"){AC.setAttribute("class",AG[z])}else{if(z.toLowerCase()!="classid"){AC.setAttribute(z,AG[z])}}}}}for(var y in AE){if(AE[y]!=Object.prototype[y]){if(y.toLowerCase()!="movie"){AC.setAttribute(y,AE[y])}}}v.parentNode.replaceChild(AC,v);q=AC}else{var u=a(Q);u.setAttribute("type",P);for(var x in AG){if(AG[x]!=Object.prototype[x]){if(x.toLowerCase()=="styleclass"){u.setAttribute("class",AG[x])}else{if(x.toLowerCase()!="classid"){u.setAttribute(x,AG[x])}}}}for(var w in AE){if(AE[w]!=Object.prototype[w]&&w.toLowerCase()!="movie"){F(u,w,AE[w])}}v.parentNode.replaceChild(u,v);q=u}}}return q}function F(t,q,r){var u=a("param");u.setAttribute("name",q);u.setAttribute("value",r);t.appendChild(u)}function X(r){var q=C(r);if(q&&(q.nodeName=="OBJECT"||q.nodeName=="EMBED")){if(h.ie&&h.win){if(q.readyState==4){B(r)}else{j.attachEvent("onload",function(){B(r)})}}else{q.parentNode.removeChild(q)}}}function B(t){var r=C(t);if(r){for(var q in r){if(typeof r[q]=="function"){r[q]=null}}r.parentNode.removeChild(r)}}function C(t){var q=null;try{q=K.getElementById(t)}catch(r){}return q}function a(q){return K.createElement(q)}function I(t,q,r){t.attachEvent(q,r);d[d.length]=[t,q,r]}function c(t){var r=h.pv,q=t.split(".");q[0]=parseInt(q[0],10);q[1]=parseInt(q[1],10)||0;q[2]=parseInt(q[2],10)||0;return(r[0]>q[0]||(r[0]==q[0]&&r[1]>q[1])||(r[0]==q[0]&&r[1]==q[1]&&r[2]>=q[2]))?true:false}function V(v,r){if(h.ie&&h.mac){return }var u=K.getElementsByTagName("head")[0],t=a("style");t.setAttribute("type","text/css");t.setAttribute("media","screen");if(!(h.ie&&h.win)&&typeof K.createTextNode!=b){t.appendChild(K.createTextNode(v+" {"+r+"}"))}u.appendChild(t);if(h.ie&&h.win&&typeof K.styleSheets!=b&&K.styleSheets.length>0){var q=K.styleSheets[K.styleSheets.length-1];if(typeof q.addRule==Q){q.addRule(v,r)}}}function W(t,q){var r=q?"visible":"hidden";if(e&&C(t)){C(t).style.visibility=r}else{V("#"+t,"visibility:"+r)}}function g(s){var r=/[\\\"<>\.;]/;var q=r.exec(s)!=null;return q?encodeURIComponent(s):s}var D=function(){if(h.ie&&h.win){window.attachEvent("onunload",function(){var w=d.length;for(var v=0;v<w;v++){d[v][0].detachEvent(d[v][1],d[v][2])}var t=i.length;for(var u=0;u<t;u++){X(i[u])}for(var r in h){h[r]=null}h=null;for(var q in audioplayer_swfobject){audioplayer_swfobject[q]=null}audioplayer_swfobject=null})}}();return{registerObject:function(u,q,t){if(!h.w3cdom||!u||!q){return }var r={};r.id=u;r.swfVersion=q;r.expressInstall=t?t:false;N[N.length]=r;W(u,false)},getObjectById:function(v){var q=null;if(h.w3cdom){var t=C(v);if(t){var u=t.getElementsByTagName(Q)[0];if(!u||(u&&typeof t.SetVariable!=b)){q=t}else{if(typeof u.SetVariable!=b){q=u}}}}return q},embedSWF:function(x,AE,AB,AD,q,w,r,z,AC){if(!h.w3cdom||!x||!AE||!AB||!AD||!q){return }AB+="";AD+="";if(c(q)){W(AE,false);var AA={};if(AC&&typeof AC===Q){for(var v in AC){if(AC[v]!=Object.prototype[v]){AA[v]=AC[v]}}}AA.data=x;AA.width=AB;AA.height=AD;var y={};if(z&&typeof z===Q){for(var u in z){if(z[u]!=Object.prototype[u]){y[u]=z[u]}}}if(r&&typeof r===Q){for(var t in r){if(r[t]!=Object.prototype[t]){if(typeof y.flashvars!=b){y.flashvars+="&"+t+"="+r[t]}else{y.flashvars=t+"="+r[t]}}}}f(function(){U(AA,y,AE);if(AA.id==AE){W(AE,true)}})}else{if(w&&!A&&c("6.0.65")&&(h.win||h.mac)){A=true;W(AE,false);f(function(){var AF={};AF.id=AF.altContentId=AE;AF.width=AB;AF.height=AD;AF.expressInstall=w;k(AF)})}}},getFlashPlayerVersion:function(){return{major:h.pv[0],minor:h.pv[1],release:h.pv[2]}},hasFlashPlayerVersion:c,createSWF:function(t,r,q){if(h.w3cdom){return U(t,r,q)}else{return undefined}},removeSWF:function(q){if(h.w3cdom){X(q)}},createCSS:function(r,q){if(h.w3cdom){V(r,q)}},addDomLoadEvent:f,addLoadEvent:R,getQueryParamValue:function(v){var u=K.location.search||K.location.hash;if(v==null){return g(u)}if(u){var t=u.substring(1).split("&");for(var r=0;r<t.length;r++){if(t[r].substring(0,t[r].indexOf("="))==v){return g(t[r].substring((t[r].indexOf("=")+1)))}}}return""},expressInstallCallback:function(){if(A&&M){var q=C(m);if(q){q.parentNode.replaceChild(M,q);if(l){W(l,true);if(h.ie&&h.win){M.style.display="block"}}M=null;l=null;A=false}}}}}();

//]]>

</script>



Save your template

Now whenever you want to add this WordPress Audio Player to your posts or sidebar, add the code below to the Edit HTML section of your Post or to the HTML/JavaScript widget in your sidebar.


<object type="application/x-shockwave-flash" data="http://tutzone.fileave.com/player.swf" id="audioplayer1" height="24" width="290">
<param name="movie" value="http://tutzone.fileave.com/player.swf">
<param name="FlashVars" value="playerID=1&soundFile=URL of your MP3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
</object>


Remember to replace the text in green with the URL of your MP3 file.

Now publish your post and enjoy listening to your favorite music!

Attention!

The Reason why many readers were getting errors while using this player is that I have saved the flash file of this player in a free hosting service like www.fileave.com To have this player work efficiently kindly save the following files in a free file hosting service and link to them using your own URLs,

Flash Player File

I have linked to the above flash file as http://tutzone.fileave.com/player.swf in the codes shared above. Kindly replace this URL with yours.

I hope you would like this new update. If you have any question please feel free to ask me in the comment box below.