Monday, December 15, 2008

How to Add a Custom Made Bloglovin'-icon to Your Blogspot blog!


Find an updated version of this post at:

Step 1 - Claim your blog (If you've not already done this)


Claim your blog by logging in to Bloglovin'. Then go to Settings > My blog and click the button that sais "Claim your blog".



Step 2 - Choose Icon

Hit the "Icon for your blog"-button that you'll find under "My blogs" which will take you to a page with various Bloglovin' icons.


Step 3 - Adding the icon

In order to add your custom made icon you'll need to choose one of the pre-made icons and then change its code (we'll explain how in step 4). P.S. It doesn't matter which button you choose to add in the beginning.

Add a icon by clicking on the "Add to blogspot!"-button, which will take you too your Blogspot site. On blotspot just hit the big blue button and add the icon.

Step 4 - Change the pre-made icon to a custom made one!

First of all, you have to design your own icon and upload it to your blog/other website in order to get a link to it.

Now click on the "Edit"-button on your Bloglovin'-widget. Then a window will appear with a bit of code. This is where you change the icon. First of all you need to save your blog ID from this code. Your blog ID will appear as in the picture below.

Save these numbers for the next step, and then delete the rest of the code that is in this box.

Then paste the code below into the box:
<a target="_blank" href="http://www.bloglovin.com/inc/addsubscript.php?id=397643"><img src="http://www.bloglovin.com/image/follow-cloud-blue.gif"/></a>
Look for where it sais "id" in the text above. Change that number to your ID-number that you saved in the previous step. Replace this link: "http://www.bloglovin.com/image/follow-cloud-blue.gif" with a link that leads to your picture (your icon).

However, I've created two icons that you are welcome to use:


Blue icon:


http://2.bp.blogspot.com/_Txd118s5Cu0/TNWuvipIZoI/AAAAAAAAAFI/Ght9c5k_OIA/s400/follow-cloud-blue.gif

Pink icon:


http://4.bp.blogspot.com/_Txd118s5Cu0/TNWvF9PRJzI/AAAAAAAAAFQ/1uNPxpqng0I/s400/follow-cloud-pink.gif


Once you're done, link to your blog in my comments so we can check each others icons out!

