April 16, 2013

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!

Post 032813

*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.Post 041713

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

Post 041713-2

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)!


Happy Kids, IncLife as we know it by Paula
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!




15 comments :

  1. Oh she is so stinking cute! I hope you guys are having a great night.

    Nikki
    www.TheCraftySideOfSarcasm.com

    ReplyDelete
  2. She is sooo precious! love her hair

    ReplyDelete
  3. These are all great tips! It wasn't until a couple months ago that I really started to make some of these changes to my blog, like adding a button or a 'suggested posts' widget. But it really makes a difference when viewing someone's blog, especially for the first time, when it all looks complete. As for my own blog, I just like to make it look like I know what I'm doing, haha ;D

    ReplyDelete
  4. Thank you so much for these, I have just used them to go and do a few quick jobs around my blog that had been bugging me for ages.

    ReplyDelete
  5. Thank you for posting this! Anything that involves HTML and coding is still so hard for me to comprehend. I am trying to add the related posts to the bottom of each post and I understand the first few steps and then I give up. Oh well, will keep trying! Beautiful pictures!

    ReplyDelete
  6. She is a little beauty. Thank you for the info. share too.

    ReplyDelete
  7. Livi is adorable! What a beauty! Thank you for their HTML tutorial. This stuff makes my head spin. Maybe one day I will figure it out. Thanks for the jump start!

    ReplyDelete
  8. Oh my that hair!!! So beautiful, what a cutie.
    Thank you for all of these tips. I am definitely going to be referring to this as I am
    so incredibly challenged in this area.

    Pia
    pjmscloset.blogspot.ca

    ReplyDelete
  9. SO precious! So glad I found your blog through Click & Submit. For sure a new follower!

    xoxo,
    Allie
    http://framedbygod.blogspot.com/

    ReplyDelete
  10. Girls can be anything they want! Great to start letting your daughter know that :)
    Thanks for linking up for WW!

    ReplyDelete
  11. So cute !! Thanks for sharing ! Great information

    ReplyDelete
  12. Your daughter is so cute!!!
    Thanks for the tips xxx

    ReplyDelete
  13. She is just too cute!! I love these photographs. Thanks for sharing the great information girly :)

    Vicky
    alovelylittleaddiction.com

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...