For those who know how to use Photoshop/Gimp heres the instructions on making a custom signature:
1. Make your signature with Gimp/photoshop in the form of an image.
2. Upload your image into a wed host (Photobucket , Flickr or whichever you use).
3. Click on download and copy this code: DOWNLOAD
4. Open your Dashboard/ Settings/ Formatting/ Post Template. Put the code in the Post Template box
5. Once your code is in the Post Template Box grab your signature URL from your web host and copy it into the specified spot in your code (where it says "SIGNATURE URL")
6. Now scroll to the bottom of the page and click on "save settings"
Now you should have your own custom signature!
The signature will only show up on new posts, it will not show up on your past posts.
For those who want a basic signature without the work- go to My Live Signature and follow their instructions, it is very simple to use.
Wednesday, January 7, 2009
Sunday, November 9, 2008
Horizontal Link List
To add a link list to your blog it is quite simple- here are the steps:
1. Go to your blogger dashboard then click on "layout" which will bring you to your page elements
2. Once in your page elements click on "add a gadget" directly beneath your navbar (above your header)
3. Once in your gadgets select the "Javascript/HTML" option.
4. Now press download (posted below) and copy the code into your Javascript/HTML Gadget
5. Once the code is in fill in the blanks as specified
NOTE: These instructions only work with my "Menu bar compatible layouts" all menu compatible blogs are listed at the top of the post. If it says nothing about "menu Bar compatibility" then it does not work with those layouts.
1. Go to your blogger dashboard then click on "layout" which will bring you to your page elements
2. Once in your page elements click on "add a gadget" directly beneath your navbar (above your header)
3. Once in your gadgets select the "Javascript/HTML" option.
4. Now press download (posted below) and copy the code into your Javascript/HTML Gadget
5. Once the code is in fill in the blanks as specified
NOTE: These instructions only work with my "Menu bar compatible layouts" all menu compatible blogs are listed at the top of the post. If it says nothing about "menu Bar compatibility" then it does not work with those layouts.
Monday, September 8, 2008
How To Make Blog Buttons You Can Share
Want to be able to share your blog easily with fellow bloggers? Here is how you make a blogger button you can share!
To Download Hit the download link below and fill in the specified spaces (like blog URL and Image URL). Then Go to your page elements page and upload it under HTML/JAVASCRIPT. It's that simple!Tuesday, June 17, 2008
How To Add your own Text/photo To Your Header
To add your own text/photos embedded into your header- heres how you do it. Go to your HTML code and look for the following code: (located Under header)
#header {
height: 514px;
width: 930px;
background-image: url(http://farm3.static.flickr.com/2286/2248013622_00ed1be0e0_o.jpg);
color:$pagetitlecolor;
}
The address highlighted in red is your header image URL- copy it into your browser and your header will appear. Then right click on the image and "save image as" which will copy it on your computer. They you can edit it adding any text/photo you like using photoshop. Once you are finished editing it upload it again with Flickr or Photobucket and copy the url back in from the place you took it.
To erase the default words on your header- go to this code: (again located under header)
#header h1 {
font: $pagetitlefont;
color: #800000;
font-size: 500%;
text-decoration: none;
font-weight: bold;
text-align: left;
margin: 0px 0px 0px 50px;
max-width: 800px;
}
The code that is highlighted in red you just change the percentage to 0%. That will make any text you have dissapear so that only the new text you added shows. So there you have it how to add your own text/photos to your header. Happy blogging!!
#header {
height: 514px;
width: 930px;
background-image: url(http://farm3.static.flickr.com/2286/2248013622_00ed1be0e0_o.jpg);
color:$pagetitlecolor;
}
To erase the default words on your header- go to this code: (again located under header)
font: $pagetitlefont;
color: #800000;
font-size: 500%;
text-decoration: none;
font-weight: bold;
text-align: left;
margin: 0px 0px 0px 50px;
max-width: 800px;
}
The code that is highlighted in red you just change the percentage to 0%. That will make any text you have dissapear so that only the new text you added shows. So there you have it how to add your own text/photos to your header. Happy blogging!!
Thursday, June 12, 2008
Video "how to change your template"
So I took some time and made a video about how to change your template (including how to save page elements). I'm sorry if the video moves rather quickly- just pause it when you need to.
I hope this gives everyone an idea of how simple it is to change your template- for those who don't already know.
In this video I save one of my page elements into notepad just to give you an idea. you can save your links, text, and HTML this way... which will save you alot of time and trouble.
Wednesday, June 11, 2008
How Page Elements Work
When blogger introduced the new blogger they also introduced page elements. Page elements allow you to customize your blog more easily without having to know how to work with HTML coding. There are many page elements to choose from- here is a list of the ones they currently offer. They all have a description of what they all do.

To add a page element click on the blue link that says "add a page element" it's really that simple. Below is a picture of the possible places to add page elements (circled in red)- simply by dragging and dropping them.


