Blogspot Vision

Tuesday, February 22, 2011

Clean Network Icons by Icon Stick

Download

Sunday, February 13, 2011

How to add a horizontal chrome drop down navigation menu with Javascript to Blogger

JavaScript Code Snippet This section code should be inserted before the closing head tag.

CSS Code Snippet This section code should be inserted before the closing head tag.

HTML Code Snippet This section code should be inserted where you want the output to appear.

<div class="chromestyle" id="chromemenu"> <ul> <li><a href="http://www.dynamicdrive.com">Home</a></li> <li><a href="#" rel="dropmenu1">Resources</a></li> <li><a href="#" rel="dropmenu2">News</a></li> <li><a href="#" rel="dropmenu3">Search</a></li> </ul> </div>  <div id="dropmenu1" class="dropmenudiv"> <a href="http://www.dynamicdrive.com/">Dynamic Drive</a> <a href="http://www.cssdrive.com">CSS Drive</a> <a href="http://www.javascriptkit.com">JavaScript Kit</a> <a href="http://www.codingforums.com">Coding Forums</a> <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a> </div>  <div id="dropmenu2" class="dropmenudiv" style="width: 150px;"> <a href="http://www.cnn.com/">CNN</a> <a href="http://www.msnbc.com">MSNBC</a> <a href="http://news.bbc.co.uk">BBC News</a> </div>  <div id="dropmenu3" class="dropmenudiv" style="width: 150px;"> <a href="http://www.google.com/">Google</a> <a href="http://www.yahoo.com">Yahoo</a> <a href="http://www.msn.com">MSN</a> </div> <script type="text/javascript"> cssdropdown.startchrome("chromemenu", "chromemenu2", "chromemenu3", "chromemenu4") </script></span>

Wednesday, February 9, 2011

How to add the Feedback Tab to your page in Blogger

You can add a Feedback tab in your Blogger template for readers to have easy access on what they would like to say or share about your blog. Your audience's say is crucial information to understanding what your readers want or expect to get from your blog or site when they visit. Listen to your fans and your fans will listen to you. Give em what they want; what they come to your site or blog seeking for. And the best way to do this is with actual stats is through your audience. To add a feedback tab to your Blogger page, simply add the following CSS section code below:

CSS Code Snippet

This CSS code should be inserted right before the closing head tag.
HTML Code Snippet
This HTML code should be inserted where you want the output to appear.

Monday, February 7, 2011

Removing the "Showing newest posts with label" breadcrumb from Blogger

Most of the time when you're customizing your Blogger template, you may find that the "Showing newest posts with label" breadcrumb may make your pretty template seem like a basic one. This tutorial shows you how to remove that label from your Blogger template so it'll look just right.

To remove this label, simply log into your blogger dashboard > design > edit html (click on expand template widget). Once you've selected the "expand template widget, search for the following section code below:

Note: if you can't locate the section code above, try searching for just this line of code: <b:includable id='status-message'>

Next, replace the whole section code above with the following section code below:

Saturday, February 5, 2011

Medical Icons for Medical, Pharmacy, or Health blogs

Download

Thursday, February 3, 2011

Organize your posts by putting your codes inside a box with an option to “select all” in Blogger, for better appearance and a user-friendly interface.

If your blogs usually consists of sharing codes, this tutorial may help you simplify your posts. Make it look better and cleaner by adding functionality and organization for a user-friendly interface.

You can add this plugin to your posts by simply adding this section code whenever you need to place a code into a textbox.

Note: To adjust the textbox’s size, just adjust the textarea cols=”X“ for width and rows=”X” for height.

Sunday, January 30, 2011

How to add an opaque professional any width four level vertical menu to Blogger

CSS Code Snippet

This CSS code should be inserted right before the closing head tag.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/anywidth-flyout.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements. Bloggerized by Blogspot Vision.
=================================================================== */

#menu {width:960px; height:500px; background:url(http://blogspotvision.com/tutorials/menus/anywidth/images/webdesign.jpg) bottom right no-repeat; margin:0 auto; position:relative;}

#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; background:url(http://blogspotvision.com/tutorials/menus/anywidth/images/opaque.png); padding:1px 1px 0 1px;}

#menu li {margin:0; padding:0; list-style:none;}
#menu li {display:inline-block; display:inline;}
#menu ul {position:absolute; left:-9999px;}
#menu ul.level1 {position:absolute; left:0; top:60px;}

#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:22px; text-decoration:none;padding:0 20px 0 10px; border-bottom:1px solid #ddd;}

#menu ul li:hover > ul {visibility:visible; left:100%; margin-top:-24px; margin-left:-1px;}

#menu a:hover ul,
#menu a:hover a:hover ul, 
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu a:hover ul ul, 
#menu a:hover a:hover ul ul {left:-9999px;}

#menu li a:hover {background:#868ea1;} 
#menu li:hover > a {background:#868ea1;}
#menu li a.fly {background: url(http://blogspotvision.com/tutorials/menus/anywidth/images/arrow.gif) no-repeat right top;}
#menu li a.fly:hover {background:#868ea1 url(http://blogspotvision.com/tutorials/menus/anywidth/images/arrow.gif) no-repeat right top;} 
#menu li:hover > a.fly {background:#868ea1 url(http://blogspotvision.com/tutorials/menus/anywidth/images/arrow.gif) no-repeat right top;}

#menu table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-7px; margin-left:-1px;}

</style>

HTML Code Snippet
This HTML code should be inserted where you want the output to appear.

<div id="menu">
 <ul class="level1">
  <li><a href="#url">Home</a></li>
  <li><a class="fly" href="#url">Contact Us</a>
  
   <ul>
    <li><a href="#url">Email</a></li>
    <li><a href="#url">Telephone</a></li>
    <li><a href="#url">Online Form</a></li>
    <li><a href="#url">Snail Mail Address</a></li>
   </ul>
  
  </li>
  <li><a class="fly" href="#url">Resort</a>
  
   <ul>
    <li><a href="#url">Ski Hire Facilities</a></li>
    <li><a class="fly" href="#url">Main Ski Slopes</a>
    
     <ul>
      <li><a href="#url">Beginners Slopes</a></li>
      <li><a href="#url">Intermediate Slopes</a></li>
      <li><a class="fly" href="#url">Advanced Skill Levels</a>
      
       <ul>
        <li><a href="#url">Local</a></li>
        <li><a href="#url">Nearby</a></li>
        <li><a href="#url">With instructor</a></li>
        <li><a href="#url">Snow boarding</a></li>
       </ul>
      
      </li>
      <li><a href="#url">Expert</a></li>
     </ul>
    
    </li>
    <li><a href="#url">Night Life</a></li>
    <li><a class="fly" href="#url">Restaurants</a>
    
     <ul>
      <li><a href="#url">Snow Hotel</a></li>
      <li><a href="#url">The Snowman</a></li>
      <li><a href="#url">Ice Cavern</a></li>
      <li><a href="#url">Ski Inn</a></li>
     </ul>
    
    </li>
    <li><a class="fly" href="#url">Car Hire</a>
    
     <ul>
      <li><a href="#url">From Airport</a></li>
      <li><a href="#url">In Resort</a></li>
      <li><a href="#url">Multiple Resorts</a></li>
     </ul>
    
    </li>
   </ul>
  
  </li>
  <li><a class="fly" href="#url">Information</a>
  
   <ul>
    <li><a href="#url">Money Exchange</a></li>
    <li><a class="fly" href="#url">Resort Essential Information</a>
    
     <ul>
      <li><a href="#url">Lift Passes</a></li>
      <li><a href="#url">Insurance</a></li>
      <li><a class="fly" href="#url">Gear Rental</a>
      
       <ul>
        <li><a href="#url">Boots</a></li>
        <li><a href="#url">Skis</a></li>
        <li><a href="#url">Ski Wear</a></li>
        <li><a href="#url">Goggles</a></li>
       </ul>
      
      </li>
      <li><a href="#url">Ski Schools</a></li>
      <li><a href="#url">Snow Report</a></li>
     </ul>
    
    </li>
    <li><a class="fly" href="#url">Language</a>
    
     <ul>
      <li><a href="#url">Austrian</a></li>
      <li><a href="#url">German</a></li>
      <li><a href="#url">French</a></li>
      <li><a href="#url">English</a></li>
     </ul>
    
    </li>
    <li><a href="#url">Short Breaks</a></li>
   </ul>
  
  </li>
  <li><a class="fly" href="#url">Surrounding Area</a>
  
   <ul>
    <li><a href="#url">Where to go</a></li>
    <li><a href="#url">What to do</a></li>
    <li><a href="#url">Places of interest</a></li>
    <li><a href="#url">National parks & Museums</a></li>
   </ul>
  
  </li>
  <li><a href="#url">Privacy</a></li>
 </ul>
</div>