Bloggingclaz.info - free blogging course | Latest Tips and Tricks For Bloggers |

How to add a Related Posts Widget For Blogger - Optimized Version

2011-06-24T01:04:00.000-07:00

Display thumbnails of posts having same labels or categories at the bottom of each blog page engages the reader more and increases the pageviews. By far we have two best related posts gadgets created so far one is by linkwithin which I am sharing in this tut and another one displays just links and I will share it in my next post. This widget Loads fast and you don't need to install any scripts for this as the widget codes are stored on linkwithin servers. This tutorial is the most detailed one ever written on linkwithin so kindly follow the steps carefully. Please see a demo first,

The steps are very simple:

Go To Linkwithin
Fill up the easy blanks and do as they say. The screenshot below will help,

3.   Keep the width to three stories i.e three thumbnails if your post width is less than 500px
4.   Hit the Get Widget button and then click the Install Widget link on the next page as shown below,

5.   Change the Title to Related Posts: or anything you may like as shown below,

6. Now Click the Edit Template Link

7.   Replace the code that you see with this one:

<b:includable id='main'><b:if cond='data:blog.pageType == "item"'><data:content/></b:if></b:includable>

The above code will hide the thumbnails from appearing on homepage.
8.   Next click the Edit Content Link and add the following additional code just above the code inside the widget,

<script>linkwithin_text='Related Posts:'</script>

Replace Related Posts: with any text you want.
   9. Finally hit the ADD WIDGET button.
9. Once you are taken to the Page Elements page of your blogger account, simply drag the widget to the bottom of your post body as shown below,

10. Click the "Save" orange button at the top-right corner and you are done!

Let me know if you needed any further help on this ! Pless Comment this post

How To Add Blogger Cool Popular Posts Widget With Zoom Effect / Using CSS V2

2011-06-17T03:40:00.000-07:00

1.Login to your blogger dashboard--> Desing- -> Edit HTML

2.Scroll down to where you see ]]></b:skin> tag .

3.Copy below code and paste it just After ]]></b:skin> ta

<style type='text/css'>
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>

Note: Please You first Add Popular Posts widget to Your Blogger Sidebar. (Blogger widgets list..)

4 Now Click on Save Template,

5.Now Set Settings Your Popular Posts Widget , Like this,

6. Now Save Your Popular Posts Widget and You are Done..

How to show post title only on Your Blogger Home page

2011-06-17T00:58:00.000-07:00

Do you like to show only your blogger post title on your home page? Then follow the steps below:
1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see </head> tag .
3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {color:#333333;}
.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}
</b:if>
</style>

4.Now Save your template.
5.Go to Layout-->Page Elements.Click on "Edit" link of Blog Posts Section.
6.Enter the value for "Number of posts on main page:" as your choice and click on save.

You are done.

............................................................

How to add Floating Google +1, Facebook, Twitter Buttons For Blogger

2011-06-16T06:26:00.000-07:00

Go To Blogger > Design
Choose a HTML/JavaScript widget
Paste the following code inside it,

<style>
/*-------MBT Floating Counters------------*/
#floatdiv { 
    position:absolute; 
    width:94px; 
    height:229px; 
    top:0; 
    left:0; 
        z-index:100 
}
#mbtsidebar { 
        border:1px solid #ddd; 
        padding-left:5px; 
    position:relative; 
    height:220px; 
    width:55px; 
    margin:0 0 0 5px; 
}
</style>
<div id="floatdiv"> 
<div id="mbtsidebar"> 
    <table cellpadding="1px" cellspacing="0">
    <tr> 
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;"> 
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like> 
    </td> 
    </tr>
    <tr> 
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;"> 
<g:plusone size="Tall" expr:href="data:post.url"/> 
    </g:plusone></td> 
    </tr>
    <tr> 
    <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="CrazyDilon">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 
    </td> 
    </tr>
    <tr> 
    <td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;">
<p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://bloggingclaz.blogspot.com/" target="_blank">Widgets</a></p> 
    </td> 
    </tr>
    </table> 
</div> 
</div> 
<script type="text/javascript"> 
// JavaScript Document
   <!-- 
/* Script by: www.jtricks.com 
* Version: 20071017 
* Latest version: 
* www.jtricks.com/javascript/navigation/floating.html 
*/ 
var floatingMenuId = 'floatdiv'; 
var floatingMenu = 
{ 
    targetX: 0, 
    targetY: 300,
    hasInner: typeof(window.innerWidth) == 'number', 
    hasElement: typeof(document.documentElement) == 'object' 
        && typeof(document.documentElement.clientWidth) == 'number',
    menu: 
        document.getElementById 
        ? document.getElementById(floatingMenuId) 
        : document.all 
          ? document.all[floatingMenuId] 
          : document.layers[floatingMenuId] 
};
floatingMenu.move = function () 
{ 
    floatingMenu.menu.style.left = floatingMenu.nextX + 'px'; 
    floatingMenu.menu.style.top = floatingMenu.nextY + 'px'; 
}
floatingMenu.computeShifts = function () 
{ 
    var de = document.documentElement;
    floatingMenu.shiftX =  
        floatingMenu.hasInner  
        ? pageXOffset  
        : floatingMenu.hasElement  
          ? de.scrollLeft  
          : document.body.scrollLeft;  
    if (floatingMenu.targetX < 0) 
    { 
        floatingMenu.shiftX += 
            floatingMenu.hasElement 
            ? de.clientWidth 
            : document.body.clientWidth; 
    }
    floatingMenu.shiftY = 
        floatingMenu.hasInner 
        ? pageYOffset 
        : floatingMenu.hasElement 
          ? de.scrollTop 
          : document.body.scrollTop; 
    if (floatingMenu.targetY < 0) 
    { 
        if (floatingMenu.hasElement && floatingMenu.hasInner) 
        { 
            // Handle Opera 8 problems 
            floatingMenu.shiftY += 
                de.clientHeight > window.innerHeight 
                ? window.innerHeight 
                : de.clientHeight 
        } 
        else 
        { 
            floatingMenu.shiftY += 
                floatingMenu.hasElement 
                ? de.clientHeight 
                : document.body.clientHeight; 
        } 
    } 
}
floatingMenu.calculateCornerX = function() 
{ 
    if (floatingMenu.targetX != 'center') 
        return floatingMenu.shiftX + floatingMenu.targetX;
    var width = parseInt(floatingMenu.menu.offsetWidth);
    var cornerX = 
        floatingMenu.hasElement 
        ? (floatingMenu.hasInner 
           ? pageXOffset 
           : document.documentElement.scrollLeft) + 
          (document.documentElement.clientWidth - width)/2 
        : document.body.scrollLeft + 
          (document.body.clientWidth - width)/2; 
    return cornerX; 
};
floatingMenu.calculateCornerY = function() 
{ 
    if (floatingMenu.targetY != 'center') 
        return floatingMenu.shiftY + floatingMenu.targetY;
    var height = parseInt(floatingMenu.menu.offsetHeight);
    // Handle Opera 8 problems 
    var clientHeight = 
        floatingMenu.hasElement && floatingMenu.hasInner 
        && document.documentElement.clientHeight 
            > window.innerHeight 
        ? window.innerHeight 
        : document.documentElement.clientHeight
    var cornerY = 
        floatingMenu.hasElement 
        ? (floatingMenu.hasInner  
           ? pageYOffset 
           : document.documentElement.scrollTop) + 
          (clientHeight - height)/2 
        : document.body.scrollTop + 
          (document.body.clientHeight - height)/2; 
    return cornerY; 
};
floatingMenu.doFloat = function() 
{ 
    // Check if reference to menu was lost due 
    // to ajax manipuations 
    if (!floatingMenu.menu) 
    { 
        menu = document.getElementById 
            ? document.getElementById(floatingMenuId) 
            : document.all 
              ? document.all[floatingMenuId] 
              : document.layers[floatingMenuId];
        initSecondary(); 
    }
    var stepX, stepY;
    floatingMenu.computeShifts();
    var cornerX = floatingMenu.calculateCornerX();
    var stepX = (cornerX - floatingMenu.nextX) * .07; 
    if (Math.abs(stepX) < .5) 
    { 
        stepX = cornerX - floatingMenu.nextX; 
    }
    var cornerY = floatingMenu.calculateCornerY();
    var stepY = (cornerY - floatingMenu.nextY) * .07; 
    if (Math.abs(stepY) < .5) 
    { 
        stepY = cornerY - floatingMenu.nextY; 
    }
    if (Math.abs(stepX) > 0 || 
        Math.abs(stepY) > 0) 
    { 
        floatingMenu.nextX += stepX; 
        floatingMenu.nextY += stepY; 
        floatingMenu.move(); 
    }
    setTimeout('floatingMenu.doFloat()', 20); 
};
// addEvent designed by Aaron Moore 
floatingMenu.addEvent = function(element, listener, handler) 
{ 
    if(typeof element[listener] != 'function' || 
       typeof element[listener + '_num'] == 'undefined') 
    { 
        element[listener + '_num'] = 0; 
        if (typeof element[listener] == 'function') 
        { 
            element[listener + 0] = element[listener]; 
            element[listener + '_num']++; 
        } 
        element[listener] = function(e) 
        { 
            var r = true; 
            e = (e) ? e : window.event; 
            for(var i = element[listener + '_num'] -1; i >= 0; i--) 
            { 
                if(element[listener + i](e) == false) 
                    r = false; 
            } 
            return r; 
        } 
    }
    //if handler is not already stored, assign it 
    for(var i = 0; i < element[listener + '_num']; i++) 
        if(element[listener + i] == handler) 
            return; 
    element[listener + element[listener + '_num']] = handler; 
    element[listener + '_num']++; 
};
floatingMenu.init = function() 
{ 
    floatingMenu.initSecondary(); 
    floatingMenu.doFloat(); 
};
// Some browsers init scrollbars only after 
// full document load. 
floatingMenu.initSecondary = function() 
{ 
    floatingMenu.computeShifts(); 
    floatingMenu.nextX = floatingMenu.calculateCornerX(); 
    floatingMenu.nextY = floatingMenu.calculateCornerY(); 
    floatingMenu.move(); 
}
if (document.layers) 
    floatingMenu.addEvent(window, 'onload', floatingMenu.init); 
