Saturday, July 9, 2011

Create Eye Catching Image Pop Ups using CSS and HTML


This is a neat way to show off your sponsors or affiliates using CSS and HTML. The image will enlarge on hover and can also be linked to your affiliate accounts or any other web page for that matter. Because we will be using a stylized list; there's no need to worry about cropping images or resizing your images. You'll be able to style your list using CSS; making it neater and quicker to implement your styling power on all images at once. 

Before you begin the tutorial; make sure to back up your current existing template in case it doesn't turn out as expected. 

Begin by logging into your Blogger dashboard > Design > Page Elements. Once your on the "Page Elements" page, select "Add a Gadget" to add an "HTML/JavaScript" gadget.  The next step is to copy and paste the following snippet code below into your configuration box.
  <ul class="thumb">
    <a href="LINK-ADDRESS"><li><img src="http://YOUR-IMAGE-LINK.jpg" alt="" style="border: 0;" width="125" height="125" /></li></a>
    <a href="LINK-ADDRESS"><li><img src="http://YOUR-IMAGE-LINK.jpg" alt="" style="border: 0;" width="125" height="125" /></li></a>
    <a href="LINK-ADDRESS"><li><img src="http://YOUR-IMAGE-LINK.jpg" alt="" style="border: 0;" width="125" height="125" /></li></a>
</ul>
Note: The above code contains 3 advertisement box. If you want to add more, simply copy and paste: <a href="LINK-ADDRESS"><li><img src="http://YOUR-IMAGE-LINK.jpg" alt=" " style="border:0;" width="125" height="125"/></li></a> right before the closing </ul> tag.

The next step now is to style your images. To do this, simply add the following CSS snippet code to the opening of your head section.
<style type='text/css'>    
ul.thumb {
    float: left;
    list-style: none;
    margin: 0; padding: 10px;
    width: 360px;
}
ul.thumb li {
    margin: 0; padding: 5px;
    float: left;
    position: relative;
    width: 110px;
    height: 110px;
}
ul.thumb li img {
    width: 100px; height: 100px;
    border: 1px solid #ddd;
    padding: 5px;
    background: #f0f0f0;
    position: absolute;
    left: 0; top: 0;
    -ms-interpolation-mode: bicubic;
}
ul.thumb li img.hover {
      border: none;
}
</style>
Note: You can change the style of your images with this CSS snippet code. If you need help stylizing your list, please don't hesitate to leave a comment and ask for help. 

Tuesday, July 5, 2011

How to add a Polaroids Picture Gallery to Blogger using CSS3 and HTML

Adding a Polaroid Picture Gallery to your Blogger is a fairly simple tutorial. With a few snippets of codes and pictures of your own, you can add your very own Polaroid Picture Gallery to Blogger using HTML and CSS3.

Before you begin the tutorial; make sure to back up your current existing template in case it doesn't turn out as expected. 

Okay, lets get started. Begin by logging into your Blogger dashboard > Design > Page Elements. Once your on the "Page Elements" page, select "Add a Gadget" to add an "HTML/JavaScript" gadget.  The next step is to copy and paste the following snippet code below into your configuration box.
<p>
<ul class="polaroids">
       
<li>
<a href="http://www.blogspotvision.com/search/label/tutorials?max-results=6" title="Tutorials">
<img src="https://lh4.googleusercontent.com/-cOzeQsLqyUw/Tgp68po7YPI/AAAAAAAAB38/YSiYIBTokxQ/s288/tutorials.jpg" alt="" />
</a>
</li>

<li>
<a href="http://www.blogspotvision.com/search/label/icons?max-results=6" title="Icons">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJhxjUXIBlfU2eu0s2InBYN_USLSYGLjqFuwscJxWh-jznyY3AYTorYsXNNi1WUQdTn5xIBeftM-6EC1UJzv11SQE65LbkDBm1NVDUblnRJe4nCxZbXjMgQcatKGVvnSdlDcBvJEB6Hmc/s288/icons.jpg" alt="" />
</a>
</li>
       
