Yahoo Mp3 Music Player For Blogger

Many Bloggers want to have some music on their blogs especially Music based blogs and blogs kept by musicians and bands.One of the easiest yet most effective ways to add some songs to your blog is using the Yahoo Music Player.Of course it does not have to be music you can add other types Mp3 files like short story's, poetry etc..With the Yahoo Music player you can add a play list to your sidebar or elsewhere on your blog but also add a link to play an individual song.So in a post when you mention a song you can make that song play just by clicking the title.A small play icon will be beside the title to let readers know they can listen to it.The player itself is hidden until someone wants a song then it slides out and plays with controls to pause, toggle, volume etc..This is a great option to play music on your blog.

Click Here To View Full Post >>

The 5 Best Animated Image Hover Effects For Blogs

We all like to spice up the images we use on our blogs.In fact the previous posts we have published on using hover effects, fade effects and border effects have been some of the most popular.So i decided it was time to show you a new Image effect and while i was messing around with the code i thought why not show more than one tutorial...Five to be exact.The 5 Image Hover Effects in this post are REALLY EASY and each can be added to selected images on your blog.In fact you could use all five on different pictures on your blog.

Included in the list of hover effects are border effects, opacity effects and turning one image into another when the cursor is hovered over it.

5 Hover Image Effects For Pictures And Images

Image Hover Effect 1

The first hover effect adds a thick border to the image, you can change the color of the border.

Demo - Place Your Cursor Over The Image :



Instructions

1. In your dashboard click 'Layout' > 'Edit html' > Find The Following Piece Of Code :
(Click Ctrl and F for a search bar to help find the code - More Info On Search Bar)

]]></b:skin>

2. Copy And Paste This Code Directly Before/Above ]]></b:skin>

.effect1 {
padding:6px;
border:1px solid #999;
}
.effect1:hover {
padding:6px;
background-color:#999;
}

Note - You can change the colors used in the effect by switching the hex numbers in the code.Get the codes here - Html Color Code Chart

3. Save Your Template

4. Add "effect1" to the images you want to have the effect as shown below :

<img class="effect1" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidpPe_oZM6PSfgAev5qahpI6rSDARpo2vroLKtxWYKE5Q2WeDBxFI7Izz3HCqOSFzfxXkUqMTtZed5hYVLibBCCSjAfGOuM3sClNTXyUDyZpyiZ8o-GIhOQECwLATX_oly6ri2wOIAI1iZ/s320/blog+guys.JPG" width="320" />

Note: The code above is for an image uploaded to Blogger but the effect works with all images.

Image Hover Effect 2

This hover effect adds a second wider border inside the original both border colors can be changed.

Demo - Place Your Cursor Over The Image :



Instructions

1. In your dashboard click 'Layout' > 'Edit html' > Find The Following Piece Of Code :
(Click Ctrl and F for a search bar to help find the code - More Info On Search Bar)

]]></b:skin>

2. Copy And Paste This Code Directly Before/Above ]]></b:skin>

.effect2 {
padding:5px;
border:1px solid #999;
}
.effect2:hover {
padding:5px;
background-color:#ff3300;
border:3px solid #999;
}

Note - You can change the colors used in the effect by switching the hex numbers in the code.Get the codes here - Html Color Code Chart

3. Save Your Template

4. Add "effect1" to the images you want to have the effect as shown below :

<img class="effect2" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidpPe_oZM6PSfgAev5qahpI6rSDARpo2vroLKtxWYKE5Q2WeDBxFI7Izz3HCqOSFzfxXkUqMTtZed5hYVLibBCCSjAfGOuM3sClNTXyUDyZpyiZ8o-GIhOQECwLATX_oly6ri2wOIAI1iZ/s320/blog+guys.JPG" width="320" />

Note: The code above is for an image uploaded to Blogger but the effect works with all images.



Image Hover Effect 3

