Hi dolls! I hope you're having a great weekend! I realized I have not posted any blog design tutorials in quite some time, so I thought I better do one today! This one is so simple to do and adds so much character to your post. You can have fun with it and get as creative as your heart desires! I'm going to show you how to make a customized post signature that will show up automatically (with no fuss) at the bottom of every post! See below for an example:
Okay, here we go!
1. You can either do this in Photoshop (Recommended for creativity's sake) or PicMonkey. For this tutorial, I'm going to show you the PicMonkey version. So, open your white background photo in PicMonkey.com (see step 2 of this tutorial HERE if you forgot how to do this). Then, let your creative juices flow! You can add just your name, icons, cute phrases, etc. But make it short and simple. I used my name and a short description of what my blog represents. They should be sized at round 235-250 pixels. I've created some examples for you:
2. Save your image as a .png to your desktop, and then upload it to Photobucket.com or your favorite image hosting site. When uploaded, click on the image and find the direct link in the bottom right hand corner. Don't click it yet! Just keep the window open. I'll come back to this.
3. Here comes the fun part: adding the code. YAY :) I promise, I'll make it painless. First, back up your template!!! Save it to your desktop or wherever to keep it safe and sound. When you open your template (click on edit html) your template code will appear. Anyone else notice that Blogger changed the look a bit? Not a fan :/ But it's still functional. Click anywhere on your template, and then on your keyboard, hit (CTRL+F). A little box in your template will appear, like below. This is how we find where to put the code.
4. Like I have, type in .post-footer in the search box. you will need to find the code that looks like the one below. KEEP IN MIND- yours will look different than mine. It may not really have anything at all. We will be adding it.
5. Add the code (everything below .post-footer) so it looks above. Don't forget to close it with this thing: }. Now, I will show you how to make it your own with customizations! First, go back to your Photobucket image and COPY that direct link from step 2. PASTE THE CODE where I have my background-image: URL. Your are replacing my photo with yours.
Other customizations:
+ Changing bottom border: replace #666666 with any html color code
+ border-bottom-style: replace "solid" with "dashed" "dotted" or completely delete this line for no border
+ change size: increase or decrease "40px"
And DONE! :) PREVIEW BEFORE SAVING! If all looks well, Save Template.
This is such a wonderful little aspect of your blog design, so make sure to have fun with it! Please contact me if you have questions :) Muah.
0 comments:
Post a Comment