Blogging resources, tools, widgets, html etc. you should check out!

If you can believe it, this post has been sitting in my drafts folder for at least a month.  It’s a good thing I checked it!  I’d hate to deprive you all of the adorableness!  I love these pictures of Livi in her room.  I took them the same day I photographed her BIG girl bed.  If you missed this post, feel free to check it out!

*digital artwork courtesy of The Coffeeshop Blog!

---

Okay, I hope you’re ready!  I have some great stuff for you today! 

BLOG RESOURCES, TOOLS, WIDGETS, & HTML you should definitely check out!

SIMPLE HTML EVERY BLOGGER SHOULD KNOW

To center your text/images:
Add <center> to the beginning of your html code and </center> to the end of it.  See below for example.

<center><a href="https://url of your website/" title="Twitter Icon by croppedstories, on Flickr"><img src="http://source of your image.jpg" width="238" height="55" alt="Twitter Icon"></a></center>

To align left:
Add the following to the beginning of your html code <p align="left"> and </p> to the end of it.  See below for example.

<p align=”left”><a href="https://url of your website/" title="Twitter Icon by croppedstories, on Flickr"><img src="http://source of your image.jpg" width="238" height="55" alt="Twitter Icon"></a></p>

To align right:
Add the following to the beginning of your html code <p align="right"> and </p> to the end of it. See below for example.

<p align=”right”><a href="https://url of your website/" title="Twitter Icon by croppedstories, on Flickr"><img src="http://source of your image.jpg" width="238" height="55" alt="Twitter Icon"></a></p>

To remove page titles:
You may have to change the ‘h’ number (highlighted in yellow) depending on what your template uses.  The ‘h’ stands for heading.  Some template headers are marked as 2 or 3.  To find out what your ‘h’ number is, you would have to view your html code.  For blogger folks, you would go to Template / Edit HTML / Format template (this expands the code) then do a search/find (control F on your PC or command F on your MAC) for h1, 2, or 3.  Whatever your template uses, change the ‘h’ number in your code.  

<style>
.post h1 { display:none !important;}
</style>

Below are some screenshots of how to access the html code for your website.

To have your links open in a new window:
I can’t stress the importance of this one enough.  Nobody wants to click on a link and have it replace the original source they were viewing.  Most of the time, readers are not finished viewing their original source.  A perfect example is this post.  You are presented with many opportunities to click on links before the end of this article.  If these links didn’t open in new windows, you would have to rely on your browser’s back button! 

Another scenario.  You are visiting someone’s website and decide to follow them via a couple of their social networks. You click on their Twitter icon (for instance) and it takes you to their Twitter page only it closes out their website.  How do you get back to their website so that you can follow them via your second social network of choice?  If their Twitter page doesn’t contain a link to their website, you are sort of sh#$ out of luck right?  This is especially inconvenient for blog hoppers!  Having your social networks, follow and contact methods open in new windows will make it easier and more convenient for your readers. 

Add the following code after your url link address.

target+”_blank”

Here is an example of where I added the code.

<a href="https://url of your website/" title="Twitter Icon by croppedstories, on Flickr"target="_blank"><img src="http://source of your image.jpg" width="238" height="55" alt="Twitter Icon"></a>

Disable the option of opening your images with left clicking:
Remove the highlighted parts of your code. 

<a href=https://url/” title="Twitter Icon by croppedstories, on Flickr"><img src="http://source of your image.jpg" width="238" height="55" alt="Twitter Icon"></a>

Your code would now look like this:

<img src="http://source of your picture.jpg" width="238" height="55" alt="Twitter Icon">

Create a button for your website (with html code underneath for readers to copy):
Update the highlighted parts of the code below with your image source/file address, website url, and blog name.  You can see an example of this code in use on my Buttons page.

<center><a href=" http://source of your image.jpg" target="_blank" title="your blog name"><img alt="your blog name" src=" http://source of your image.jpg"/></a><center>

</center>
< center><textarea id="code-source" rows="3" name="code-source"><center><a href= http://url to your website/><img border="0" src="source of your image.jpg /></a></center></textarea></center>

<center><a href=" http://url to your website/" target="_blank" title="your blog name"><img alt="your blog name" src=" http://source of your image.jpg "/></a></center>

If you do not know how to create code for your images, feel free to read HTML to insert images into your posts!

GREAT RESOURCES AND TOOLS FOR BLOGGERS

How to disable the right click option on images (for Blogger)

Add a Related Posts widget to your Blogger website 

Add a Related Posts widget to your Blogger website (this is NOT a duplicate; it’s a different link than the one above)

Add the Pin It button to your website

How to make a rollover image effect (for an example of this effect, feel free to view my Before and After page)

Great social plugins from AddThis

Learn HTML, HTML5, Javascript, and CSS (this website lets you to try/update/adjust codes yourself)!

If you missed Tuesday’s post Come join the Friend Connect Blog Hop, feel free to visit and link up!  We’d love to have you!  Additionally, if you like my blog, you can vote for it here (by just clicking on this button)! I would greatly appreciate it!

Technorati Tags: blog resources,blog tools,blog widgets,social plug ins,blog hop,picket fence blogs,like me on facebook,wordless wednesday,new image,new,alivia,html