Tuesday, November 24, 2009


For today's tutorial I found this cute idea for an advent calendar:
Check out the tutorial HERE.

Tuesday, November 17, 2009


Here are my two favorite tutorial finds this week:
This gorgeous bracelet from Oh So Crafty:It would be a perfect Christmas present!!
I am going to make some, and soon!

Pick #2 is this awesome tutorial from Obsessively Stitching:
Pot Holder Seatbelt Covers!These are genius and on my craft list as well!!

Tuesday, November 10, 2009


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:

/* 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!!**

Tuesday, November 3, 2009


How to Enlarge your Images

We all love to blog surf and see what our friends and family are up to.
We all love to look at pictures on those blogs.
But sometimes the pictures are so small you have to click on them to see the details.
I have solved this problem so others won't have to do this when visiting your blog!
It took me some blog surfing and HTML editing to figure this out, but it is SO easy!
Your photos will go from this:

To this:
It is a perfect look for a personal blog, photography blog, or personal website!

Here are the steps:
Step 1) Calculate how much image size (large) you want to display. You want it just a bit less than your main body width*. So if your main body width is 570px, the maximum width to post a large image is 570px. But, to make the image looks nice, you don't want it to go outside your mbw, so choose a width that is a bit less than the mbw... like 560px.

(*You can find your main body width by going to Layout --> Edit HTML and scrolling to where you find this:
#main-wrapper {
width: 570px;
margin-left: 10px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
The part in red is the main body width. )


Step 2) Now that you are in your HTML, scroll to where you see this:

.post img { } padding:4px; border:0px solid $bordercolor; } .post blockquote { margin:1em 20px; }

Add this after .post img{:

max-width: 560px;
width: expression (this.width > 560 ? 560: true) ;


It will look like this:

.post img {
max-width: 560px; width: expression (this.width > 560 ? 560: true) ;
} padding:4px; border:0px solid $bordercolor; } .post blockquote { margin:1em 20px; }

** Make sure the max-width is just a little less than your main body width, and change all three numbers to match whatever your HTML code says.
Example: If your main body width is 400 make the max-width 375px and the other two places in the code for numbers to 375 as well (max-width: 375px; width: expression (this.width >375 ? 375: true); )***

Now save your template.

Step 3) This step is important. Each time you upload any images in a new post click the EDIT HTML tab at the top of your new post box. Once there you will need to find this:

width: 400px; height: 267px;
" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqQsIHmaGsBpHomARfQYMBZJvNMoPafZXgW9bkSyP4HU94Hc-rj5g3wpyaZLuqrG13PnmDYbZs-PtIsBWTvBS6TmUJkUedEe0unDQblsoJvvEjndGC-j5Ptyo7OB-cEQDKb-x1sXqoW8k/s400/IMG_1760.JPG

Delete the part in purple. And change the part in red from s400 to s800.
*Note: If you upload multiple images you will have to find the individual width and height for each and delete it, and find the individual s400 for each and change it. Each picture is separated by a code.*
**Note: Also if you upload a small photo change the s200 to s800 and if you uploaded a medium photo change the s320 to s800.**

Then click Publish Post and your done!!

There is a lot of technical wording and such so if you have any questions please feel free to email me at l_heizzy{at}yahoo{dot}com, and I will help you out!