Tuesday, July 27, 2010
Thursday, July 22, 2010
Grab Buttons
See that cute grab button down there, on the right side in the sidebar? It's the easiest way to show your support for our blog! Go ahead and snag it! In this tutorial, I'll teach you how to post your own grab button (so that others may grab it to display on their blogs) and I'll also teach you how to display one on your own blog.
Do you want an easy way to spread the word about your own blog? Well this is the way to do it!
First, you'll need to choose the image you want to use for your button. The average sidebar is about 200 pixels wide, so be sure that it's not wider than that, otherwise it won't fit. Then, you'll need to upload that button to the image hosting site of your choice (Photobucket works awesome for this).
In a different window or tab, log into your Blogger account. From your Dashboard, click Design. You should then see the Add and Arrange Page Elements page. You'll see that there are several places where you can Add a Gadget. Choose where you want to add your grab button and click on that link.
You'll want to select the HTML/JavaScript gadget. Click on the plus sign next to it.
In the Content box that appears, copy and paste the following code. Don't forget to give your gadget a title!
<img src="http://YOURBUTTONLOCATION.jpg" /> <br /> <textarea style="text-align:center" rows="4" cols="22"><a border="0" href="http://YOURBLOGADDRESS.com" target="_blank"><img src=http://YOURBUTTONLOCATION.jpg></a></textarea>
Now, find the image, wherever you decided to upload it. Take the direct link of the image and replace where it says "http://YOURBUTTONLOCATION.jpg" with the link. Be sure to keep the quotation marks though -- you need them. Then, replace where it says "http://YOURBLOGADDRESS.com" with...you guessed it -- your blog address :) Then make sure you click Save, and you're done!
Is there a blog that you love and you want to show it? Well here's how to add that button to your sidebar!
Adding someone else's button is simpler than making your own available to them. All you need to do is add another HTML/JavaScript gadget. Make sure you give a title to the gadget. In order to post the button on your own blog, there needs to be a code box below it on the blog you got it from, just like ours. As long as you have that code, you can get the next part done. Copy the code beneath the button you want to display, and paste it in the Content box that pops up when you click on the widget. If you want to display more than one, separate them by hitting the enter key, like I did (if that doesn't work, you can add <br> -- it means line break and will give you the space you want).
If you want to center your buttons in the sidebar (which I'd definitely recommend -- it makes them look nice and neat), simply add <center> before the code and </center> at the end of the code. You need to add the center codes to each button individually.
Don't forget to hit Save!
That's it! You've successfully dealt with grab buttons!
Getting Your Own Grab Button!
Do you want an easy way to spread the word about your own blog? Well this is the way to do it!
First, you'll need to choose the image you want to use for your button. The average sidebar is about 200 pixels wide, so be sure that it's not wider than that, otherwise it won't fit. Then, you'll need to upload that button to the image hosting site of your choice (Photobucket works awesome for this).
In a different window or tab, log into your Blogger account. From your Dashboard, click Design. You should then see the Add and Arrange Page Elements page. You'll see that there are several places where you can Add a Gadget. Choose where you want to add your grab button and click on that link.
You'll want to select the HTML/JavaScript gadget. Click on the plus sign next to it.
In the Content box that appears, copy and paste the following code. Don't forget to give your gadget a title!
<img src="http://YOURBUTTONLOCATION.jpg" /> <br /> <textarea style="text-align:center" rows="4" cols="22"><a border="0" href="http://YOURBLOGADDRESS.com" target="_blank"><img src=http://YOURBUTTONLOCATION.jpg></a></textarea>
Now, find the image, wherever you decided to upload it. Take the direct link of the image and replace where it says "http://YOURBUTTONLOCATION.jpg" with the link. Be sure to keep the quotation marks though -- you need them. Then, replace where it says "http://YOURBLOGADDRESS.com" with...you guessed it -- your blog address :) Then make sure you click Save, and you're done!
Adding a Grab Button to Your Sidebar
Is there a blog that you love and you want to show it? Well here's how to add that button to your sidebar!
Adding someone else's button is simpler than making your own available to them. All you need to do is add another HTML/JavaScript gadget. Make sure you give a title to the gadget. In order to post the button on your own blog, there needs to be a code box below it on the blog you got it from, just like ours. As long as you have that code, you can get the next part done. Copy the code beneath the button you want to display, and paste it in the Content box that pops up when you click on the widget. If you want to display more than one, separate them by hitting the enter key, like I did (if that doesn't work, you can add <br> -- it means line break and will give you the space you want).
If you want to center your buttons in the sidebar (which I'd definitely recommend -- it makes them look nice and neat), simply add <center> before the code and </center> at the end of the code. You need to add the center codes to each button individually.
Don't forget to hit Save!
That's it! You've successfully dealt with grab buttons!
Wednesday, July 21, 2010
Adding a Header or a Footer
Adding a Header
Did you snag one of our freebie headers? Well if you did, you need to know how to use it, right?
It's pretty simple to do.
From your Dashboard, click Design. On the Add and Arrange Page Elements page, click the Edit button inside the header gadget.
In the window that pops up, find the image you want to use as your header. Make sure it's sized appropriately before you add it.
Blogger will preview your image. If you want to change the placement of your blog title and description (or remove it completely), you can do that here as well. Once you are satisfied, click Save at the bottom of the pop up, and you're done! Depending on which template you're using, you may need to resize your header.
Adding a Footer
Adding a footer is a little easier. The most important thing is that you make sure your footer is the correct width (it needs to be smaller than or the same width as your blog -- you found that number during our Adding Post Dividers tutorial). When your footer is the appropriate size, you're ready for the next step.
From your Dashboard, click Design. On the Add and Arrange Page Elements page, scroll down to the bottom. You'll see Add a Gadget.
When you click that, a window will pop-up. Scroll down until you see the Picture widget. Click the plus sign next to it to add it (it's to the right of the widget title -- sorry that my circle covered it up).
On the next screen, you will configure the image. You can give it a title and a caption, but that's not necessary. You can also give the image a URL to link to, but again that's not required. The image for your footer can come from either your computer or the internet. If you use an image from your computer, Blogger will not resize it for you, but if it comes from the internet, Blogger will resize it appropriately (you'll notice the Shrink to Fit box will disappear if you choose a file from your computer).
Once you have your image uploaded, click Save at the bottom, and you've got a footer!
Adding Pages to Your Blog -- Static Pages
See the toolbar right below our header, with all of the links to the most important pages on this blog? Do you want one? Well a while back, to get one of these you would've needed to tinker with your HTML..not any more. You can add one of these toolbars quick and simple. Here's how to do it.
From your Dashboard, click New Post. Then in the Posting toolbar, click Edit Pages.
On the Edit Pages page, select New Page. You can create up to 10 pages.
It will bring you to a page that looks like this.
Fill in the title, and add whatever you want your page to say in the text box. Once you're done, click Publish Page.
Now, you'll get to choose where your toolbar appears on your blog. You can either choose to put it in your sidebar or on the top under your header, as tabs. Once you've selected the option that you want, click Save and Publish.
And that's it! You can create any sort of page you want. Don't have any topic ideas? Let me help you out!
Try pages like this -- whether they're for your personal blog or a company blog:
-About
-Contact
-Links or Favorites
-Projects
-Tutorials
-Shop/Store
-Disclaimer
-Advertise
-Giveaways
-Frequently Asked Questions
-Freebies
You can switch the order of the pages at any time. Just follow these simple steps.
From your Dashboard, click Design. On the Add and Arrange Elements page, click Edit in the Pages gadget.
A pop-up should appear. When it does, you can change some things, including which pages to show and what order they appear in. If you make any changes, make sure you hit Save at the bottom!
When all is said and done, your blog should look like this (if you chose to put the pages under your header, like us). Pretty cool, huh?
From your Dashboard, click New Post. Then in the Posting toolbar, click Edit Pages.
On the Edit Pages page, select New Page. You can create up to 10 pages.
It will bring you to a page that looks like this.
Fill in the title, and add whatever you want your page to say in the text box. Once you're done, click Publish Page.
Now, you'll get to choose where your toolbar appears on your blog. You can either choose to put it in your sidebar or on the top under your header, as tabs. Once you've selected the option that you want, click Save and Publish.
And that's it! You can create any sort of page you want. Don't have any topic ideas? Let me help you out!
Try pages like this -- whether they're for your personal blog or a company blog:
-About
-Contact
-Links or Favorites
-Projects
-Tutorials
-Shop/Store
-Disclaimer
-Advertise
-Giveaways
-Frequently Asked Questions
-Freebies
You can switch the order of the pages at any time. Just follow these simple steps.
From your Dashboard, click Design. On the Add and Arrange Elements page, click Edit in the Pages gadget.
A pop-up should appear. When it does, you can change some things, including which pages to show and what order they appear in. If you make any changes, make sure you hit Save at the bottom!
When all is said and done, your blog should look like this (if you chose to put the pages under your header, like us). Pretty cool, huh?
Adjusting the Header Borders
See those two thin lines around our header? That's the header border, and it can be edited to look however you like. It can also be removed. Here's how to do it.
If you want to keep the border but want to edit it, follow these instructions.
From your dashboard, click Design. In the Edit HTML section, find this part of the code in the "Edit Template" box.
**The number will not be bold in your code -- that's simply to show that the 18 is a variable. The number that appears there will depend on what template you're using, so don't panic if it's not 18, it's still right.**
If your border is too big, you'll need to replace the 18 with a smaller number. I'd recommend subtracting 4-5 pixels and then previewing it to see how it looks. That way, if you need to make changes, you can do so very easily without having to go back time after time.
If your border is too small (meaning it cuts off your header), you'll need to replace the 18 with a larger number. Again, increase the number by 4-5 pixels and preview, changing it if needed until you're happy with it.
To remove the border completely, you'll need to find this section of code in your template.
All you need to do to remove the border is change the bold numbers to zero. Remember to click Save Template!
Adjusting the Border
If you want to keep the border but want to edit it, follow these instructions.
From your dashboard, click Design. In the Edit HTML section, find this part of the code in the "Edit Template" box.
#header {
margin: 18px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
**The number will not be bold in your code -- that's simply to show that the 18 is a variable. The number that appears there will depend on what template you're using, so don't panic if it's not 18, it's still right.**
If your border is too big, you'll need to replace the 18 with a smaller number. I'd recommend subtracting 4-5 pixels and then previewing it to see how it looks. That way, if you need to make changes, you can do so very easily without having to go back time after time.
If your border is too small (meaning it cuts off your header), you'll need to replace the 18 with a larger number. Again, increase the number by 4-5 pixels and preview, changing it if needed until you're happy with it.
Removing the Border
To remove the border completely, you'll need to find this section of code in your template.
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
All you need to do to remove the border is change the bold numbers to zero. Remember to click Save Template!
Editing Your Navigation Bar
The navigation bar up at the top of your page is really handy, but sometimes it gets annoying, and it doesn't always match. Even though you can change the color, sometimes it still doesn't look right with the rest of your blog.
This post has two tutorials: how to change the color of your nav bar and how to get rid of it all together.
If you don't mind the navigation bar but it doesn't match your blog (or you just want a different look), here's how to do it.
From your dashboard, select the Design link. At the very top of the Add and Arrange Elements page, you should see a blue bar that says "Navbar". Click on the Edit button. A new window will pop up with all of your color options. Make your selection and then be sure to hit Save. That's it!
Do you want to get rid of that pesky navbar for good? Here's how.
From your dashboard, click on Design. Click on Edit HTML. You should now see a page that contains the code for your blog template. In the Edit Template box, find this part of the code. It will differ, depending on what theme you have, but nonetheless it should look something like this.
Right below that part of the code, add this.
Just so we're on the right track, here's what the code should look like now.
If your code looks like that, click the Save Template button, right below the box you were just working in. View your blog, and ta-da! The navbar is now gone.
If you ever want to re-add the navbar, it's simple -- just delete the code you added.
This post has two tutorials: how to change the color of your nav bar and how to get rid of it all together.
Changing the color of your Navigation Bar
If you don't mind the navigation bar but it doesn't match your blog (or you just want a different look), here's how to do it.
From your dashboard, select the Design link. At the very top of the Add and Arrange Elements page, you should see a blue bar that says "Navbar". Click on the Edit button. A new window will pop up with all of your color options. Make your selection and then be sure to hit Save. That's it!
Getting Rid of your Navigation Bar
Do you want to get rid of that pesky navbar for good? Here's how.
From your dashboard, click on Design. Click on Edit HTML. You should now see a page that contains the code for your blog template. In the Edit Template box, find this part of the code. It will differ, depending on what theme you have, but nonetheless it should look something like this.
-----------------------------------------------
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
Right below that part of the code, add this.
#navbar-iframe {
display: none !important;
}
Just so we're on the right track, here's what the code should look like now.
-----------------------------------------------
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}
/* Variable definitions
====================
If your code looks like that, click the Save Template button, right below the box you were just working in. View your blog, and ta-da! The navbar is now gone.
If you ever want to re-add the navbar, it's simple -- just delete the code you added.
Tuesday, July 20, 2010
Adding Post Dividers.
This is the first of many tutorials I'll be putting up here at lalala designs. Let me know if you have any questions! Click on any of the images to enlarge them.
First, you'll need a divider. You can always find 5 free ones here, on our Freebies page. Otherwise, you can design one yourself, or you can custom order one here.
Once you have your divider, upload it to the image storing site of your choice. I prefer to use Photobucket - it's really easy to use, resizing things is a breeze and it's completely free. You'll need to resize that divider before you can use it. What size should your divider be? Good question. You'll have to take a look in your template code to find out. Here's how to do that.
-From your dashboard, click "Design", then "Edit HTML". In the "Edit Template" box, find the piece of code that looks like this.
Once you've taken note of that number, it's time to resize the divider on Photobucket (I'll be abbreviating it 'PB' from this point on). Upload the image to PB, then click on the "Edit" button, seen here.
Now, click on the "Resize" button, shown here in the red box.
Now, change the width to the number you found earlier in your HTML code. Make sure that the box next to "Keep Proportions" is checked. Then click the "Apply" button. Once you've completed that, click the "Replace Original" button at the bottom and you're done!
Once the divider is ready to be used, you'll need to change part of your HTML. Scary? Maybe. Difficult? Nope. It's actually really simple.
Scroll through your HTML, just like you did when you were finding the width of your blog. Look for this piece of it. You're going to be replacing it with a different piece of code.
Replace the code in the red box with this code (you can copy and paste it).
Be sure to replace the DIVIDER ADDRESS with the direct link of your image from PB. Then click "Save Template", and you're done! You can adjust the padding (the amount of space below the divider) by changing the 5.5 in the last line of the code you added.
First, you'll need a divider. You can always find 5 free ones here, on our Freebies page. Otherwise, you can design one yourself, or you can custom order one here.
Once you have your divider, upload it to the image storing site of your choice. I prefer to use Photobucket - it's really easy to use, resizing things is a breeze and it's completely free. You'll need to resize that divider before you can use it. What size should your divider be? Good question. You'll have to take a look in your template code to find out. Here's how to do that.
-From your dashboard, click "Design", then "Edit HTML". In the "Edit Template" box, find the piece of code that looks like this.
Once you've taken note of that number, it's time to resize the divider on Photobucket (I'll be abbreviating it 'PB' from this point on). Upload the image to PB, then click on the "Edit" button, seen here.
Now, click on the "Resize" button, shown here in the red box.
Now, change the width to the number you found earlier in your HTML code. Make sure that the box next to "Keep Proportions" is checked. Then click the "Apply" button. Once you've completed that, click the "Replace Original" button at the bottom and you're done!
Once the divider is ready to be used, you'll need to change part of your HTML. Scary? Maybe. Difficult? Nope. It's actually really simple.
Scroll through your HTML, just like you did when you were finding the width of your blog. Look for this piece of it. You're going to be replacing it with a different piece of code.
Replace the code in the red box with this code (you can copy and paste it).
.post {
background: url(http://DIVIDERADDRESS.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:5.5em;
}
Be sure to replace the DIVIDER ADDRESS with the direct link of your image from PB. Then click "Save Template", and you're done! You can adjust the padding (the amount of space below the divider) by changing the 5.5 in the last line of the code you added.
Saturday, July 17, 2010
Welcome!
Welcome to lalala designs!
Here, you'll find some freebie Blogger layouts that I've created. I also can create custom layouts, headers, icons, blinkies, and tons more! I'll be updating this post later with prices and contact information.
Please be patient with me -- this site is brand new and under construction!
Subscribe to:
Posts (Atom)