To add a page element click on the blue link that says "add a page element" it's really that simple. Below is a picture of the possible places to add page elements (circled in red)- simply by dragging and dropping them.

Saving Page Elements
Sometimes page elements need to be saved so that when you change your layout for example, you don't lose them. Page elements are the only thing that gets erased when your layout is changed. To save them I use notepad (you can use any word processing program) I copy and paste my code, text, or links into notepad before changing my layout. Once my layout is changed I go back to my page elements page and copy everything back. Below is an example of the items you want to save in notepad.
Changing Margin for your header & header description
Want to change your header & header description to a different location on your header? Heres how you do it. Take a look at the code below- you will notice two sets of numbers circled in red. The top one is to change your header and the one below that is to change your header description.
To change the location you need to change the numbers- heres how it works:
There are 4 sets of numbers for the the header and 3 sets for header description each (this again may vary from blog to blog).
Each number has a different function- the function varies between the blog you choose. The best way to learn is to play around with those numbers- to do it without messing up your blog change a number and hit preview and from that you can see what it changes. Keep doing it till you get the desired look.
This can be done for either the header or the header description. Not every template will have the heading perfectly centered because different amount of text looks different on every blog- thats why it's up to you to play with the margins to make it look how you want it to.
To change the location you need to change the numbers- heres how it works:
There are 4 sets of numbers for the the header and 3 sets for header description each (this again may vary from blog to blog).
Each number has a different function- the function varies between the blog you choose. The best way to learn is to play around with those numbers- to do it without messing up your blog change a number and hit preview and from that you can see what it changes. Keep doing it till you get the desired look.
This can be done for either the header or the header description. Not every template will have the heading perfectly centered because different amount of text looks different on every blog- thats why it's up to you to play with the margins to make it look how you want it to.
Friday, June 6, 2008
Removing & Replacing your Navbar
- Log in to blogger
- On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog's HTML.
- paste the CSS definition in the top of the template code: As shown below (as Outlined in Red)
-Remove the code to show it again.
- On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog's HTML.
- paste the CSS definition in the top of the template code: As shown below (as Outlined in Red)
-Remove the code to show it again.
How To Change Your Template
It's actually quite simple to change your template in blogger. Here's how to do it step by step!
1) Go to your Blogger Account dashboard and click on Layout it will bring you to your page elements page
2) Now copy/paste all your page elements in notepad (or any work processing program). Your page elements are your Pictures, widgets, links, HTML, & Text- which are located in your sidebar. You will need to go into each page element individually to save them, this is done in case your page elements do not make it through the transition of the layout change (which often happens).
3) Now go to your desired layout and click on the download link below the picture. This will bring you to the 4Shared page, where you will need to click on download now.
4) Once the text file is downloaded onto your computer- you are ready for the next step.
5) Now go to your Blogger Account dashboard and click on Layout
6) Then click the link at the top of your page named Edit HTML
7) Once at the Edit HTML page, you will need to upload the text file (that you just downloaded) you can do this under the title labelled backup/restore template. You do this by clicking browse, and selecting the text file which is your new layout. Once the file is selected, click on upload.
8) now your new template is installed, go to view blog and you will have a new layout!
9) Now you can re-add your page elements (copy and paste from notepad)
Additional info: All layouts on this site are for the new Blogger (XML) if you have the classic blogger Template then you will need to revert to the new blogger- in order to use these templates.
1) Go to your Blogger Account dashboard and click on Layout it will bring you to your page elements page
2) Now copy/paste all your page elements in notepad (or any work processing program). Your page elements are your Pictures, widgets, links, HTML, & Text- which are located in your sidebar. You will need to go into each page element individually to save them, this is done in case your page elements do not make it through the transition of the layout change (which often happens).
3) Now go to your desired layout and click on the download link below the picture. This will bring you to the 4Shared page, where you will need to click on download now.
4) Once the text file is downloaded onto your computer- you are ready for the next step.
5) Now go to your Blogger Account dashboard and click on Layout
6) Then click the link at the top of your page named Edit HTML
7) Once at the Edit HTML page, you will need to upload the text file (that you just downloaded) you can do this under the title labelled backup/restore template. You do this by clicking browse, and selecting the text file which is your new layout. Once the file is selected, click on upload.
8) now your new template is installed, go to view blog and you will have a new layout!
9) Now you can re-add your page elements (copy and paste from notepad)
Additional info: All layouts on this site are for the new Blogger (XML) if you have the classic blogger Template then you will need to revert to the new blogger- in order to use these templates.
Labels:
blog,
blog design,
blog tutorial,
blogger,
blogger layouts,
blogger skins,
blogger templates,
blogger themes,
custom,
designs,
layout,
layouts,
skin,
skins,
template,
templates,
theme,
themes
Subscribe to:
Posts (Atom)

