Blogspot Vision

Friday, March 4, 2011

HTML+TIME DIV Background Hover Color Change for Blogger

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

#tabs li b {display:block; background:transparent url(http://www.blogspotvision.info/css/html-plus-bg-color-change/tab_top.gif) no-repeat 0 0; padding:2px 0 0 5px; height:15px; font-size:0.9em; overflow:hidden;}
#tabs li div {border:1px solid #888; border-width:0 1px 1px 1px; padding:20px 5px 5px 5px;}
#tabs li h3 {padding:0; margin:0; font-family:georgia, serif; font-size:17px;}
#tabs li p {font-family:verdana, serif; font-size:11px; line-height:1.5em;}
#tabs li a {color:#000; text-decoration:none;}
#tabs li a.inner-link {color:#c00; text-decoration:none;}
#tabs li a.inner-link:hover {text-decoration:underline;}
#tabs li#one:hover {background:#fef;}
#tabs li#two:hover {background:#cff;}
#tabs li#three:hover {background:#ffc;}
</style>

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

<ul id="tabs">
<li id="one" class="time" begin="one.mouseenter" end="one.mouseleave" timeaction="class:backColorOne">
<b>Firefox</b>
<div>
<h3><a class="inner-link" href="http://www.mozilla.com/?from=sfx&uid=324648&t=552">Get Firefox with Google Toolbar </a></h3><p>The award-winning Web browser just got better. It's free and easy to use. Join the millions of people worldwide enjoying a better Web experience.<br /><a class="inner-link" href="http://www.mozilla.com/en-US/firefox/">Download Firefox - Free</a></p>
<img src="http://www.blogspotvision.info/css/html-plus-bg-color-change/mozilla.gif" alt="Mozilla Firefox" title="Mozilla Firefox" />
</div>

</li>
<li id="two" class="time" begin="two.mouseenter" end="two.mouseleave" timeaction="class:backColorTwo">
<b>Opera</b>
<div>
<h3>Your life at your fingertips</h3><p>Try Speed Dial™ in Opera's newest Web browser, Opera 9.20. It makes the fastest even faster. <br /><a class="inner-link" href="http://www.opera.com/browser/?utm_source=opera-text-ad&utm_medium=banner&utm_campaign=myoperalinks">Download Opera for Windows</a></p>
<img src="http://www.blogspotvision.info/css/html-plus-bg-color-change/opera.gif" alt="Opera for Windows" title="Opera for Windows" />
</div>
</li>
<li id="three" class="time" begin="three.mouseenter" end="three.mouseleave" timeaction="class:backColorThree">
<b>Explorer</b>

<div>
<h3>Get Internet Explorer 9 beta for your operating system</h3><p>Upgrade with confidence. Get downloads for Internet Explorer 9 beta, including recommended updates as they become available.<br /><a class="inner-link" href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer 9 beta Download</a></p>
<img src="http://www.blogspotvision.info/css/html-plus-bg-color-change/ie7.gif" alt="Internet Explorer 9 beta" title="Internet Explorer 9 beta" />
</div>
</li>
</ul>

Thursday, March 3, 2011

