Skip to main content

Posts

Recent posts

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:/…

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=""…

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:Log into your Blogger Dashboard.From your Dashboard, select "Dashboard" on the blog you would like to edit.Next, select "Template" and scroll to the bottom of the page.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"…

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.

<style type="text/css"> <!-- #sponsorAdDiv {position:absolute; height:1; width:1px; top:0; left:0;} --> </style> <script type="text/javascript"> adTime=10; // seconds ad reminder is shown chanceAd=1; // ad will be shown 1 in X times (put 1 for everytime) var ns=(document.layers); var ie=(document…

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.

<style type='text/css'> /* Demo styles */ .content{color:#777;font:12px/1.4 "helvetica neue",arial,sans-serif;width:620px;margin:20px auto;} h1{font-size:12px;font-weight:normal;color:#ddd;margin:0;} p{margin:0 0 20px} a {color:#22BCB9;text-decoration:none;} /* This rule is read by Galleria to define the gallery height: */ #galleria{height:350px;} </style> <…

Remake Icon Pack

SpecificationsCategory: Creative, RemakeFormat: .pngPixels: 512x512Total Files: 3