Editing The Song or Track Title and Artist Name In Blogger-Wordpress Mp3 Player






Blogger Mp3 Player Most of you requested a comprehensive tutorial which may let you easily edit the Track title and artist name that appears in the slide of the Wordpress Mp3 Player. I have already written two detailed posts on how to add this player in your blogger Blogs. If you haven’t read them then kindly read the details of adding this beautiful Mp3 player to your Blogger hosted blogs. The links below will take you to the respective pages.




  1. Simple Wordpress Mp3 Player

  2. Advanced and Customized Wordpress Mp3 Player





Kindly click the play button below and you will observe that when the slide opens, the Song Title and Artist name is displayed. We will learn on how to add this effect to any Mp3 Track whose title is not properly displayed in the Wordpress player.


The Music will start playing after 28 seconds (Not my fault –The audio is such! :p)












Follow These Simple Steps



  1. Go To your hard drive where you have saved your Mp3 file

  2. Right click on the Mp3 file and select “Properties”


1


  • A new window will pop-up with two tabs entitled “General” and “Summary

  • Click the Summary Tab and in that page click the button that says “Advanced >>


2


  • Now carefully look at the screenshot below. The only areas you need to edit are,



1) Artist  2). Album Title  3). Title



  • To edit an area simply double click on the right side of the preferred area. For example if you want to edit Artist name then right click at the extreme right side of Artist and then a blank box will be displayed where you can enter whatever text you want. 



3


  • After you edited the guided areas then simply hit Apply and Ok. You are done! The result will look something like this,




4





  • The green arrows are your edited areas and the text indicated by the blue arrow can easily be changed by simply right clicking the Mp3 file and renaming it. Though the text indicated by blue Arrow will not show up in the Wordpress Mp3 file.



Now simply upload your Mp3 file at a hosting service and start enjoying Music on your blog like never before! :>> Take care!

Note:- Questions are always welcomed!

Top 10 Widely Used Image Hover Effects In Blogosphere!




 Image-Hover-Effect-for-blog You might have seen a roll over Image effect in many professional and commercial blogs. By roll over I mean that when you hover your mouse cursor on the Image, the image border colour and style/appearance changes. Well using some simple CSS you can add some amazing effects to your Blog Images. Without wasting any time lets jump straight to the steps to be followed.

This tutorial uses a simple pattern for adding codes i.e First you will need to add a CSS code just above ]]></b:skin> and then you will need to add a small HTML code like class="xyz"  to the image code inside your posts. That’s it! :>

First and Foremost See them in action!

Live Demo :- 10 Amazing Image Hover Effects!



How To Add the Top 10 Amazing Image Mouse Hover Effects To Blogger?

To do this follow these steps,

  1. Go to Blogger > Layout > Edit HTML
  2. Search for ]]></b:skin>
  3. And now paste any of your preferred CSS: code just above ]]></b:skin>

Now whenever you write a post, simply upload an image in your blogger Editor and then switch to the Edit HTML mode and search for this code <img and paste the HTML: code of your preferred Image effect just after <img as shown below,

image-hover-effects

Number #1

CSS:

.simple1 {
  padding:5px;
  border:1px solid #ccc;
  }
.simple1:hover {
  padding:5px;
  background-color:#ccc;
  }

HTML:

class="simple1"

Number #2

CSS:

.simple2 {
  padding:5px;
    background-color:#ccc;
border:1px solid #ddd;
  }
.simple2:hover {
  padding:5px;
   background-color:#eee;
border:1px solid #666;
  }

HTML:

class="simple2"

Number #3

CSS:

.black-white {
  padding:5px;
border:1px solid #ccc;
  }
.black-white:hover {
padding:5px;
  background-color:#fff;
border:10px solid #000;
  }

HTML:

class="black-white"

Number #4

CSS:

.dashed {
  padding:5px;
border:1px solid #ccc;
  }
.dashed:hover {
padding:5px;
  background-color:#fff;
border:2px dashed #000;
  }

 

HTML:

class="dashed"

Number #5

CSS:

.top-bottom {
  padding-top:5px;
  padding-bottom:5px;
border-top:3px solid #ddd;
border-bottom:3px solid #ddd;
  }
.top-bottom:hover {
  background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
  }

HTML:

class="top-bottom"

Number #6

CSS:

.curtain {
  padding-top:10px;
  padding-bottom:10px;
border-top:2px solid #ddd;
background-color:#000;
border-bottom:2px solid #ddd;
  }
.curtain:hover {
  background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
  }

HTML:

class="curtain"

Number #7

CSS:

.red {
  padding:5px;
border:1px solid #ccc;
  }
.red:hover {
padding:5px;
  background-color:#E71305;
border:10px solid #ddd;
  }

HTML:

class="red"

Number #8

CSS:

.Fadein{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}

HTML:

class="Fadein"

Number #9

CSS:

.Fadein2{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:2px solid #000;

}
.Fadein2:hover{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:2px solid #000;
}

 

HTML:

class="Fadein2"

Number #10

CSS:

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: #7AA1C3;
padding: 0px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: white;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 0px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 5px;
}

 

HTML: For knowing how to apply this popping effect in detail read this post –> Image Pop-up Effect

<a class="thumbnail" href=""><img src="Add Image URL Here" width="100px" height="100px" border="0px" /><span><img src="Add Image URL Here" /><br /> Image Description here </span></a>

 

You can enjoy playing with these codes using MBT HTML Editor. I hope you will find this tutorial pretty useful in further enhancing your cool blogging experience :>>