How To Create Drop Down Menu For Blogger Using Just Css

You Are always try to make your blog Attractive and Imparacive...
Today We learn how to make Drop Down Menu for Blogger To make your blog impresive n attractive....
 This menu uses the more conventional style of a vertical drop down to display links.It has a large bold red on grey color scheme that stands out and looks great.As with the last menu it's built purely from Css using just two images.Below you can see the screenshot and a live demo to see it in action.


Live Demo :-

How To Create Drop Down Menu For Blogger Using Just Css

• First Go To Blogger Darshboard ----> Design -----> Edit HTML

• Mark On Expand Widget Tamplets

• Ctrl + F to find ]]></b:skin>

• Copy and Paste below Code just above/before ]]></b:skin>

/*Start Css Menu*/
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFUlns-JRrvOG1Gbd44-LuoJCOWmsQCbA1RJ87KQg18Eno2EWjkYleakUh5ycNjYZSDh6mwGUGzpWzm_Xo1wb1J40Otwn1lX2aMgy-ecl2PxrR7ayaJ-_BELwsJZC_9MnOVb9CM0S6gx6C/s1600/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #a80329;
border-right:2px solid #a80329;
border-bottom:2px solid #a80329;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd65ofStF6IgYpOV5cc8DjkTQzrsg5dO2TlP8qOfVZjOFjSe2bgyPE7nC1oMuipfu92HlHvummxPi-s4slNUFnnhrWFH7Yepo18q-QbMWCkqsOzu2xF_TM98oUeIcnDkYwSjOa0W2PqDj1/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}

/*End Css Menu from http://www.cutehearthacker.blogspot.com*/

• Save your Template.

That's the Css added next is to add the html for your menu.

Now go to your blogs Design Page, we will be adding the menu across your blog below the header.This area is called Cross Column and can be seen in the image below.

 

• Go to Design----> Page Elements---->Add a Gadget

• Choose HTML/Javascript from the list

• Now Copy And Paste Below Code in It..

<div class="menu">

<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#" >Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="#">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>

• Now Save HTML/Javascript and You Have done....

Continue Reading

How To Change Blogger Background Color & Image | Blogspot | Color Picker | Color Code Generator

If you've followed cutehearthacker.blogspot.com from the first time, you might be know that I have changed a few background color of the template a few times. Yes, it because sometimes I feel bored with that. I think if you just bored like me, you no need to create another blog with the same topic, because you can change background color anytime you want. And recently one of a friend of mine asked me how to change background color blogger. So that I make this post, and I hope this will help you out there who has the similar question.

Step 1. Login to Blogger

Step 2. Dashboard > Design > Edit HTML
Step 3. Don't forget to "Backup full template"

Step 4. (Use CTRL + F) and find this code body{
    It will looks like this

body{
background:#FFFFFF; margin:0;
color:#000000;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size: small; text-align:
center;}

To change background color background:#FFFFFF, you just change the color code. To help you to find and pick up the right color you want,
Just Select Color From below Color code generator..






But if you want to Add Background Image: background: url(LINK);

Repeat the image horizontally (left to right): repeat-x

Repeat the image vertically (top to bottom): repeat-y

No image repeat: no-repeat

Position image to the left or right:
left (for left side)
right (for right side)

Position image to center of screen: center

Fix image on background (to prevent image from moving when scrolling): fixed

Check out the code below as an example:

background: #FFFFFF url(a2.sphotos.ak.fbcdn.net/hphotos-ak-ash4/263943_136752746402556_100002034940997_245578_4260695_n.jpg) repeat-x fixed;

I hope this will help you with your boredness. However, if you still need help or have a question unsolved, please drop them on comment box below, Thank you.

Continue Reading

AWOP Hover Effect Code...

Hover Effect !!!!!!!!!!!!!!
its make ur text or image very impressive..
So Today We will know how to do this using CSS ( Cascading Style Sheet )

1. CSS CODE

<style type="text/css">
a:visited  {color:COLOR; text-decoration: none;}
a:link  {color:COLOR; text-decoration: none;}
a:active  {color: COLOR; text-decoration: underline;}
a:hover   {cursor: crosshair; color: BLUE; text-decoration: underline;}
</style>

DEMO OF ABOVE CODE

GO MOUSE POINTER ON WOP N SEE EFFECT

WOP

Continue Reading

How To Add Floating Share Count button

Adding Floating Social Media share Count Button in BLOGGER

it's latest craze to get share your post. do u ever notice that most of blogs using this floating share count button in blogger. Here included Facebook share, Twitter, Linked In, Digg This and Google +1(plus one) button in floating bar.

See the Demo

Step 1: Login To Blogger Account\

Step 2: Go to Design>>Page Elements

Step 3: Add Gadget>> HTML/JavaScript and paste below code..

<!-- floating page sharers Start -->
<style>
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .Wopbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Get this from cutehearthacker.blogspot.in">
<div class='wopbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='wopbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='wopbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='wopbutton' id='gplusone'>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</a></div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://cutehearthacker.blogspot.com/2011/08/how-to-add-floating-share-count-button.html">Get this</a></div>
</div>
<!-- floating page sharers End -->

Continue Reading

How To Change Text Area Style in Blogger

Hey, Blogger User
Are You Boring With old text area???
Now, decorate Text Area with new style using CSS (Cascading Style Sheet)

DEMO FOR TEXTAREA

A World Of Possibilities
My Self Mayur Sojitra known as Heart Hacker. The founder of A World Of Possibilities (WOP). I'm a freelance writer on topics related to Website Optimization (SEO), blogger customizations, making money online, Hacking Tricks, Computer, Facebook, Twitter Tricks, Tips and Tutorial. I'm blogging since 2009 and I'm currently a guest blogger on Blogging With Success.

Follow me on TWITTER

Find Us On FACEBOOK

Join Us On ORKUT


 Thanx For Visit..

Let's Start Tutorial

Step 1: Login To Blogger Account..

Step 2: Go To Design>Edit Html

Step 3: Press Ctrl + F to find this Content </style>
            And then Download this CSS Code and put this Before </style>

CSS

Step 4: You Can use like this in your blogger post
             <div class='wop'>your text here</div>

Note: your text here in this content u can edit your text..

Continue Reading

Create Pure CSS 3D Ribbon

Since I always insists using CSS3 instead of images, here is a good example of CSS usage to create a 3D ribbon. Remember this is pure CSS, there is no image used in this to achieve it. I thank James Koster for making this happen and I hope to see even more CSS tuts from him. So lets have a look at his CSS 3D ribbon and how to create it.

James has used a single level element containing a child element with the class.

<p class="ribbon">
    <strong class="ribbon-content">Everybody loves ribbons</strong>
</p>

 In order to achieve it using CSS, he has used before and after pseudo codes and good use of border properties

.ribbon {
font-size: 16px !important;
/* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */

position: relative;
background: #ba89b6;
color: #fff;
text-align: center;
padding: 1em 2em; /* Adjust to suit */
margin: 0 0 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
content: "";
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #986794;
z-index: -1;
}
.ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
}
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #804f7c transparent transparent transparent;
bottom: -1em;
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}

If your using the ribbon inside another element, add this CSS

position: relative;
z-index: 1;

DEMO: http://jameskoster.co.uk/blog/pure-css-3d-ribbon/

Continue Reading