
Post Signatures
Here is the tutorial for how to make and where to put a cute post signature on your blog.
It took me a while to figure it out, but it is so easy!
The best part is once you change your HTML code, you can switch it with each new design of your blog and it ends up on every post, all the way back to your very first post!
I was super excited when I found this out! It makes for a very clean look!
Anyway, here is the tutorial:
Step 1) Open your favorite photo editing software.
Step 2) Create a new blank file, width: 458 pixels, and height: 100 pixels.
Step 3) Once you have designed a signature save it as a .jpg file to your computer.
Step 4) Open Photobucket and upload the picture (medium sized).
Step 5) Copy the direct link code.
Step 5) Now log into Blogger and click Layout --> Edit HTML.
Step 6) Go to where you see this:
Here is the tutorial for how to make and where to put a cute post signature on your blog.
It took me a while to figure it out, but it is so easy!
The best part is once you change your HTML code, you can switch it with each new design of your blog and it ends up on every post, all the way back to your very first post!
I was super excited when I found this out! It makes for a very clean look!
Anyway, here is the tutorial:
Step 1) Open your favorite photo editing software.
Step 2) Create a new blank file, width: 458 pixels, and height: 100 pixels.
Step 3) Once you have designed a signature save it as a .jpg file to your computer.
Step 4) Open Photobucket and upload the picture (medium sized).
Step 5) Copy the direct link code.
Step 5) Now log into Blogger and click Layout --> Edit HTML.
Step 6) Go to where you see this:
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:5.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
After .post { paste this:
background: url();
background-repeat: no-repeat;
background-position: bottom center;
It will look like this:
.post {
background: url( );
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:5.5em;
}
Step 7) Between the parinthesis paste the direct link code.
Step 8) Now click preview to see if you like it. If so click Save and your done!
Any questions please email me at l_heizzy{at}yahoo{dot}com!
**Giveaway - For anyone who wants to, leave a comment telling me what you think of this tutorial. In one week I will draw a random comment and they will win a free signature design by me! That way you can just upload it to your Photobucket and plug it into your HTML without all the design mess! So be sure to comment! Giveaway ends Nov. 17th!!**
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:5.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
After .post { paste this:
background: url();
background-repeat: no-repeat;
background-position: bottom center;
It will look like this:
.post {
background: url( );
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:5.5em;
}
Step 7) Between the parinthesis paste the direct link code.
Step 8) Now click preview to see if you like it. If so click Save and your done!
Any questions please email me at l_heizzy{at}yahoo{dot}com!
**Giveaway - For anyone who wants to, leave a comment telling me what you think of this tutorial. In one week I will draw a random comment and they will win a free signature design by me! That way you can just upload it to your Photobucket and plug it into your HTML without all the design mess! So be sure to comment! Giveaway ends Nov. 17th!!**









No comments:
Post a Comment