Showing posts with label Css. Show all posts

Home > Posts filed under Css

Displaying Images Transparent, mouseover Effect

Tuesday, May 17, 2011

This means what? ok, than my colleagues try jelasin lengthy preview samplenya in zoomtemplate.com, if already try now point to the picture page of posts there .. nah colleagues will see the effect where the original image will be dim light or it could be vice versa from dim to bright when it passed the mouse. Perhaps the meaning is clear enough, yes, immediately wrote to the next.

How it works transparently above the image effect is not so difficult, we need only use the CSS Image Opacity property. But before you should also know the CSS opacity property was not included in the standard CSS, which this property only works well on some modern web browsers only.

Code mouseover effect from dim to brighter (set directly in the picture)

Code mouseover effects from bright to dim (set directly in the picture)

Maybe a bit too complicated if each image must be set one by one the value of his property, now co-direct for each post having an effect this automatically, can simply add this CSS code:

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}

.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

To my knowledge Firefox usually uses the property opacity: x for doing tranparancy, unlike IE which uses a filter: alpha (opacity = x). In Firefox opacity: x value of x can be filled with values between 0.0 -1.0, while the IE filter: alpha (opacity = x) the value of x between 000-100.

How To Add Below Header Element

Monday, May 16, 2011

Adding an element in a template may be done, IIA goal may be to add the gadget in the template. Way added element-rich pages so easy koq,,, Please follow the tutorial How to Add Header Elements Under the following to add the element below the header.

1.LOGIN to Blogger

2.Klick "Layout" then click "Edit HTML"

3. Find this code ]]></b:skin> Then copy the following code and paste the above code you.

#under_header{
margin:10px 0;
padding:1%;
width:98%;
}

4. Next look for the code that is similar to a rich code below.

5. Then copy and peste following code just below the above code.

6. Then click "Save Template" and after the stored click "Layout" Kemudain see the results. there is a new element under the header of your blog ...

Make Highlighting Current Page or Current Menu on Blogger

Saturday, May 07, 2011

Highlighting Current Page or Current Menu is usually interpreted as a marker for the current active page when the user is in a particular page, say in the pages Home, About, Help us and Contact. On Blogger itself was actually only recently been planted this feature if we are to enable a feature to page (Page). But for some reason most bloggers including myself are not so interested in using.

What makes I'm interested to discuss this Page Current function because almost all the templates that I provide on this site is embedded feature to display the navigation menu, unfortunately, yes it was, the menu should be good even as simply as a decoration substitute for links only, and mostly just look beautiful when users mouse over (mouse hover) but has no marker features that the menu should look actively participating in the page that are also active.

As an example please see the demo colleagues on this site.

There we can see when colleagues are in the area of the page HOME, HOME menu link is also seen to participate actively. Neither time colleague's how the FAQ page and a few other menu that looks also participate actively.

Let it easier to learn please Download Demo Menu examples I've designed here.

OK directly to the tutorial course yes. Oh yes, the example below the menu are not the same as sample menus on this site, but colleagues can edit the menu as needed. Frankly I trouble to explain it, because almost every code CSS Menu has a unique design and berbeda.Tapi with this example I'm sure colleagues at least have little idea how to Aktive Curren Page / Current menu is working.

1. Please immediately go to the Edit HTML page

2. Put the CSS code below just above the code ]]></b:skin>

#nav ul {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7-bXXHNioDfKFe6zcz4SKIne7Cmy65Nd663wvd6j8CQPhp6-YZVm3oyzcb5NJEgrQ1Sm5lcI7Yhg_5wvQNyvBp9330a5C4tDRDK4nKp3Ec46eVseTGfjCe40NaRm6t2zyo580lhuFhFSb/s400/backgr.jpg) repeat-x left top;
margin:0;
border-bottom:3px solid #98CB00;
border-top:1px solid #00CCFF;
list-style-type:none;
height:31px;
}
#nav li {
float:left;
}
#nav li a {
display:block;
padding:5px 15px 4px;
font:bold 16px "Trebuchet MS";
font-stretch:condensed;
text-decoration:none;
color:#00CCFF;
letter-spacing: -0.1em;
}
#nav li a:hover {
color:#98CB00;
}
#nav li.current {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioNc-9ppsAY-onqug1EePui9Ai8vu7y9kSkPNIJfJTQ5ylJGRxmQzEJ3WFOHu93x_qDF20_3AUiVxyX3FKb-gcFCHxloh9V-mq8srbTMaIk6smG7rlw-5304mVgttgcJs1LKdfrcaaniGZ/s400/current.gi) no-repeat center bottom;
color:#98CB00;
}

2. Put the JavaScript code below just above the code </head>

3. Then please find the following code in the line of code in Edit HTML page

Then put the following code right above the code above.

<div id='nav'>
<ul>
<li><a href='/'>HOME</a></li>
<li><a href='#'>FAQ'S</a></li>
<li><a href='#'>HELP US</a></li>
<li><a href='#'>CONTACT</a></li>
</ul>
<script language='javascript'>setPage()</script>
</div>

Current Stock for Page / Menu to work, colleagues must replace the # above with an active post the url address.

To create and edit the menu display is much more beautiful than the example above menu colleagues should inevitably have much to learn HTML coding, CSS and Javascript.

Creating "Bubble Tool Tips" 100% CSS

Sunday, April 03, 2011

