Blog Buttons for Dummies - A Tutorial

a few of the buttons I've made

Note: If you have trouble with the tutorial, feel free to contact me for help: darlene@darleneschacht(dot)net

I'd like to take a break from my writing to share a post with my fellow blogging friends. I know that a lot of you want a button for your blog, but you don't know how to make one. And if you do know how to make one, you have no idea how to code it.



I've created a little tutorial that will help you create a button and code it for Blogger. Unfortunately I have tried this code on Wordpress, and we've had a bit of difficulty with it.

*Update*: Amy Bayliss provided us with a code for Wordpress blogs, which you will find near the end of the tutorial. Thank you Amy!

I'm using Photoshop 7 to create the graphic. I can't walk you through all of the various photo programs that you might have, but I can say that many of them work in a similar way. If you don't have Photoshop, I'd suggest using Pxlr Editor, which is a free online program, and very similar to Photoshop.

Each step is listed under the graphic. I know that this looks incredibly intimidating, but really it's very easy--very basic. There's just a lot of baby steps for beginners.

If you already know hot to create the graphic, then you can skip down the page and go straight to coding the image.

Creating the Image

Step 2: Open Photoshop and click File/New. This box you see will pop up.

You want to create all web graphics at a resolution of 72 dpi and set the mode to RGB.

I can title it, but I never bother until I save it, so I left it "untitled."

The canvas size that I am using is a standard button size of 125 x 125 pixels.

Step 2: Open a graphic that you like such as your blogger header by going to File/Open and finding it on your computer. Hopefully you have images on your computer that you can use.

Decide what portion of the image you want in your button. Next go to the "dancing ants" tool that I labelled #1. Click that tool.

Left Click while you drag your mouse (on lap top I left click and slide my finger) to define the dancing ant area. Don't let go of Left Click until the area you want is defined.

If you want to remove the dancing ant square at anytime, you can press Cntrl/d (for deselect) simultaneously. For now, let them dance.

See how I've defined the area that I want with the dancing ants? That's the image I want for my button.

Now I'm going to select the pointer tool #2 (in the toolbox), then place my cursor inside the area of the dancing ants. Left Click while I'm dragging my mouse from one image to the 125 x 125 px canvas.

