Labels

Coding Tutorials for Blogger


The first thing I have learnt to do, in terms of html, and I guess this is the only thing I can sort of do, are social media buttons. The ones you see down the sides of every website or blog ever, although they are not actually necessary for your blog.  I wanted to learn how to do them even though I'd only have like one button to put. This is my version of how you could create your own buttons or linked images.
<a/></a>
This is like the sandwich and everything else goes inside the sandwich and you can have mini sandwiches in the big one.
<a href="URL OF WHERE YOU WANT THE BUTTON TO TAKE YOU">
The highlighted red bit means where you want the button to take you and the URL is inside the speech marks ("...")
<a href="URL OF WHERE YOU WANT THE BUTTON TO TAKE YOU" target="_blank">
The highlighted bit is optional and is added if you want the link to open in a new tab or window. This also is our first sandwich.
<img src="ULR OF IMAGE" height="60" border="0" />
The next highlighted part is like the picture frame of the image and everything to do with the image goes inside the picture frame.
<img src="URL OF IMAGE" height="60" border="0" />
The highlighted bit here means where the image comes from or where its hosted from.  For this reason the image has to be uploaded on to the internet and have a URL or use a host site like Photobucket to get the URL.  The URL is put inside speech marks again.
<img src="URL OF IMAGE" height="60" border="0" />
This highlighted part tells us the height of the image in pixels; the number of pixels is indicated inside the speech marks.
<img src="URL OF IMAGE" height="60" border="0" />
This one is also completely optional.  It is the picture frame of the image, but I don't normally add a border, because the image would already have been designed with or without a border to start with. The number of pixels for the border is inside the speech marks.
<a href="URL OF WHERE YOU WANT THE BUTTON TO TAKE YOU" target="_blank"><img src="URL OF IMAGE" height="60" border="0" /></a>
It is very important to note where all the spaces are in the piece of html as well, which I have just highlighted.

If you want to put more than one button, then all you have to do is repeat the steps again and add the new sandwich of html code underneath the first sandwich.  Here is an example of that with two buttons in a row:
<a href="URL OF WHERE YOU WANT THE BUTTON TO TAKE YOU" target="_blank"><img src="URL OF IMAGE" height="60" width="60" border="0" /></a> 
<a href="URL OF WHERE YOU WANT THE BUTTON TO TAKE YOU" target="_blank"><img src="URL OF IMAGE" height="60" width="60" border="0" /></a>
To finish, it really helped to learn and store this in my memory by writing it out again to teach you guys and I think that I have got the hang of writing this html code now.  I hope to learn lots more html in the future, but for now this is enough to keep me going.

Has this helped you to create linked images/ buttons for your blog?

image


I really want to learn how to use coding like html, css and javascript one day to help me with my design and website work. But as that's in the not very near future, I thought I'd share a few different website where you can get tutorials, resources and instructions on what coding is, how it works and how to write it.

I have done one post about coding before which was how to make a button using html which you can look at too. I would really love to be able to do more with coding and to help you out by making more posts about it, but for now, here is the list of hopefully helpful websites.




I decided to make a tutorial for how to make a pages bar including a drop down menu because I have only recently made one for my blog and found it to be easier than I expected it to be. Also, I find that when I teach someone else what I have learnt, it tends to stick in my mind a lot better.

This tutorial uses HTML and CSS and is focused on using Blogger, but I've tried to explain everything in simple terms and highlighted and key bits you need to take notice of or any customisable sections.

Adding the HTML:


Get to your Blogger blog page, find the Layout section and click add a gadget, picking the HTML/Javascript option. Now you can copy and paste the code that you see below:

<center>
<nav>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Categories</a>
     <ul>
           <li><a href="#">Blogging</a></li>
           <li><a href="#">Lifestyle</a></li>
           <li><a href="#">Art</a></li>
    </ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Shop</a></li>
</nav>
</center>

Now you have the code you can customise it with the sections that will be unique to your blog:
  • Yellow: center is the alignment of your menu, it can be either center, left, justify or right, depending on where you want it to appear.
  • Red: this will be the title of each menu item.
  • Orange: this is where you can add the URL of your pages or where you want to go when you click the button.
  • Blue: this whole section is the drop down menu, so in here you'd add all the items you'd want to appear when you hover over the button which I have labelled "Categories" and you'd add the URL's of each of these as well.


Adding the CSS:


Next is for the CSS section of the code. If you are using Blogger, at this point you need to save your widget. Now go to Layout > Template Designer > Advanced > Add CSS. This is where you can easily add any CSS to change your blog's design and see the preview in the window below.

I am not the best at CSS, so here I'm going to redirect you to two other sites where I learnt the CSS for the drop down menu. I found their tutorials very useful and made my own blogs drop down menu with them:


And you're done:


Hopefully with the help of these three tutorials you have now managed to make and customise your own drop down menu.

Have you got a drop down menu on your blog or website?


Some more coding tutorials:


Labels:

Popular Posts