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.



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.

Labels: , , , ,

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.



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

Labels: , , , , ,

Wednesday, May 25, 2011

Remake Icon Pack

Specifications


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

Labels: , ,

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


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


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.

Labels: , , , ,

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.



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

Labels: , , , ,

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

Labels: , ,

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.



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

Labels: , ,