Bubble Tool Tips are very useful to provide information about a link (could link refferal so many people that follow). When moved over the link (hover) it will automatically bubble tool tips will come out with all the information that is written. Usually to make a balloon tip is some people call him with javascript that would overload the blog with a very large size. Well this is the trick that uses pure CSS as the calling code. To see a live preview please just click this link.

Application of this trick use CSS, and this is it code:

/*---------- balon tips -----------*/
a.bt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}

a.bt span{ display: none; }

/*background:; ie hack, need to change something to display in IE*/
a.bt:hover{ z-index:25; color: #aaaaff; background:;}

a.bt:hover span.balontips{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}

a.bt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJfvDRGqdrNlV_VIqn6DjKr3PxK5YJeEL45oAS1OEzWiUASGypkLdrHsrsuV-jlQHysr__aq6CIKiCUQ9tJk5wDcjDw-NTHjGX4r5NOIXj3sJG6KUzHtIE0GCUlokqG3P78pxTwlDGLac/) no-repeat top;
}

a.bt:hover span.middle{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-5Nj0pbztQ_ux0EPlKbrcIErQwz55QyEc2x8-2srU5tQUSMOEzmP_iUWR24Q-YJeV5MN-r-BsNOEtFuEQzOTPKoV1lnzmErYm6ba3l_xzyDVbHe5BFWMTdKD1C-qOzQiOOOgHT9mRquQ/) repeat bottom;
}

a.bt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJfvDRGqdrNlV_VIqn6DjKr3PxK5YJeEL45oAS1OEzWiUASGypkLdrHsrsuV-jlQHysr__aq6CIKiCUQ9tJk5wDcjDw-NTHjGX4r5NOIXj3sJG6KUzHtIE0GCUlokqG3P78pxTwlDGLac/) no-repeat bottom;
}

/*---------- Balloon tips ----------- END * /

To use:

1. The link you've made in the declaration of class = "bt".

The links in HTML code looks like this <a href="http://dindingcoret.com"></a> Once given the declaration would be like this: <a class="bt" href="http://dindingcoret.com"></a>

2. Declare balontips. Call and write your code balontips <span="balontips"> . Enter the code between the links.

3. Call the image above by typing <span="top"> . Enter the code between "balontips".

4. Call center image by typing <span="center"> . Enter the code between "balontips" under the code "above". This is the place to write comments pal pal.

5. Call the image below by typing <span="bottom"> . Enter the code between "balontips" under the code "middle".

Examples of writing code can be found here:

<a class="bt" href="YOUR URL">
words up to you ...
<span class="balontips">
<span class="top">
</span>
<span class="center">
Place pal write info about the link and it will come out as a form of balloons
</span>
<span class="bottom">
</span>
</span>
</a>

How to Create Simple Floating Ads with Close Button

Maybe fellow bloggers have seen this tutorial, I have indeed Setau more complicated to use a lot of code, but here I try to give tips that are easier and very simple even for those of you bloggers who are new to coding could do it, ok i "Alfa" will immediately provide tutor, ya just follow steps:

   1. Login Go to Blogger.com to your account each Surely
   2. Go to the Layout Tab
   3. Choose a Page Element
   4. Add a gadget Select the HTML / JAVASCRIPT
   5. And Copy the code below into it

<a onblur="try {parent.
deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjboRbYREv3kgw-SuZRTkzOe4U2w4AiVX8vlADO3KBtoPvuRfu2FW1JHFFbn_k6iTTxBj1x_9UXmgBzsAzac5Pwu9hjdLa8KLT_ur80MFxqvgwR4ceety1hBxua3g0ZCh2ewpZCC6gPNc/s1600-h/Widget.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjboRbYREv3kgw-SuZRTkzOe4U2w4AiVX8vlADO3KBtoPvuRfu2FW1JHFFbn_k6iTTxBj1x_9UXmgBzsAzac5Pwu9hjdLa8KLT_ur80MFxqvgwR4ceety1hBxua3g0ZCh2ewpZCC6gPNc/s400/Widget.JPG" alt="" id="BLOGGER_PHOTO_ID_5433478876639914642" border="0" /></a>

<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>

Enter the code in image that you want here

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>

6. Save

How to set up a tooltip with javascript

Let this tutorial to make you curious, you try your mouse over the text below. How to set up a tooltip with javascript When you point the mouse in the text above for a while, then you will see a display box containing a description that describes the contents of the text. Box that appears is called tooltips. Then how do I create a tooltip like the above? For that follow this tutorial to complete.

To create a tooltip above we need the javascript code. For script code you can see in the box below.

Code above the script and style before you put it hosted. If you use blogger, then you can use javascript like the suggestion to put on a post in blogger javascript hosting solutions. for code style can be combined with a blog style code above .

After the javascript code and style has been placed correctly, we then we put the tooltip code in place that we want. For example we want to put a tooltip on the referral link. That would make the reader more interested in joining our referral. For example we want to put a tooltip on How to set tooltip text with javascript. So the result becomes as follows. The code that we put on a link:

onmouseover="ddrivetip('tutorial how to put a tooltip that make the text more interesting.', 240)" onmouseout="hideddrivetip()"

description: red = text that you want appears in the tooltip Blue = width of the box as a whole we want to be like the following code.

onmouseover="ddrivetip('tutorial how to put a tooltip that make the text more interesting.', 240)" onmouseout="hideddrivetip()" href="http://www.hatsadz-lamp.tk/2010/02/how-to-put-a-tooltip-by-javascript.html" target="_blank">How to install a tooltip with javascript

so that code can we put on the refferal link, banner or other. to change the background color of the box can be done through css style above.