Blogging Tips & Tricks #1 – Starting with Graphics & Html

August 9, 2014 Blogging, How To's 2

Blogging Tips

Today:

:

Themes!

Finding Graphics

Social Icons

Links that take you “Back to the Top” or various places within a page.

First up! Themes!

If you are not into doing your own graphics (and really even if you are) themes can be a great way to start. There are hundreds of themes to choose from in WordPress. To check out what is available simply click on appearance in your left bar and then go to themes.

Now you may already have some themes in this page. Because I’m a little crazy when it comes to themes, I currently have 69!! Yes, you can delete them if you do not like them! If you’re not like me and need a new theme (or are like me and just want new ones cause they are shiney) then click ADD NEW on that top left.

At the top you should see a menu that looks something like:

ThemesIf you already know specific features that you’re looking for you can click on Feature Filter. This will bring up features like layout, custom colors, whether or not you want a custom menu, etc… If you are very new to this you might want to stick to Featured or take a risk and check out the Latest themes.

The screenshot above shows you that you can view a small preview of what that theme will look like. When you find a theme that basically matches what you’re looking for, hit preview. That will bring up a new screen which shows you the theme in a much larger scale. Once you find one that looks just as great in a larger scale as it does in the smaller scale, click on INSTALL on the lower right corner.

It will download and show you a few links. THESE are really important. You can do a LIVE preview, Install, or go back to themes. We are going to first do a live preview.

When you do a Live Preview it will allow you to see your menu, your graphics, and basically your website. You just need to make a few changes on the left menu to get to this point. You should be able to see what your blog’s name looks like in headlights! Plus your menu and your graphics. If you do not like it simply hit cancel and return to theme installer.

theme live preview

That’s it! Once you find a theme that you like hit Save & Activate in the top left corner.

 

 

Finding Graphics!

Finding graphics can take some time. I think finding what fits YOU and your blog the most is the hardest part really. But once you have some sort of theme then you will know where to start. OR you can be like me and just head over to one of the pages below and start looking for what meets your fancy.

http://www.vectorstock.com/
http://icons.mysitemyway.com/
123RF Stock Photo

There are also fabulous places like DeviantArt where you can email the artist and ask if you can use their picture.  If your blog is for personal use or nonprofit, most say yes! They are getting exposure with you using their graphics so it’s a WIN / WIN!

If you don’t mind spending a little money you can go to Vectorstock.com and for $20.00 (usd) get 20 credits. Depending on the size of the graphic most are only 1 credit which equals $1.00! I’ve found wonderful graphics there and they really have a TON! Plus, if you find an artist that you particularly like you can follow their work.

There are also many free programs you can use to then change the size or edit that picture. I use Adobe Photoshop (got it for my bday from my hubby!) but you can easily use Paint, Gimp, Artweaver, etc.. It’s finding the one that you can use and understand easily.

More on editing graphics at a later date!

Social Icons

twitter-icon4twitter-icon3twitter-icon2098282-blue-chrome-rain-icon-social-media-logos-twitter-bird2

To the right you can see my recent journey through my website’s changes and the icons that I’ve found and changed. Obviously I really like blue!

Firstly, if you do not want to deal with the hassle of finding and creating your own social icons, use UBB Plugin!  Not only is this a great plug in but the social media icons are already added in! All you have to do is add your links. The icons for the UBB plugin are also extremely cute and easy to put anywhere! twitter

However, if you are like me and want to make your own there are MANY sites out there. Iconfinder has hundreds of icons and a lot of those are free!

Once you have your icons you have to set them to the link for the social network for which they are supposed to link to. Here’s how:

First get the link that you want the icon to point to. In this example I’m going to use my rss feed. So to point it there you need to put into < > The a href is showing where the destination of the link will be.

<a href=”www.creating-serenity.com/feed”>

Every time you add a new link you will have to open and close that command. Those < > are your friend!

Now you will need to upload your icon either to your website or some place like Imageshack.com. Once you have your link to the picture you will need to add the follow into < > This command is going to take the picture from the link that you are expressing.

<img src=”http://www.creating-serenity.com/wp-content/uploads/2014/05/rss-feed-icon4.png” height=55 width=55>

If you notice when pointing to my picture I also have height=55 width=55. This tells the computer how large the graphic needs to be. My original graphic is only 100×104 however for my blog that is just too large! You can easily edit this to match the dimensions that your blog needs.

At the end of this I added &nbsp&nbsp This literally tells the computer to add in one space per &nbsp. So here I have two spaces between each icon!

When finished the new link with the picture will look like this:

<a href=”www.creating-serenity.com/feed“><img src= “http://www.creating-serenity.com/wp-content/uploads/2014/05/rss-feed-icon4.png” height=55 width=55></a>
&nbsp&nbsp

Red is the html required and the black shows the links needed. Copy and paste if needed until you get familiar.

That all actually looks like this cute little icon:


Now each time you want to create a link all you have to do is refer to your html. Change the first link to match where you want the link to go. Then change the second link to match where you picture is saved. Viola!!

 

Links that take you “Back to the Top” or various places within a page.

More html!!! This is wonderful when you have a long review or multiple things going on (like in this how to), or even for a table of contents! You can jump back and forth with a few simple tips! You can see exactly how this works in my Review Index.

list

At the top of your webpage, in the TEXT tab (in WordPress) add <a name=”top”></a>

The a name is pointing to the name that you add somewhere in your webpage. If you have a table of contents you can change the “top” to anything you would like and when you change that name the next link will take you right to that name.

Next, later on down your page you want to add:

<a href=”#top”>To the Top</a>

The a href is telling the link to take you somewhere and the #name is telling the link WHERE to go.

I’m guessing this html should work find in Blogger as well but I have never tried it sadly!

Take me to the Top

2 Responses to “Blogging Tips & Tricks #1 – Starting with Graphics & Html”

    • Christina

      I know! I love that bottom to top thing. One reason I’m doing these tips is so I have them handy when I need them again! I’m constantly looking this stuff up!