Creating "Bubble Tool Tips" 100% CSS

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>

Read More - Creating "Bubble Tool Tips" 100% CSS

Thumbnail Related Posts with Marquee (Walking)

For those of you who already use or want to use thumbnails Related Posts (related article illustrated), would be more interested in using it, karen looks quite interesting with the picture, but there are some shortcomings of the tools that this one, which takes a lot of places on the blog page. Therefore, most blogs that I visit minimize the amount of the related post, especially with the narrow size of the post pages. Therefore to make this the marquee with the alternative (walking).

Well, for example thumbnails Related Posts Marquee method can be my friend see here.

In the previous post already described how to create thumbnails Related Posts +, my friend can apply in advance tutorial Thumbnails Related Postsnya here, but just enough to apply the Code CSSnya (script code first reply)To create these thumbnails Related Posts to be displayed with the number of lots that is by Marquee method, there are little changes that will be performed on a second script code.

Well, to get started:

1. Please see how to create thumbnails related posts here (Simply apply only code CSSnya / code first)

2. After my friend apply the first point above, now please find this code:

 <div class='post-footer-line post-footer-line-1'>

 or

<p class='post-footer-line post-footer-line-1'>

3. If you've met one of the code above, place the following code after one of the code above:

<!-- Marquee Serbablog Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://serba-seru.blogspot.com/2010/02/thumbnail-related-posting-with-marquee.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

- To show the number of posts, man can change the code red- To change the title, man can change the code blue

- To change the title, man can change the code blue

4. Save and see the results

Read More - Thumbnail Related Posts with Marquee (Walking)