else 
{ 
    floatingMenu.init(); 
    floatingMenu.addEvent(window, 'onload', 
        floatingMenu.initSecondary); 
}
//-->
</script>

Replace CrazyDilon With your Twitter username

4. Save your widget and you are almost done!

How To Remove Blogger Top Nav Bar

2011-06-16T01:08:00.000-07:00

Here are the steps to remove the Blogger top Navigation bar /Blogger Nav Bar

Login to your blogger account
From your Dashboard opt for Layout
Now choose Edit Html
You will see your template code there.
In that template code find

]]></b:skin>

replace it with

#navbar-iframe { display: none !important; }
]]></b:skin>

Now SaveTemplate template

How to add Facebook Like Button To Blogger

2011-06-16T00:46:00.000-07:00

Step 1. adding it to your template.

The button code,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
</b:if>

where to add it ?

Log into your blogger account, then 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

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.

click Save Template and you are done.

................................................................

Free Icon Package For Your Blogger or Web Site

2011-06-01T03:51:00.000-07:00

Windows Keywords Shortcut List

2011-05-31T11:39:00.000-07:00

Windows key + R = Run menu

This is usually followed by:

cmd = Command Prompt

iexplore + "web address" = Internet Explorer

compmgmt.msc = Computer Management

dhcpmgmt.msc = DHCP Management

dnsmgmt.msc = DNS Management

services.msc = Services

eventvwr = Event Viewer

dsa.msc = Active Directory Users and Computers

dssite.msc = Active Directory Sites and Services

Windows key + E = Explorer

ALT + Tab = Switch between windows

ALT, Space, X = Maximize window

CTRL + Shift + Esc = Task Manager

Windows key + Break = System properties

Windows key + F = Search

Windows key + D = Hide/Display all windows

CTRL + C = copy

CTRL + X = cut

CTRL + V = paste

Keyboard Shortcuts

[Alt] and [Esc] Switch between running applications

[Alt] and letter Select menu item by underlined letter

[Ctrl] and [Esc] Open Program Menu

[Ctrl] and [F4] Close active document or group windows (does not work with some applications)

[Alt] and [F4] Quit active application or close current window

[Alt] and [-] Open Control menu for active document

Ctrl] Lft., Rt. arrow Move cursor forward or back one word

Ctrl] Up, Down arrow Move cursor forward or back one paragraph

[F1] Open Help for active application

Windows+M Minimize all open windows

Shift+Windows+M Undo minimize all open windows

Windows+F1 Open Windows Help

Windows+Tab Cycle through the Taskbar buttons

Windows+Break Open the System Properties dialog box

Acessability shortcuts

Right SHIFT for eight seconds........ Switch FilterKeys on and off.

Left ALT +left SHIFT +PRINT SCREEN....... Switch High Contrast on and off.

Left ALT +left SHIFT +NUM LOCK....... Switch MouseKeys on and off.

SHIFT....... five times Switch StickyKeys on and off.

NUM LOCK...... for five seconds Switch ToggleKeys on and off.

Explorer shortcuts

END....... Display the bottom of the active window.

HOME....... Display the top of the active window.

NUM LOCK+ASTERISK....... on numeric keypad (*) Display all subfolders under the selected folder.

NUM LOCK+PLUS SIGN....... on numeric keypad (+) Display the contents of the selected folder.

NUM LOCK+MINUS SIGN....... on numeric keypad (-) Collapse the selected folder.

LEFT ARROW...... Collapse current selection if it's expanded, or select parent folder.

RIGHT ARROW....... Display current selection if it's collapsed, or select first subfolder.

Type the following commands in your Run Box (Windows Key + R) or Start Run

devmgmt.msc = Device Manager
msinfo32 = System Information
cleanmgr = Disk Cleanup
ntbackup = Backup or Restore Wizard (Windows Backup Utility)
mmc = Microsoft Management Console
excel = Microsoft Excel (If Installed)
msaccess = Microsoft Access (If Installed)
powerpnt = Microsoft PowerPoint (If Installed)
winword = Microsoft Word (If Installed)
frontpg = Microsoft FrontPage (If Installed)
notepad = Notepad
wordpad = WordPad
calc = Calculator
msmsgs = Windows Messenger
mspaint = Microsoft Paint
wmplayer = Windows Media Player
rstrui = System Restore
netscp6 = Netscape 6.x
netscp = Netscape 7.x
netscape = Netscape 4.x
waol = America Online
control = Opens the Control Panel
control printers = Opens the Printers Dialog

How To Add New Facbook Share Count Button to Your Blogger V2

2011-05-31T11:29:00.000-07:00

1.Log in to your Dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this <div class='post-header-line-1'/> tag

4.Copy below code and paste it just before the <div class='post-header-line-1'/> tag

<b:if cond='data:blog.pageType == &quot;item&quot;'><div style="float:left;margin:10px 10px 10px 0;"><script type="text/javascript">var fbShare = {url: '<data:post.url/>', size: 'large' }</script><script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript"></script></div></b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><div style="float:left;margin:10px 10px 10px 0;"><script type="text/javascript">var fbShare = {url: '<data:post.url/>', size: 'small' }</script><script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript"></script></div></b:if>

Windows Live Writer Keyboard Shortcuts

2011-05-31T11:13:00.000-07:00

Keyboard Shortcuts	Function
CTRL + Z	To Undo
CTRL + X	To Cut
CTRL + C	To Copy
CTRL + V	To Paste
CTRL + B	To Bold
CTRL + N	To Open a New Post
CTRL + A	To Highlight All text
CTRL + S	To Auto Save
CTRL + F	To Find a word or phrase
CTRL + H	To strikethrough
CTRL + K	To Insert Hyperlink
CTRL + L	To Insert Image
CTRL + Y	To Redo
CTRL + U	To underline
CTRL + I	Change to italic
CTRL + O	To Open Drafts or Recently posted posts
CTRL + P	To Print the post
F11	Switches To Edit window
F12	Switches To Preview window
SHIFT + F11	Switches To Source window
CTRL + F11	Toggles theme usage
CTRL + SHIFT + C	To Set Category/ Tag
CTRL + SHIFT + V	Paste Special: Lets you whether to keep or remove text formatting when you copy text from WordPad, excel, blogs or websites
CTRL + SHIFT + P	To Publish the post

Goggle Chrome Browser Keyboard Shortcuts

2011-05-31T11:09:00.000-07:00

Window And Tab Shortcuts:

Ctrl+N – Open a new window
Ctrl+Shift+N – Open a new window in incognito mode
Press Ctrl,and click a link – Open link in a new tab
Press Shift, and click a link – Open link in a new window
Alt+F4 - Close current window
Ctrl+T - Open a new tab
Ctrl+Shift+T – Reopen the last tab you’ve closed. Google Chrome remembers the last 10 tabs you’ve closed.
Drag link to tab – Open link in specified tab
Drag link to space between tabs – Open link in a new tab in the specified position on the tab strip
Ctrl+1 through Ctrl+8 – Switch to the tab at the specified position number. The number you press represents a position on the tab strip.
Ctrl+9 – Switch to the last tab
Ctrl+Tab or Ctrl+PgDown – Switch to the next tab
Ctrl+Shift+Tab or Ctrl+PgUp – Switch to the previous tab
Ctrl+W or Ctrl+F4 – Close current tab or pop-up
Alt+Home – Open your homepage
Ctrl+O, then select file – Open a file from your computer in Google Chrome

Shortcuts To Open Google Chrome Features:

Ctrl+B – Toggle bookmarks bar on and off
Ctrl+H – View the History page
Ctrl+J – View the Downloads page
Shift+Escape – View the Task manager

Webpage Shortcuts:

