Cool CSS Hacks For Blogger/Blogspot

I have posted Making more professional blogger blogs before this. I suggest you to play with CSS because it is one of the cool stuff to make blog professional and well manage. And today I am sharing you some cool & good looking CSS hacks for your blog. It helps you to have more professional:) So, let's try it.

Create a stunning 3D push button

Nowadays, we can see 3d push buttons nearly everywhere. Most of them are achieved via JavaScript. The main problem of using these scripts is that there are greater chances that they might get blocked by the browser. And with the advent of many ad blockers it has become a serious drawback. In this situation, the CSS comes to rescue. Thought we can’t create 3d push buttons as professional as created by using JavaScript, we can create a basic 3d push button with the help of CSS.



The main CSS commands you’ll need are:
    a.pushbut {

    color:#26a;
    display:block;
    border:1px solid;
    border-color:#aaa #000 #000 #aaa;
    text-decoration:none;
    width:8em; text-align:center;
    height:2em; line-height:2em;
    background:#fc0; font-weight:bold
    }
    a.pushbut:hover
    {
    color:#26a;
    background:#ffd633;
    position:relative;
    top:1px;
    left:1px;
    border-color:#000 #aaa #aaa #000
    }
These must be within <style> tag. i.e. ]]></b:skin> tag

Off course, you can change any settings you want like back color, alignment etc.
Now to create a button, we must specify the class object as push but within the <BODY> tag…that’s all
Ex:
<p><a href=”http://www.blogohblog.com/” onclick=”return false” onkeypress=”return false” title=”visit my blog” class=”pushbut”>Visit blogohblog</a></p>
To see the demo, click here
  
CSS font shorthand notations

When styling fonts with CSS you may be doing like this:
font-family: Times New Roman,serif;
line-height: 1.3em;
font-weight: bold;
font-style: italic;
font-size: 0.9em;
font-variant: small-caps;
There’s no need to write all these because there is a short hand notation for font.It follows the syntax
font:size/line-height weight style variant family;
For example in the above case we can just write
font: 0.9em/1.3em bold italic small-caps Times New Roman, serif;
Note: This CSS shorthand font version will only work if you’re specifying both the font-size and also the font-family. Moreover, in case you don’t specify the font-weight, font-style, font-variant etc. then these values will automatically filled with default values

Box Model Hack

This will be specified in nearly every css hacks article that you would have come across. Well mine too is not an exception. The box model hack is used to fix a rendering problem in pre-IE 6 browsers, where the border and padding are included in the width of an element, as opposed to added on.
In order to overcome this, all we have to do is use these commands ….
padding: 4em; border: 1em solid red; width: 30em; width/**/:/**/ 25em
 More info about Box Model Hack can be found at http://tantek.com/CSS/Examples/boxmodelhack.html

 Text transformation commands in CSS

Many people are unaware of this command. The command can be used to transform all the text into either uppercase, lower case or capitalize (Each word in a text starts with a capital letter)
Usage is:

txttrans
{
text-transform: uppercase
}
This must be included within the <STYLE> tag and you can change “txttrans” name and can use normal or lowercase if u want instead of uppercase
And now to use this just include <div class=”txttrans”> where u want to start the transformation of text within the <BODY> and off course </div> where you wish to end the transformation
Ex:

<body>
<div class=”txttrans”>
This is a test..
</div>
</body>
Note that this will apply to all the text in the page including button text etc.

Create A Hover Image Gallery 

Want to create a web page like this using css ? If you hover mouse in the image with result you find picture zoom in. Absolutely it is the magic of CSS. All you have to do is to paste the following contents within the <STYLE> tag.
Download the Content file

Now to create a image gallery and its preview you have to include this in the <BODY> tag



<ul class=”hoverbox”>
<li>
<a href=”#”><img src=”img/image01.jpg” alt=”description” /><img src=”img/image01.jpg” alt=”description” class=”preview” /></a>
</li>
<li>
<a href=”#”><img src=”img/image02.jpg” alt=”description” /><img src=”img/image02.jpg” alt=”description” class=”preview” /></a>
</li>
</ul>
 In order to add more images you have to follow the same pattern….just change the image location in the img src option. That’s all. Your Hover image gallery is ready.

Note: To apply these CSS effects to your blogger blog, you have to insert CSS code above ]]></b:skin> tag

And That's All. If you have some errors, share with me. I can help you :)

COMMENTS

BLOGGER: 5
Loading...
Hosted by HostGator
Name

Adsense Adsense hacks Advertising Affiliate Marketing Announcement Antivirus Application hacks Applications Backlinks Blog Blogger Blogger Features Blogger Help Blogger Roll Blogger Templates Blogger Widgets Blogging Bluetooth hack Bootable Browsers Business Cell phones Contest Cool tricks CSS Device Download Email Marketing Entertainment Facebook FeedBurner FIFA World CUP Files n Folders Flash Free software Fun with Windows Games Gmail hacks Google Google hacks Google Plus Graphic Hacking tools Hosting How to HTML Info Internet Tips ip address iphone hack Ipod hacks Javascript Keyword Research Make Money Blogging Make money online Mobiles Monetize Nokia hacking Page Rank Password Hacks PC Games PC Hacks Photoshop Promote site Reviews SEO Social Bookmarking Social Media Symbian hack Tips n Tricks Traffic Tutorials USB Virus Web 2.0 Web design Widget Windows Tricks WordPress WordPress Themes
false
ltr
item
Hack Tutors — Blogger Tricks, Blogging and Social Media Tips: Cool CSS Hacks For Blogger/Blogspot
Cool CSS Hacks For Blogger/Blogspot
Hack Tutors — Blogger Tricks, Blogging and Social Media Tips
https://www.hacktutors.info/2009/11/cool-css-hacks-for-bloggerblogspot.html
https://www.hacktutors.info/
https://www.hacktutors.info/
https://www.hacktutors.info/2009/11/cool-css-hacks-for-bloggerblogspot.html
true
7369343002377078183
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy