How to get more Traffic from targeted Country?

Hello Friends!!

This article is particularly for bloggers or website developers,who wants to get more traffic from targeted countries. What is need of this ?I have explained it in this article. This will help you if you have add Google adsense or  any other pay per click site like infolinks or chitika etc. It increases the CPC: Cost Per Click value.

First of all:

What is the need of targeting traffic from particular Country?

Many of bloggers wants more traffic from USA or CANADA.This is only because CPC value is much higher for that countries.Indian public generally don’t buy anything from online shopping websites,which is much higher in USA or CANADA.This is one of big reason for low CPC for Asian blogger. So you can get more dollars per click if you are targeting USA or CANADIAN traffic.

I think now you are interested to add USA or CANADA as targeted country in your website or blog.

For Website developers:Before displaying steps Few things you must have done is Your site must be verified by Google.If not you can do it in “Google webmaster tools“.

Steps to add target visitors country..

Step 1)

Add your Blog or website to targeted countries directory so that people will know about your Blog and see your site.

Step 2)

Set Geographic target for your blog using Google Webmaster Tools.

Step 3)

Now Login to your Webmaster account and choose your site and then simply click on small circle like gear optionand click on Site settings as shown in image below.

Step 4)

Now select or Tick the option target users in.You can select any country.

Step 5)

Now click on Save you will have more traffic from that country.

Read More...

Percentage Scroll Bar Widget For Blogger

In today’s featured tutorial, you’re going to learn a neat new trick that will add a nice little trinket for your blog. It involves a widget that lets your visitor know just how far down the page he or she is viewing your site by means of a tool tip.This tool tip will contain percentage number that shows the visitor how close they are at the bottom of the page as they move (or scroll) up and down the page.

Putting this cool little widget on to your Blogger is simple:

1. Log in to your Blogger dashboard.

2. Go to Template.

3. Click on Edit HTML.

4. Using Ctrl+F, look for ]]></b:skin>.

5. Copy and paste following code below right under it.

#scroll { display: none; position: fixed; top: 0; right: 20px; z-index: 500; padding: 3px 8px; background-color: #2187e7; color: #fff; border-radius: 3px; } #scroll:after { content: ” ”; position: absolute; top: 50%; right: -8px; height: 0; width: 0; margin-top: -4px; border: 4px solid transparent; border-left-color: #2187e7; }

6. Next, while still in the Edit HTML window, using Ctrl+F again, look for </head>.

7. Copy and then paste the following code below immediately after it.

<div id=’scroll’></div>

8. Last one, search for </body>and copy and paste the following code below right before it.

<script type=’text/javascript’> //<![CDATA[ var scrollTimer = null; $(window).scroll(function() { var viewportHeight = $(this).height(), scrollbarHeight = viewportHeight / $(document).height() * viewportHeight, progress = $(this).scrollTop() / ($(document).height() - viewportHeight), distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2; $('#scroll') .css('top', distance) .text(' (' + Math.round(progress * 100) + '%)') .fadeIn(100); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#scroll').fadeOut(); }, 1500); }); //]]> </script>

9. Save your template and you’re done! Enjoy your new widget!

Read More...

Guest Post Is going to make your blog better

Guest Blogging is one of the best Option for Bloggers who are busy and do not have much time for having there blog updated with posts. 
You may think that allowing guest posts on your blog is a risk and even can harm your blog. Its true that this can happen that is rare and the guest blogger will never get complete control unless you allow them.
Almost all bloggers are just getting a win-win situation through this.

Pros of Allowing Guest Posting on Your Site

New Ideas

One of the best reasons to allow guest posting on your blog is to introduce your readers to new content. If you’re running low on ideas or beginning to feel that your blog is mundane and boring, inviting a guest poster to write content for your blog may be just what it needs to shake it up and get your readers excited about your niche again.

Less Time Investment

Another reason to allow guest posting is that it takes the pressure off of you to always be the one coming up with the ideas, writing the posts and editing them before they are posted. Many people don’t realize how much time and effort it takes to keep up with a blog until they already have a following. It’s a good idea to allow a guest post or two when you’re busy taking care of other aspects of your life. You are unlikely to feel like you’re abandoning your readers by taking a day off if you have a guest post lined up before you leave.

Introduction to New Readers

