codecodecode

Sunday

HTML Coding For Beginning Bloggers

Hello everyone! Last month, I redesigned my blog. I have been getting loads of emails on how I did it and if I can give some tips so I decided to do a blog post on it! I am going to give you some basic HTML codes to get your blog design looking good and some other little HTML codes just for fun!
 
SOCIAL MEDIA ICONS
 
For some reason, people adore my social media icons! I love them too, so glittery. Here is the simple code I used to get them on my page. (I'll show you one)
 
BLOGLOVIN
 
<a href="SOCIAL MEDIA LINK HERE" target="_blank"><img src="PICTURE LINK HERE" width="SIZEpx" height="SIZEpx" /></a>
 
GREEN- This is the link of your social media. Mine would be my Bloglovin since I made this for my Bloglovin account.
 
PURPLE- This is the link to the picture of the social media button. All you do is search on Google or Pinterest "social media buttons" and search through the thousands of pictures. Once you find some that you like follow the link to the button (its better not to use Google Images) and save them. Then upload to Photobucket or Flickr and put the link there!
 
BLUE- This is how big you want yours to be. Mine was 48x48 but you can make yours as big or small as you'd like.
 
 
CATAGORIES BOXs
 
I don't have this on my blog (I am planning to add it soon) But it is super easy once you know how to do the social media coding.
 
All you need to do is go on PicMonkey and make a picture for your category such as "Music". (Make sure it is a size you like, otherwise it will come out bad) Now, do the EXACT same thing as social media icons:
 
-Upload your picture to Photobucket
-Use the same code
-BUT in the green area, try to find a post label that matches your category. (Music label for music, etc) Copy that link and put it in the area.
-I've learned that the size matters on the actual picture, but still play around with it!
 
 

Just For Fun Codes

 <em>Your emphasized text</em> (emphasizes your text)

<a href="http://www.yourlink.com">Your linked text</a>  (For non-blogger users, it does this)

<a href="http://www.yourlink.com"><img src="http://www.yoursite.com/yourimage.jpg" alt="describe this image"/></a>
 (You could also use this code for the category boxes, or just a simple image link)


That's all for today folks! I hope you enjoyed. Sadly, I was trying to get the little black heart as one of the codes but it wasn't working. Can someone tell me the code for that? Thanks for all of the wonderful comments on my last post :D

Mkay bye,
Noor


 

23 comments:

  1. This was very helpful !! Xxx thank you xx Check out my new blog post! I'm in need of some followers, thank you! X http://xbeyoutifulx.blogspot.co.uk

    ReplyDelete
  2. Thank you for sharing these, it's so helpful! ♥
    Amy xx

    Perfect Imperfections

    ReplyDelete
  3. This was so helpful! Thanks!!! -Bethany! http://bethanysbrightlife.blogspot.com/

    ReplyDelete
    Replies
    1. You are so welcome. I am happy you enjoyed.

      Delete
  4. wonderful - thank you for this. <3

    ReplyDelete
  5. Love it-- I can share some more if you would be interested in having me do a guest post.

    Leave a comment on my blog :)

    ReplyDelete
  6. These are really useful. I am definitely going to make some social media buttons :)

    ReplyDelete
  7. great tips!! thanks for sharing!!

    have a great week!
    Animated Confessions

    ReplyDelete
  8. Hi Noor!
    Discovered your blog through a Wonderforest comment. Can I say how nice it is to come across somebody as young as you investing so much time and effort into their blog! I hope that doesn't offend you or anything, I mean that as an honest, sincere compliment. Maybe it's not that unusual in the blogging world, but I'm pretty new here! I have a lot to learn, but I'm only looking forward to it.
    Keep up the great work and do pop over onto my blog if you're interested :)

    Minna
    www.minnabansal.blogspot.in

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. Great post. Enjoyed a lot. You can also check http://kidsunfold.com . Please share your comments.

    ReplyDelete
  12. Great post. Enjoyed a lot. You can also check http://kidsunfold.com . Please share your comments.

    ReplyDelete

Hey! Yes you, you're about to leave a comment, why thank you! Just remember, if you don't have nothing nice to say, don't say it at all.