This hover effect changes the original solid border into a dashed border with a different color, both border colors can be changed.

Demo - Place Your Cursor Over The Image :



Instructions

1. In your dashboard click 'Layout' > 'Edit html' > Find The Following Piece Of Code :
(Click Ctrl and F for a search bar to help find the code - More Info On Search Bar)

]]></b:skin>

2. Copy And Paste This Code Directly Before/Above ]]></b:skin>

.effect3 {
padding:5px;
border:1px solid #999;
}
.effect3:hover {
padding:5px;
background-color:#fff;
border:1px dashed #ff3300;
}

Note - You can change the colors used in the effect by switching the hex numbers in the code.Get the codes here - Html Color Code Chart

3. Save Your Template

4. Add "effect3" to the images you want to have the effect as shown below :

<img class="effect3" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidpPe_oZM6PSfgAev5qahpI6rSDARpo2vroLKtxWYKE5Q2WeDBxFI7Izz3HCqOSFzfxXkUqMTtZed5hYVLibBCCSjAfGOuM3sClNTXyUDyZpyiZ8o-GIhOQECwLATX_oly6ri2wOIAI1iZ/s320/blog+guys.JPG" width="320" />

Note: The code above is for an image uploaded to Blogger but the effect works with all images.

Image Hover Effect 4

The effect in this hover effect can be simple or extreme.When you hover over the image it changes to a totally different image.The bigger the size difference between the images the more extreme the effect.

Demo - Place Your Cursor Over The Image :



The tutorial for this image effect can be found in this post - Make a rollover mouse over image

Image Hover Effect 5

The hover effect here is one of the most commonly used called opacity effect.The image is blurred until you hover over it than it becomes clear.

Demo - Place Your Cursor Over The Image :



The tutorial for this image effect can be found in this post - Opacity Hover Effect Image

That's it with these image effects you can add some spice to the pictures on your blog.Remember you can use them with images in posts and on your template.

Let us know which effect you like the best !

How To Submit Your Ideas And Suggestions To Blogger

Last year the Blogger team opened a forum for users to submit their suggestions and ideas to improve Blogger.That forum received thousands of ideas and other users were able to vote up and down the ideas so the best ideas .From that we got some of the most voted ideas implemented such as The New Template Designer, Spam Comment Filtering, Built-in Blog Stats, New Post Editor, Static Pages, Jump Breaks, Background Image Uploads, Accurate Post Previews, Photo Captions and More Default Templates with more of last years suggestions still being worked on.

This week The Blogger Team once again have opened up to the users to submit their ideas to improve Blogger.You can submit any ideas you may have an vote on the ideas already submitted.This is your chance to speak directly to Blogger and tell them what you want.

Click Here To View Full Post >>

Top 20 Do-Follow Social Bookmarking Websites

I know most of you Bookmark and share your blog posts on the top social bookmarking and social networking websites.Bookmarking your blog posts is one of the quickest and easiest ways to get some exposure and let people know about your latest content.Almost all bloggers follow the same routine of sharing their posts on their Twitter and Facebook profiles and pages.Many also add their links to the other popular bookmarking websites such as Digg and Stumble Upon.But did you know you would be much better served Bookmarking your posts on other often less known Bookmarking sites ?

The top Bookmarking websites add a No-Follow attribute to links shared by members.This results in the link not being indexed by the leading search engines and having no effect on Google Page Rank.So basically apart from people seeing the link and clicking it you get nothing in the way of improved search ranking etc.By bookmarking on the top 20 sites listed below you get your links followed by Google and the other search engines and improved search rank and page rank.Sounds Great lets look at the list..

The Top 20 Do-Follow Social Bookmarking Websites

1. Slashdot.org - Slashdot has a Google page rank of 9 and Alexa rank of 1,272.

2. Reddit.com - Reddit has a Google page rank of 8 and an Alexa rank of 244.

