Tuesday, December 4, 2012

How to Make Full CSS3 Animated Show Hidden Content onmouseover In Blog

              How to Make Full CSS3 Animated Show Hidden Content onmouseover In Blog

 
How to Make Full CSS3 Animated Show Hidden Content onmouseover In Blog - This time I will share tips and tricks about the world of bloggers, ie How to Make Full CSS3 Animated Show Hidden Content onmouseover In Blog. Tips and tricks will be useful to embellish and beautify the appearance of your blog.

 
Full function of CSS3 Animated Show Hidden Content onmouseover if mouse is a computer, laptop or netbook pal touch or CSS3 is directed to its blog, It will show hidden effect (open and closed) as a drop down menu. But more interesting again inside my friend can put the link as a menu that moves or images or photos with effects and rotating text or text.




 
If my friend interested in creating and installing Full CSS3 Animated Show Hidden Content onmouseover on your blog, It is very easy. Since all the code stayed in place and are stored in your blog template. Then xHTML it can be used on the post or on the blog widget. Please buddy follow the following steps below:And as an example, my friend can see an example in the RIGHT SIDEBAR OF THIS BLOG.
1. Please buddy >> Login / entry >> to Blog pal.
2. On the "Dasboard" Display new blogger, buddy select menu >> Template >> Edit HTML >> Continue.
3. Do not forget my friend "Check" >> Expand Widget Templates.
4. Then my friend find this code]]> </ b: skin> (Use CTRL + F to facilitate the search).
5. After the meet, Put the following CSS code just before or above the code]]> </ b: skin>
. BgsGR_onmos {
      
height: 32px;
      
width: 300px;
      
border: 2px solid # 666666;
      
background: # cccccc;
      
border-radius: 12px;
      
-Moz-border-radius: 12px;
      
-Webkit-border-radius: 12px;
      
-O-transition: all 1s ease-in-out;
      
-Moz-transition: all 1s ease-in-out;
      
-Webkit-transition: all 1s ease-in-out;
      
padding: 5px 5px;
      
margin: 15px auto;
      
font: 11px Arial;
      
color: # 003366;
      
overflow: hidden;
      
box-shadow: 0 1px 8px # 000;
      
-Moz-box-shadow: 0 1px 8px # 000;
      
-Webkit-box-shadow: 0 1px 8px # 000;
      
}. BgsGR_onmos: hover {
      
min-height: 250px;
      
border: 2px solid # 333333;
      
background: # 111;
      
box-shadow: 0 1px 15px # 000;
      
-Moz-box-shadow: 0 1px 15px # 000;
      
-Webkit-box-shadow: 0 1px 15px # 000;
      
color: # 000; text-shadow: 0 1px 1px # 888;
      
}. BgsGR_onmos h3,. Jerohan h3 {
      
font-size: 14px;
      
font-family: Droid Serif;
      
font-weight: bold;
      
color: # 000;
      
text-align: center;
      
text-shadow: 0px 1px 1px # fff; margin: 3px 5px;
      
padding: 3px 10px;
      
background: # bbb;
      
border-radius: 5px;
      
-Moz-border-radius: 5px;
      
-Webkit-border-radius: 5px;
      
border: 1px solid # 999;
      
-O-transition: all 1s ease-in-out;
      
-Moz-transition: all 1s ease-in-out;
      
-Webkit-transition: all 1s ease-in-out;
      
}. BgsGR_onmos h3: hover {
      
box-shadow: 0 1px 8px # 000;
      
-Moz-box-shadow: 0 1px 8px # 000;
      
-Webkit-box-shadow: 0 1px 8px # 000;
      
}. BgsGR_onmos img.mini,. BgsGR_onmos img.minianima {
      
width: 70px;
      
border: 4px solid # 666;
      
padding: 3px;
      
border-radius: 6px;
      
-Moz-border-radius: 6px;
      
-Webkit-border-radius: 6px;
      
float: left; margin: 0 10px 5px 0;
      
background: # 222;
      
-O-transition: all 1.5s;
      
-Moz-transition: all 1.5s;
      
-Webkit-transition: all 1.5s;
      
}. BgsGR_onmos img.mini: hover,. BgsGR_onmos img.minianima: hover {
      
box-shadow: 1px 1px 15px # 000;
      
-Moz-box-shadow: 1px 1px 15px # 000;
      
-Webkit-box-shadow: 1px 1px 15px # 000;
      
border: 4px solid # cccccc;
      
background: # 666;
      
-O-transform: scale (1.4);
      
-Moz-transform: scale (1.4);
      
-Webkit-transform: scale (1.4);
      
margin-top: 20px;
      
margin-left: 15px;
      
}. BgsGR_onmos img.minianima: hover {
      
-O-transform: scale (1.4) rotate (360deg) translate (0px);
      
-Moz-transform: scale (1.4) rotate (360deg) translate (0px);
      
-Webkit-transform: scale (1.4) rotate (360deg) translate (0px);
      
}. Jerohan {
      
margin-top: 15px;
      
height: 200px;
      
overflow: auto;
      
padding: 0 5px;
      
-O-transition: all 1s ease-in-out;
      
-Moz-transition: all 1s ease-in-out;
      
-Webkit-transition: all 1s ease-in-out; background: # CFE7E9;
      
}. Jerohan: hover {
      
background: # 333;
      
color: # eee;
      
text-shadow: 0 1px # fe0303 0px;
      
}. Jerohan h3 {
      
margin: 20px 0;
      
max-width: 204px;
      
background: # 66CCFF;
      
box-shadow: 0 1px 12px # eee;
      
-Moz-box-shadow: 0 1px 12px # eee;
      
-Webkit-box-shadow: 0 1px 12px # eee;
      
}. Jerohan h3: hover {
      
background: # 888;
      
border: 1px solid # 666;
      
box-shadow: 0 1px 12px # fff;
      
-Moz-box-shadow: 0 1px 12px # fff;
      
-Webkit-box-shadow: 0 1px 12px # fff;
      
}. Jerohan ul {
      
padding: 0;
      
margin: 0;
      
list-style: none;
      
}. Jerohan li {
      
padding: 0;
      
margin: 0;
      
list-style: none;
      
border-bottom: 1px dotted # 777;
      
}. Jerohan li a {
      
color: # 03d8fe;
      
padding: 0;
      
margin: 0;
      
text-decoration: none;
      
font-size: 12px;
      
-O-transition: all 1.5s;
      
-Moz-transition: all 1.5s;
      
-Webkit-transition: all 1.5s;
      
}. Jerohan li a: hover {
      
-O-transform: scale (1.1);
      
-Moz-transform: scale (1.1);
      
-Webkit-transform: scale (1.1);
      
color: red;
      
text-shadow: 0 1px 1px # 000;
      
margin-left: 20px;
      
}
6. Then my friend put it again the following CSS code right after or under the code]]> </ b: skin><- [If IE]><style type="text/css">. BgsGR_onmos {height: 30px;}. BgsGR_onmos h3,. Jerohan h3 {font-size: 13px;}</ Style><! [Endif] ->
Note:

    
Examples of its application of CSS code that will appear looks exactly like this:
. BgsGR_onmos {
      
height: 32px;
      
width: 300px;
      
border: 2px solid # 666666;
      
background: # cccccc;
      
border-radius: 12px;
      
-Moz-border-radius: 12px;
      
-Webkit-border-radius: 12px;
      
-O-transition: all 1s ease-in-out;
      
-Moz-transition: all 1s ease-in-out;
      
-Webkit-transition: all 1s ease-in-out;
      
padding: 5px 5px;
      
margin: 15px auto;
      
font: 11px Arial;
      
color: # 003366;
      
overflow: hidden;
      
box-shadow: 0 1px 8px # 000;
      
-Moz-box-shadow: 0 1px 8px # 000;
      
-Webkit-box-shadow: 0 1px 8px # 000;
      
}. BgsGR_onmos: hover {
      
min-height: 250px;
      
border: 2px solid # 333333;
      
background: # 111;
      
box-shadow: 0 1px 15px # 000;
      
-Moz-box-shadow: 0 1px 15px # 000;
      
-Webkit-box-shadow: 0 1px 15px # 000;
      
color: # 000; text-shadow: 0 1px 1px # 888;
      
}. BgsGR_onmos h3,. Jerohan h3 {
      
font-size: 14px;
      
font-family: Droid Serif;
      
font-weight: bold;
      
color: # 000;
      
text-align: center;
      
text-shadow: 0px 1px 1px # fff; margin: 3px 5px;
      
padding: 3px 10px;
      
background: # bbb;
      
border-radius: 5px;
      
-Moz-border-radius: 5px;
      
-Webkit-border-radius: 5px;
      
border: 1px solid # 999;
      
-O-transition: all 1s ease-in-out;
      
-Moz-transition: all 1s ease-in-out;
      
-Webkit-transition: all 1s ease-in-out;
      
}. BgsGR_onmos h3: hover {
      
box-shadow: 0 1px 8px # 000;
      
-Moz-box-shadow: 0 1px 8px # 000;
      
-Webkit-box-shadow: 0 1px 8px # 000;
      
}. BgsGR_onmos img.mini,. BgsGR_onmos img.minianima {
      
width: 70px;
      
border: 4px solid # 666;
      
padding: 3px;
      
border-radius: 6px;
      
-Moz-border-radius: 6px;
      
-Webkit-border-radius: 6px;
      
float: left; margin: 0 10px 5px 0;
      
background: # 222;
      
-O-transition: all 1.5s;
      
-Moz-transition: all 1.5s;
      
-Webkit-transition: all 1.5s;
      
}. BgsGR_onmos img.mini: hover,. BgsGR_onmos img.minianima: hover {
      
box-shadow: 1px 1px 15px # 000;
      
-Moz-box-shadow: 1px 1px 15px # 000;
      
-Webkit-box-shadow: 1px 1px 15px # 000;
      
border: 4px solid # cccccc;
      
background: # 666;
      
-O-transform: scale (1.4);
      
-Moz-transform: scale (1.4);
      
-Webkit-transform: scale (1.4);
      
margin-top: 20px;
      
margin-left: 15px;
      
}. BgsGR_onmos img.minianima: hover {
      
-O-transform: scale (1.4) rotate (360deg) translate (0px);
      
-Moz-transform: scale (1.4) rotate (360deg) translate (0px);
      
-Webkit-transform: scale (1.4) rotate (360deg) translate (0px);
      
}. Jerohan {
      
margin-top: 15px;
      
height: 200px;
      
overflow: auto;
      
padding: 0 5px;
      
-O-transition: all 1s ease-in-out;
      
-Moz-transition: all 1s ease-in-out;
      
-Webkit-transition: all 1s ease-in-out; background: # CFE7E9;
      
}. Jerohan: hover {
      
background: # 333;
      
color: # eee;
      
text-shadow: 0 1px # fe0303 0px;
      
}. Jerohan h3 {
      
margin: 20px 0;
      
max-width: 204px;
      
background: # 66CCFF;
      
box-shadow: 0 1px 12px # eee;
      
-Moz-box-shadow: 0 1px 12px # eee;
      
-Webkit-box-shadow: 0 1px 12px # eee;
      
}. Jerohan h3: hover {
      
background: # 888;
      
border: 1px solid # 666;
      
box-shadow: 0 1px 12px # fff;
      
-Moz-box-shadow: 0 1px 12px # fff;
      
-Webkit-box-shadow: 0 1px 12px # fff;
      
}. Jerohan ul {
      
padding: 0;
      
margin: 0;
      
list-style: none;
      
}. Jerohan li {
      
padding: 0;
      
margin: 0;
      
list-style: none;
      
border-bottom: 1px dotted # 777;
      
}. Jerohan li a {
      
color: # 03d8fe;
      
padding: 0;
      
margin: 0;
      
text-decoration: none;
      
font-size: 12px;
      
-O-transition: all 1.5s;
      
-Moz-transition: all 1.5s;
      
-Webkit-transition: all 1.5s;
      
}. Jerohan li a: hover {
      
-O-transform: scale (1.1);
      
-Moz-transform: scale (1.1);
      
-Webkit-transform: scale (1.1);
      
color: red;
      
text-shadow: 0 1px 1px # 000;
      
margin-left: 20px;
      
}
]]> </ B: skin>
<- [If IE]><style type="text/css">. BgsGR_onmos {height: 30px;}. BgsGR_onmos h3,. Jerohan h3 {font-size: 13px;}</ Style><! [Endif] ->

    
width: 300px; is the Full Width CSS3 Animated Show Hidden Content onmouseover In Blog pal, Please change the value in order to match your template.

    
For other arrangements, please edit your mate and yourself liking berexsperimen pal.
7. Once thats enough and finished editing the code, do not forget my friend click >> Preview or Preview, In order to prevent errors when the Edit HTML. If no error occurs, please buddy click >> Save or Save Template.
8. Now it's time buddy go to the next step, ie the way in order to appear on the blog.Please enter the code all XHTML buddy Animated Show Hidden Content below:<div class="bgsGR_onmos"><h3>CSS3 Show Hidden Content </ h3><div class="jerohan"><h3>Recent Posts </ h3><ul><li> <a href="Link-Blog-Sobat"> Title Link Buddy </ a> </ li><li> <a href="Link-Blog-Sobat"> Title Link Buddy </ a> </ li><li> <a href="Link-Blog-Sobat"> Title Link Buddy </ a> </ li></ Ul><h3>No Image and Script </ h3><Img class = "minianima" /> Write Text Buddy is Here. </ Div></ Div><div class="bgsGR_onmos"><h3>OPEN MY WORLD </ h3><div class="jerohan"><h3> LABEL </ h3><ul><li> <a href="http://kuc0pas.blogspot.com/"> Tutorial Blog </ a> </ li><li> <a href="http://kuc0pas.blogspot.com/"> Tricks Blog </ a> </ li><li> <a href="http://kuc0pas.blogspot.com/"> Tips Blog </ a> </ li></ Ul><h3>GHOSTS </ h3><Img class = "minianima" /> Look at me ...I will haunt your nights ...hihihihihi ... </ div></ Div>

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit

Artikel Terkait How to Make Full CSS3 Animated Show Hidden Content onmouseover In Blog

0 komentar:

SKRIPSI LENGKAP

LABEL

HOPE YOU HAPPY

Terima kasih sudah berkunjung....Jika ada yang belum jelas, Silahkan hubungi saya di alamat E-mail : wiratrick@gmail.com

Get this widget!

  © Blogger templates The Professional Template by Top Education, Skripsi Terbaru , Artikel Bahasa Inggris 2013

Back to TOP