If you have a guest blogger who has their own following, allowing them to post on your blog usually means that their readers will be introduced to the content on your site. The guest poster will usually promote their post to their readers, which means that your blog will be exposed to a larger audience that may never have found it on their own.

Cons of Allowing Guest Posting on Your Site

May Turn Off Current Readers

Some readers may think that people who allow guest posts on their site are lazy or uninterested in the content of their site. Allowing a guest post once every few months probably won’t make you seem lazy, but readers may be turned off if you allow guest posts too often.

Different Voice

Another con of allowing guest posting on your site is that most writers have a distinctive voice that makes it easy for writers to tell one blog from another. The person who is guest posting is very unlikely to have a voice that is similar to yours. Readers who are particularly fond of your writing style may become confused or lose interest in your blog if you allow guest posts that are very different from your usual style.

Loss of Ultimate Control Over Content

The biggest con of allowing guest posting is that it takes away some of the control that you have over the things that are posted on your site. You will have ultimate control over what is posted on your blog, but allowing guest posting means that the other writer will probably explain things differently than you would and letting go of ultimate control can be difficult emotionally.

Note:- If anyone is willing to guest post on this blog, you are welcome. Contact me at:- minojsos[at]live[dot]com

Read More...

Monetize your blog and Increase your monthly Revenue

When it comes to Monetizing your blog, it has two paths. The Direct and the Indirect. The Direct is like you gain and monetize your blog directly. Indirect is you use some other ways that is secret or so to earn money.

Indirect Methods Of Earning Money

1.Advertising

This is probably the most popular and the most misunderstood indirect way of making money from a website.

What's so indirect about it? This is a prime example. You're making money from advertising while people are reading your content (enjoying your site) and every once in a while they click on some ads.

The idea is that you're not publishing content just to get someone to click, but they do it anyway whenever they see an interesting ad - this is how you make money indirectly as a side effect of publishing your regular content.

There's nothing more obvious than advertising. Even when you talk to someone who's never owned a website and uses the internet only for Facebook, when you tell them that you're making money from your blog, the first thing they're going to say is: "Advertising?"

Why is it the most misunderstood? Because most of the time it is not the best possible way of monetizing a website. Don't get me wrong, advertising works, like gangbusters, but only if your site is big enough.

In essence, you need traffic before you can translate that traffic into money. OR. You need a truly niche audience - people interested in specific kinds of topics. In such a situation, the audience doesn't need to be huge.

The basic rule of thumb is: the more general the topic of your site is, the more traffic you'll need to make advertising work for you.

There are many ways of advertising. You can use traditional graphic banners, text links, sidebar banners and links, contextual ads (e.g. AdSense), etc.

2. Indirect Affiliate Marketing

This is essentially advertising, but I think that it deserves a separate coverage.

When doing traditional advertising, you generally get paid when someone clicks your ads.

Affiliate marketing is different. It won't get you paid right away. To earn money as an affiliate, you have to convince someone to click your ads and THEN buy the thing you're promoting, or perform some other desired action.

Apart from that, it's essentially the same. You're still using banners, text ads and all kinds of other things.
To get started, you can visit affiliate networks such as: Amazon, Clickbank, Commission Junction, and literally hundreds of others.

Quite frankly, this covers the indirect scope. I can't think of any other methods that make sense here. (Can you?)

Direct Methods Of Earning Money

1. Selling your Own Products

This is probably the most obvious direct path you can take. Offering their own products is the biggest money maker for many bloggers out there, including most of the A-list team.

The product development topic is a really extensive one, and there are tons of great tutorials and information online, so I'm not going to pretend that I can explain it in this one post.

However, the main idea (and I mean the most basic idea) of this whole thing is somewhat simple. You start by doing market research to find out what is most likely to be bought by your audience. Then you come up with a product, spend some time on developing it, create marketing materials, set a launch date and off you go.
(Of course, I wish it would be that easy as it looks in the paragraph above.)

Once you have all of this done you can start promoting your product on your blog or website. Each post where you talk about your product openly is a direct try at making money.

Depending on the niche you're in and your position in it, the product approach may or may not work for you. But as I said in the beginning, I'm only describing the tools and it's your job to make things happen.

2. Direct Affiliate Promotions