59 comments:

  1. Hey,
    This is a sweet post! I designed an icon and and added it to my blog: TheMuxStopsHere.blogspot.com. It's under my profile. Problem is, when I click on it, it leads to a Bloglovin' error page. Do you know what could cause this?

    Thanks,
    -Margeaux

    ReplyDelete
  2. Margeaux: I'd guess that maybe your ID is wrong or something. If you past the code to me I can look in to it!

    Best regards
    Linus

    ReplyDelete
  3. Hi, thnx for the great idea. I followed your instructions and managed to get my customised bloglovin icon up on my blog. However I want to remove the black border and the caption below (if you can view it too). How do I do that?

    http://venuscreeper16.blogspot.com/

    Thnx a lot. Cheers!!!

    ReplyDelete
  4. Hello Orchid!

    Change the link in your code to http://img355.imageshack.us/img355/6311/bloglovemecs5312ge4.jpg. That's a picture without borders and img size! :)

    ReplyDelete
  5. hi there.
    you can look at my blog
    i dont like that blue border up on the icon. pls help me see what you can do.
    http://1gramofsugarylove.blogspot.com/

    ReplyDelete
  6. I just wanted to drop in and say, I used the blue icon you made! ;) Really liked the design, and think it stands out nicely. :) Thanks for creating and sharing it! <3

    xoxo,
    S-C

    ReplyDelete
  7. SANDY: Hi :) The reason why it's a border around your picture is because of the css rules. What you need to do is simply add border="0" after the link. So it is like this:

    img src="http://www.bloglovin.com/image/follow-cloud-blue.gif" border="0" />

    Then it should work just perfect :)

    Susanna-Cole: Thank you for using it :)

    ReplyDelete
  8. FESI: Well tell me more and I might be able to help you :)

    ReplyDelete
  9. I just did it. I love the little cloud. Thanks!

    ReplyDelete
  10. Hii my blog is wordpress and i don't know how to add the icon to my blog!:S please help thanks!

    ReplyDelete
  11. Styleexpress: Hello, I will create a guide for wordpress in a couple of days! :)

    ReplyDelete
  12. Help! I cant get it to work!

    http://vintage-tea.blogspot.com/

    ReplyDelete
  13. hello
    I'm new here...I want to add bloggers in my blogspot,i dont know how it works

    ReplyDelete
  14. the icon is awesome!!
    I added it to my blog!(:
    THX!!

    ReplyDelete
  15. yayy love my new icon!!
    http://www.fashioninsiderguide.com/

    ReplyDelete
  16. When I try to find the id number the layout is completly different and is not coming up when finished, very frustrating.

    ReplyDelete
  17. Made mine after this tut - easy=)

    -Daisy

    ReplyDelete
  18. i've done it.

    i just used the blue cloud but i translate the "follow with" to "sígueme" because i write in spanish.

    thanks a lot!

    boticapop.blogspot.com

    ReplyDelete
  19. Sweet! I did it! Sooo coool! check it out!
    My icon is sooo sexy! :)

    www.melodees.blogspot.com

    ReplyDelete
  20. I am having such major issues doing this...my code does not have an id number....

    help!!

    Thanks

    http://icecreamforfashion.blogspot.com/

    ReplyDelete
  21. Very nice icon, thank you so much !!

    http://letstalkaboutarts.blogspot.com

    ReplyDelete
  22. thank you!
    http://thebrittanybook.com/

    ReplyDelete
  23. thanks!
    http://theinfluenceofemmekay.blogspot.com

    ReplyDelete
  24. I'm now using your pink bloglovin icon..thanks! :-)

    ReplyDelete
  25. very useful for me and i like your blue icon.
    so i'm using it !!

    ReplyDelete
  26. Thanks a lot! I've made one for me! You can check it out here:

    http://myfashioninsider.blogspot.com/

    ReplyDelete
  27. This comment has been removed by the author.

    ReplyDelete
  28. Thanks Alot...You made it so easy ;)

    http://poseprose.blogspot.com/

    ReplyDelete
  29. help! i cant find the button to add a default icon to blogspot?

    ReplyDelete
  30. hi there, i think that bloglovin' may have changed a few things. do you know how to make a custom bloglovin' widget with the way the site is now?

    ReplyDelete
  31. i just read your edit! lol. is your new blog live yet?

    ReplyDelete
  32. I love the blue icon, but is there one with a transparent background I can use?

    ReplyDelete
  33. This comment has been removed by the author.

    ReplyDelete
  34. for some reason its not letting me make my own icon?? i can't find the "icon for your blog" button. Help?? Much appreciated :)

    ReplyDelete
  35. thanks so much!
    this way i found out how to get a widget into an own layout. :)

    http://half-seas-over.blogspot.com/ - my blog. german btw. (i'd translate my posts if some native english speakers would want to follow me. :))

    ReplyDelete
  36. im with wordpress and ive created my own widget and i dont think the steps that have been posted will apply to me ): HELP ANYONE?

    thanks!

    ReplyDelete
  37. This button is old, so once you go to the account tab and click "My Blog", scroll to the very bottom of your screen and you'll see a word "Widgets" once you click that, you're all set!
    =)

    ReplyDelete
  38. how come the code is different from my widget plus i don't have an 'id'???

    ReplyDelete
  39. How do i use the icon on my wordpres blog or is that not doable?

    ReplyDelete
  40. I've got my own icon too. I just doodled something in paint and added it as an image with a link to my bloglovin page.

    ReplyDelete
  41. I changed the icon and have now may own one :)
    Thanks for the Help!

    itisagoldenworld.blogspot.com

    ReplyDelete
  42. I just lost my old blogger following widget (I prefer bloglovin for reading blogs anyway), so I used this tutorial to create my own button. Thank you.

    robynsnestblog.blogspot.com

    ReplyDelete
  43. Thank you so much for this tutorial! I used the blue icon you designed, very cute, love it!

    ReplyDelete
  44. it doesnt work with my blog.. i dunno why..
    help me out BloglovinG! \

    http://touchofawanderer.blogspot.com/

    ReplyDelete
  45. heyy i wanna claim my blog but its says could not find your code and i dont what it means by that ?

    ReplyDelete
  46. I'm using your pink icon on my blog now, thanks for creating it!

    ReplyDelete
  47. I'm also using the pink icon! Thanks for the tutorial! :D But somehow the icon has placed it selv beside another widget I have on my blog.. Are there some easy way to fix it?

    http://marinilssen.blogg.no

    ReplyDelete
  48. thanks so much for posting this! you deffinitely helped !

    xo
    A_Riot

    ReplyDelete
  49. BADASS!!! OK, so I am totally going to do this... but how do I design it? What type of program do I use.. I am not very computer savy with the whole html speak so I'm not sure how to make the "code" for my design... HELP!

    ReplyDelete
    Replies
    1. OH and comment on my blog for a response or just email me at getrdy4wknd@hotmail.com
      THANKS AGAIN :)

      Delete
  50. http://somuchlovex.blogspot.com/
    thankyou, i used your blue one xx

    ReplyDelete
  51. Thanks for sharing, i'm now using the pink button. But i'm gonna make my own.

    ReplyDelete