THEMECANDY

So some of you have been wondering how did I changed the tumblr buttons of this blog. I decided to put up a tutorial on this, a detailed tutorial. So sorry if this post is too long.

It’s really easy because all you have to do is to make a new follow and dash buttons then copy and paste some codes.

I first saw a tutorial about this in this blog. I just used the image she provided, but for the codes, I didn’t use hers cause her codes are kind of incomplete. 

First thing is save this image as your basis for the new follow and dashboard buttons.

Just make the new tumblr buttons on top of the image base given above. Just like what ishvi did here:

If you do not have Photoshop, you can go to this site: pixlr.com

It’s an online editing software pretty much just like the Photoshop though the features are very limited, mostly just the basics. 

So once you are done with your image, save it as .PNG file. Save it separately. So you must have two images. One for the follow, then one for the dashboard. 

I don’t want anyone to mess this up so I’m posting how I did it.

Repeat the same as you save the dashboard button.

CODES:

» CSS

Paste these codes under your <style type=”text/css”>

#hnefd{position:fixed; float:right; top:3px; right:0px; width:150px;}

{block:IndexPage} iframe#tumblr_controls { opacity: 0; filter: alpha(opacity=0); display:none; } {/block:IndexPage}

{block:PermalinkPage} iframe#tumblr_controls { opacity: 1; filter: alpha(opacity=100); } {/block:PermalinkPage}

The #hnefd is for the style and positioning of the buttons. There are also two iframe codes. 

The one that has {block:IndexPage} is the code to make the original follow and dashboard buttons invisible on your main page. So that when you put your new buttons, it won’t overlap.

While the one with the {block:PermalinkPage} is the code to make the original buttons (the like, reblog etc..) back to its place when you go to the permalink page.  

» HTML

{block:IndexPage}

<div id=”hnefd”>

<a href=”http://www.tumblr.com/follow/YOUR_TUMBLR_NAME_HERE”><img src=”IMAGE_URL_HERE”></a>

<a href=”http://www.tumblr.com/dashboard”><img src=”IMAGE_URL_HERE”></a>

</div>

{/block:IndexPage}

Want to place this little guy on your blog? Easy! Simply copy & paste this code into your description or anywhere else

<a title="FOLLOW ME on INSTAGRAM" href="http://instagram.com/YOURINSTAGRAMNAMEHERE"> <img src="http://i49.tinypic.com/5u0kfr.jpg"/></a> IMPORTANT!!!!! - Make sure you put your usename where it says YOURINSTAGRAMNAMEHERE! for example

wow thankyou so much! first sign on a positive message i've had in weeks... many other people seem to be so rude & don't realise there is a person with feelings behind this screen haha.