Reflecting the Designer

Growly Bear Hugs!

2011-01-12T01:07:00.000-08:00

Isn't that a precious name for a blog?! My mom has been wanting to get into blogging for quite some time, and she finally took the plunge. So, of course, I designed a custom theme for her. One of the perks of being related to a web designer. ;)

She had some very specific ideas of what she wanted. She wanted it to clearly reflect family, heritage, memories, as well as a journal feel. She also wanted to incorporate the official family tartan pattern from our Irish background, and a wood grained desktop background. So, I created almost a tablecloth or quilt like material for the header out of the appropriate tartan (see a tutorial on how to do this in PhotoShop) pattern, I created a highly edited collage of family pictures, a pen, and a Bible for the header, I gave the main sheet kind of a file folder appearance with a little notebook style look for the sidebar, and I added a handwritten font for that personal touch and a custom little graphic to appear beside each post header. Click on the image to enlarge.

Of course, I made sure to create small repeating graphics for quicker loading time, and saved all images at a good web resolution. I had a lot of fun creating this fun and personal blog that truly reflects our family and my mom's personality.

Do you need a blog that reflects your personality with custom graphics and design to set it apart from the rest? Contact me today so I can help you get started!

Creating a True Sticky Post

2011-01-11T08:35:00.000-08:00

I spend most of my time working with WordPress, because, let's just be honest, WordPress is better. It's far more flexible than Blogger and allows you to create a full CMS rather than just a blog. However, I do love to find ways to stretch Blogger beyond it's natural bounds. One of these ways is to create a Welcome Page or Sticky Post for your Home page in Blogger. This is a great option if you want some welcome text or a featured deal to appear at the top of your other blog posts, or if you want your blog to appear more like a website. An example of what I'm referring to is the recent blog design I did for The Adventures of Sammy the Skunk, a blog featuring children's animal stories. Here are the simple steps to help you do this.

1.) Create the post that you'd like to make sticky, and publish it.

2.) Now, open that post back up to edit it, and click on the Post Options tab. You'll want to change the Publish date to a date in the future (a long time in the future is best so you don't have to worry about changing it frequently).

3.) Publish it again, and it will continue to remain at the top of your other posts until the date you set it to is past.

4.) Obviously you don't want a future date to be seen on this post as that looks dumb. However, you don't want to remove all your other post dates, as that would be potentially really negative for your readers. So, instead, you're going to want to hide the date on just that particular post.

Click on the Design Tab, and go to Edit HTML. (Make sure to check on "Expand Widget Templates").
Find the following code in your blog: <span class='post-timestamp'>
If you find that code, you can go here to view a simple tutorial on adding conditional tags to remove the date.
If you are an Artisteer user, however, you'll need to find this instead: <data:post.timestamp/>
Now, directly above that, put this code: <b:if cond='data:post.url != "urlToPostToHideDateOn.html"'>
Make sure not to copy and paste directly from this blog, but ALWAYS paste into Notepad or anothe text editor first to ensure that quotation marks are facing the correct way.
Finally, put the closing conditional tag </b:if> after whatever you want excluded from the new sticky post's header. Hint, it will most likely be after either an </a>. Just make sure to preview first before saving. Also, note, that you will still see the Edit link and possibly a divider beside it, but that will be hidden to all other viewers.

5.) If you want that post to appear as more of a page for your blog, simply go to the Settings Panel of your Dashboard and click on the Formatting tab. Now, set the amount of posts to be displayed on the Home Page to only 1.

That's it! You have created a your own Sticky post or Welcome page for blogger!

Adding Buttons to your Header Manually

2010-12-13T22:40:00.000-08:00

Based on a recent email question I received, I thought it would be a good idea to revisit adding buttons or links to your header. I posted a simple way to do this earlier through the use of your gadgets, but this will not display correctly if you are using widgets with styled backgrounds. However, you can manually add in as many buttons that you want to your header with a little tweaking to your code. This post is directed specifically to bloggers using Artisteer generated templates, but you can use the same concepts for any theme. You will just need to find the appropriate code.

Go to the Edit HTML under Layout on your Dashboard and click Expand Widget Templates.
Make sure to save your code before doing any editing just in case you make a mistake.
Click "Ctrl+F" and find the following code: <div class='art-Header.jpg'></div> or <div class='art-Header.png'></div>if you are using an Artisteer generated theme, or possibly <div class='header.jpg'></div>
Immediately below that code, insert the following: <div class='art-Header-buttonname><a href='urdesiredurl'></a></div>

note: make sure to replace the code in red with the appropriate name and url for your site. You can add as many divs and links as you would like to add to your header.
Next, use "Ctrl+F" to find /* end Header */
Directly above that code, you'll find the styling for the current Header image of your site. You need to add some styling to your buttons now using the same concept. Important things to include in the styling are
-the height and width of your image,
-the url to your image location,
-the position (should always be absolute)
-the exact placement of your image in the header(margin).
Again, you'll see the css for the current header, so that can be your reference.
Here's an example of both sets of code if you want to add a Twitter button to your site.
First set of code as shown above:
<div class="art-Header-Twitter"><a href="http://www.blogger.com/linktoyourtwitter"></a></div>

Code to be added to the CSS:
div.art-Header-Twitter
{
position: absolute;
z-index: 1;
bottom: 50px;
left: 50px;
background-image: url('linktoyourimagehere')
background-repeat: no-repeat;
}

Please make sure NOT to copy and paste code directly from this site into your code. You will need to copy and paste it into Notepad or another text editor first to ensure that there are not extra spaces and that all quotation marks are going in the right direction.

Hope that helps, and as always, let me know if you have questions or comments, or if you need a fantastic blog design. :)

Adding a Class To Your Signature

2010-12-08T19:50:00.000-08:00

If you have learned how to add a signature to your blog by editing the code, you might be disappointed to see the same border around the image as there might be around the other images in your post. Today I want to show you an easy way to implement both a fancy border around every image in your post while keeping the border off of your signature.

First of all, you need to define a new class for your signature. You are probably thinking, "What is that???" Basically, a class is the style definition that you give to any element of your blog. For example, if a border appears automatically around all of your post images, that means you have a class in your css that says it should be there. You need to define a new class that says that a border should not be there for your signature image. To do this, just follow the steps below. If you don't know how to add a signature to your blog posts, you can view my instructions here. Always remember, NEVER copy and paste directly from one web page into your code. Always, copy into a text editor first, and ensure that all quotation marks are facing the correct direction.

