4 HTML Codes for Beginners

  (And my nerdieness begins to show through)
   Today I will be showing you 4 different, very easy HTML codes that anyone can do. I personally find coding fun and I hope you will to. As for the codes themselves, they give an original, unique touch on your blog, even with only a few codes.

How to add a Boarder:

1. Go to your blogger dashboard and select the blog you'd like to add a border to.
2. Next, go to Template >>> Customize >>> Advanced >>> Add CSS.
3. Paste the code below into the box.

.content-outer { border: solid 5px black; }

Look below for how to customize this code. :
Red: Replace this with dotted, dashed, or double to see the different border types.
Green: Insert a larger number to thicken the border.
Blue: Replace this with any color code.


How to add Transperency to Photos when you hover:

1. Log into your blogger account and select the blog in which you'd like to customize.

2. Go to Template >>> Customize >>> Advanced >>> Add CSS and paste the below code into the box.
3. Customize, save your changes and voila! You're done.

img:hover { opacity: .5; }

To customize the transparency:

The number in red decides how transparent your photo is on hover. The numbers range from .9 to .1 (as you decrease the number, the transparency becomes more, well, transparent). I suggest five as it has a nice balance between both ends.

How to Customize the pages or tabs gadget.

1. Go to Layout >>> Add gadget >>> HTML/Java Script and paste the code below into the box.
2. Customize and save.
 

• PAGE NAME


• PAGE NAME


• PAGE NAME

Green: Insert the link to the page you already have (like afallingstar123.blogspot.com/p/blog-page.html)
Red: Insert name of Page. This will appear on the page tabs.

How to customize your popular post page:

1. Select the blog you'd like to add the popular posts gadget to.

2. Head to layout and add the gadget to your blog.

3. Click and drag the gadget so that it is in the footer area (the bottom) of your blog. Make sure to click "Save arrangement".

4. Open up the gadget and make sure the option under "Most Viewed" is on your selected preference. Check the box "image thumbnail" and uncheck "snippet". Then make sure you are displaying up to 4 photos (see photo below).



5. Now go to Template >>> Customize >>> Advanced >>> Add CSS and in the box, add the CSS codes from below.

#PopularPosts1 li { display: inline;
float: left; }

.popular-posts .item-thumbnail img { webkit-border-radius: 200px;

-moz-border-radius: 200px;

border-radius: 200px; }

#PopularPosts1 ul li a { border: solid 2px #000;

text-decoration: none;
padding: 10px;
text-align: center;
width: 200px;

height: 75px;

display: block;

word-wrap: normal; }

.PopularPosts img { padding: 0px; }

#PopularPosts1 h2, .item-snippet { display: none; }

Red: change the roundness of the photo.

Orange: Change or remove the border around the posts.

Green: Change the width and height of each of the separate posts - play with this to fit the gadget into the bottom of your blog.

6. Save your changes.

~

If you have any questions, feel free to email me at sunlover234@gmail.com or comment down bellow.
Let me know what you think of these codes and if you plan on using them:)

***NB: I got most of these codes from Nicole Rose of Self Known. She has amazing tutorials and plenty of freebies for you to check out.***