FAQ: How to have a Collapsable Sidebar

Many fellow bloggers have asked this question and I have decided to write a post on how I did it.  I found it from a website you helped me, so I have found us Bloggers work together.  Here we go...

This is what you are creating:

**Everytime you click a title such as "donate" the menu will drop down and "contact me" will close**

First... Backup your blogger template.  This will help in case of emergency.  Sometimes I copy and paste the code into Word and leave it there.  Whatever you prefer.

Next... go to your HTML code and look for the following code: ]]></b:skin> (hit CTRL+F)

And paste the following code beneath it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'> </script>

<script src='http://robinblogs.webs.com/javascript.js' type='text/javascript'> </script>

Now... Paste this code just above ]]></b:skin>

]#wrapper {

  width: 200px;

  margin-left: auto;

  margin-right: auto;

   }

.accordionButton { 

  width: 200px;

  height: 30px;

  float: left;

  background: #4d9081;

  border-bottom: 8px solid #FFFFFF;

  cursor: pointer;

  color: #ffffff;

  font-size:14px;

  text-align: center;

  text-transform:lowercase;

  letter-spacing:4px;

  }

.accordionContent { 

  width: 210px;

  float: left;

  display: none;

  font-size:14px;

  letter-spacing: 1px;

  border-bottom:8px solid #FFFFFF;

 }

It should have a structure like this:
Code 1
]]></b:skin>
Code 2

