Blogspot Vision

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:

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"
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.

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