Ctrl+P – Print your current page
F5 – Reload current page
Esc – Stop page loading
Ctrl+F5 or Shift+F5 – Reload current page, ignoring cached content
Press Alt, and click a link – Download link
Ctrl+F – Open find-in-page box
Ctrl+G or F3 – Find next match for your input in the find-in-page box
Ctrl+Shift+G or Shift+F3 – Find previous match for your input in the find-in-page box
Ctrl+U – View source
Drag link to bookmarks bar – Bookmark the link
Ctrl+D – Bookmark your current webpage
Ctrl++ – Make text larger
Ctrl+- – Make text smaller
Ctrl+0 – Return to normal text size

Text shortcuts:

Highlight content, then press Ctrl+C – Copy content to the clipboard
Place your cursor in a text field, then press Ctrl+V or Shift+Insert – Paste current content from the clipboard
Place your cursor in a text field, then press Ctrl+Shift+V – Paste current content from the clipboard without formatting
Highlight content in a text field, then press Ctrl+X or Shift+Delete – Delete the content and copy it to the clipboard

Mozilla Fire Browser Keyboard Shortcuts

2011-05-31T11:04:00.000-07:00

Ctrl+N - It use for Open New Browser Window.

Ctrl+T - It use for Open New Tab on Existing window.

Ctrl+W or Ctrl+F4 - It use for Close the current window or Tab.

Ctrl+R or F5 - For refresh The Page

Ctrl+F5 orCtrl+Shift+R - Refresh the page with override cache

Esc - Stop

Ctrl + O - It use for Open File

Alt+Home - Home

F1 - Firefox Help

F11 - Toggle Full Screen of Browser Window.

Ctrl+Tab - For Changing Tab between Existing window.

Ctrl+U - Open View Source Page of any webpage.

Ctrl+I or Ctrl+B - Open Bookmark window in left sidebar

Ctrl+P - For Print Command

Ctrl+A - Select All

Ctrl+S - Save Page As

Ctrl+D - Bookmark This Page

Ctrl+F - Find

Ctrl+G or F3 - Find Again

Ctrl+H - open History Window In left Sidebar.

Ctrl+J - Open Downloads Window

Ctrl+Z - Undo Your Process

Ctrl + Y or Ctrl + Shift + Z - Redo your Process

Ctrl+C - Copy

Ctrl+V - Paste

Ctrl + Shift + Delete - Clear your Private Data

F7 - To Open Browser in Caret mode

Backspace or Alt+Left Arrow - Back

Shift+Backspace or Alt+Right Arrow - Forward

Alt + Enter - Copy your existing window tab and Open It in New Tab

Ctrl + Tab or Ctrl + Shift + Tab — rotate forward to the next window tab

Down Arrow – Scroll down

Ctrl+ "+" or Ctrl+ Scroll up - Increase Text Size (Zoom In)

Ctrl+ "-" or Ctrl+ Scroll Down - Decrease text Size (Zoom Out)

Ctrl+ 0 (Zero) - Normal Text Size (Default Zoom Mode)

Alt+ Scroll Down - One step page go down

Alt+ Scroll Up - One step page go Up

Ctrl+Shift+I - DOM Inspector

Ctrl + L or ALT + D - Select Location Bar

Ctrl + Enter - To complete URL with .com

Ctrl + Shift + Enter - To complete URL with .org

Shift + Enter - To complete URL with .net

Ctrl + Up Arrow - Choose previous Search engines to search information

Ctrl + Down Arrow - Choose Next Search engines to search information

Alt + Up Arrow or Alt + Down Arrow - Open List of available Search Engine

How to add Yahoo Media Player For Your Blogger

2011-05-31T10:11:00.000-07:00

These are the main features of Yahoo Media Player

Adds audio to your site with one line of HTML
Uses simple, easy-to-hack HTML instead of complicated proprietary markup, ushering in the REAL Media Web
Magical floating design never gets lost, is available when you need it, gets out of your way when you don't need it
Automatically finds all audio links on your page, turning your page into a playlist
Plays all your blog entries with a single button click
Allows you to put the play buttons where they belong: IN CONTEXT
Keeps the user in the page rather than sending them away to a media player
Picks up your images and adds them as cover art
Requires no download, install or maintenance

Follow these simple steps to embed Yahoo Media Player to your blog or website.

1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

4.Now save your template.

5.Go to Layout --> Page Elements.

6.Click on 'Add a Gadget'.

7.Select 'HTML/Javascript' and add the code given below (You can also add this code into Edit Html section of your Post Editor.)

<a href="DIRECT_URL_OF_YOUR_MP3-FILE">Name_Of_the_Mp3_File</a>

Note:

Replace "DIRECT_URL_OF_YOUR_MP3-FILE" with your .mp3 file direct url.
Replace "Name_Of_the_Mp3_File" with any name you like.

Look at the example given below

<a href="http://mediaplayer.yahoo.com/example1.mp3">First link</a>