Blogosphere Travels #6: Useful HTML

Posted January 4, 2014 in Blogosphere Travels / 0 Comments

For today, I’m going back to the basics and posting some useful HTML I’ve found over the months and the HTML that I use the most when making posts, comments, or widgets on my blog. These are all courtesy of Small Review, who has a lot of fantastic useful tips on blogging on this page. I picked the top 4 I use the most and here they are. These will work on both Blogger and WordPress.
TIP #1: Colored boxes
This code will create a colored box that you can edit and play around with. I use this for my review posts.
<div style=”background: none repeat scroll 0% 0% rgb(188, 238, 104); padding: 5px 8px; text-align: center;”>
<div style=”text-align: center;”>
<span style=”font-size: large;”><b>Your Text Here</b></span></div>
</div>
You can adjust the color, text alignment, padding, and font. Note: you can also adjust the font any way you want on the ‘compose’ page rather than the actual ‘HTML’ page. To adjust the color, use either this page or this page.
If you want a border around the box, use this code:
 
<div style=”background: none repeat scroll 0% 0% rgb(244, 240, 236); border:3px solid#000000; padding: 5px 8px; text-align: center;”>
<div style=”text-align: center;”>
<span style=”font-size: large;”><b>Dotted</b></span></div>
</div>
 
You can adjust the width, type, and the color.
To change the type, use this as a reference:

 
TIP #2: Creating a link with HTML
I use this when commenting, or linking back to my blog from my Goodreads reviews.
<a href=”http://awesomebookassessment.com/“>Awesome Book Assessment</a>
Put your link destination where my blog address is, and the blue is what you want your link to say.
This is what mine would look like:
 
TIP #3: Creating buttons
Use this code:
<a border=”0″ href=”http://smallreview.blogspot.com/” target=”_blank”><img src=”http://i51.tinypic.com/34gwkm9.jpg” /></a>
Put your link destination (where you want the button to go to) where hers is, and put the image URL where hers is.
 

TIP #4: Progress Bar

<div style=”background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); height: 15px; text-align: left; width: 185px;”><div style=”background: none repeat scroll 0% 0% rgb(255, 0, 0); font-size: 8px; height: 15px; line-height: 8px; width: 0%;”></div>
</div>

 

0/5 books</center>
Customize the background color, border, height/width, bar color (and make sure if you adjust the main height and width, you adjust the bar height and width as well), and bar width, which is by percentage. You can change the 0/5 books at the bottom to match whatever you’re measuring. For instance, if you have read 72 out of 150 books for your 2014 Reading Challenge, that percentage would be 48%, so set the bar width to 48%.

This is what this one looks like:

1/4 books

And you can center it, or whatever. Of course, there are also sites that make progress bars for you, but I like the range of customization you can do with this one.


So I hope these tips helped you with your blog! And don’t forget to head over to Small Review’s Blogging Tips and Tricks page! There’s a lot more on there!
Signature1

Tags:

Sign up here to receive ALL of Awesome Book Assessment's posts in your inbox!

Nose Graze - WordPress themes and plugins for the creative blogger

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz