About   All Tips   Tips by Category   Tips by Ability   Help!

How To Make A Grab Box For Your Button - Advanced

Easy Blog Tips!


This tutorial will show you how to put your button on your blog as well as create and install an HTML scrollbox so that others can put it on their blogs. These instructions assume that you already know how to create button-sized images. There are no risks to your template, but it is a tricky tutorial. It was not written for the beginning blogger, but for those who feel comfortable working with html gadgets.

Follow these directions exactly. The first time I did this it took me well over a frustration-filled hour and I had to take several sanity breaks. Be patient and persistent. You will get this!

I am sure there is an easier way to do this. This is what works for me:

Making your image link back to you

1. Create your button as a small square image.

2. Upload it to Photobucket or another photo storage site.

3. Copy its html code. Click here for help getting an html code for your button.

4. Alter your code by looking at my new code below and replacing the colored portions with your own information:
<center><a href="http://sneakymommablogdesign.blogspot.com" target="_blank"><img src="http://i409.photobucket.com/albums/pp178/sneakymommablogdesign/smbuttonblk.jpg" border="0" alt="Sneaky Momma Blog Design"></a></center>

Red: where you want your button to link back to
Green: what you want the text to say when someone hovers over your button
Blue: add this to automatically center your button in the sidebar (optional)
Purple: your photo bucket URL- you won't change this in this step

5. Test your finished code by adding it as an HTML gadget in your practice blog's sidebar.

6. If all looks well, proceed to making the HTML box. If not, go back and follow the above instructions exactly the way they are written. It will probably take you a few tries before you get it right. It took me several tries the first time I did it. DO NOT PROCEED UNTIL YOU GET YOUR BUTTON LOOKING EXACTLY AS YOU WANT IT.

Making the nifty HTML scroll box to put on your blog
1. Copy the following code and paste it into Word or Notepad so you can alter it to include your own information, just like in step 4 above:

<center><textarea rows="4" cols="13" name="Sneaky Momma Blog Design" readonly="readonly"><center><a href="http://sneakymommablogdesign.blogspot.com" target="_blank"><img border="0" alt="Sneaky Momma Blog Design" src="http://i409.photobucket.com/albums/pp178/sneakymommablogdesign/smbuttonblk.jpg"/></a></center></textarea></center>

2. Go to your practice blog’s layout page.

3. Select add a gadget (HTML/JavaScript) in your sidebar.

4. Copy and paste your new code into the box. Hit save. Preview.

5. If the HTML scrollbox shows up and looks good, woooo hoooo. If not, go back and try again. This may take you several tries and several minutes, if not days. DO NOT PROCEED UNTIL YOUR HTML SCROLLBOX SHOWS UP IN YOUR PRACTICE BLOG’S SIDEBAR AND LOOKS GOOD.

Putting your button on your blog
1. Copy the code from the HTML scroll box that you created. Add another HTML gadget to your sidebar and paste this code in it. Save. Preview. It should appear all nice and centered above your HTML scroll box.

2. Go back and check your work. Make sure that when you hover over your image that the right words appear. Check that when you click on your image that it takes you to your ‘real blog’. If all things are good, proceed. If not, go back and do it again.

When everything is exactly as you want it, open your real blog in a new window. Create new HTML/JavaScript gadgets and copy and paste your newly created codes in. Hold your breath and preview your blog. You should see your new beautifully created button atop a perfect little scroll box.

Enjoy your new button! If you’re like me, it took you forever.

For more help, visit Tips For New Bloggers. I’ve found that for some reason, I can’t always understand one set of instructions, but that two sets tend to fill in the blanks. If you have trouble, take a good long break and come back to it.

Related Posts:
Get An HTML Code For Your Button
How To Add A Button To Your Sidebar
How To Center A Button
Align The Buttons In Your Sidebar

Have you been helped by my tips? 
Consider grabbing my button or adding this blog to your bloglist!

Want to share this tip with your readers?
I would be honored for you to link back to this post!

ALL CONTENT © SNEAKY MOMMA BLOG DESIGN 
Please do not copy and paste my words and images into your own posts.
I work hard on my tips and and wish for everything to remain on this blog. 
Thank you for your cooperation! :)