Go to your Dashboard and click on the "Edit HTML" Button under the Design Tab.
Make sure to check "Expand Widget Templates"
Now find the following code (It may look a little different on your blog):
.post img, table.tr-caption-container {
padding:4px;
border:1px solid $bordercolor;
}
Add this code just below it.
.signature img {
padding:4px;
border:none;
}
Now find where you added your signature code. The code where you added your signature should look like this (if it doesn't add it, and make sure to change the url to match where you have your signature image hosted).
<p><div align='left'><img src='urltoyourimagehere'/></div></p>
Now, add the following to the code just after the first <div: class='signature'
After adding the code above, your whole code should now look like this:
<p><div class='signature' align='left'><img src='urltoyourimagehere'/></div></p>
Preview in your browser to ensure it's right, save, and you are finished!

Now you can define whatever type of style you want to incorporate to your signature image, or any other regular image you want added to your post. As always, feel free to leave a comment or shoot me an email if you have any questions.

The Adventures of Sammy the Skunk

2010-11-05T20:48:00.000-07:00

I just recently created a blogger theme for an author of animal stories for children called The Adventures of Sammy the Skunk. This was a complete customized design from head to toe including complete setup. While I prefer to use Wordpress for a full CMS website, Blogger was more appropriate for my client's computer skills and plan for this site. There are some definite tricks that can be used, however, in order to make Blogger have a website feel, and I'm very pleased with how this site turned out. Here are some of the tricks that I implemented on her site.

Home Page: I chose under the Formatting of the Settings tab to only display one post on the home page, and I made that post appear more like a welcome page with graphic links, site explanation, and a personal welcome from Adele.
Post Dating: In order to keep this post always the only one to display on the Home page, I edited it after publishing and chose a date in the future.
Meta Data: Because I wanted Adele's regular posts to have dates, but it would look silly to have a date in the future listed on the home page, I chose to add some conditional tags so that the meta data icons and information only appear on regular posts rather than the post for the Home page. I'll do a post soon on exactly how to do this.
Navigation: I created a nice horizontal menu to showcase the different post categories and pages. I also created a nice navigation section listing all of the stories in the right sidebar.
Posting Order: I added the stories starting from the last chapter of each story so that they appear in order when clicking on a story link.
Design: I gave the theme a completely custom, rustic, and homey look that fits the style of stories. I also added custom graphics for each story to tie everything together.
Subscription Extras: I chose to burn feeds through Feeburner, as well as burn specific feeds for specific post categories as Adele has a lot of different types of material offered on her site. I then edited a graphic and added links to the bottom of the appropriate posts.

If you are interested in a theme design or refresh, please contact me. Also, make sure to check out The Adventures of Sammy the Skunk, especially if you have young children. Besides the stories posted, there are also little devotionals to go along with each story, and coloring and activity sheets will be added soon.

Welcome to Reflecting the Designer on Blogspot!

2010-11-04T01:44:00.001-07:00

If you have been redirected here from a Google Search, please look at the sidebar tip topics for your desired post. I just transferred over all of my posts from Blogger Scrapbook over to this new blog. All of the same material is still here, but I wanted the name of my blog and my main site to be more cohesive.

This blog is designed to showcase blogger tips and tricks, show recent blog theme designs, and to compliment my main site Reflecting the Designer. Please let me know if you have any questions!

Adding Jump Breaks

2010-08-18T13:46:00.000-07:00

I use the jump break feature quite often in Wordpress, but hadn't really used it in Blogger yet. Basically, it just allows you to show a snippet of your post on the main blog page so you can feature more information in a short amount of time. By clicking on the "Read More" link, it will take you to the full post. They have added this feature to Blogger, but until now I hadn't even messed with it. Because I create my own customized templates, I did have to add a small snippet of code into the theme, but it's very simple and works like a charm as you can see from this post.

So, if you are wondering why it won't work for you. Make sure the following is in your code found on Blogger's help page here and give it a try. Make sure to read the rest of their article if you have more questions about jump breaks. If you already understand the basics, though, you can simply just add this code and use the jump break feature.

Find the following in your Edit HTML section of the Dashboard (make sure to select Expand Widget Area)

<data:post.body/>

Add the following code just below it, and save. You should be all set now!

<b:if cond='data:post.hasJumpLink'> 

<div class='jump-link'> 

<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> 

</div> 

</b:if>

As always, leave a comment or shoot me an email if you have a question. Go have fun with Jump Breaks now!

Blogger Versus Wordpress

2010-04-13T11:23:00.000-07:00

While I love Blogger (this is a Blogger site), I do feel that Wordpress has more advantages than Blogger in many aspects. To find out more about the differences between these two platforms, check out my recent post on my main site, Reflecting the Designer.

Retiring Free Blog Themes Site

2010-04-08T10:44:00.000-07:00

I was disappointed to discover that Picasa was deleting my albums every time I added a new theme for my free Blogger themes blog. I don't want to individually host all of the images I make for a theme somewhere else and insert them into the code, so I'm going to be retiring that site. I still offer some free Wordpress Themes and will hopefully be adding more as soon as I have the time. Contact me if you are interested in a customized or personalized WP or Blogger theme and I'd be happy to discuss prices and details with you.

Blending Headers into the Background With Artisteer

2010-02-26T07:04:00.000-08:00

This post was inspired by a recent comment. If you use Artisteer to create your Blogger or WP sites, you may be frustrated by trying to make a figured header instead of the standard square or rounded corner style. There are a couple of ways to get around this using Artisteer only or as little coding changes as possible. The best way is to completely remove the header and/or menu outside of the main sheet div. but if you are nervous about playing around with the code for this, the following options will work just fine.

Blogger or Wordpress Making Use of Glare

Set a larger top offset to your sheet, and create a center glare that sits directly on top of your sheet. Just make sure that the color of your header blends into the color of the glare.
If you have a pattern in your glare, you'll need to also create a header image that will blend into that glare image. The simplest way to do that is to create a Photoshop doc. in the correct dimensions of your header and glare, paste a screen shot of your artisteer doc onto it so that you can properly line up the glare and header image, then crop the header part out and insert it into your Artisteer file again.

*Please note, option one only works well if you are not using an outline or shadow for your main sheet. There are workarounds to this too, they just take a little more time.

* I just used this option in my most recent project for My Skin Concierge

Blogger - Changing the Header File

You can simply create a png file in the dimensions and look that you want (say with an arched or figured top), then upload it to your image hosting server.
In Artisteer, just leave the header as a solid color.
After you've exported your blog theme to Blogger, go toward the bottom of your html and find the following:
<div class="art-Header-jpg"></div> You'll want to change that to <div class="art-Header-png"></div> if it is not that already. If you have both, just delete the jpg one.
Next, go up to the css part of your xml doc. and find the styling for the Header. It should be under code that looks like this:
/* begin Header */
div.art-Header
Under that code, you'll find div.art-Header-jpg, and in that spot simply change out the url of the image to the one you just created and hosted and change the name to div.art-Header-png.
Preview, and tweak the code until it looks just how you want it. Simply changing the url should do it, though! If you have css for the div.art

If you are using Wordpress, you'll need to do the same thing, just change out the div in the Header doc, and then go to the style sheet and do the same thing for the url and style code.

Special Trick: If you want to still include a shadow and sheet border, you can create a vertically repeating background image with those elements that is centered on the page. Then, simply create a glare that extends beyond the shadow and border with your header style!

Special Trick: This is also a great way to add one or more clickable buttons into your header that doesn't mess up your doc by adding it to the Add a Gadget Space. Simply add another div to your Header section, and enclose it in <a href='url link'><div.art-Header-your title-png></div></a>, then add some css for the styling!

Hope this has been helpful. Please leave a comment if you have questions or suggestions.

Arranging Header Buttons

2010-01-31T12:04:00.000-08:00

If you have tried adding header buttons and you would like them to be in an exact spot within the header, you will need to add them into a gadget space with the following code:
<a style="position:absolute; top: 30px; right: 15px;" href="THE URL FOR THE LINK YOU WANT TO ADD" title="Facebook"><img src="THE URL TO YOUR IMAGE"/></a>

Simply edit the items in purple to fit your needs. You can change the distance from the top, bottom, left, or right as desired. If you would like to add more than just one image into the header, make sure to add it into the SAME gadget space or it will automatically place it underneath the other image, and that could really mess things up for you.

Creatively Displaying Social Icons

2010-01-31T11:56:00.000-08:00

I love scrolling buttons on either side of a blog or site design. It helps keep the links you want people to click on easily accessible and it frees up room in your sites side bar. The only thing you need to be careful of is using these on a site where the main sheet is very large. If you do, some people with smaller monitors will have your buttons scrolling over their text.

I just created a new blog theme design for Annie Kennedy Photography, and I incorporated some fun buttons that stay at the bottom of the page on her site. This was very simple to do, and by adding a background image, the buttons look like they are part of the design rather than aimlessly floating to the side.

The first thing to do is to create or use a background image that will serve as your base. I could have easily just incorporated buttons on the left side of the blog on top of the already in place glare image. However, I wanted to balance out the blog and also include the back-to-top button at the bottom of the screen.

I then created the actual button images in separate layers in Photoshop on top of the background. I saved them each individually as PNGs, inserted all of the images into a blank post and copied their image locations.

Once I had the image urls, I added the html/javascript gadget to the footer of the blog and inserted the necessary code to add all of the images, titles, and links. You can find this code in my other posts about adding scrolling buttons to your site. Just make sure that you place your code for your background image at the bottom with the buttons on top. You can play around with the spacing until you get it laid out just the way you want it.

Hint: This would be a super cute way to display buttons in your header as well. Simply create your main header image to look like grass or other swirls, then scatter your buttons throughout to look like flowers growing in your header.

Please leave a comment or email me if this was helpful or if you have questions regarding any of the steps to making this work.

Blogger Re-Design for Annie Kennedy Photography

2010-01-31T11:38:00.000-08:00

I just finished creating a logo and business card design for Annie Kennedy along with a blog redesign. Annie was a joy to work with, and it because of her eye for photography she had lots of great images to work with for the design.

Annie is just really getting her photography and jewelry making business off the ground, so she wanted to make her blog more of a website to showcase her work as well as advertise her business. To do this, we created a look that is not the typical cookie-cutter "blog" style. This blog has the feel of a regular website with her customized header and complete theme all tied together by her customized logos. It also includes a top menu so that people can easily find the services she offers and look through her work in an organized way. She's still working on organizing all of her links and menu items as well as her sidebar items, but she's got a great head start.

One aspect that helps this blog as well is the extra gadget space created directly above the top post. This puts her site information always at the fore-front especially for first time visitors. See my post on how to add extra gadget space to your blog to incorporate this into your own site.

Matching Social Icons for Your Sidebar

2010-01-14T09:53:00.000-08:00

As a part of my redesign for Health, Home, & Happiness, I created matching, small social icons, and put all of those along with links into a gadget in the sidebar rather than scrolling buttons. This is a helpful way to not only consolidate all of your "follow me" buttons such as facebook, twitter, and rss into one spot, but it also helps them to be more user friendly and easy on the eyes rather than having several different styles of large buttons scattered across the page.

So, here is the simple code that you can use to put something similar into your own site. You'll need to create or use pre-made icons of course. Also, if you wanted, you could make one long graphic with the images stacked, and have it set to float to the left.

First, save your images to a hosting site or your blog itself and copy the image locations.
Next, in your blogs Page Elements, click Add a Gadget to the Sidebar you want, and choose HTML/Javascript.
Then, title your gadget and paste the following code inside
<img src="THE URL TO YOUR IMAGE"/><a href="URL TO YOUR SOCIAL NETWORK"> DESIRED TEXT HERE</a><br/>
Copy that same code as many times as necessary for the amount of links you want to create making sure to edit the urls and text of each accordingly. (Note that the <br/> simply adds a line break between your links, so you may add as many or few of these as you need depending upon the amount of space you need between your links.)
If you have form for email subscription, you can easily add that directly after your other code, just make sure that there are no spaces and you put <center> and </center> around the entire form code so it is aligned nicely. Also, you won't need to include the link code after the icon image and text because they'll be filling in the form below that. So, this code: <a href="URL TO YOUR SOCIAL NETWORK"> can be left out.

A special note. Your links and text will automatically be the same style as all of the other sidebar text and links unless you add style code to change that. Most of the time, it's best to leave it the same, so that it matches the rest of your blog nicely.

Please leave a comment if this was helpful, and let me know if you are interested in your own customized blogger theme or graphics.

Re-Design for Health, Home, & Happiness

2010-01-14T08:56:00.000-08:00

Cara was looking to reorganize her blog a little and give it a new look, so she asked if I could give her a customized blog theme that would help people navigate her site and display some of her own pictures. This was a fun project to work on, and it not only gave Cara the organization she needed, but also really shouts out the theme of her blog which is all about good nutrition and healthy lifestyles.

I completely changed the look of her blog with a new theme, new colors, customized profile, edited and well placed images, a graphic logo, favicon, buttons, etc. Some of the biggest features for Cara are the top menu with submenu items for organization as well as the customized header images from her own snapshots.

As a part of my design packages, I also include set-up and support so that my customers get the exact look they were hoping for as well as the help they need to implement and edit things as desired. So, in this case, it included making sure that some existing gadgets were still in place and worked properly, editing Google Adsense and making it match, and editing some of her current side bar items to make them more theme appropriate.

Please contact me if you are interested in a customized look for your blog, and I'd be happy to discuss terms and prices with you!

New Brick Wall Theme

2010-01-01T17:45:00.000-08:00

Check out my newest free theme by clicking on the title above! This is a widget ready, 2 column theme with a fun brick wall background and stone textured header. There is plenty of room in the header area to add your own personalized header. I've included the graphics that you see to use for your own links and in case you want to use the header given. The free graphics included are social icons, a header graphic, and post divider graphics.

If you need instructions on adding your own image or image links to the header, adding scrolling buttons, or other tips; make sure to check out the tips category in the right column here on Blogger Scrapbook for simple instructions.

Let me know if you have any questions on this theme or if you are interested in your own customized Blogger or Wordpress theme design. You can always see more of the designs I've done and design services I offer by visiting my main site, Reflecting the Designer.

New Twitter Profile Widget

2009-12-29T11:04:00.000-08:00

Twitter offers a great widget for blogger or any site so people can view your more recent tweets and follow you. Now, for Wordpress, there is are some great pluggins that really allow you to customize your tweets completely. What Twitter offers for blogger is pretty good too, though, and it's extremely easy to use and edit.

The really nice feature about using this widget in blogger is that you can edit the appearance at any time while it's on your blog and as often as you want. This is helpful if you have changed themes and want your widget to match the color, fit a new sidebar dimension, or if you want to change how many tweets appear, if it's live, if you want your time stamp or hash tags to appear, etc. I'm definitely going to be taking advantage of this on my blog that displays free blogger themes.

To edit the settings, all you need to do is click on the quick edit button in the corner of the widget, and go to town. You'll need to know the color hex numbers you want if you're going to change the colors of the background or links. If you make a horrible mistake with the code, all you have to do is delete it, go to Twitter, and make a new button.

So, have fun tweeting, and please follow me if you are not already! Let me know if you have trouble figuring out what certain code elements mean in the Twitter Code.

Free Winter Blog Theme

2009-12-22T09:51:00.000-08:00

I've added a new free, wintry blog theme! Click on the image to check it out as well as for instructions on how to upload it and customize it for your own blog!

As always, feel free to contact me if you are interested in your own personalized and customized Blogger or Wordpress theme design and setup.

Adding a Search Box to your Blogger Header

2009-12-12T09:49:00.000-08:00

This tip actually could apply to any type of a form that you want to add to your blogger header. This is not hard at all to do, and only takes a little addition and tweaking of the code. Please note, that this tip is just for how to add and position the actual form or link itself. The image you see behind the search box on this site, is simply the header image itself that I designed specifically for the purpose of highlighting the search box. With all that said, here's the "how to" on adding in a form, link, or button to your own header.

First, go to Edit HTML under Layout on your Dashboard and click Expand Widget Templates.
Make sure to save your code before doing any editing, just in case you make a mistake that you can't figure out how to fix.
Click "Ctrl+F" and find the following cod: <div class='art-Header-png'/> you may only see <div class='art-Header-jpg'/> instead or you may see both.
Immediately after that code, add in your new code. So, it should look like the following:
<div class='art-Header-png'/>
<div class='art-Header-jpeg'/>
<div class='art-Header-Search'>
Your new code is in purple, and you will need to title it in a way that makes sense to you. I called it Search because that is what I was adding.
Immediately after the new div class you just made, you will want to put the javascript for your search box or form. I copied and pasted the code from Google Adsense there. Make sure not to leave any spaces, and close the entire bit of code with a </div>
Now, that you've added your new div, you'll need to add some instructions for it's placement in the CSS. Using the Ctrl+F, find the following code: /* end Header */
Directly above it, add the following and adjust it according to where you want your form or box located on the page. Note, that if there are text elements involved, you can add more code to this as well with instructions on the font, size, color, etc.
div.art-Header-Search
        {
                position:absolute;
                z-index:0;
                top: 125px;
                left: 540px;
        }

        /* end Header */
Save your template, and you are done. You can continue to edit the CSS until you are satisfied with the position of your new form or button.

Please post a comment if you found this post helpful, and let me know if you are interested in a complete theme design or design elements and set up for your own blog.

Updated Blogger Scrapbook Theme!

2009-12-10T09:31:00.000-08:00

Well, I like the new theme design I created for this site for several reasons. It's more streamlined then the old one, and it just looks nicer than that tacky purple ribbon one I made. I tried to make this design "easier on the eyes" as well as easier to navigate through. I was able to add a search bar to the top as well as my social icons, but I'm a little disappointed at how the hover is displaying in Firefox and Safari. Everything looks great in IE, interestingly enough. In Safari and Firefox you have to hover over the bottom of the buttons for them to be clickable, and the search box is looks completely off in Safari.

I may re-upload the theme one more time and do a few more tweaks before it's completely ready for action. We'll see! :) Anyway, stay posted on the progress, and I'll be doing a post soon on how to add your own images, buttons, links, or forms on top of your header images.

