How to Put a Retweet Button on Your Post in Blogger.

I decided that I would install a retweet button on my post in hopes that people would start tweeting more of the things that I write and the giveaways that I have. It was pretty easy to do after I figured out a few problems that you guys won't have to deal with because I worked it all out. After figuring out all of my coding I decided to try it out.

If you were thinking that you don't really need this little Tweet button I promise you that you will be so glad you installed it - even if people don't use it. It literally takes two clicks to Tweet about whatever post it is your on, that's it, TWO CLICKS! I sent out a Tweet message about all of my giveaways in like three minutes! I couldn't believe it. You don't even have to type anything, just click the Tweet button, the message is already there waiting for you, click again to send. You're gonna save so much time with this button. I'm actually sending out so, so, so many more Tweets on my post now cause it's so quick and too simple.

Sooo, I'm guessing that you are super ready for some simple, 'Manda-style instructions - yes? You are in for such a treat because this one is madd easy! There are special instructions to go along with this if you are using a Blogger classic template, these special instructions are marked with a *

First, you need to go into your layout on your dashboard and go to edit html. Check the little box to expand widgets template.

You need to find a piece a code that looks like this:  <div class='post-header-line-1'/>
(Mine was located about the middle of the page but all codes are gonna be different)

*If you are using a Blogger classic template you need to locate this piece of code: <$BlogItemBody$> You also need to change the retweet button code that I've given you below a little bit.
 Change this: <data:post.url/> to this: <$BlogItemPermalinkUrl$> in the code below. After you change that piece in the retweet button code, place the retweet button code above this piece of code in your template: <$BlogItemBody$> That's it, you're all done and your classic blogger template is updated with a sweet retweet button.

Here is the code that you will need to insert at the the end of that line of code you just found. See where it says 'PUT YOUR TWITTER USER NAME HERE', you guessed it, you have to put your twitter user name there. Make sure you leave the apostrophe before and after your Twitter user name. Here's an example using my Twitter name: 'raleighexaminer'

Retweet Button Code:

<div style="float:right;padding:4px;">

<script type="text/javascript">
tweetmeme_url = '&lt;data:post.url/>';
tweetmeme_source = 'PUT YOUR TWITTER USER NAME HERE';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

That's it! Save your template and you now have an awesomely quick and easy way to Tweet all of your post.

If you've looked it over and over and over again and you just can't find that piece of code then find the very first time that this code is used: <data:post.body/> It has to be the FIRST occurence of the code. Place the retweet button code directly in FRONT of that piece of code. That's it, you're done!

How to Make a Button for Your Blog Using Photobucket

While looking at the tons and tons of blogs that I follow and subscribe to I've seen that a lot of people don't have buttons for their blogs and I've also seen people asking how to make a button or where to get one from. I decided to write up another easy to follow guide for my fellow bloggers that are looking for a little bit of help. I'm using Photobucket, like always, so if you don't have an account you should set one up. It's free and easy and it'll really come in handy so you can save images online.

In order to make a button you need to have an image or a background that you can write the name of your site on. A very easy way to do this is to search google images for backgrounds, patterns, fabric backgrounds, purple images - whatever you want. A really good source for images is to do a google image search for free vector backgrounds or free vector images. You can spend a lot of time searching through the images, once you find the image that you want to use you will have to save it to your computer. Click on the image of your choice and once the page loads with the picture, right click it with your mouse, click on save picture as and save it to your computer in a place were you can find it easily.

I'll use this image for my example:

Once you have your image saved on your computer you need to upload it to Photobucket so that it will be online. Just log in to your account and click on upload images. Find your picture that you saved to your computer and double click it so that it will upload. Add the title and tags if you want to then return the picture to the folder. Now, click on edit in the left corner right above the image. This will take you to the editing menu for the image.

The first thing that you need to do is to crop the image so that it is 125 X 125. Click on crop at the top and then place your mouse on the image and click where you want to start cutting the image. You can drag the box around to cut the part that you want and it will say the size so just adjust the side and the top so that you have a 125 X 125 size image.

Here is what I cut out.



Now you can click on decorate at the top of the page and then click on text. Under text options, check transparent then type the name of your blog and any other text you want into the box and pick the font and color that you want and adjust the size until it looks the way that you want it to.


All that you need to do now is save your image, the save button is at the bottom of the page, and copy the HTML code from the Share This Image Box beside your new image. Now you have your very own, custom made button to represent your site.

In order to make your button clickable so that it will direct people to your site when they click on it you will need to add an extra piece of code to the HTML code that you copy from Photobucket. The code that you copy for your image is going to look something like this:

<img src="http://i813.photobucket.com/albums/zz53/mandz81/abstract_background-1-1.jpg">

To make your image into a clickable link that will open in a new window you have to add this piece of code in front of your image code:

<a href="URL of Your Site" target="_blank">

So, the entire code for your button will look like this:

<a href="URL of Your Site" target=_blank"><img src="URL of your image">

That's it, you have a fully functional blog button that you can use wherever you want to. Now you can read my other blog post, Display HTML in a Scrollable Box, so that you can display the code for your button on your blog so others can grab your button and add it to their site.

Click Here to Read Other HTML Guides I've Written for Bloggers

How to Make a Link with HTML

I thought that I would make a post about how to make links because I've noticed that a lot of people do not know how to make them. It's actually very easy once you know how to do it. All you need is a few pieces of HTML code. I'll show you how to make  a clickable text link and also a clickable picture/image link using HTML code.

How to Make a Link with HTML
Making a clickable link is very easy. You need to use the <a href= to start the link, then begin with a " and insert the url or web address that you want the link to direct to when it is clicked. Place another " at the end of the address and end it with a > Next you need to insert the words that you want someone to click on as the link. You can use the name of the site, the page, or the actual url or simply type 'click here'. It's your decision what text you want to use for your link. After you type you link text you simply end the link with> That's it - now you have a clickable text link.

Here is an example of what the link will look like:

<a href="url you want link to direct to"> text that you want to click on</a>

How to Make Your Link Open in a New Window
The link above will open in the same page which means when you click the link it will open in the current window so you will have to push the back button to get to the original page you were looking at. You can add a simple piece of code to a link to make it open in a new window. Having the link open a new window means that the original page you were looking at when you clicked the link will still be opened in a window behind the new window. I like to have links open in new windows so that anyone that clicks one of my links doesn't lose the original page that they were on. To make a link open in new window you will need to add to the html code of your link right at the end of the url address in the begining of your code.

Here's an example of what the code should look like:

<a href="URL you want link to direct to" target="_blank">Text you want to display as link</a>

How to Make an Image into a Link with HTML
To use an image as your clickable link, such as your blog button, a photo or an image you will need to add another piece of code after the URL at the begining of the code where you want the link to direct to. You will need to have the image saved online in order to have a URL for the image source. The easiest way to do this is to save your images on PhotoBucket.com

Here's an example of what your code will look like. If you don not want the link to open in a new window you can take out that part of the code, simply remove this target="_blank"

<a href="URL you want like to direct to" target="_blank"> <img src="URL where the image is located"> </a>

How to Center Images with HTML
If you want to center the image on the page all you have to do to insert another little piece of code. Just insert <center> in front of img src= and then insert </center> at the end of the image source.

Don't forget the first " and the last " when you insert any URL's into the code.

How to Add Your Signature to Your Post in Blogger

I almost always forget to add my signature to the ends of my post. I have a signature and I think it is a very nice signature but it always slips my mind when I finish writing a post. I knew that there was a way to have your signature automatically load after each post but I just kept forgetting. So, anyway, here's a little guide on making a signature for your blog and where to put it so that it always shows up on each of your post.

First of all, you need a signature. The easiest thing to do is to go to Live Signature. You can design your signature from their selection of fonts, slants and colors. Make the signature that you want and then save it to your photobucket accout. If you have a different image that you would like to use for your signature you can save that to your photobucket account too.
You need the html code for the image that you will be using. You can copy the html for your live signature after you create it if you do not have a photobucket account. I recommend saving the file to your own account so that you will not have to worry about anything.
Back to the image, if it's in photo bucket you just need to copy the html code. Now you need to go to your blogger dashboard and click on settings, then formating. Scroll down to the end where it says, "Post Template." This is where you need to paste the html code that you copied. Now save it and that's it. Now every time you go to post your signature will already be loaded in the window where you type.

How to Make a Custom Cursor for Your Blog

A custom cursor is a nice little added touch to your website. You can use a flower, cat, hippo, letter - whatever matches your site. If you don't want to go quiet so custom as to turn your cursor into an animal or a car you can always just change the color or the size of the arrow that people will use when visiting your site. This is another easy little html change to personalize and customize your blog so you can stand out among others. Below you will find the style sheet that you need to change your cursor.



-->

You will need to add this style sheet to the head section near the top of your html file for your blog.

See where it says "my cursor.cur" that is where you will need to put the url of your new cursor. A cursor needs to be saved as a .cur or .ani file so you will need to save it online somewhere. Again, I used Bravehost.com just like I did when I saved my favicon. If you did not read, "How to make a favicon," Click it now and read how to set up an account so that you can save your new cursor image.

You can download a free icon maker from CNET.com or Just look in the Windows->Cursor directory using File Explorer on your computer for a collection of premade cursors. The easiest thing to do is go to http://www.totallyfreecursors.com/ and download a cursor or you can always do a google search and find tons of them.

Once you have your cursor picked out and saved online you will need to right click and "copy shortcut" when you put your cursor over the file for the new cursor because you can't open it since it's a cursor file.

I think that makes since. Feel free to email me if you have any questions.

How to Make a Favicon for Your Blogger Blog

I decided to add a cute little favicon to my web page. As with the other HTML aspects I have added to my page it took more than a few tries to get it right. I decided it was time to write another HTML lesson to help you guys out if you've been wanting to add a favicon but didn't know how to. Having a favicon for your blog isn't just cute. It will definetly make your blog stand out among others. A lot of people don't have them and don't know how to put one on their page. This is good for us because our sites will stand out in a list of bookmarked sites. It will also help to keep 404 errors out of your log because the favicon can't be found.

I've found that there is a problem if you are using Blogger though. There is no way to upload files and images in Blogger. To solve this problem you will need to make a free webpage in order to have somewhere to upload your files to. I like to use Bravenet web hosting. I just set up my free website with the same name as my blog. This is very useful because now you can make additional pages to link to from your blog if you ever need them and you can upload images and files that you need but are unable to upload to Bogger. Once you register your new site you do not have to actually set up the webpage since you are only using this new site for storage.

In order to make your favicon the first thing you need to do is get yoursef an image. There are a few different ways to do this. A favicon is a 16x16 image. You can crop a tiny piece of an image using Photobucket or Flickr or you can go to, http://www.favicon.co.uk/gallery.php and save one of the favicons featured on the site. You can also use an image no larger than 150px or a small icon. Another option is to download a free icon maker program from cnet.com. Once you have your image go to http://tools.dynamicdrive.com/favicon/ and upload whatever image you want to use as your favicon. Once you click on "create" you will need to download your image to your computer. It will be saved as a .ico file.

Now you will need to use your new free webpage that you set up. Log into bravehost.com and click on the name of your website located under "free website" in the "Web Hosting Section." Next you will click on, "File Manager." Click on, "Upload File" and find the favicon image that you saved to your computer as a .ico type file. Once the file is uploaded simply copy the url where it is located by right clicking the file name and saving the shortcut.

Here is the HTML code for your favicon: 

<link href='icon file url ' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

You will need to insert the URL to your favicon that you just copied into the code above between the two ' ' where it says 'icon file url'

Next you need to put the code into the html of your blog. You need to look around the top of the code in the head section and find where your title is located. It will look something like this: <title><data:blog.pagetitle/></title>

Insert your favicon code after the </title> code.

After you save your file it may take a few minutes for the favicon code to take effect. That's it - now you have your very own cute, custom little favicon for your blog.

display HTML code in a scrollable box

I've been trying for a few days to get one of those little scroll boxes with the HTML code for my button up on the site. I know that I am not the first one to have a hard time figuring this out because I found a lot of different sites that claimed to explain it. I've been trying for three days to do this so obviously all of these sites do not make it clear. I decided that I would do a quick write up of exactly what I did to get the little scrollable box to finally appear on my site. First of all you need to copy the script for the scrollable box and place it into a HTML widget box. (I'm using blogger) Here is the script that you need for the box:

<div style="width:200px;height:100px;overflow:auto;
border-width:2px;border-color:000000;border-style:solid;">
Your content goes right here.</div>

The above code will display like this:

Your content goes right here.

Now, see where is says:
="width:200px;height:100px;
You can change these numbers to whatever size you need to fit in your side bar or content area.

200px by 100px is a normal single side bar size
125px by 100px is the size of a normal button
426px by 100px is the normal size of the main content area of a blog

Once you have determined the size of your box it is time to insert the HTML code that you want to display. See where it says, "Your content goes right here." You guessed it, that is where you will put the code that you want to display.

Delete "Your content goes here", and put a couple of spaces between the last > on the left and the first < on the right. I find it easier if you put the extra spaces so that you don't change the wrong part of the code. Now, paste your HTML code with the spaces seperating it from the code for the scroll box. In order for your HTML code to be displayed properly you will have to change each of the < and >. You are only going to change the < and > that are part of the HTML code that you want to display inside the box. The < and > that are in the code for the actual scroll box will need to stay as they are.

Okay, so all the < in the code you want to display need to be changed to & l t ; (do not include the spaces) and then change all the >'s to & g t ;(do not include the spaces). This way the code will be displayed the proper way without being changed to what the code instructs the computer to do. So, what that means is:
change < to & l t ; (do not include the spaces) change > to & g t ; (do not include the spaces)
You are only going to change the < and > in the code that you are trying to display inside the box, NOT THE < AND > IN THE CODE FOR THE ACTUAL SCROLLABLE BOX.

You should now see the scrollable box on your site with the HTML code that you inserted inside of it.

I hope that this makes things easier for some of you because I had such a hard time figuring out how to do this. Hopefully I explained it for you guys.