Finding HTML Within Your Template

It is so hard to find exactly which line of code you are looking for within the Edit HTML portion of your template. I stumbled upon a little shortcut.



Click on 'Edit HTML'. Hit CTRL + F. Type in a little bit of what you are looking for in the box that pops up and press enter. In the example above, I searched for a:hover. The words that you entered will show up highlighted in blue in your layout. If that is not the portion of the template that you are looking for, click on 'next' in the find box until you see it.

For some reasons, this shortcut won't work with everything, especially widgets. I've had about a 75% success rate with it. Give it a go the next you work on your blog!

Downloading Your Template

The very first thing you want to do anytime you decide to play around with the HTML of your blog is to download a copy of your current template. Doing this will ensure that if you do, in fact, mess up your template by making a wrong move, that you will be able to restore most of it. Unfortunately, most gadgets (the things in your sidebars) will be gone, but your fonts and colors, borders, and such will still be there.

Here's how to download your template. Go to Customize-->Edit HTML. Click on 'Download Full Template'. Hit SAVE. Choose where you want to save it to and rename it if you wish. Check to see if the downloaded template actually made it to its destination. If it did, you're set and ready to go!

If you have a lot of gadgets in your sidebar that you would sorely miss if something happened to your template, you may consider backing them up as well. Remember, downloading your template will save a copy of the design of your blog, but will not save ALL of your widgets, sidebar items, or header.

Easy way to back up the items in your sidebar:
Go to your blog's layout page. Click on edit for each gadget. Copy and paste the codes into a Word or Notepad document. If it is a picture/image, make sure you have one saved on your computer.

Easy way to backup your header:
View your blog. Right click on your header. Click on "Save Image As". Save.

Downloading your template is fast and easy. Just do it already! :)

Related Posts:
Back Up Your Posts
Get A Practice Blog

Have you been helped by my tips? 
Consider grabbing my button or adding this blog to your bloglist!

Want to share this tip with your readers?
I would be honored for you to link back to this post!

ALL CONTENT © SNEAKY MOMMA BLOG DESIGN 
Please do not copy and paste my words and images into your own posts.
I work hard on my tips and and wish for everything to remain on this blog. 
Thank you for your cooperation! :)

Adding A Button to Your Sidebar

Easy Blog Tips!

You can add a button to your blog by following a few easy steps:

1. Find the button you want to add. Copy the HTML code in the box beneath the button.

2. Click on your blog's layout tab.

3. Click on 'add a gadget' in your sidebar.

4. Scroll down until you see 'HTML/JavaScript' and click on the + (add) sign.

5. Paste the button's code into the big box. Add a title if you wish.

6. Hit save.

7. You will see it at the top of your sidebar in the layout section. It will say 'HTML/JavaScript' if you didn't title it.

8. You can click and drag it to where ever you want to put it in your layout.

9. Preview your blog and then hit save!

Troubleshooting: Refresh your browser if you cannot see the button after you have followed all of the above steps. If after refreshing you still cannot see it, make sure that you copied and pasted the entire code into the HTML/JavaScript box. It's really easy to leave off the characters at the beginning and end.

Happy Blogging!

Related Posts:
Straighten Up The Buttons In Your Sidebar
How To Rearrange The Buttons/Gadgets In Your Sidebar
How To Center A Button

Have you been helped by my tips? 
Consider grabbing my button or adding this blog to your bloglist!

Want to share this tip with your readers?
I would be honored for you to link back to this post!

ALL CONTENT © SNEAKY MOMMA BLOG DESIGN 
Please do not copy and paste my words and images into your own posts.
I work hard on my tips and and wish for everything to remain on this blog. 
Thank you for your cooperation! :)

The Parts of a Blog

It's a good idea to familiarize yourself with the parts of a blog before attempting to edit the HTML of your template. I have color coded the different parts to make them easier to see.
Orange- This is the Body. It contains everything you see within the Blogger window, including the blue Blogger navigation bar at the top.
Blue- This is the Outer Wrapper. It contains all of the sections of your blog. Posts, sidebars, all of it fits in here.
Red- This is the Header Wrapper. It contains your header.
Green- This is the Main Wrapper. It is most often the biggest column. It contains your posts.
Yellow- This is a Sidebar Wrapper. If you have a three column template, you will have another one of these, most likely on the other side of the Main Wrapper.

Drop Down Archive Menu

Not too long ago, Blogger added a drop down menu as an option for displaying older posts. To modify the way you display your archive:

1. Go to layout and click to edit your blog archive page element.

2. Choose 'drop down menu' (or whatever you want) for your style.

3. Modify it to your liking and then save.

If you want to do it the hard, HTML way, then check out this tutorial.

Easy Peasy!

Related Posts:
Custom Drop Down Menus (Intermediate)
Drop Down Menu- Labels (Advanced)
How To Rearrange Sidebar Gadgets

Have you been helped by my tips? 
Consider grabbing my button or adding this blog to your bloglist!

Want to share this tip with your readers?
I would be honored for you to link back to this post!

ALL CONTENT © SNEAKY MOMMA BLOG DESIGN 
Please do not copy and paste my words and images into your own posts.
I work hard on my tips and and wish for everything to remain on this blog. 
Thank you for your cooperation! :)

Advanced: Three Column Layouts

*Update: This tip was written for blogs that have older templates (installed before June 2010). If you wish to try this tip on a newer template, please do so on a practice blog first. I have not tried this with a newer template, so I am unsure if it will work or not. :)

The following instructions will give your basic two column blog a third column. The following instructions will give you a three column layout that looks something like the one on Folksy Musins'. When I create a three column layout (like the one on my blog right now), I follow my tip below, then tweak the margins to customize the width of the columns and space in between columns.

**********************************************


I found a website that was walking me through a 3 column template and I kept getting to this one step that I couldn't complete! I need help!

As someone who is relatively new to working with HTML, I looked high and low for easy to follow instructions on how to convert my two column template into a three column one. Everything written on the web seemed way over my head. I ended up spending an entire evening looking at several different sites*, trying to make sense of it all. I finally figured it out by playing around with the directions on these sites and by sheer trial and error. I started out with a blank minima template (recommended) and worked from there.

Keep in mind that I do not have a degree in computer science, nor do I know a great deal about HTML code. I am simply sharing information with you that was helpful to me in redesigning my blog template. MAKE SURE THAT YOU SAVE A COPY OF YOUR CURRENT TEMPLATE BEFORE ATTEMPTING TO CHANGE ANY PART OF THE HTML CODE OF YOUR BLOG. BE ADVISED THAT IF YOU FOLLOW THESE INSTRUCTIONS, THAT MOST OF YOUR WIDGETS/PAGE ELEMENTS WILL BE LOST. YOU MUST BACKUP THESE PAGE ELEMENTS THE HARD WAY, BY COPYING AND PASTING THEM INTO NOTEPAD OR WORD. I would definitely back up anything that you would not be able to replace easily, should it be lost.

I HIGHLY recommend creating playing around on a practice blog before trying to change your template. A practice blog will enable you to experiment and make all sorts of changes without worrying about losing the stuff you already have. This is easy if you’re starting from scratch, which is what I did. To me, it’s safer to play around on a practice blog, get everything the way I want it for my real blog and copy and paste it into my real blog once it is all pretty and perfected.
-----------------------------------------------------------------
Here's how I altered my blank minima template to include three columns. This is certainly not the only way to do this. You can easily find other instructions by googling "create three column template blogger." This is simply my version of how to do it:

Click on ‘customize’. Click on the Layout tab. Click on EDIT HTML. Click on Download Full Template. Save the template. Of course, if you’re playing around on a practice blog, you can skip this step if you want to.

I have used different colors to help you see the code better. You will only see black letters when you look at your template.

Find the part below in the 'Edit Template' section. Keep in mind that if you have modified your blog by adding borders, etc., that it probably won't look exactly like this.

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
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 */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}


1. Change the width of your outer wrapper to 890px.

2. Under the main wrapper float line, add a left and right margin:
margin-left: 20px;
margin-right: 20px;

3. Copy the part in red and green and paste it directly below itself.

4. Rename your new “#sidebar-wrapper” to “#left-sidebar-wrapper”.

5. Change the left-sidebar wrapper's float to “left”.

After you make all of these changes, it should look like this:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 890px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
margin-left: 20px;
margin-right: 20px;

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

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}