</ul>
</p>
<br class="clear" />
Note: You can exclude the <p> &</p> if you do not want your polaroids in a paragraph. Make sure you change the links and images to that of yours. To change the title located at the bottom of your polaroid picture, just change the "title" of your image (located in the link's HTML). If you want your title to be located on top; leave the image "title" blank, but add the title to the "alt" of your image's HTML. To add more polaroids, simply copy and paste another list; for example the snippet above shows two polaroid pictures.

The next step now is to style your polaroid picture gallery. To do this, simply add the following CSS snippet code to the opening of your head section.
<style type='text/css'>       
        ul.polaroids { width: 485px; margin: 0 0 18px -30px; }
        ul.polaroids li { display: inline; }
        ul.polaroids a { background: #fff; display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: &quot;Marker Felt&quot;, sans-serif; text-decoration: none; color: #333; font-size: 18px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }
        ul.polaroids img { display: block; width: 190px; margin-bottom: 12px; }
        ul.polaroids a:after { content: attr(title); }
       
        ul.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg);  -moz-transform: rotate(2deg); }
        ul.polaroids li:nth-child(3n) a { -webkit-transform: none; position: relative; top: -5px;  -moz-transform: none; }
        ul.polaroids li:nth-child(5n) a { -webkit-transform: rotate(5deg); position: relative; right: 5px;  -moz-transform: rotate(5deg); }
        ul.polaroids li:nth-child(8n) a { position: relative; right: 5px; top: 8px; }
        ul.polaroids li:nth-child(11n) a { position: relative; left: -5px; top: 3px; }
       
        ul.polaroids li.messy a { margin-top: -375px; margin-left: 160px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); }
       
        ul.polaroids li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }
       
        code { background: rgba(0,0,0,.5); padding: 2px 3px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.75); -webkit-border-radius: 3px; -moz-border-radius: 3px; }
       
        ol.code { background: rgba(0,0,0,.75); margin-bottom: 18px; border: solid rgba(0,0,0,.75); border-width: 1px 1px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5); }
        ol.code li, ol.code li code { font-size: 14px !important; }
        ol.code code { background: none; }
</style>
Note: You can change the style of your polaroids with this CSS snippet code. If you need help stylizing your picture gallery, please don't hesitate to leave a comment and ask for help.

Saturday, June 18, 2011

The New Blogger Template Designer

A few weeks ago when I logged into Blogger, I noticed they upgraded the whole platform. At first impression I thought it was a clean and fresh upgrade, and I really liked the user-friendly interface. Overall, I think they did a great job in developing the new Blogger. There was only one problem: I didn't know where to edit my layouts anymore, but through digging a little further into the platform; I finally found out how you can edit your layout through CSS.

To customize your layout through CSS:

  1. Log into your Blogger Dashboard.
  2. From your Dashboard, select "Dashboard" on the blog you would like to edit.
  3. Next, select "Template" and scroll to the bottom of the page.
  4. You will see two options at the bottom of the page: "Edit Template" and "Revert to classic templates". If you want to upload an existing template; select "Edit Template", but if you want to edit your existing template through CSS; select "Revert to classic templates"
  5. Once you've selected "Revert to classic templates", select "Revert to classic template" underneath the sub-link.

Pictures






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.

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.

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


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.

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.

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.



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

Saturday, March 12, 2011

CSS3 Garage Door Horizontal Menu


preview-blogger

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.



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


Thursday, March 10, 2011

Exploding Image/logo for Blogger


preview-blogger

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.



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


Wednesday, March 9, 2011

Sexy Image Hover Effects using CSS3 for Blogger


preview-blogger

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.


Tuesday, March 8, 2011

CSS3 - The future now - Carousel Slideshow


preview-blogger

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.


Sunday, March 6, 2011

CSS3 Slide Up Boxes for Blogger


preview-blogger

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.