Beautify Your Blog || Deleting the Photo Shadow

A few weeks ago I helped host a blogger round table all about blog design. There seemed to be a lot of the same questions from bloggers - they all wanted a simple fix for similar problems. Rather than just share it with the few ladies at the round table, I wanted to share it with all of you. Because we all deserve a pretty blog, even if we don't have the funds to purchase one. So here we are with my new mini-series beautify your blog. Today's topic? Deleting the Shadow Box Around Your Photos.

----------------------------------------------------------------------

The default for most layouts puts a pesky little shadow border around every photo. Today I am going to give you a few simple steps to get rid of that irritating border.

1. In the left sidebar of your blogger dashboard click "Template".
2. Under the Live on Blog thumbnail click "Edit HTML".
3. Use Ctrl F to open finder and type in the following: .post-body img
4. That search will pull up the following code

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
} 

5. Replace the bolded lines with:

-moz-box-shadow: 0px0px0pxtransparent!important;
-webkit-box-shadow: 0px0px0pxtransparent!important;
box-shadow: 0px0px0pxtransparent!important;
}

6. Click "Preview Template".
7. If it looks good click "Save Template".

8. You're good to go! Have a happy day!

What tutorial would you like next?

Anything you want to learn to beautify your blog?

Beautify Your Blog || Center Your Header

A few weeks ago I helped host a blogger round table all about blog design. There seemed to be a lot of the same questions from bloggers - they all wanted a simple fix for similar problems. Rather than just share it with the few ladies at the round table, I wanted to share it with all of you. So here we are with my new mini-series beautify your blog. Today's topic? Center Your Header!

----------------------------------------------------------------------

For most templates and layouts - the header automatically sets to the left. Today I am going to give you a few simple steps to center your header behind or instead of the title and description. 

1. In the left sidebar of your blogger dashboard click "Template".
2. Under the Live on Blog thumbnail click "Customize".
3. In the left sidebar of the customize dashboard click "Advanced".
4. Scroll down to the last advanced option - "Add CSS"
5. Add the following code to the "Add Custom CSS" Text box:

To center your header INSTEAD of Title and Description:

#header-inner img {

margin-left: auto;

margin-right: auto;

}

To center your header BEHIND the Title and Description:

#header-inner {

margin-left: auto;

margin-right:auto;

}

6. Click "Apply to Blog".
7. You're good to go! Have a happy day!

What tutorial would you like next? Anything you want to learn to beautify your blog?

-don't forget to enter the Blog Design giveaway-

Beautify Your Blog || Pinterest Mouseover

A few weeks ago I helped host a blogger round table all about blog design. There seemed to be a lot of the same questions from bloggers - they all wanted a simple fix for similar problems. Rather than just share it with the few ladies at the round table, I wanted to share it with all of you. So here we are with my new mini-series beautify your blog. Today's topic? Pinterest Mouseover - The Hovering Pin It Button!

----------------------------------------------------------------------

1. In the left sidebar of your blogger dashboard click "Template".
2. Under the Live on Blog thumbnail click "Edit HTML".
3. Locate the </body> tag near the end of the template - Use Ctrl F or Apple F for easy searching.
4. Paste the following code right above the </body> tag:

<script>
//<![CDATA[
var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeZ43KLI2x4uVikdQyTgytLyjx-DHSA9CZnr-D7YmcyaNDy1lOXlDMIBeJ1b_c6NIC5qm9DaHsf5egy_07SA6Z_RamnkRVtE-PHXcfnbLOhXZdSYw7BDW6KHNYFVloSFLUfGwh2giwIUeE/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
// This Pinterest Hover Button is brought to you by bloggersentral.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script>

*HTML Code provided by Blogger Central.*

• If you want to use your own button or image replace the RED URL with the direct URL to your image - replace the URL online, keep the quotes
• To change the placement of the button replace center - in BLUE with the new position:
• topleft
• topright
• bottomleft
• bottomright

5. Click "Save Template".
6. And happy pinning!

Do you want a new design for your blog? Are you afraid of using HTML and coding? Whether you blog for fun, for family, or for fame - LISTEN UP! I've been bitten by the design bug. I've been learning all sorts of new tips, tricks, and code for blog design. And... since I just BARELY redeigned my blog I'm not ready for a new one. So I am giving away ONE FREE BLOG DESIGN! Enter Below!

a Rafflecopter giveaway

What tutorial would you like next?

What steps do you want to learn to beautify your blog?