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!
Posted by at
Labels: , , , , , , ,

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

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

    ReplyDelete

  10. I just did it. I love the little cloud. Thanks!

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  15. Help! I cant get it to work!

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

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  20. Made mine after this tut - easy=)

    -Daisy

    ReplyDelete

  22. 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

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

    www.melodees.blogspot.com

    ReplyDelete

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

    help!!

    Thanks

    http://icecreamforfashion.blogspot.com/

    ReplyDelete

  25. Very nice icon, thank you so much !!

    http://letstalkaboutarts.blogspot.com

    ReplyDelete

  26. thank you!
    http://thebrittanybook.com/

    ReplyDelete

  27. thanks!
    http://theinfluenceofemmekay.blogspot.com

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

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

    http://myfashioninsider.blogspot.com/

    ReplyDelete

  31. This comment has been removed by the author.

    ReplyDelete

  32. Thanks Alot...You made it so easy ;)

    http://poseprose.blogspot.com/

    ReplyDelete

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

    ReplyDelete

  34. 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

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

    ReplyDelete

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

    ReplyDelete

  37. This comment has been removed by the author.

    ReplyDelete

  38. 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

  39. 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

  40. 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

  41. 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

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

    ReplyDelete

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

    ReplyDelete

  44. 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

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

    itisagoldenworld.blogspot.com

    ReplyDelete

  46. 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

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

    ReplyDelete

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

    http://touchofawanderer.blogspot.com/

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  53. 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

  55. thanks so much for posting this! you deffinitely helped !

    xo
    A_Riot

    ReplyDelete

  56. 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

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

    ReplyDelete

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

    ReplyDelete

Subscribe to: Post Comments (Atom)