Wall Press is a minimal, 2-column, clean blogger template with three column footer.
It is cross-browser compatible. However, the CSS3 shadow effects are not visible in Internet Explorer. Instructions on editing the template can be found after the cut.
Today, I am releasing Revive, a free premium blogger template. The template is available in five different hot colours: pink, red, green, blue and orange. This is the first time I'm releasing multi-colour versions of the same template. I've managed to compress all five different colour versions into a RAR file. So that you don't have to download them one-by-one which would really waste your time.
Revive Blogger Templates Demos
Here are the demo blogs of five versions of different colours of Revive Blogger Template.
Revive Red Blogger Template
Revive Pink Blogger Template
Revive Orange Blogger Template
Revive Blue Blogger Template
Revive Green Blogger Template
HTML5 and CSS3 have started conquering the web. They both combine to produce great functions and effects and really make our eyes wide opened. For example, have a look at this Windows 7 start menu designed using only CSS3! Nowadays, there are a lot of tutorials and resources on HTML 5 and CSS3 including the cheat sheets which are very essential to web developers and designers who are willing to code using these standards. I've managed to search and listed out the available cheat sheets.
Widgets are becoming a popular and pervasive part of the blogosphere. It can be said that "no widgets, no blogging". I've managed to search for the best and popular widgets that are being used by majority of bloggers. Finally, I came up with a compilation of 15 most popular blogger widgets.
All of us know that a blog's design plays a great role in improving its traffic and pagerank. If the content of a blog is the king, then the blog design is the queen. Here is a collection of 20 well designed Blogger powered blogs for your inspiration.
I’ve missed something? Definitely! Let me know in the comments!
CSS3 button maker is a simple and great online tool created by Chris Coyier from CSS Tricks. This tool allows you to generate a image-less button fully making use of CSS3. I am sure that some of you may don't know what CSS3 is really about. CSS3 is a collection of modules that extend the previous CSS2 specification that we all know. CSS level 3 is currently under development. Read further about CSS3 here.
Button above was made fully with CSS3. The effects are clearly visible in latest versions of Firefox, Konqueror, Opera or Safari/Webkit. In older browers that don’t support these properties, the fallback is solid-color background, no shadows, and square corners which is not a big deal as everybody are moving to new browsers. To create such button for your use, visit CSS3 button maker now. Here is a preview of the super duper online tool.
Once you've customized the button, click on the button "View the CSS" to get the CSS code. Copy the code and go to Blogger > Design > Edit HTML and search for ]]></b:skin>. Paste the copied code immediately before ]]></b:skin> and click Save.
To use it in posts or anywhere in your template, simply add a class='button" attribute in anchor tag. Here is a sample button and its code.
You are done.
Today, I am going to make a black and white image fade into a colour image or vice versa on mouseover with jQuery. So, follow the steps below to use the effect in your blog. In this tutorial, I'm going to use two images, a colour image and its greyscale mode image.
You can create greyscale mode image of the original image using any image editing softwares. Or you can use free online image editors such as Online-Image-Editor, Fotoflexer, Pixlr, Picnik and more.
1. Styling – CSS
First log into Blogger > Design > Edit HTML. Search for the code ]]></b:skin> . And replace it with the codes below.
position: relative;
}
img.a {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
img.b {
position: absolute;
left: 0;
top: 0;
}
]]></b:skin>
2. jQuery & Function
Now add the following jQuery script and function immediately before the </head> tag.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
//]]>
</script>
3. Wireframe – HTML
And here is the HTML code that you should place in your Blog posts. But, remember to add it in EDIT HTML mode and not in Compose mode in text editor.
<img src="URL_of_normal_image" alt="" class="a" />
<img src="URL_of_greyscale_image" alt="" class="b" />
</span>
UPDATE : You can decide whether you want the effect is from GREYSCALE to COLOUR or COLOUR to GREYSCALE by changing the image source in the HTML code above. The image with class='a' appears first and changes to image with class='b' on hover.
1. To change NEWER POSTS.
Search for <data:newerPageTitle/> using CTRL+F. This <data:newerPageTitle/> tag is used to name the button which links to the Newer Posts. To modify the text, just delete this tag and write what you want.
2. To change the OLDER POSTS .
Search for <data:olderPageTitle/> and replace it with the text with you want to appear.
3. To change the HOME text.
Search for <data:homeMsg/> and replace the tag with the desired text.
Update:
If you want to show images/icons instead of text, all you have to do is just replace the tags highlighted above with the images.
Thousands of these icons are available on net. Simply google for them. The final result will look like this.