3. Technorati.com - Technorati has a Google Page rank of 8 and an Alexa rank of 895.

4. Mixx.com - Mixx has a Google Page Rank Of 8 and an Alexa Rank of 1,194.

5. Folkd.com - Folkd has a Google Page rank of 8 and an Alexa rank of 2,691.

6. Metafilter.com - Metafilter has a Google Page Rank of 7 and an Alexa rank of 2,309.

7. Wikio.com - Wikio has a Google Page Rank of 7 and an Alexa rank of 2,793.

8. Current.com - Current has a Google Page Rank of 7 and an Alexa rank of 3,749.

9. Connotea.com - Conntea has a Google Page Rank of 7 and an Alexa rank of 4,628.

10. Tipd.com - Tipd.com has a Google Page Rank of 7 and an Alexa rank of 12,098.

11. Clipmarks.com - has a Google Page Rank of 6 and an Alexa rank of 3,524.

12. dZone.com - dZone has a Google Page Rank of 6 and an Alexa rank of 2,833.

13. Buddymarkd - Buddymarks has a Google Page Rank of 6 and an Alexa rank of 5,722.

14. Sphinn.com - Sphinn has a Google Page Rank 6 of and an Alexa rank of 7,110.

15. Kirtsy.com - Kirtsy has a Google Page Rank of 6 and an Alexa rank of 8,351.

16. Kwoff.com - Kwoff has a Google Page Rank of 6 and an Alexa rank of 18,455.

17. A1-Webmarks.com - A1-Webmarks has a Google Page Rank of 5 and an Alexa rank of 4,929.

18. Indianpad.com/ - Indianpad has a Google Page Rank of 5 and an Alexa rank of 7,386.

19. Designfloat.com - DesignFloat has a Google Page Rank of 5 and an Alexa rank of 6,679.

20. Spotback.com - SpotBack has a Google Page Rank of 5 and an Alexa rank of 7,703.

Thats your list, take the time to use some of these sites and encourage readers of your blog to bookmark your posts by making links to them available.You can add a All In One social bookmark tool on your blog that will offer all services - The 5 Best All In One Social Bookmarking Gadgets.

More On No-Follow 

This is how the main search engines see a Nofollow link :

"Google states that their engine takes "nofollow" literally and does not "follow" the link at all. However, experiments conducted by SEOs show conflicting results. These studies reveal that Google does follow the link, but does not index the linked-to page, unless it was in Google's index already for other reasons (such as other, non-nofollow links that point to the page).
Yahoo! "follows it", but excludes it from their ranking calculation.
Bing respects "nofollow" as regards not counting the link in their ranking, but it is not proven whether or not Bing follows the link.
Ask.com also supports the attribute"

The above information is from Wikipedia you can see the full article here - Wikipedia No-Follow Article

Feedback And Help - The list is made up of 20 Bookmarking sites i know Defiantly use Do-Follow links.If you know of more bookmarking websites ranked higher than those in the list let us know.

Change The Number Of Posts Displayed In Your Feedburner Feed

Your Blogs Rss Feed by default displays the latest 25 posts.This is true with the default Blogger feed and the Feedburner feed.Most blogs are using the Feedburner feed provided by Google and if you don't you should (How To Get A Feedburner Feed).You can change the number of posts displayed on your feed page to any number of posts you like and in this post i will show you how it's done and why you should change.

You may think the reason for changing the number of posts displayed in your feedburner would be to increase it, but in fact it's the opposite.Most people that visit your blogs feed have got there from your blog so they have seen your posts and are there to subscribe.You want as many Rss subscribers as possible so you want to make subscribing as easy as possible.

Click Here To View Full Post >>

How To Make An Animated Scrolling Text Favicon

A Favicon is an image that appears in the Address Bar and Tab when you are on a website.The Favicon you use can become a kind of Logo associated with your blog.On Blogger the Blogger Orange B Logo is used as the Favicon on all blogs but you can easily change it.In a recent post i showed you how you could use a Favicon you found on other websites, so i wanted to add a post showing you how to make a totally unique Favicon.Here i will show you how to create a 'Scrolling Text Favicon' for your blog.A scrolling text favicon is just as it sounds, you can have the name of your blog, URL of your blog or any text scrolling across the Favicon.Along with the text will be a icon, logo or any image you choose.

Below is an animated Favicon for a Test Blog with the text 'This is my blog' and an image of the Blogger 'B' within a folder .You can see how that Scrolling text Favicon looks in action here : Test Blog



So lets see how you can create a Animated Scrolling Text Favicon for your blog, and then how to add a Favicon to your blog.Many Bloggers have not changed their favicon and stick with the default Blogger B, i will also show you how you can use the Blogger Favicon just adding your own scrolling text.

How To Create An Animated Scrolling Text Favicon

Step 1. Follow this link to ww.FaviconGenerator.org

Step 2. Scroll to the bottom of the page on FaviconGenerator were you will see the options to upload the image you want to use and add the scrolling text you want added.

Note - If you want to use your current Favicon it may be a .ico image which are not accepted.In this case use a image converter, here is a link to a Image Converter.

Note 2. If you want to find an image to use check out this post - , or use Google image search and in the options on the left select size exactly 16 x 16.

Note 3. If you want to use the Blogger B just right click on this image and save :



Step 2. Once you have added your image and text click generate, the page will refresh and a preview of your animated scrolling favicon will be at the bottom of the page.

Step 3. You now want to save your new animated Favicon, right click on the preview (Make sure it's the animated version) and save it.You can now upload your animated favicon to Blogger or any image host website.

Your Favicon is now ready to use.

How To Use Your Animated Favicon On Blogger

Step 1. In your dashboard click 'Design/Layout' > 'Edit Html'

Step 2. Copy the code below and place it in your template directly below <head>
(You will find <head> at the very top of your Html)

<link href='ADD-YOUR-FAVICON-URL-HERE' rel='shortcut icon'/>

Note : Replace ADD-YOUR-FAVICON-URL-HERE with the URL of your new animated Favicon.

Step 3. Save your template and your favicon will be in place.

Thats your animated favicon, Check out more of our Great Design Tips for your blog.

Post Your Comments, Views And Questions Below.

Create An Email Logo With Your Email Address

One of the cool things i have started to see appear in the sidebars of blogs is the Email address of the author in an image using the logo of the Email provider.If you have not seen them yet they look great and are very easy to create.Below i have created three Email Logo images for Gmail, Yahoo Mail and HotMail.There are over 20 different Email providers they have logos for and you can also change from .com to .ca, .fr, .co.uk etc...

How To Create A Email Logo

Step 1. Follow This Link To Nexodyne.

Step 2. Enter your email, select provider and domain, click generate.

Step 3. You can now use the URL provided or save the image to your computer and upload it to Blogger or another service.

Turn Your Email Logo Into A Clickable Link

The Email Logo image would be OK on its own just displaying you email so readers can contact you.However You may want to make your newly created Email Logo image into a link people can click to send you an email here is how it's done.

Copy The Code Below And Replace :

IMAGE-URL-HERE with the URL of your Email Logo
EMAIL@ADDRESS.COM with your email address

<a href="mailto:EMAIL@ADDRESS.COM"><img src="IMAGE-URL-HERE" /></a>

Add the edited code to a HTML/JAVASCRIPT gadget in your sidebar.

Remember you can get all these tips sent directly to your email and stay a step ahead.Its a quick and easy service Provided for Free by Google.Just fill in the Email form below the post or Click here for other Rss Options. If you need extra help on this or any tutorial just leave a comment, I love comments and feedback so this Blog is Do-Follow - when you comment here it helps Your Blogs Google rank !

There you have it, a neat looking image with your Email, let us know what you think...