http://www.tripwiremagazine.com/2013/05/css-menu-and-navigation.html

Posting Pictures Side by Side with or without Captions

Original Source>

surelykitchen.com

Since I haven’t been in the kitchen much, I thought I would do a blogger tip/trick post.

The longer I blog the more things I learn how to do in blogger. I’ve known how to post pictures side by side in a post for awhile now, but I couldn’t figure out how to put a caption under them. A google search wasn’t much help, so this past weekend I sat down to figure it out. It took a few hours and a lot of trial and error, but I finally got it. I thought I would share the info for anyone else who is having trouble like I was. Now, I am no computer expert, so I can’t say this is the best nor the easiest way to add captions under side by side pictures, all I know is that this is how I did it. And if it worked for me, hopefully it will help someone else.

I know the new editor allows you to drag and move pictures in the compose section but I have trouble getting things arranged to my liking. I find it easier to do it this way, by writing in the Html code in the post.

1. First you need to find out how wide your post area is, so you can make sure your pictures will fit and not be cut off. To do this go to Design-->Edit HTML. Hit Ctrl F to bring up the search box in the upper right hand corner, type in “#main-wrapper {“ to find that part of your template (you could also just scroll down your template and look for the #main-wrapper, but I like the search box because it’s quicker).

Under that main wrapper will be width=(number)px; this width is the width of your post. Mine is 500px. Your’s could vary based on which template you use and/or if you have customized your template. So, since my width is 500px, the total width of my side by side pictures cannont exceed this number.

2. Now that you figured out your maximum width, you can add the pictures to your post. After clicking on "new post," in the post screen, make sure you are on the “edit html” tab. You’re going to set up a table for the pictures. Below is the code I use:

<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<center><table>
<tr>
<td>Photo 1 url height=h width=w</td>
<td>Photo 2 url height=h width=w</td>
</tr>
</table></center>
</div>

I type in values for height and width, usually 300 for both, and play around with the numbers until, when I click on preview, I’m happy with the picture size/dimensions. Just make that when added together, your widths don’t exceed the width of your blog. For example, my widths are 250 for photo 1 and 250 for photo 2, so my total width for both pics is 500, and since my blog width is 500, I’m fine. (See photos at top of my post)

Also, I like to center my photos in my posts. If you do not want your pictures to be centered simply delete the <center> and </center> in the above code. In this example, since both my picture widths equal 500px I don't need to center them.

If you don’t want to add captions to your pictures, then your done. But, let’s say you’d like to add labels underneath the pictures. You just need to add some more code for captions. In the code above, add this code (below) directly above the </table>:

<tr>
<td><center>Photo 1 Caption</center></td>
<td><center>Photo 2 Caption</center></td>
</tr>
So your final code should look like this:

<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<center><table>
<tr>
<td>Photo 1 url</td>
<td>Photo 2 url</td>
</tr>
<tr>
<td><center>Photo 1 Caption</center></td>
<td><center>Photo 2 Caption</center></td>
</tr>
</table></center>
</div>

And your photos will, hopefully, look like this:

pear brandy	morsels

How to Create a Drop Down Menu in Blogger

original source>
from http://randomjuvament.blogspot.com/

Here are the steps to create a drop down menu in Blogger:

  1.  In the Blogger dashboard, go to Layout

 
  2.  Click on Add a Gadget

  3.  Select HTML/JavaScript

  4.  Under Content, paste the following code:

  <div id='menubar'>
    <ul id='menus'>
      <li>
        <a href='#'>MenuItem</a>
      </li>
      <li>
        <a href='#'>MenuItem</a>
      </li>
      <li>
        <a href='#'>MenuItem</a>
      </li>
      <li>
        <a href='#'>MenuItem</a>
        <ul>
          <li><a href='#'>SubMenuItem</a></li>
          <li><a href='#'>SubMenuItem</a></li>
          <li><a href='#'>SubMenuItem</a></li>
        </ul>
      </li>
    </ul>
  </div>

5.  Replace MenuItem with the appropriate menu label

  6.  Replace SubMenuItem with the appropriate sub menu label
  7.  Replace # with the appropriate URL
  8.  Click Save
  9.  Move the HTML/Javascript object to where you want the menu to appear
  10.  Click Save arrangement

  11.  Click on Template

  12.  Click Edit HTML

  13.  Click Proceed

  14.  Search for the following line:
          ]]></b:skin>

  15.  Paste the following code directly above that line


/*-------- Begin Drop Down Menu -------*/

#menubar {
    background: #8E8E8E;
    width: 840px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:1px solid #B2FFFF;
        height:35px;
}

#menus {
    margin: 0;
    padding: 0;
}

#menus ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}

#menus li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #1A6680;
        border-right:1px solid #1A6680;
        height:35px;
}
#menus li a, #menus li a:link, #menus li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

#menus li a:hover, #menus li a:active {
    background: #130000; /* Menu hover */
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;       
}

#menus li {
    float: left;
    padding: 0;
}

#menus li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}

#menus li ul a {
    width: 140px;
}

#menus li ul ul {
    margin: -25px 0 0 160px;
}

#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
    left: -999em;
}

#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li li.sfhover ul, #menus li li li.sfhover ul {
    left: auto;
}

#menus li:hover, #menus li.sfhover {
    position: static;
}

#menus li li a, #menus li li a:link, #menus li li a:visited {
    background: #B3B3B3; /* drop down background color */
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px solid #1A6680;
}

#menus li li a:hover, #menusli li a:active {
    background: #130000; /* Drop down hover */
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

/*-------- End Drop Down Menu -------*/


16.  Click Save Template, then Close