( #4d9081 Is the background color of the title.  You can go here to find the color you choose)

SAVE!

You will now need to Add an HTML/Javascript gadget in your layout.

Copy and paste this code in:

<center><div id="wrapper">

<div class="accordionButton">TITLE 1</div>

<div class="accordionContent"><center>TEXT

</a></center></div>

<center><div id="wrapper">

<div class="accordionButton">TITLE 2</div>

<div class="accordionContent"><center>TEXT

</a></center></div>

 

<center><div id="wrapper">

<div class="accordionButton">TITLE 3</div>

<div class="accordionContent"><center>TEXT

</a></center></div>

 

Fill in your each title and text.  In order to add another item continue pasting this code in at the end:

 

<center><div id="wrapper">

<div class="accordionButton">TITLE 3</div>

<div class="accordionContent"><center>TEXT

</a></center></div>

 SAVE!

Did it work?  If not please email me and I will be happy to help you!

Thanks

Taylor

FAQ Friday: How do I have a "Read More" on my post?

This is a new thing I have found.  I was way excited to do this.  It doesn't work well on a design blog but this is what you will be creating.... (click the "read more")

FAQ Friday: How do I apply BYUTATORTOT's Headers on my blog?

This week someone wanted to know how to apply headers.  Just some quick steps will show you! 

1. Find the header you want.
2. Right click and save picture as... (PNG is going to be the best format, in my opinion, for you to use)
3. Log into blogger
4. Click Design
5. Find your header "element" and click edit
6. Click browse and find the image you want to use as your header.
7. If you choose click "Instead of Title or Description" (This option will put your header on but now have your original title and description).
8. Click Save

Sill didn't work? Please email me at byutatortot@gmail.com for any more questions!IF you have a question you want me to answer click here!

FAQ Friday: How do you apply your blog templates?

I'm sorry this has come on a Saturday.  Yesterday I was busy working on a new Halloween blog template (coming later on today) and lost time.  I was not able to write the FAQ Friday.  So today's FAQ Friday is... "How do you apply your blog templates?"

Here is just some quick easy steps to follow!

1. There will be given links for the 2 Column and sometimes 3 Column code.  Click there!
2. In a new web page or tab log into Blogger  
3. Click on "Layout"
4. Click "Edit HTML"
5. Erase of all that code and put the new code that you have copied before.
6. Click Save!
7. You are done!

 Why isn't mine working?

Make sure at the bottom of the code that you copied that you didn't also copy this, "Edit this page (if you have permission) Google Docs -- Web word processing, presentations and spreadsheets. "

  (Do not copy below that line)

Sill didn't work? Please email me at byutatortot@gmail.com for any more questions!IF you have a question you want me to answer click here!

FAQ Friday: Your blog templates look like blog backgrounds...

I get a lot of people who say that my blog templates look more like backgrounds.  This is because when I originally started making them I called them templates and I thought that would be fine.  But some people are confused.  So as I make my new blog design you will find that I will have blog backgrounds for my original backgrounds and blog templates from my blogger themes. 
<blockquote>Need more help? Email me at byutatortot@gmail.com. Want to look at the other FAQ's? Click Here! Do you have a question you want me to answer? Click Here! </blockquote>

FAQ Friday: How can I change up my Navigation Bar?

Your navigation bar is up at that top and says things like: Follow, Share, Report Abuse, etc.  These can be changed up many ways.  Here are a few choices you have:

...Changing the Color of Your Navigation Bar...

Just by going to your dashboard--click layout and then there is a blue bar above your layout.  It says Navbar and then to the right it says Edit.  Click Edit.  Then mark which one you would like.  Your options are: blue, tan, black, silver, transparent light, and transparent dark.  And Save!

...Removing Your Navigation Bar...

Got to your dashboard--layout--edit HTML.  Then hit CTRL+F and search for this: /* Variable Definitions.  Next, past this right before that:   .navbar {display:none;}.  Preview and Save!

...Making a DropDown Navigation Bar...

Go to your dashboard--layout--add gadget.  Then paste this code into an HTML/Javascript gadget:

<!-- DROPDOWN NAVBAR --><br /> <!-- stylesheet for FF2, Op9, IE7 (strict mode) --><br /> <style type="text/css"> #navbar { display:inline; width:100%; position:absolute; background-color:transparent; top:-30px; left:0px; height:60px; z-index:999999; } #navbar:hover{ top:0px; height:30px; } </style><br /> <!-- stylesheet for IE6 and lower --><br /> <!-- (not supporting element:hover) --><br /> <!-- first, unhide the navbar through css --><br /> <!-- second, hide the navbar and mimic --><br /> <!-- the effect with javascript, if available --><br /> <!--[if lt IE 7]><br /> <style type="text/css"> #navbar { height:30px; top:0px; } </style><br /> <script type="text/javascript"> var navbar = document.getElementById('navbar'); if(navbar){ navbar.onmouseover = function(){ navbar.style.top = '0px'; navbar.style.height = '30px'; } navbar.onmouseout = function(){ navbar.style.top = '-30px'; navbar.style.height = '60px'; } if (navbar.captureEvents){ navbar.captureEvents(Event.MOUSEOVER); navbar.captureEvents(Event.MOUSEOUT); } navbar.onmouseout(); } </script><br /> <![endif]--><br /> <!-- end dropdown navbar --><br /> <br /> <br />

Preview and save!

Need more help? Email me at byutatortot@gmail.com. Want to look at the other FAQ's? Click Here! Do you have a question you want me to answer? Click Here!

FAQ Friday: How to add label widgets?

I am going to start off by saying that I am sorry I haven't been on much.  Life as been so crazy these past couple of weeks I rarely see myself on the computer.  But I promise starting now (with this FAQ Friday) I will not leave you hanging!

So this weeks question came from an entree. 

How to add label widgets?

Answer:  To begin with make an image.  Using photoshop, etc.  You can find a free download for a program to do this here!  The size of the image can be whatever you choose.  Now once you have that image you have a coupld of options to apply it to your blog.  I go to Layout--Add Gadget--Add Image and upload the image there.  You can also go to Photobucket, etc. and upload it there and grab the HTML Code of your image.  After that go to Layout--Add Gadget--HTML/Javascript and paste the HTML code from your image. 

Need more help? Email me at byutatortot@gmail.com. Want to look at the other FAQ's? Click Here! Do you have a question you want me to answer? Click Here!

FAQ Friday: What are blogger themes?

I get asked quite a bit "What are your blogger themes?"  Often times other blogs call these Blogger Templates but since I have my templates I'm going to call mine blogger themes.
Themes are like Minima and all of those you are offered from blogger.  With mine you take the whole code and paste it in into your HTML.  In my blogger themes they can very what you get from them.  You can have a header to a widget sidebar label.  It just depends what I decide to do with the theme. 
Sometimes for custom designs I give customers the option to receive a blogger theme.  This just makes it easier in some ways to add to your blog. 
In the code I give you to put in your HTML for your blog it includes the background, header, sidebar divider, sidebar image, post image, post divider, and navbar.  But if you want sidebar widget labels, signature, grab button, ect. those are different codes and images to add later on.  Why can't they be in the one big HTML code?  I am still trying to figure that out to get it to work to make life easy!

FAQ Friday: Why can't I put an HTML code in my Posts without it putting the actual code?

This weeks FAQ Friday question is: Why can't I put an HTML code in my Posts without it putting the actual code? 

I ran into this same problem.  For example: when I have a template and I wanted to put the code for you guys to copy what would it do?  Put the template over my original template.  That would make me very unhappy.  But recently I have discovered a way to make it not happen.  So if you are making a post and you go down towards the bottom and in blue over the tan box it says, "Post Options".  Click that!  An extended image should come out it gray.  Now find the heading, "Compose Settings".  Under you should see "Interpret typed HTML" and "Show HTML literally".  Make sure that "Show HTML literally" is marked.  Now paste your code and Publish!  I hope this worked for you!  If not some possible solutions can be:

1. Use Blogger Draft
2. Make sure you are in the actual blogger posting not windows writer, etc. 
3. Make sure you scroll down a bit.

Need more help? Email me at byutatortot@gmail.com. Want to look at the other FAQ's? Click Here! Do you have a question you want me to answer? Click Here!

FAQ Friday: How can I have those squared around some words in my post?

This week's FAQ Friday is, "How can I have those squared around some words in my post?"

A LITTLE ON BLOCKQUOTES
Blog quotes are those frames around some of your text.  For example on some of my posts I have a pink border around certain text that I have chosen.  This is a very simple task but first you need to change a part in your HTML code.

CHANGING YOUR HTML CODE
First make sure you have your whole code just incase something gets lost.  So back it up!
Next find a code that should look something like this:

blockquote {

margin:1em 20px;
}
(Press CTRL+F and search "blockquote")

And replace it with this:

blockquote {

margin:1em 20px;
border: 1px solid #000000;
padding: 5px;
}

Preview and Save (you shouldn't see any changes yet to your blog.  If so check to make sure you did everything right)

ADDING SOME STYLE
Above where you see the code you also see some text highlighted in yellow, red, and pink.  These codes are a way you can change your block quotes to your own.  Where it is yellow this is where it tells how thick your line will be.  Change the 1 to any size you would like.  The most common ones are 1, 3, and 8.  The red shows what type of line you want.  Solid is just a regular line.  You can also choose dashed where it is a dashed line and dotted where it is dotted.  Change that for whatever you can choose.  The pink resembles the color you want your line to be.  You can find more colors with their Hex code here!  This is a great site to find the color you want! 

APPLYING TO YOUR POSTS
Now this is where sometimes people can get confused or can get it right away!  To put it around your text copy this:
<blockquote>YOUR WORDS HERE</blockquote>
and paste it into your post.  Where it says, "YOUR WORDS HERE" place whatever you would like it to say!

Publish your post! If it didn't work here are a few options to your problem:

1. You didn't save your HTML code!  MAKE SURE YOU SAVE!
2. Often times people for the "#" in the Hex code.  So make sure you have "#" before your hex number
3. Sometimes people forget the "/" before the second "block quote".  That one slash is a very vital part to telling the computer to close the quote!

Need more help? Email me at byutatortot@gmail.com. Want to look at the other FAQ's? Click Here! Do you have a question you want me to answer? Click Here!

FAQ Friday: How can I see where my Visitors have come from?

Sorry for this late post... I am working on getting them scheduled.  The question this week is: "How can I see where my Visitors have come from?"

There are many different places you can find these from.  Here are a few with different looks and work a little differently.  Most of them are put in HTML form to put in a Gadget!  Best part is these are all free!

You can find this visitor count here!

You can find this visitor count here!

You can find this visitor count here!

You can find this visitor count here!

You can find this visitor count here!

So that's what I got for you today folks!  Next week: "How can I have those squared around some words in my post?"

Need more help? Email me at byutatortot@gmail.com. Want to look at the other FAQ's? Click Here! Do you have a question you want me to answer? Click Here!

FAQ Friday: How do you make the dashed lines between your posts and sidebar?

This was sent in from someone wanted me to answer.  So the question: How do you make the dashed lines between your posts and sidebar?

Answer:

To get the dashed lines between your posts follow these quick steps:

1. Locate this part in your code:

.post {


margin:.5em 0 1.5em;

border-bottom:1px solid $bordercolor;

padding-bottom:1.5em;

}

    2.  If you want it to be dashed change "solid" with dashed.  Some other option is dotted. 

Preview and Save!



To get the dashed lines between your sidebar items follow these quick steps:

   1.  Locate this part in your code:

.sidebar .widget, .main .widget {


border-bottom:1px dotted $bordercolor;

margin:0 0 1.5em;

padding:0 0 1.5em;

}

 
   2.  To have it be dashed change "dotted" with "dashed".  You can also have it solid which is a normal line!
 
Preview and save!
 
Are there still no lines showing up?  Here is a possible answer:
1.  Make sure where it says "Border-bottom: 1px..." where the 1 is yours might say "0".  That could be the reason why it isn't showing up.  If so change it to 1 or a higher number.
 
More options to changing it up a bit:
 
Where it says "1px" (your's could say something else) make it a bigger number to get a thick line between your posts!
 

Need more help? Email me at byutatortot@gmail.com. Want to look at the other FAQ's? Click Here! Do you have a question you want me to answer? Click Here!

 
 

FAQ Friday : How do I remove lines between my sidebar gadgets?

Question: How do I remove the lines between my sidebar gadgets?
Answer: Many people ask this so this a simple tutorial on how.

1. Locate the code below in your HTML:

.sidebar .widget, .main .widget {
border-bottom:1px dashed $bordercolor;
margin:0 0 .5em;
padding:0 0 .5em;
}

(If you hit "CTRL+F" and search ".sidebar.widget" you can find it easier)
 
2.  Change where it says "1px" (can be any number) to "0px"
 
3.  The lines below your sidebar gadgets are gone!
 
A little more advanced:
Do you want your line to be dotted, dashed, or solid?  Just change where it says "dashed" on mine (yours could be dotted or solid) to the one you would prefer.  If you want the colored changed... where it says "$bordercolor" change it to #000000 for black.  Some other color hex codes can be found here.  Do you want your lines a little thicker?  Where it says "_px" change that to a higher number!
 
Need more help? Email me at byutatortot@gmail.com. Want to look at the other FAQ's? Click Here! Do you have a question you want me to answer? Click Here!




If you have any questions, comments, suggestions, etc please feel free to email me at byutatortot{at}gmail{dot}com! I enjoy emails!

FAQ Friday

I'm sorry I haven't posted this weeks faq friday.  I haven't had anything to answer.  Tomorrow I will have one posted though!  Sorry for the inconvenience.

FAQ Frid

If you have any questions, comments, suggestions, etc please feel free to email me at byutatortot{at}gmail{dot}com! I enjoy emails!

FAQ Friday: How can I have a post be schedule to post another time or day?

I haven't had any submissions for any questions you would like me to answer.  Therefore, it is a little difficult to do my FAQ's!  Make sure you go here and submit a question!
The 4th FAQ Friday:
 Question: 
"How can I have a post be schedule to post another time or day?"
 Answer:

1. Log Into blogger
2. Click New Post
3. Scroll down and find post options
4. Click Post Options
5. To the right of the gray box (or another color) there is something that says, "Post date and time"
6. Click Scheduled at
7. Put the date and time you would like!

Need more help?  Email me at byutatortot@gmail.com.  Want to look at the other FAQ's?  Click Here!  Do you have a question you want me to answer?  Click Here!

If you have any questions, comments, suggestions, etc please feel free to email me at byutatortot{at}gmail{dot}com! I enjoy emails!

FAQ Friday: I have a 3 column template but how do I make both of my sidebars on the right side?

This weeks FAQ Friday is.... I have a 3 column template but how do I make both of my sidebars on the right side?

When you have a three column template most of the time it has a sidebar on each side.  I am now going to tell you how to have them both on the left or right!

Answer:
When you go to Edit HTML in your blogger layout you will need to scroll down and find this:
"#sidebar-wrapper" and "left-sidebar-wrapper"

Where you see "float" put either left or right.  Whatever you put in there will make it be on the side of the post. 

Example:
Say this is what my code looks like:
"#sidebar-wrapper {



background:none;


background-image:url();background-position: top right; background-repeat:no-repeat;


margin:0;


width: 205px;


margin-top:0px;


margin-right:0px;


padding:20px;;


float: right;


border-left:0px dotted #000000;


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{


background:none;


background-image:url();background-position: top right; background-repeat:no-repeat;


margin:0;


width: 205px;


margin-top:0px;


margin-left:0px;


padding:20px;


float: left;


border-right:0px dotted #000000;


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


}"
Or something like that!  :)  And I want both sidebars to be on the right side of my posts.  I would change it to this!
 
"#sidebar-wrapper {
background:none;


background-image:url();background-position: top right; background-repeat:no-repeat;


margin:0;


width: 205px;


margin-top:0px;


margin-right:0px;


padding:20px;;


float: right;


border-left:0px dotted #000000;


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{


background:none;


background-image:url();background-position: top right; background-repeat:no-repeat;


margin:0;


width: 205px;


margin-top:0px;


margin-left:0px;


padding:20px;

float: right;


border-right:0px dotted #000000;


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

}"

Where it was red  I made sure it said "Right"
Did this help you?  If not be sure to email me at byutatortot@gmail.com! 
Do you have a question you would like me to answer?  Go here! 
You can view the other FAQ Fridays here!

 


If you have any questions, comments, suggestions, etc please feel free to email me at byutatortot{at}gmail{dot}com! I enjoy emails!

FAQ Friday: Why Can't I see all of my blog template on my blog?

Did you think I was going to forget this weeks FAQ Friday?  Well I didn't!  Just coming a little late!  This weeks faq friday is.......  "Why Can't I see all of my blog template on my blog?"

The answer!  I have made it so my templates are a standard size.  Yet... some monitors or screens may not fit that specific size.  Unfortunetly I have done my best so they can fix most screens.  So basically what I am trying to say is my templates fit a 14 x 11.5 inch screen.  I am sorry if you can't see all of it.  In some web browsers you should be able to press CTRL and - or + to zoom out or zoom in.  There's your FAQ Friday!

Do you have a question you want answered in FAQ Friday?  Go here!

Do you want to see the rest of the FAQ Friday's?  Go here or click on the FAQ button above!

FAQ Friday: After I have installed my signature why can't I see it?

If this works out I will have a FAQ every Friday, but you have to help me!  If you have any questions fill out the form here!

Okay here is my very first one!

Q- After I have installed my signature why can't I see it?

     A- If you install your signature by going to settings-formatting-and then pasting in your html code then I know the answer.  Maybe.  When you do it this way it doesn't show up on your previous posts, so when you go to write a new post it should be there it the typing window.  So your answer is... the reason why you don't see it on your previous posts is because when you put it the code it will just have it in your posts that you will then write!  

Didn't answer your question?  Email me at byutatortot@gmail.com and I will help you!