Free Follow Me Buttons!

2009-12-09T19:28:00.000-08:00

Here are some matching blue and green twitter, facebook, and rss buttons that can be used on your own site! I've also included a matching back-to-top button. If you have editing software, you are welcome to colorize these to match your current site.

Here's how you can implement these buttons on your own blog:

Right click on each image, and copy the url location click on each image and save it to your computer. (Note: if you choose to save the images instead of just copying the url, you'll need to host them either on your own blog or to another hosting site.) You can choose the placement of these buttons between the following two options.
Add them into the header, footer, or sidebar as static images. You can see my post on adding images to your header for instructions.
Add them into a footer gadget as scrolling images.
- Simply add a gadget in the footer of your blog, and paste the following code replacing the IMG URL with the URL to the image you just copied.
- Copy and paste this code for as many buttons that you want to add, making sure to have the appropriate url attached to each.
- You'll need to change the title, and the distance the image floats from the top of the screen until they are lined up in the way you want them. Below is the example code. Change the items in orange to match what you want, and of course, as mentioned the positioning as desired. *Before using this code, make sure to paste it into Notepad or other text editor so that you won't copy over extra formatting code!
<a style="display:scroll;position:fixed;top:5px;right:5px;" href="LINK TO YOUR FACEBOOK PAGE" title="Facebook"><img src="IMAGE URL HERE" /></a>

I am offering some very customized contact/follow me buttons packages on my main site, Reflecting the Designer for FREE, so be sure to check them out. Also, Contact me if you are interested in customized buttons to fit your site specifically.

Free New Christmas Blogger Theme!

2009-12-03T19:35:00.000-08:00

Well, I've finally gotten around to posting a free blogger theme! You can see a live example of it along with instructions on how to upload it to your blog by clicking on the picture. Enjoy!

Adsense and Blogger

2009-11-27T09:45:00.000-08:00

Most people who blog would like to earn a little revenue through ads as well. While blogger has the ability for you to use their Monotize button, the most effective way to advertise is to customize your ad units in Google Adsense and put them onto your page using the Add a Gadget or by putting them directly into the html of your blog. Here are just a few tips on doing that.

Make sure to set up your Google Adsense account with targetable channels so that your ads are relevent to the content of your posts and provide additional resources and info. that will help your readers. There are plenty of how to helps on the Google Adsense page.
Create Adsense units for your for feeds. I recommend getting a feed burner account first and incorporating them into that.
Create your own ad units for the side bar and post using the "Get Ads" tab on your Adsense page so that you have complete control over the look and feel of your ads.
Choose colors that are complimentary to your blog theme, and make sure that the ads are not overpowering or obtrusive to the site.Always make sure to align your ads properly as well, so they don't look like an afterthought. Remember, all you need to do to center something is put <center> directly before the code, and </center> directly after the code with no spaces in between.
Place your ads easily by choosing the HTML/Javascript gadgets on your layout page. Make sure you are using the html setting, and simply copy and paste your code into the gadget and save.
Place your ads into your main template in order to display ads between posts, below or above your page, etc. A great articles on how to do this can be found at Cool Tips and Tricks and there is a great ad code converter you can use to display code in the PHP of your blog at Eblog Templates.

Esther's Cakes & Cards

2009-11-24T11:41:00.000-08:00

I just designed a new blog theme for my sister-in-law so she can display all of the adorable, home-made cakes and cards she makes. It's still a work in progress, and she's only done a few posts so far, but I'm excited to see it develop! She's also going to be posting a lot of great "mommy" tips, which she has a lot of being the mother of 4 energetic kiddos!
You can check it out by clicking here.

This was a fun blog to design, and there are a lot of elements working together. It's completely a original and customized design, and what I love doing for a blog is to make it not only visually pleasing but also organizationally balanced. There's nothing more frustrating than not being able to quickly see information that you need.

Here are a few ways in which I a created an organized and easy to read blog:

Menu:

There is one! A menu is sooooo very helpful.
The current page is highlighted.
This menu is divided by category (or labels), and she can subdivide it even further as she needs to making it easy for people to find the information they are looking for.

Sidebars

I offset one of the side bars with a different color to distinguish it's contents from the side bar information on the right.
There are two side bars to keep you from scrolling down too far unnecessarily on just one.
I created personalized title buttons for the left side bar, to further distinguish that side. Those buttons are for information that doesn't change and that you want highlighted.
I used blue for the text and links on the side bar to further distinguish them visually from the main content, but also to complement the colors of the design and balance the page.
Underlines only appear when you scroll over a link rather than on all passive links so that the page looks less busy. This way it's obvious what link you are hovering over, as well.
I will be adding Adsense to the sidebar that will also complement the colors of the blog.

Main content

There are post dividers to separate each post.
The font is a mild green so that it doesn't appear harsh against the theme's colors and design and so that it complements the other elements of the site.
There are labels clearly shown on each post.
Instead of cluttering up the top meta data section with a lot of icons and text, there is only the calendar with the date and I've used a Signature at the bottom since only Esther will be posting and not multiple users.
Links are in a light blue so they stand out but aren't overwhelming.

Basic Design Elements

The colors are soft and muted so they are easy on the eyes.
The theme is tied together at every element with graphics and colors.
The main page is white, as text against a light background is always easier to read than light text on a dark background.
Although the background design is graphic heavy, it is tiled vertically so that loading is faster.

So, those are just some basics on layout and design that make a blog easier and more enjoyable to navigate and read. Stay posted for other tips, and as always, feel free to contact me if you are interested in a completely personalized and customized Blogger or Wordpress theme.

Removing the Blogger Navigation Bar

2009-11-21T20:13:00.000-08:00

OK, this is a very simple thing to do, and you have probably already seen several posts concerning this topic online. All you need to do is copy and paste the following code into the HTML of your layout.

First find this code toward the top of the HTML:
*/body
Second copy this code directly in between the */ and body: #navbar-iframe {display: none !important;}

To add your blogger bar back again, simply delete that code. Please see my post on how to add a Dashboard link to your site if you want to quickly get to your dashboard without having to click on "Edit Post" each time.