Blogspot Vision: 5/1/11

Sunday, May 29, 2011

Create a DHTML Ad Box using CSS, JavaScript, and HTML

SEE THE LIVE DEMO

This tutorial was derived from dynamicdrive.com and bloggerized by blogspotvision.com. This DHTML ad script displays an "inexcusable" box in the middle of the page, broadcasting ads of your choice inside. The box automatically disappears after x seconds, with its display frequency configurable (ie. show ad box only 1 out of 5 times the page is loaded.) This is one method of serving ads that may just be effective, since it contains qualities of a TV/radio commercial.

Steps for this tutorial:

1. Log into your Blogger dashboard and navigate to Design > Edit HTML.

2. Insert the following CSS code into your head section.

adTime=10;  // seconds ad reminder is shown
chanceAd=1; // ad will be shown 1 in X times (put 1 for everytime)

function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

onload=initAd;
//End-->
</script>

3. Next, add a new HTML/JavaScript gadget under Page Elements and add the following HTML code.

Note: You can style your adbox if you're familiar with CSS.

Thursday, May 26, 2011

Galleria Slider using jQuery, CSS, and HTML

SEE THE LIVE DEMO

Galleria is a JavaScript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS. You can also add caption to the images so when users click the "i", the caption will appear for that image.

Steps for this tutorial:

1. Log into your Blogger dashboard and navigate to Design > Edit HTML.

2. Insert the following CSS code into your head section.

3. Next, add a new HTML/JavaScript gadget under Page Elements and add the following HTML code.

</script>

Note: Change link, caption, and images. Each image will appear to the right of the the previous one.

Wednesday, May 25, 2011

Remake Icon Pack

Specifications

Category: Creative, Remake
Format: .png
Pixels: 512x512
Total Files: 3

Krazy Korners using CSS and HTML

Create beautiful CSS DIV boxes for your widget or content containers for an eye catching appearance to your readers. Here is a selection of what CSS can do for your containers; just change the divs to any color you wish and enjoy.

Steps for this tutorial:

1. Log into your Blogger dashboard and navigate to Design > Edit HTML.

2. Insert the following CSS code into your head section.

For The 3D Rasied Example

.raised {background: transparent; width:40%; margin:0 auto;}

.raised h1, .raised p {margin:0 10px;}

.raised h1 {font-size:2em; color:#fff; letter-spacing:1px;}

.raised p {padding-bottom:0.5em;}

.raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}

.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}

.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}

.raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}

.raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}

.raised .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}

.raised .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}

.raised .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}

.raised .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}

.raised .b1 {margin:0 5px; background:#fff;}

.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}

.raised .b3, .raised .b3b {margin:0 2px;}

.raised .b4, .raised .b4b {height:2px; margin:0 1px;}

.raised .b1b {margin:0 5px; background:#999;}

.raised .boxcontent {display:block;  background:#ccc; border-left:1px solid #fff; border-right:1px solid #999;}
</style>

For The 3D Inset Example

.inset {background: transparent; width:40%; margin:0 auto;}

.inset h1, .inset p {margin:0 10px;}

.inset h1 {font-size:2em; color:#fff; letter-spacing:1px;}

.inset p {padding-bottom:0.5em;}

.inset .top, .inset .bottom {display:block; background:transparent; font-size:1px;}

.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden;}

.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}

.inset .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}

.inset .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}

.inset .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}

.inset .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}

.inset .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}

.inset .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}

.inset .b1 {margin:0 5px; background:#999;}

.inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}

.inset .b3, .inset .b3b {margin:0 2px;}

.inset .b4, .inset .b4b {height:2px; margin:0 1px;}

.inset .b1b {margin:0 5px; background:#fff;}

.inset .boxcontent {display:block; background:#ccc; border-left:1px solid #999; border-right:1px solid #fff;}

For The Chamfer Example

For The Square Cutout Border Example

For Curved Cutout Example

For The NEW! Flared Shape Example

For The NEW! Pillar Shape Example

For The Barrel Example

.barrel {background: transparent; width:40%; margin:0 auto;}

.barrel h1, .barrel p {margin:0 10px;}

.barrel h1 {font-size:2em; color:#fff; letter-spacing:1px;}

.barrel p {padding-bottom:0.5em;}

.barrel .top, .barrel .bottom {display:block; background:transparent; font-size:1px;}

.barrel .b1, .barrel .b2, .barrel .b3, .barrel .b4, .barrel .b5 {display:block; overflow:hidden; height:1px; background:#e0cea3;}

.barrel .b1 {border-left:10px solid #dfd5c0; border-right:10px solid #dfd5c0;}

.barrel .b2 {border-left:5px solid #dfd5c0; border-right:5px solid #dfd5c0;}

.barrel .b3 {border-left:3px solid #dfd5c0; border-right:3px solid #dfd5c0;}

.barrel .b4 {border-left:2px solid #dfd5c0; border-right:2px solid #dfd5c0;}

.barrel .b5 {border-left:1px solid #dfd5c0; border-right:1px solid #dfd5c0;}

.barrel .b1 {margin:0 33%;}

.barrel .b2 {margin:0 20%;}

.barrel .b3 {margin:0 12%;}

.barrel .b4 {margin:0 5%;}

.barrel .b5 {margin:0 1px;}

.barrel .boxcontent {display:block; background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #999;}
</style>

3. Next, add a new HTML/JavaScript gadget under Page Elements and add the following HTML code.

For The 3D Rasied Example
For The 3D Inset Example
For The Chamfer Example
For The Square Cutout Border Example
For Curved Cutout Example

For The NEW! Flared Shape Example

For The NEW! Pillar Shape Example

For The Barrel Example

Note: Change content within DIV containers to what you would like to appear in it.

Tuesday, May 24, 2011

Another Magnifying Menu using CSS and HTML

SEE THE LIVE DEMO

Similar to the fisheye menu, this magnifying menu doesn't use javascript and only magnifies the image selected. The images are held as foreground images and have associated text (out of site) for text readers. The styling for this is very simple and the enlargement can be set to any value you please (so long as it does not completely cover adjacent images so that they cannot be selected.) This one gives a x2 enlargement which is probably the maximum value it should be set to for compatibility reasons.

Steps for this tutorial:

1. Log into your Blogger dashboard and navigate to Design > Edit HTML.

2. Insert the following CSS code into your head section.

3. Next, add a new HTML/JavaScript gadget under Page Elements and add the following HTML code.

<ul id="enlarge">
<li><a href="#one"><img src="http://blogspotvision.com/icons/panda-social-icons/blogger.png" alt="image 1" title="Blogger" />Blogger</a></li>
<li><a href="#two"><img src="http://blogspotvision.com/icons/panda-social-icons/delicious.png" alt="image 2" title="Delicious" />Delicious</a></li>
<li><a href="#three"><img src="http://blogspotvision.com/icons/panda-social-icons/digg.png" alt="image 3" title="Digg" />Digg</a></li>
<li><a href="#four"><img src="http://blogspotvision.com/icons/panda-social-icons/facebook.png" alt="image 4" title="Facebook" />Facebook</a></li>
<li><a href="#five"><img src="http://blogspotvision.com/icons/panda-social-icons/flickr.png" alt="image 5" title="Flickr" />Flickr</a></li>
<li><a href="#six"><img src="http://blogspotvision.com/icons/panda-social-icons/reddit.png" alt="image 6" title="Reddit" />Reddit</a></li>

<li><a href="#one"><img src="http://blogspotvision.com/icons/panda-social-icons/rss.png" alt="image 1" title="RSS" />RSS</a></li>
<li><a href="#two"><img src="http://blogspotvision.com/icons/panda-social-icons/stumble_upon.png" alt="image 2" title="Stumble Upon" />Stumble Upon</a></li>
<li><a href="#three"><img src="http://blogspotvision.com/icons/panda-social-icons/technorati.png" alt="image 3" title="technorati" />technorati</a></li>
<li><a href="#four"><img src="http://blogspotvision.com/icons/panda-social-icons/twitter.png" alt="image 4" title="Twitter" />Twitter</a></li>
<li><a href="#five"><img src="http://blogspotvision.com/icons/panda-social-icons/vimeo.png" alt="image 5" title="vimeo" />vimeo</a></li>
<li><a href="#six"><img src="http://blogspotvision.com/icons/panda-social-icons/yahoo.png" alt="image 6" title="Yahoo!" />Yahoo!</a></li>
</ul>

Note: Change link and images. Each image will appear to the right of the the previous one.

Power Up Your 3D Digg Buttons and Icons

Specifications

Category: Social Media
Format: .png
Pixels: 32x32, 52x35, 64x64, 71x49, 72x38, 84x33, 97x59, 118x44, 128x128, 133x91, 142x55, 169x100, 189x71, 227x87
Total Files: 90

Create a Zero Dollar Ads Page using CSS and HTML

SEE THE LIVE DEMO

This tutorial will show you how to add a zero dollar ads page using CSS and HTML. Each grid space is 70x20 expanding with a white border to 75x25 with mouse over. Each image will be placed to the right of the previous one and can be linked to any specified page; serving as a good advertising or back linking widget.

Steps for this tutorial:

1. Log into your Blogger dashboard and navigate to Design > Edit HTML.

2. Insert the following CSS code into your head section.

3. Next, add a new HTML/JavaScript gadget under Page Elements and add the following HTML code.

</ul>
<div class="clear"></div></div>

Note: Change link and images. Each image will appear to the right of the the previous one.