Now we have the section of my image sitting on our button canvas. I can move that image at anytime by using the pointer tool (#2). (Providing that dancing ants are off--they can be annoying sometimes!)

Step 3: Now let's work with the button.

Chances are that the image you placed in this small area is way too big.

That's not a problem. We can resize it by clicking Edit/Transform/Scale from the top menu.

Once you do that, you will see handle bars on your image as shown above. Shift/Left Click one of the handle bars on the corner, and drag to resize.

The reason that we are Shift/Left Clicking simultaneously here is so that the image will retain it's proportion. If you merely Left Clicked and dragged, you could distort the image.

If you make a mistake at any time you can go back a step in your history palette. Look for the history palette behind "layers" in the following image.



Step 4: Before we move on, you'll need to choose a color for your text box. If you look at the image in step six, you will see that I have two colors there: foreground (white) and background (red). See it in the toolbox on the left? It's right down at the bottom. They can be switched at anytime by clicking the little arrow beside them, putting red on top and white on the bottom.

To change these colors, just give one of them a click using the pointer tool (#2) and choose from an array of colors that pops up.

Step 5: Working with layers.

See the layers palette on the right? If you don't see yours, go to Window/Layers to make sure it's checked. Unchecked items don't show up.

We're going to create a new layer by going to the bottom of that layers palette where you see several small icons. Click the one that looks like a paper. It's right next to the trash can.

Anything that you do on this layer will not affect the layers below it. It's like pasting a sticker on top of your art work. So you can work on creating this layer and then merg them later.

Once you click the new layer icon, you will see layer 3 in the palette, which is the layer that you are on. Go to the toolbox and grab tool #1 again to create more dancing ants.

Now you are going to create a rectangle box at the bottom of the button. See where I have put mine? You do this by left clicking and dragging the mouse. It defines the area where the dancing ants will go.

With the ants still active, click Edit/Fill from your top menu. A dialogue box pops up like the one shown above. You'll see that it says "Foreground Color." My red was in the background, so I switched that part and hit okay. I left everything else as it was there. Now deseclect dancing ants: Cntrl/d. Always remember to deselect the ants as it can cause some interferance.

Step 6: Let's create another layer by clicking that icon in the layers palette. Then use your "Horizontal Type Tool" that you can see in the toolbox on the left. I click the type tool, and wherever I click on my image is where it will place the type (I can move it later). Then I type "Time-Warp Wife."

If you want to choose a font, or size your font, you can highlight your text, like you would in a program like Word, and make changes to it through the "Character" palette. I have my character palette right next to my layers palette. They are all together on the right. (Yours might be in separate palettes.)

Chances are you will want to move your text after you type and edit it. You can move it or nudge it by using your pointer tool, #2.

You will now have a button like this. Go to File/Save As

Select "as a copy" and from the drop down menu click jpg.

Title your image, and then hit "Save."

Coding the Image

If you have a photobucket account or something similar, then upload your image and copy the address of the image you get from there. The address will start with html and end with jpg.

I would advise that you check to ensure you have the correct address of the image. You can do this by pasting it into your internet browser just like you would any web address. If it's correct, it will bring you to the image. If you don't see the image, then you need to recheck to ensure that you have the correct URL for it. On my computer I right click any image and choose copy image URL.

If you don't have an account like Photobucket, then simply open a new post in blogger, upload the button image, and save the post in "draft" mode. You can see the URL in html mode, or you can view the page in "preview" mode to find out the address of the button. Right click the button and you should see "copy image URL" or "inspect element." Regardless of where you send this button to on the net, you need that URL to code it.

Now that you have the URL of the image, you also need to choose an URL to where it would be directed. For example, mine is http://www.timewarpwife.com. Copy and paste these two URLs someplace because you will need them in a minute.

I used a standard code for all of my buttons. I'll give you that code, and all you have to do is swap your URLs in for the one's below. Note: When you put your URLs in place, ensure that they start with http:// don't start the URL with www. or it won't work. It needs the entire web address in both places. Actually there are four places as each one is entered twice. See below:

<div align="center"> <a href="Blog URL" ><img border="0" src="Image URL" /></a> </div> <div align="center"> <form><textarea rows="6" cols="20"><a href="Blog URL" ><img border="0" src="Image URL" /></a></textarea></form> </div>

Finally, here's what you'll get!

<a href="http://www.time-warp-wife.blogspot.com" ><img border="0" src="http://img.photobucket.com/albums/v715/DarlenetSchacht/button.png?t=1290190269" /></a>

Readers can copy the code within the html box and paste it on their site. Go ahead, try it. LOL!

*Update*: Amy Bayliss provided us with a code for Wordpress blogs. Thank you Amy!! This is Amy's code below:

<center><a href="BLOG URL HERE"><img src="IMAGE URL HERE"/></a></center><p align="center">

<textarea rows="4" cols="25" style="font-size: 0.5em;" readonly="readonly" onclick="this.select();"><center><a href="BLOG URL HERE">



<img src="IMAGE URL HERE"/></a></textarea></p><br/>



<text style="font-size: 0.7em;">ON A PC: Use Ctrl + C to copy and Ctrl + V to paste. ON A MAC: Use Command + C to copy and Command + V to paste.</text></center>



Add This Code to Blogger:

Log in to blogger. Go to "design" mode. One your sidebar click, "add a gadget." Choose html/java script and paste the code into the large text area of the pop up window. Save your changes.

To add it within the body of a post such as a button for a weekly meme, you need to be in html mode and you can simply paste it in.

You are loved by an almighty God,



Darlene



For comments or questions, contact me at:

darlene[at]darleneschacht.net



Find Time-Warp Wife on facebook: Click here



If you would like to have Time-Warp Wife delivered to your inbox daily, simply click here: Subscribe to Time-Warp Wife

How to Have a Successful Blog

A successful man is one who can lay
a firm foundation with the bricks
others have thrown at him.
~ David Brinkley ~


I was sitting in church this morning listening to a sermon on "The Successful Church," and as I was listening, I couldn't help thinking, "This applies to so many areas of my life, in particular the ministry of writing."

The other day I had a question from a reader, a fellow blogger who asked, "Should I be discouraged that my blog doesn't seem to be growing?"

The truth is that so many bloggers feel this discouragement time and again, as do so many writers. People in general get to feeling this way when we look to the side rather than focus on the one goal ahead. How can we possibly measure up to the success that we see all around us?

Today I'm going to talk about writing and blogging in particular, but I pray that these points may also relate to other areas of your life, whether it be in your ministry, your work place, or your friendships.

How does one define a successful blog? How does one define themselves as a successful writer? Well, when we look at success, we know what it is, and what it is not.

What it is not:

1. Agreement - As I often say, majority doesn't rule, and popularity doesn't hold a deciding vote. There will always be readers that disagree with you ESPECIALLY if you are speaking the truth according to scripture. All we have to do is take one look at Jesus to see that He went to the cross alone. Even his own disciple denied Him in the hours before His death.
   
   "For I have come to turn a man against his father, a daughter against her mother, A daughter-in-law against her mother-in-law—a man’s enemies will be the members of his own household." ~ Matthew 10:35&36
   
   
2. Numbers - If you're a blogger, chances are that you look at your stats from time to time, but low numbers don't mean that your blog is unsuccessful or that your message isn't worth getting out there. I grew up in a church that had a congregation of 30-40 people, and that little church had a greater impact on my life than anything else ever has.
   
   Write to touch the one heart out there that is thirsting for your message. If you can be instrumental in bringing one life closer to truth, then you are being used of God. How much more successful can you possibly be?
   
   
3. Imitation - Imitation is dilution. God created us uniquely and has also gifted each one of us differently. We all see those bloggers who seem to be doing everything right, but why should we imitate them?
   
   Don't you know that you are every bit as likeable and have just as much potential to minister as they do? Minister in the style that you feel led, and allow God to move in HIS timing.
   
   "'Not by might nor by power, but by my Spirit,’ says the LORD Almighty" ~ Zechariah 4:6
   
   
4. Approval - Seek the approval of God and Him alone. It's so important that we set our compass by the standards of the Bible and follow it regardless of the popular mindset in our society.
   
   Applause does not measure success, unless it resounds from the hands of our Lord.

That is what successful ministry is NOT. Now let's look at what success IS:

1. Achieving Results - Do you see the fruit of your labor? Are lives being changed? Is your life being changed?
   
   "But wilt thou know, O vain man, that faith without works is dead?" ~ James 2:20, KJV
   
   
2. Using Resources Appropriately - Are you using your resources properly? This would include the time that you spend blogging, writing, ministering... Do you have a balance that is pleasing God?
   
   What resources are you using in your ministry? The Bible, guidance from the Holy Spirit? Successful ministry will tap into both.
   
   
3. Following standards - Do you follow the parameters laid out in scripture? We have standards for fellowship, parenting, marriage, ministry, etc. all laid out in scripture. A successful blogger will follow those standards when sharing the gospel.

There is nothing wrong with wanting a successful blog, ministry or writing career, but real success rarely comes without pain and perseverance.

I've seen this in my own writing career as well as through my ministry. We all face some level of rejection, but we can't let that stop us from doing the work that God has called us to do.

We press on in spite of the numbers, the lack of approval from others, the discouraging thoughts, and popular opinion. We press on with one goal in mind--to honor the Father through faith in His Son, Jesus Christ.

That's where true success lies.


Commit to the LORD whatever you do,
and he will establish your plans.
~ Proverbs 16:3, NIV


You are loved by an almighty God,

Darlene

For comments or questions, contact me at:
darlene[at]darleneschacht.net

Find Time-Warp Wife on facebook: Click here

If you would like to have Time-Warp Wife delivered to your inbox daily, simply click here: Subscribe to Time-Warp Wife

In participation with:

By God's Grace I Write

Note: For those of you who aren't aware. I am the founder and former editor of Christian Women Online Magazine. Joy Forney mentions it in her letter below. After writing my response, I thought it might be nice to copy you in on our correspondence, so that I might introduce you to Joy, and also that you, my readers and friends, will understand the passion I have. I am a messenger of the King, nothing more. It's by His grace alone that I write.

Dear Darlene,

You are one of those pioneers in the blogging community... just a few years ago everyone had CWO [Christian Women Online Magazine] in their sidebar and your blog banners across the top. :) But, it seems like recently you have really blossomed both personally and in your writing.

I always loved reading your articles at CWO, and they were great, but now it's like you have such a passion for what you are writing. I notice a huge change in you, and I think you are incredible.

Blessings,

Joy


Joy,

Your words are such an encouragement to me. You've seen me grow as a writer from our days at The Internet Cafe, and now as we continue to minister through our blogs.

I started CWO because I wanted to get published. I thought it would be a great writing project for a few friends and I, but then I found myself in the middle of a ministry--a ministry that, as you know, grew quickly and became more than I could handle on my own.

While I knew all the right things to say--and yes, believed them--I didn't feel compelled to reach women the way I do today.

It sounds cliché, but I say this with deepest sincerity: it really is only by God's grace that I write. If I couldn't minister to women on the topic of marriage I would grieve a great loss. I pray for His continued grace.

I feel a calling on my life to do this, which is far different than the place that I came from of wanting to write.

And then I see you, Joy, carving out words in your corner of the blogosphere, year after year while growing stronger in faith. I see an authentic woman affecting the hearts of all those who pass through. I thank God that I'm blessed with your fellowship, and with the words that you offer. You are a gift.

How beautiful on the mountains are the feet of those who bring good news, who proclaim peace, who bring good tidings, who proclaim salvation, who say to Zion, "Your God reigns!”
~ Isaiah 52:7

You are loved by an almighty God,

Darlene

For comments or questions, contact me at:
darlene[at]darleneschacht.net

Visit Joy's blog at:





Click to share on Facebook:Share