#left-sidebar-wrapper {
width: 220px;
float: left;
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 */
}

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

Now you have to let your browser know that your new left sidebar is actually there. To do this, scroll down until you see:
<div id='main-wrapper'>
Copy this new code in red below:
<div id='left-sidebar-wrapper'>  <b:section class=
'sidebar' id='left-sidebar' preferred='yes'/> </div>

and paste it directly above
<div id='main-wrapper'>

After you do that, it should look like this:
<div id='left-sidebar-wrapper'>  <b:section class=
'sidebar' id='left-sidebar' preferred='yes'/> </div>
<div id='main-wrapper'>
-------------------------------------------------------------
PREVIEW your template. If you like what you see, save it. Be advised that there will be nothing in your left column until you actually go to Page Elements and put something there. Another reason why I HIGHLY recommend playing around on a practice blog. I would have a hard time trusting that the left column was there unless I actually saw something in it.

Hope this helps! Enjoy your new three column template!

Related Posts:
Adding Borders To Your Older Template
Practice Blogs
Blogger Help Videos

Help!

Having trouble implementing a blog tip? Making changes to your blog template can be incredibly time consuming and downright frustrating. Here's what you can do:

  1. Go back and read through the tip to see if you have missed something important.

  2. Listed at the bottom of most tutorials is a blog/website that you can go to for a different set of instructions. Read through their set of instructions and see if they help solve your problem. I've found that it usually takes two sets of instructions for me to figure out exactly what to do when I am learning something for the first time.

  3. Take a break away from your computer. Come back in half an hour and try again.

Luckily, my blog is not the only blog help site out there. Feel free to search my favorite blog design sites. I have a search bar in my sidebar that will direct you only to search results on these sites.

Be patient, be persistent, and above all else, have fun! You can do this!

Practice Blogs

I gotta be honest...when I first got started, I was very leery of playing around with the HTML of my blog. I was so intimidated. I was worried that I was going to mess something up and lose my current template. So, what I did was create a separate blog whose sole purpose is to try new things out on. I now have a safe place to play!

Here's how to create a practice (test) blog:
Go to your dashboard. Click on 'create a blog'. Personalize it to your liking. I would recommend selecting 'minima' as your template. Most of my blog tutorials are based on my experience working with a blank minima template. You'll need to select another template to begin with, but will be able to change to minima easily once the blog is created. Click here for help finding the minima template.

Wanna hide your test blog? Simply go to your dashboard, edit profile, click on choose blogs to display and uncheck the box next to your practice blog. If you really want to keep people from eyeing your practice sessions, go to settings-->permissions and change your 'blog reader' setting to "only blog authors ". You could also change your basic settings for Blogger not to list your practice blog on search engines or add it to blogger's listings. Within minutes, you will have a secret place to practice your new skills away from the eyes of your readers.

You can experiment with fonts and colors, play around with your margins and save to your heart's content, worry free! When you get everything looking the way you want it, open your real blog and SAVE A COPY OF YOUR CURRENT TEMPLATE. Replace the portion of the code you want changed with the code that you perfected in your practice blog. Then preview (this button is located at the bottom of the 'edit HTML' page). If something doesn't look right, 'clear edits' and go back to your practice blog to play some more, or look carefully at the top and bottom of the code that you copied and pasted and make sure you didn't leave anything out- like an } or something. BE CAREFUL. Do not hit "SAVE" on your real blog until you are certain that you like what you see in your preview.

Have fun!

Related Posts:
Download Your Template
Where Did The Old Templates Go?
Backup Your Posts (SUPER easy!)

Have you been helped by my tips?
Consider grabbing my button or adding this blog to your bloglist!

Want to share this tip with your readers?
I would be honored for you to link back to this post!

ALL CONTENT © SNEAKY MOMMA BLOG DESIGN
Please do not copy and paste my words and images into your own posts.
I work hard on my tips and and wish for everything to remain on this blog.
Thank you for your cooperation! :)

Contact

See an error or want to share a blog tip? Email me!

Win one of my giveaways? Congratulations! Email me and we'll get started soon.