CSS Play - Image Manipulation for Blogger

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

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/image-manipulation.html
Copyright (c) 2005-2010 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
=================================================================== */
.gallery {padding:0; margin:0 auto; list-style:none; position:relative; width:480px; height:280px; border:5px solid #444;}
.gallery li {width:160px; height:140px; float:left;}
.gallery li a {display:block; width:160px; height:140px; position:absolute;
-webkit-transition: 0.75s ease-in-out;
-moz-transition: 0.75s ease-in-out;
-ms-transition: 0.75s ease-in-out;
-o-transition: 0.75s ease-in-out;
transition: 0.75s ease-in-out;
}
.gallery li a.p1 {background:url(http://www.blogspotvision.info/css/cssplay1/pic1.jpg); opacity:0.5; left:0; top:0;}
.gallery li a.p2 {background:url(http://www.blogspotvision.info/css/cssplay1/pic2.jpg); opacity:0.5; left:160px; top:0;}
.gallery li a.p3 {background:url(http://www.blogspotvision.info/css/cssplay1/pic3.jpg); opacity:0.5; right:0; top:0;}
.gallery li a.p4 {background:url(http://www.blogspotvision.info/css/cssplay1/pic4.jpg); opacity:0.5; left:0; bottom:0;}
.gallery li a.p5 {background:url(http://www.blogspotvision.info/css/cssplay1/pic5.jpg); opacity:0.5; left:160px; bottom:0;}
.gallery li a.p6 {background:url(http://www.blogspotvision.info/css/cssplay1/pic6.jpg); opacity:0.5; right:0; bottom:0;}

.gallery li a:hover {position:absolute; width:480px; height:280px; z-index:100; opacity:1;}

.gallery li a.p1:hover {left:0; top:0;}
.gallery li a.p2:hover {left:0; top:0;}
.gallery li a.p3:hover {right:0; top:0;}
.gallery li a.p4:hover {left:0; bottom:0;}
.gallery li a.p5:hover {left:0; bottom:0;}
.gallery li a.p6:hover {right:0; bottom:0;}

.gallery2 {padding:0; margin:0 auto; list-style:none; position:relative; width:480px; height:280px; border:5px solid #444;}
.gallery2 li {width:240px; height:140px; float:left;}
.gallery2 li a {display:block; width:240px; height:140px; position:relative; overflow:hidden;} 
.gallery2 li a img {border:0; position:absolute; left:-360px; top:-210px; opacity:0.5; width:960px; height:560px;
-webkit-transition: 0.75s ease-in-out;
-moz-transition: 0.75s ease-in-out;
-ms-transition: 0.75s ease-in-out;
-o-transition: 0.75s ease-in-out;
transition: 0.75s ease-in-out;
}
.gallery2 li a:hover img {position:absolute; left:0; top:0; opacity:1; width:240px; height:140px;}

</style>

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

Wednesday, March 2, 2011

CSS3 Photo Slide Show for Blogger

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

.gallery {padding:0; margin:0; list-style:none; width:486px; height:558px; background:#f0f0e0; position:relative; margin:50px auto; padding:20px; border:1px solid #ddd;
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
*background:#f0f0e0 url(close.gif) no-repeat 493px 5px; /* for IE7 and lower */
}
.gallery li {float:left; margin:15px; width:132px; height:156px; display:inline;}
.gallery img.close {display:block; position:absolute; left:-9999px; top:64px; z-index:500; opacity:0; z-index:-1;
-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;
-webkit-transition-delay: 0.8s;
-moz-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}
.gallery li.close {margin:0; width:28px; height:28px; position:absolute; left:493px; top:5px; *cursor:pointer; /* for IE7 and lower */}
.gallery li a {display:block; float:left; width:112px; height:126px; padding:9px 9px 19px 9px; margin:0; background:#fff; border:1px solid #e0e0e0; text-decoration:none; color:#000; position:absolute;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.gallery li a.left {
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
}
.gallery li a.right {
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
transform: rotate(12deg);
}
.gallery li a span {display:block; text-align:center; text-decoration:none; font:normal 5px/20px arial, sans-serif; color:#fff;
-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;
}
.gallery li a.p1 {top:25px; left:35px;}
.gallery li a.p2 {top:25px; left:205px;}
.gallery li a.p3 {top:25px; left:357px;}
.gallery li a.p4 {top:215px; left:35px;}
.gallery li a.p5 {top:215px; left:205px;}
.gallery li a.p6 {top:215px; left:357px;}
.gallery li a.p7 {top:405px; left:35px;}
.gallery li a.p8 {top:405px; left:205px;}
.gallery li a.p9 {top:405px; left:357px;}

.gallery li a img {display:block; width:100%; height:100%; border:0;}

.gallery li a:hover {margin:-5px -4px ; width:120px; height:135px; text-decoration:none;
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}

.gallery li a:active,
.gallery li a:focus {margin:0; position:absolute; left:263px; margin-left:-185px; top:300px; margin-top:-215px; width:320px; height:360px; padding:25px 25px 50px 25px; opacity:1; z-index:100; outline:0;
-webkit-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.7);
-o-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.7);
box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;

-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.gallery li a:active + img {left:428px; opacity:1; z-index:500; cursor:pointer;}
.gallery li a:focus + img {left:428px; opacity:1; z-index:500; cursor:pointer;}

.gallery li a:active span,
.gallery li a:focus span {color:#000; font-size:18px; padding-top:10px;}
</style>

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

<ul class="gallery">
<li><a class="p1 left" href="#url"><img src="http://www.blogspotvision.info/css/slide-show/pic1.jpg" alt="" /><span>Misty Landscape</span></a><img class="close" src="http://www.blogspotvision.info/css/slide-show/close.png" alt="" title="close this image" /></li>
<li><a class="p2 left" href="#url"><img src="http://www.blogspotvision.info/css/slide-show/pic2.jpg" alt="" /><span>Ladybirds</span></a><img class="close" src="http://www.blogspotvision.info/css/slide-show/close.png" alt="" title="close this image" /></li>
<li><a class="p3 left" href="#url"><img src="http://www.blogspotvision.info/css/slide-show/pic3.jpg" alt="" /><span>Dragonfly</span></a><img class="close" src="http://www.blogspotvision.info/css/slide-show/close.png" alt="" title="close this image" /></li>
<li><a class="p4 right" href="#url"><img src="http://www.blogspotvision.info/css/slide-show/pic4.jpg" alt="" /><span>Cricket</span></a><img class="close" src="http://www.blogspotvision.info/css/slide-show/close.png" alt="" title="close this image" /></li>
<li><a class="p5 right" href="#url"><img src="http://www.blogspotvision.info/css/slide-show/pic5.jpg" alt="" /><span>Green Lizard</span></a><img class="close" src="http://www.blogspotvision.info/css/slide-show/close.png" alt="" title="close this image" /></li>
<li><a class="p6 right" href="#url"><img src="http://www.blogspotvision.info/css/slide-show/pic6.jpg" alt="" /><span>Busking in Sydney</span></a><img class="close" src="http://www.blogspotvision.info/css/slide-show/close.png" alt="" title="close this image" /></li>
<li><a class="p7 left" href="#url"><img src="http://www.blogspotvision.info/css/slide-show/pic7.jpg" alt="" /><span>Singapore Mall</span></a><img class="close" src="http://www.blogspotvision.info/css/slide-show/close.png" alt="" title="close this image" /></li>

<li><a class="p8 left" href="#url"><img src="http://www.blogspotvision.info/css/slide-show/pic8.jpg" alt="" /><span>Kookaburra</span></a><img class="close" src="http://www.blogspotvision.info/css/slide-show/close.png" alt="" title="close this image" /></li>
<li><a class="p9 left" href="#url"><img src="http://www.blogspotvision.info/css/slide-show/pic9.jpg" alt="" /><span>Darling Harbour</span></a><img class="close" src="http://www.blogspotvision.info/css/slide-show/close.png" alt="" title="close this image" /></li>
<li class="close"></li>
</ul>

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