Blogspot Vision

Monday, February 28, 2011

CSS3 Circular Social Networking Menu for Blogger

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

/* for IE6 */
ul.topul table {border-collapse:collapse: position:absolute; left:0; top:0; margin:-4px;}
ul.topul li a:hover {direction:ltr;}
ul.topul li a:hover ul li a:hover img {position:absolute; width:64px; height:64px; left:-8px; top:-8px; z-index:100;}
</style>

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

Sunday, February 27, 2011

CSS3 Vertical Sliding Photo Info for Blogger

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

.wrap a {display:block; width:220px; height:330px; text-decoration:none; color:#000;}
.wrap {width:220px; height:330px; position:relative; overflow:hidden; font-family:arial, sans-serif; border:0; margin:0 10px; float:left; display:inline;}
.wrap img {border:0;}
.wrap i {display:block; width:220px; height:330px; position:absolute; left:0; top:300px; z-index:1; background:#000; filter: alpha(opacity=40);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.40;
 -webkit-transition: all 0.6s ease-in-out; 
 -moz-transition: all 0.6s ease-in-out; 
 -o-transition: all 0.6s ease-in-out; 
transition: all 0.6s ease-in-out; 
 }
.wrap p {display:block; width:220px; height:330px; position:absolute; left:0; top:300px; z-index:1; background:transparent; font-size:12px; color:#fff; padding:0; margin:0; line-height:16px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap p b {display:block; font-size:22px; color:#fc0; text-align:center; margin:0; padding:0; line-height:30px;}
.wrap p span {display:block; padding:10px; line-height:20px;}

.wrap a:hover {direction:ltr;}
.wrap a:hover i {top:0;}
.wrap a:hover p {top:0;}

.clear {clear:left;}

</style>

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

<div class="wrap">
<a href="#x">
 <img src='http://www.blogspotvision.info/css/photo-info/frog.jpg' alt='' />
 <i></i>
 <p>
  <b>Red Eye Frog</b>
  <span>Red-eyed tree frogs, as their name states, have bold red eyes with vertically narrowed pupils, a vibrant green body with yellow and blue striped sides, and orange toes. There is a great deal of regional variation in flank and thigh coloration.<br /><br /> 
  Although it has been suggested that A. callidryas' bright colors function as aposematic or sexual signals, neither of these hypotheses have been confirmed.</span>

</p>
</a>
</div>

<div class="wrap">
<a href="#x">
 <img src='http://www.blogspotvision.info/css/photo-info/emperor.jpg' alt='' />
 <i></i>
 <p>
  <b>Emperor Penguin</b>

<span>The Emperor Penguin (Aptenodytes forsteri) is the tallest and heaviest of all living penguin species and is endemic to Antarctica.<br /><br /> 
  The male and female are similar in plumage and size, reaching 122 cm (48 in) in height and weighing anywhere from 22.37 kg (48.82 lb). The dorsal parts are black and sharply delineated from the white belly, pale-yellow breast and bright-yellow ear patches.
  </span>
 </p>
</a>
</div>

<p>
  <b>Pelicans</b>
  <span>A pelican is a large water bird with a distinctive pouch under the beak, belonging to the bird family Pelecanidae.<br /><br /> 
  Along with the darters, cormorants, gannets, boobies, frigatebirds, and tropicbirds, pelicans make up the order Pelecaniformes. Modern pelicans are found on all continents except Antarctica.
  </span>
 </p>
</a>
</div> 
<br class="clear" />

Saturday, February 26, 2011

The Future Now - CSS3 Exploding Menu for Blogger

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

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/css3-explode.html
Copyright (c) 2005-2011 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements. BLOGGERIZED BY BLOGSPOTVISION.COM
=================================================================== */

.menu, .menu ul {padding:0; margin:0; list-style:none; display:block; text-align:center; width:140px; height:50px;}
.menu {width:150px; height:60px; margin:0 auto; position:relative; border-top:1px solid transparent;} /* required for non-IE browsers */

.menu li.topLi {width:150px; height:60px; line-height:50px; position:relative; z-index:100;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menu li.close {position:absolute; top:0; left:-9999px; opacity:0; z-index:100;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
transition-delay: 1.5s;
-o-transition-delay: 1.5s;
-moz-transition-delay: 1.5s;
-ms-transition-delay: 1.5s;
-webkit-transition-delay: 1.5s;
}
.menu li.topLi > a {display:block; width:150px; height:60px; background:url(http://www.blogspotvision.info/scripts/cssplay4/nav.png) no-repeat center center}
.menu ul li a {display:block; width:140px; height:50px; opacity:0.6; float:left;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.menu li a b {position:absolute; left:-9999px;}

.menu li.topLi ul li.p1 a {background:url(http://www.blogspotvision.info/scripts/cssplay4/hi5.png);}
.menu li.topLi ul li.p2 a {background:url(http://www.blogspotvision.info/scripts/cssplay4/bebo.png);}
.menu li.topLi ul li.p3 a {background:url(http://www.blogspotvision.info/scripts/cssplay4/reddit.png);}
.menu li.topLi ul li.p4 a {background:url(http://www.blogspotvision.info/scripts/cssplay4/heart.png);}
.menu li.topLi ul li.p5 a {background:url(http://www.blogspotvision.info/scripts/cssplay4/live.png);}

.menu li ul {z-index:-1; position:absolute; top:0; left:0; border:5px solid #acb;
-o-border-radius: 30px;
-msl-border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;

-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all0.5s ease-in-out;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menu li ul li {position:absolute; left:0; top:0; width:150px; height:50px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}

.menu li.topLi:hover {margin-top:-60px;}
.menu li.topLi:hover ul {top:60px; width:700px; left:-280px;}
.menu li.topLi:hover ul li.p1 {left:0; top:0;}
.menu li.topLi:hover ul li.p2 {left:140px; top:0;}
.menu li.topLi:hover ul li.p3 {left:280px; top:0;}
.menu li.topLi:hover ul li.p4 {left:420px; top:0;}
.menu li.topLi:hover ul li.p5 {left:560px; top:0;}

.menu li a:hover {opacity:1;}

.imageHolder {width:740px; margin:0 auto; height:400px; border:1px solid #ddd; padding-top:60px; background:#fff url(http://www.blogspotvision.info/scripts/cssplay4/back.png) no-repeat 0 0;}

/* for iPhone, iPad and iPod Touch */
.menu li.close a {display:block; width:150px; height:60px; background: url(http://www.blogspotvision.info/scripts/cssplay4/close.png) no-repeat center center;}
.menu li.topLi:hover > a {opacity:0;}
.menu li.topLi:hover + li.close {left:0; top:-60px; opacity:1}

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

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: