Adventures at Greenacre: Pimping your blog

Showing posts with label Pimping your blog. Show all posts

March 02, 2011

How to add a signature image to your blog part 2

I wanted to add an example of what the live signature looks like.

It is just your name or whatever ending comment you want to use as your signature.They have alot of different fonts , colours and backgrounds to choose from..min

e has a transparent background .

How to add a signature image to your blog

Here is my Easter signature...I LOVE it!
I started by making the image I wanted then uploading it to www.photobucket.com to get the HTML code...
Once uploaded I copied the code & went to my LAYOUT OR DESIGN PAGE--> CLICKED ON SETTINGS--> SELECTED FORMATTING-->and pasted the code into the POST TEMPLATE box found in the bottom of the FORMATTING page....saved the change and am enjoying my brand spankin new signature!

If you don't want to design anything..check out http://www.mylivesignature.com it will create one for you.

March 01, 2011

Pimping your blog-How to create and add a favicon for your blog

When you look at the left hand corner of www.adventuresatgreenacre.blog.post you will see a mini version of my blog button. This is how you can make one for your blog.

First select the image you want attached to your URL.

You can use an existing image or create on .Some of the websites I have used in making mine are;

www.picmonkey.com

www.fotoflexer.com

www.pixlr.com

Next you will need to download it to a host.

I use www.photobucket.com it's free and easy to use!

Once you have uploaded you image, copy the HTML code.

Then go to:

http://www.iconj.com/favicon_hosting.php and insert the code into the box that says 'Upload Your Favicon/Logo/Image/Photo File To Generate The Icon"

I recommend to sharpen +3 for the clearest icon.

Hit the upload button and let the favicon lab do all the work.

Copy the code the favicon that reads

Host It at IconJ.com: (Direct Link)

Next you need to click on your design tab and select edit HTML.

Before you alter anything make sure to download a copy of your existing template to your computer.

Next press the Ctrl and F keys together and a small search box will appear in the top left hand side of the screen.

Enter <title><data:blog.page.Title/></title>

It will bring you to this line in your HTML code .

Paste your favicon code in the next line right after it.

Hit save and preview you smashing new favicon.

Pimping your profile-How to add a blog button and grab box

How to add a blog button and grab box

Design an image you would like for your blog button...usually a smaller square version of your header.

Some really good websites are;

http://wwwpicmonkey.com

http://www.fotoflexer.com/

The pic should be about 125px by 125px and square in design for best results.

Next is to upload the picture to a web host such as http://www.photobucket.com/

After you have uploaded the image it will generate the DIRECTLINK code for that image....copy the DIRECTLINK code and insert it into the yellow areas of the code below.(second box in photobucket)

Change the green highlighted area with your blog address and the name of your blog in the pink highlighted area.

Once you have entered your information..go to your design layout page and add an HTML widget.

Copy and paste the code inside the widget.

Make sure to save and preview your new blog button.

Pimping you Blog-How to add falling objects to your blog

How to add falling objects to your blog

If you want to have falling images such a snowflakes for Christmas this is the best and easiest way.

Decide on what image you would like to use and download it to http://www.photobucket.com/

Copy the HTML code

Go to http://www.glitter-graphics.com/generators/falling_objects.php

and enter the html code into the box.

Press get code and it's written for you, or you can select from the pre-made images..LOVE it!

Then go to your design page and add an HTML widget and paste the code.

Save and view you falling image.

Pimping your blog-How to add social media buttons to your blog

How to add social media buttons to your blog

The basic code is
<center><a href="http://your url"><img border="0" src=http://your image's location/></a></center>

Let's start with facebook;

Log into your Facebook account.
and go to your Profile page.

On the bottom left hand side...under your friends lists in blue it will say ADD A BADGE TO YOUR SITE.

Click on these words.

It will ask you where you want to add the badge..select the box that says OTHER.
(If you have a facebook page and wanted to promote on your blog...select the platform you are using and it will automatically generate a widget for it and for blogger blogs, even add it with a click of a button)

Underneath it will have a box and right above it it will ask you
'Copy the code below and paste it on your website."

Copy and paste this code on word or notebook.

Here's what it will look like:
(It is alot longer but I cut the bottom half out as you don't need anything from it)

<a href="http://www.facebook.com/pages/Adventures-at-Greenacre/129012953836683" " target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;"

The slighty larger lettering is an example of what your facebook url looks like.
(Twitter uses your username for example; http://twitter.com/ Greenacremama)
( RSS feed ; http://feeds.feedburner.com/adventuresatgreenacre)

Next you will need an image for the button.

This website has great free social media buttons you can choose from;

http://webdesignledger.com/freebies/the-best-social-media-icons-all-in-one-place

Pick the image and save it to computer.

Create a photobucket account...http://www.photobucket.com/
Then upload the image of the button you want to add to your blog.

Underneath or next to the image you see 4 different codes for that image...select the HTML CODE

This code will go in to the highlighted pink area and your facebook profile/twitter/RSS goes the green highlighted area.

<center><a href="http://your url"><img border="0" src=http://your image's location/></a></center>

For example here are my social media codes:

For Facebook
<center><a href="http://www.facebook.com/pages/Adventures-at-Greenacre/129012953836683"><img border="0" src="http://img.photobucket.com/albums/v497/chica72/latte-social-icon-fb_64.png"/></a></center>

For Twitter
<center><a href="http://twitter.com/greenacremama"><img border="0" src="http://img.photobucket.com/albums/v497/chica72/latte-social-icon-twi_64.png"/></a></center>

For RSS feed
<center><a href="http://feeds.feedburner.com/adventuresatgreenacre"><img border="0" src="http://img.photobucket.com/albums/v497/chica72/latte-social-icon-rss_64.png"/></a></center>

Next go to your design page and add an HTML widget..paste the code and save.

Repeat the same steps with Twitter, RSS and whatever other social media you would like to add to your blog.

Please note that these quotes are not (fancy) quotes but the <straight quotes.>. If you copy and paste the basic code , they may try to turn themselves into (fancy) ones. If you get an error when you try to add this code, this could be why. Try this same code but remove all of the quotes and it should work.

If you like the web toolbar at the bottom of my blog...check out wibiya toolbar it is free and add`s all of these social media buttons and more .

Cheers!