Web design and HTML tips for bloggers

I'm one of those really cool people that finds HTML fun. And by that, I mean I had no life when I was a teenager so instead of going out partying I opted to learn how to code Myspace layouts like a pro - who knew it would ever actually come in handy for me one day!?

Anyway, I'm always getting questions from my friends about how to use HTML to do certain things on blogs and websites, so I decided to make a blog post all about it in hopes to help a few of you guys and gals reading this. If you're a HTML king, this might not be of any use to you, but if you're a bit of a n00b (no sweat, we all were once!) then hopefully this will be a bit of a gold mine if you want to start pimping out your site like a pro.
 

Create a search bar

I guess search bars are pretty self explanatory, right? A lot of platforms these days automatically plonk a search bar into your site, but if it doesn't (or if you simply don't like the look of the one they give you) you can go ahead and give this one a go. To activate it, all you need to do is copy the code below and simple change the 'your-url.com' part to - you guessed it - your own URL! You can also feel free to play around with the width and height of the search box, depending on where you want to put it. If you want to change the colour of the search box borders, just change #000000 to whatever colour takes your fancy using a Colour Picker Tool. 

How to do it [COPY AND PASTE]:

<form method="get" action="http://www.YOUR-URL.com/search.php"> 
<table cellpadding="0px" cellspacing="0px"> <tr> 
<td style="border-style:solid none solid solid;border-color:#000000;border-width:1px;"> <input type="text" name="zoom_query" style="width:200px; border:0px solid; height:17px; padding:0px 3px; position:relative;"> </td>
<td style="border-style:solid;border-color:#000000;border-width:1px;"> 
<input type="submit" value="" style="border-style: none; background: url('http://i60.tinypic.com/2ppmv6c.png') no-repeat; width: 26px; height: 19px;">
</td> </tr> </table> </form>

---------------

Add a language translator

This is something that I've only recently done, but it's something I wish I had done sooner. I don't know about you guys, but judging by my Google Analytics reports (you can see my Google Analytics for Beginners post here) a nice handful of you guys come from outside of the UK. The Google Translator is one of the best, which is why I've decided to link it here, but there are a few others on the interwebs too.

How to do it:
 

To turn your blog or website into something suitable for all languages, all you have to do is head on over to the Google Translator Website Manager, add your URL to the database, and follow the rest of the instructions! You can pick from either a physical widget (as pictured above) or a toolbar that appears whenever someone from a different country logs onto your page. I've chosen to do the latter, but they both work just as well!

---------------
 

Make an Instagram widget

I always get asked about how I make the Instagram widgets on my blog, but the truth is, I don't make em, Snapwidget does! I've been using Snapwidget for a while now, and I've never had any issue with it at all.


How to do it:
 

It's as simple as just heading over to the Snapwidget website, entering your Instagram user name and playing around with a few different settings. Then all you have to do is copy and paste the code they give you, put it onto your site and you're done! It's pretty much fool-proof, no matter how much of a newbie you are. And hey, doesn't it look nice!?

---------------

 

Make social media follow buttons

AddThis is a fairly recent discovery of mine, but I've already recommended it to so many bloggy friends. It basically (amongst other things) allows you to create social media icons suited to you, which you can place in varuious places on your website. You can add these social icons to the bottom of your posts, in a sidebar or even have them appear at the top of the page when someone clicks on your site (which is what I've decided to do). You wouldn't believe the amount of follows you get on your social sites just from having one installed!

How to do it:
 

Simply create an account/log in to AddThis, click on 'tools' (in the top bar) and select whichever tool takes your fancy. Then all you have to do is configure which social channels you'd like to use by adding your usernames and URLs. Get the code, pop it on your website and presto!

---------------
 

Put two images next to eachother

I decided to add this in purely because I get asked this the most, which sounds pretty crazy considering it looks like it would be the most simple thing to do in terms of HTML. Annoyingly enough, a lot of sites will always put images underneath eachother, unless you code them properly. Et voila. To add your own pictures using HTML, upload them onto a website like Photobucket or Tiny Pic, copy the 'Direct Link' and replace the 'Place Picture Link Here' with that code! Then all you have to do is replace the 'Place Link Here' text with the link you want your picture to point to when someone clicks it. Simples.


How to do it [COPY AND PASTE]:
 

<div class="nav3" style="height:705px;">
<a href="PLACE LINK HERE"><img src="PLACE PICTURE LINK HERE"></a>
<a href="PLACE LINK HERE"><img src="PLACE PICTURE LINK HERE"></a>
</div>

---------------
 

Turn a picture into a clickable link

Sometimes you just want to click on a picture, rather than a link. Am I right? I find this works really well for things like headers and any images you want to put into your sidebar, but it can work for just about anything. It also allows you to add ALT text as well, which will help your pictures show up more on Google!


How to do it [COPY AND PASTE]:
 

<a href="INSERT LINK HERE">
<img src="INSERT IMAGE LINK" alt="INSERT ALT TEXT HERE" width="42" height="42" border="0"> </a>

---------------

Hope this helps some of you guys! Feel free to ask any questions in the old comments below.