The technical aspect is still the same as it is for indirect affiliate marketing. You still get a custom link (provided by the affiliate network) and when someone clicks it and makes a purchase you get a commission. But the difference is how you're using it here.

Direct affiliate promotions can be done in a variety of different ways. For instance:

• Reviews. You write a review for some product you're an affiliate of, and publish it on your blog. If your audience finds the product interesting they can click your link and buy it. However, be careful not to write a fake review just to get someone to buy the thing. This isn't worth it. If you want to write a review you need to make it honest.
• Recommendations. Those are usually just short posts describing a new product that has just been launched. A product you find interesting for your audience... A kind of "hey, check it out"-post.
• Interviews. The idea is that you interview someone who has just launched a new product you're an affiliate of. You talk about the topic of the product or whatever else you want, and at the end you take that opportunity to present your audience with your affiliate link and try to sell them on the product.
• Themed landing pages. This is a somewhat complicated thing. You start by creating a custom landing page around a certain topic (keyword). The page should contain valuable information real people might be searching for. Finally, you top it off with some affiliate links.

I'm sure there are more ways of doing some direct affiliate promotions but let's just stick with these for now. In a nutshell, if you want to make money through affiliate marketing, you should include some of this affiliate-content in your overall content plan.

3. Hire Me Pages

If you have any freelancing spirit living in you, this might be a good approach to take.

Basically, you're creating a new page on your blog, titled "hire me" or anything else that sounds similar. This page presents the services you offer and all the important info on how to hire you. Essentially, it sells your visitors on hiring you to do whatever it is you can do for them.

Some of the most popular freelancing fields are: writing, web design, online marketing tasks, consulting, or whatever makes sense in your niche.

Thats it. Now its all upto you. Try these methods and Earn some cash into your pockets. Leave your comments and share your ideas below

Read More...

DIY Buttons Pack - Free CSS3 Buttons For Blogger

Hi Friends, Today I have to release the DIY buttons pack for blogger Which is converted from DIY buttons. The Wordpress version of this button was created by alex from kolakube.com.

The great thing about these buttons (besides their looks) is they were created with CSS3, the newest iteration of the CSS coding language. This means, any of these buttons are easy to customize.

Even if you have a limited understanding of how CSS works, changing the colors and styles of any of these buttons is a breeze.

The wordpress buttons have 30 buttons but here we have only 24 buttons because the last six buttons works with the web symbols regular font which does not support blogger So, Here You can add 24 DIY buttons to your blogger blog. Lets see how to add these buttons to your blog.

Add DIY Buttons To Your Blogger Blog

Adding CSS Code

OLD DASHBOARD

1. Go to Blogger Dashboard > Design tab > Edit HTML tab
2. Now search for ]]></b:skin>
3. Above that place the css code given below of each Demo.
   Note:- Just Add the css code for the specific button which you want to Add.
4. Now save your template.

NEW DASHBOARD

1. On New Blogger Dashboard Go to Template > Edit HTML Button
2. Ignore the Warning and Click the Proceed button
3. Now search for ]]></b:skin>
4. Above that place the css code given below of each Demo.
   Note:- Just Add the css code for the specific button which you want to Add.
5. Now save your template.

Adding Button To Your Blog:-

• Just copy the html code given below and paste it where you want to add the button.

Standard Buttons

Red ButtonOrange ButtonGreen ButtonBlue ButtonGray ButtonDark Button

CSS3 CODE FOR STANDARD BUTTONS

/* Standard Buttons */
a.standard { border: 1px solid rgba(0, 0, 0, .2); color: #fff; display: inline-block; padding: .5em .8em; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }

.standard.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }

.standard.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }

.standard.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }

.standard.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }

.standard.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }

.standard.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }

a.standard:hover { color: #fff; opacity: .5 }

HTML CODE FOR STANDARD BUTTONS

<a href="http://www.YOUR-LINK-HERE.com/" class="standard red">Red Button</a>

<a href="http://www.YOUR-LINK-HERE.com/" class="standard orange">Orange Button</a>

<a href="http://www.YOUR-LINK-HERE.com/" class="standard green">Green Button</a>

<a href="http://www.YOUR-LINK-HERE.com/" class="standard blue">Blue Button</a>

<a href="http://www.YOUR-LINK-HERE.com/" class="standard gray">Gray Button</a>

<a href="http://www.YOUR-LINK-HERE.com/" class="standard dark">Dark Button</a>

Arrow Buttons

Red Arrow ButtonOrange Arrow ButtonGreen Arrow ButtonBlue Arrow ButtonGray Arrow ButtonDark Arrow Button

CSS3 CODE FOR ARROW BUTTONS

/* Arrow Buttons */
a.arrow { background: url(http://i44.tinypic.com/6tmsu8.png) repeat-x top; border: 4px solid rgba(0, 0, 0, .1); color: #fff; display: inline-block; font-size: 1.1em; font-weight: bold; padding: .6em 1.2em; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
a.arrow.red { background-color: #b20000 }
a.arrow.orange { background-color: #f76c0f }
a.arrow.green { background-color: #248334 }
a.arrow.blue { background-color: #1086b6 }
a.arrow.gray { background-color: #aeaeae }
a.arrow.dark { background-color: #343434 }
a.arrow:hover { color: #fff; opacity: .5 }

HTML CODE FOR ARROW BUTTONS

<a class="arrow red" href="http://www.YOUR-LINK-HERE.com/">Red Arrow Button</a>

<a class="arrow orange" href="http://www.YOUR-LINK-HERE.com/">Orange Arrow Button</a>

<a class="arrow green" href="http://www.YOUR-LINK-HERE.com/">Green Arrow Button</a>

<a class="arrow blue" href="http://www.YOUR-LINK-HERE.com/">Blue Arrow Button</a>

<a class="arrow gray" href="http://www.YOUR-LINK-HERE.com/">Gray Arrow Button</a>

<a class="arrow dark" href="http://www.YOUR-LINK-HERE.com/">Dark Arrow Button</a>

Bevel Buttons

Red Bevel ButtonOrange Bevel ButtonGreen Bevel ButtonBlue Bevel ButtonGray Bevel ButtonDark Bevel Button

CSS3 CODE FOR BEVEL BUTTONS

/* Bevel Buttons */
a.bevel { border-color: rgba(255, 255, 255, .2) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, .1) rgba(255, 255, 255, 0.2); border-style: solid; border-width: 3px; color: #fff; display: inline-block; padding: .5em .8em; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; }
a.bevel.red { background: #b20000 }
a.bevel { background: #f76c0f }
a.bevel.green { background: #248334 }
a.bevel.blue { background: #1086b6 }
a.bevel.gray { background: #aeaeae }
a.bevel.dark { background: #343434 }
.bevel:hover { color: #fff; opacity: .5 }

HTML CODE FOR BEVEL BUTTONS

<a class="bevel red" href="http://www.YOUR-LINK-HERE.com/">Red Bevel Button</a>

<a class="bevel orange" href="http://www.YOUR-LINK-HERE.com/">Orange Bevel Button</a>

<a class="bevel green" href="http://www.YOUR-LINK-HERE.com/">Green Bevel Button</a>

<a class="bevel blue" href="http://www.YOUR-LINK-HERE.com/">Blue Bevel Button</a>

<a class="bevel gray" href="http://www.YOUR-LINK-HERE.com/">Gray Bevel Button</a>

<a class="bevel dark" href="http://www.YOUR-LINK-HERE.com/">Dark Bevel Button</a>

Engraved Buttons

Red Engraved ButtonOrange Engraved ButtonGreen Bevel ButtonBlue Engraved ButtonGray Engraved ButtonDark Engraved Button

CSS3 CODE FOR ENGRAVED BUTTONS

/* Engraved Buttons */
.engraved { background: rgba(0, 0, 0, .08); display: inline-block; padding: 5px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; }
.engraved a { color: #fff; border: 1px solid rgba(0, 0, 0, .3); display: inline-block; padding: .6em 1.2em; position: relative; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }

.engraved a.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }

.engraved a.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }

.engraved a.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }

.engraved a.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }

.engraved a.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }

.engraved a.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }

.engraved a:hover, .engraved:hover { color: #fff; opacity: .5 }

HTML CODE FOR ENGRAVED BUTTONS

<span class="engraved"><a class="red" href="http://www.YOUR-LINK-HERE.com/">Red Engraved Button</a></span>

<span class="engraved"><a class="orange" href="http://www.YOUR-LINK-HERE.com/">Orange Engraved Button</a></span>

<span class="engraved"><a class="green" href="http://www.YOUR-LINK-HERE.com/">Green Bevel Button</a></span>

<span class="engraved"><a class="blue" href="http://www.YOUR-LINK-HERE.com/">Blue Engraved Button</a></span>

<span class="engraved"><a class="gray" href="http://www.YOUR-LINK-HERE.com/">Gray Engraved Button</a></span>

<span class="engraved"><a class="dark" href="http://www.YOUR-LINK-HERE.com/">Dark Engraved Button</a></span>

I hope you like it. Please share your thoughts about these buttons on comment and Don't forget to share it. Thanks Guys. :)

Read More...

New Responsive HTML5 Music Player For Blogger

Hi Friends Today We are going to See how to add Responsive HTML5 Music player to our blogger blog. Generally HTML5 mp3/audio players requires Two type of files which is .mp3 and .ogg format. But In blogger we cant host files so we have to host our files in a external hosting like Dropbox which is a limited storage. In this case When we upload two types of music files (.mp3, .ogg) it consumes more space. So, To solve this problem I developed this New HTML5 Music player widget for blogger. In this widget We need only mp3 format to run this widget. so we can save lots of space. ok Let's see the advantages of using this music player.

Advantages Of HTML5 Music Player For Blogger

• Easy to install
• It does not affect the page loading speed
• It require only one format(.mp3) of music file while other HTML5 player require two type of files (.mp3, .ogg)
• It's responsive. We can use it in any devices ;)
• And Much More...

OK Now let's see the live demo for better understanding. :)

Live Demo:-

HTML5 Music player: Playlist Demo

1. Dead Wrong Intro
2. Juicy-R
3. It's All About The Crystalizabeths
4. Islands Is The Limit
5. One More Chance For A Heart To Skip A Beat
6. Suicidal Fantasy
7. Everyday Shelter
8. Basic Hypnosis
9. Infinite Victory
10. The Curious Incident Of Big Poppa In The Nighttime
11. Mo Stars Mo Problems

BTNT

Error Loading: "Undefined"

HTML5 Music player: Single File Demo

00:00/04:00

BTNT

How To Add This HTML5 Music Player To Your Blog?

Adding The Music Player Script To Your Blog

To add the Widget to your blog Follow the steps given below.

1. Login to New Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
2. Select the Template > Click on Edit HTML > Proceed
3. Check/Tick the Expand Template Widgets checkbox
4. Now Search for </head>
5. Add the below snippet code before </head>
   

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
   <script src="http://dl.dropbox.com/u/36169749/scripts/audiojs/audio.js" type="text/javascript"></script>
   

   If your blog already have a jQuery Plugin then remove the highlighted code.
6. Now save your Template.

Displaying HTML5 Music Player On Your Blog

We had added the HTML5 Music player script to your blog. After that Now We have to display the widget. 

Displaying the Music player is very simple. Let see how to make it. ;)

Before Displaying it We have to know that we can use this Music player widget in two types

1. By Adding it as a Playlist
2. By Adding it as a single music file

Adding HTML5 Music Player As A Playlist

To add the Music player widget just paste The following code where you want to Display the playlist.

<div class="btnt-player">
<div class="btnt-player-inner nano">
<div class="content">
<ol>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
<li><a data-src="YOUR-MUSIC-FILE-LINK" href="#">MUSIC FILE NAME</a></li>
</ol>
</div>
</div>
<div style="clear: both;">
</div>
<audio preload="preload"></audio></div>

• After Adding the above code Replace YOUR-MUSIC-FILE-LINK with your music file link
  note:- You can host you music files in Dropbox
• Then Replace MUSIC FILE NAME with the Name of the Music File

That's all Now you have done. OK Now let's see how to add a single music file using the player

Adding Single Music File In HTML5 Music Player

If you want To add the single Music file in the Music player, Paste The following code where you want to Display the Player.

<audio preload="auto" src="YOUR-MUSIC-FILE-LINK"></audio>

• After Adding the above code Replace YOUR-MUSIC-FILE-LINK with your music file link

I Hope you all like this widget Kindly Let me know your thoughts about the widget and don't forget to share it...

Thanks Buddies ;)

Read More...