11 June 2014

create a blog button and grab box

Grab buttons are a very easy and handy way to promote your blog. You can use them for paid advertising slots, or offer them for free on your sidebar for people to take and attach to their own blogs. The size of these is up to you but I would recommend always going 200px or under so that they will fit in most standard sidebars. There are a couple of ways that you can create your blog button depending on what resources you have. 

STEP ONE:

The first step is to create your button. If you have a photo editing software like Photoshop you can easily create yourself a little 150px by 150px (sizing is up to you! Make it square, rectangular or even circular) If you don't have any software don't worry because you can easily make one for free using picmonkey.com. Hover over design on the homepage and choose square or custom to get started:

I chose custom and then made an image 180 by 180px





STEP TWO:

From here I chose to add a circle and edit the colour using a hex code that you can paste as shown below.

step four:

From here I added some text and then made my background transparent - I would highly recommend doing this if you use a circle for your button so that you don't get a white square around it if the background on the sidebar isn't white!


Once you are happy with your button, simply press save at the top and save your button to your computer - I recommend saving it as a PNG.

STEP FIVE:

Now onto the code part,  Go to the template page and press Add a Gadget > HTML/JavaScript. Add a title (Grab My Button) and paste the code below into the box:
<center>
<div align="center" style="padding: 5px;"><img src="IMAGEURL"  title="BLOGNAME" alt="BLOGNAME" /></div><textarea style="background:#ffffff;border:solid 1px #cccccc; color: #333333; font-size:90%; height: 30px; margin:auto; text-align: left; padding: 2px 0 2px 5px; display: block;  width: 100px;"><div align="center"><a href="BLOGURL" title="BLOGNAME"><img src="IMAGEURL" alt="BLOGNAME" style="border:none;" /></a></div></textarea>
</center>
Now you need to upload your new blog button to postimg.org and paste the Direct Link into the areas of the code that says IMAGEURL, post your blog url (for example http://www.prettywildblogs.co.uk) into the area that says BLOGURL and press save. Simply drag the gadget to where you want it placed on your sidebar and you're done!

Serena Ozgowicz is a 21 year old Puggle owner with a passion for web design. She likes to share her passion with you guys through tutorials and helpful tips. You can follow her on facebook, twitter and instagram.

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...