Want to express your gratitude? How sweet! You could always send me an email, check out my sponsored links, put my button on your blog, mention in a post how you were helped by one of my blog tips, add me to your blogroll, etc. :)

Links

Free Blog Help Sites:

Mostly free do-it-yourself design sites:

Portfolio: 2 Column Wide

Click on an image to view the full blog:

Return to Main Portfolio

Portfolio: Three Column

Click on an image to view the full blog:
Return to Main Portfolio

Makeover Packages

Please click here to visit my new makeover page!

Portfolio: Etsy Banners / Logos

Coming Soon!

Odds and Ends

*I am only accepting orders from existing customers right now.
I hope to start taking new orders again in November.*

Don't need a full makeover? Want to order individual blog components? I can work with your existing design to achieve the look that you're going for. Order two or more odds and ends and take 10% off your order! This discount does not apply to design kits/images.

Click on most items below for an example or for more details.

*Wallpaper - $5 (included in makeover package)
Signature- $5
*Post separator- $5
Text only navigation bar (same font as post text)- $10
2 column wide conversion (included in makeover package)- $10
3 column conversion- $15 (2 sidebars - 1 on each side of post section or 2 same side)
*Button w/grab box- $15
*Sidebar titles w/cute font and/or images (set of 12-same style)- $15
*Framed/matted sidebar photos (set of four) - $15 ($4 each additional photo)
*Etsy banner and avatar- $20
*Navigation bar w/cute font and/or images- $20
*Header- $25 (included in makeover package)

*These items may require the purchase of a design kit/images. Commercial orders will incur a 25% fee and will be limited to istock images and design kits by Heather Ann Designs.

My layouts are based upon the basic Minima template. If you order a makeover or layout change, please note that it will look like the blogs in my portfolio.

Portfolio: 3 column layout
Portfolio: 2 column wide layout

Have a question? Click here to email me directly or here for my email address!

Make a Payment

Please do not make a payment until I have asked you to do so.

If you are purchasing an ad space, please review our email conversation before making a payment.

Before submitting a payment for blog services, please take time to look through my FAQ/Policy section. By submitting a payment, you are acknowledging that you have read and understand everything in this section. I update my policy every now and then, so please look over it each and every time you place an order.

You can make a payment by clicking on the Buy Now button below. Please put the name of your blog/business in the description box and your order total in the price box. If asked for a quantity, enter 1.


Thank you for your support! I am looking forward to working with you! :)


The Design Process

I am not accepting orders from new customers at this time. I apologize for any inconvenience that this may cause you. For a HUGE list of blog designers, please click here. For help in choosing a designer, check out this tip.

1. Take a look through my portfolio to get a feel for what I can do. Read through my FAQ/Policy section to make sure that I am the right designer for you.

2. Browse through my packages and odds and ends section to get an idea of what you would like to order. If you can't find what you're looking for, let me know exactly what your needs are and I will let you know if I can deliver.

3. Choose a design kit and/or istock image. If you have a specific look in mind that you're having trouble finding images for, let me know and I will help you. I can use istock images at the rate of $1.65/credit. Often a small sized image will be large enough for a header.

4. Send me a detailed list of everything that you would like to order. Include the url (web address) of the design kit/istock image that you would like to use.

5. I will send you a reply within 72 hours. In my response, I will include a quote as well as an estimated start date and deposit information.

6. Once I receive your deposit, I will send you a design worksheet to fill out. Your design worksheet and final payment will be due four days prior to your start date unless I tell you otherwise.

7. On the afternoon of your start date, you will be sent a link to a test blog where you can watch my progress. I often start with the header first. Once the header is approved, I will work on the rest of your blog.

8. The design process takes 1-4 days. The time frame needed to complete your order will depend upon several factors, including the complexity of the design, the size of the order, my personal schedule, how often you are able to reply to my emails, and how thorough and detailed you are in your feedback.

9. After you have approved the test blog, we will settle up regarding anything that you may have added to your order. I will load the makeover onto your real blog once I have been paid in full.

10. Once your makeover is installed, you will be given a one-time opportunity to make changes. We shouldn't have to make many changes, since you will approve every step of the makeover on the test blog.

That's it! Easy peasy!

Portfolio: Scrapbooked

Click on most blogs below to view the real thing!
To view more of my work, click here.