Installation Twitter @ Anywhere In Comments Box

Comment box is the most effective means of discussion. Or at least, the comments box is one place to simply greet each other and interact. Because the engine bloggers do not have the facility to reply comment, bertegur-greet activities usually done by mimicking Facebook or Twitter. Namely by adding the symbol "At" (@) at the beginning of the name. For example I want to reply to comments hatsadz lamp, then I add the @ hatsadzlamp at the beginning of the sentence. As a sign that the feedback I go to hatsadz lamp. 

Comment box is the most effective means of discussion. Or at least, the comments box is one place to simply greet each other and interact. Because the engine bloggers do not have the facility to reply comment, bertegur-greet activities usually done by mimicking Facebook or Twitter. Namely by adding the symbol "At" (@) at the beginning of the name. For example I want to reply to comments hatsadz lamp, then I add the @ hatsadzlamp at the beginning of the sentence. As a sign that the feedback I go to hatsadz lamp.

For more details, can be seen on the demo page here.

Here are the installation steps Twitter @ Anywhere:

1. Log on @ Anywhere

Previously, you must have a twitter account first. Then visit http://dev.twitter.com/anywhere

2. Submit Application

Fill in all information required. (It is very easy and does not need further explanation)

3. Get the API key.

4. Installation

After learning the API key, it needs to be done is to add the following JavaScript before </ head>

<script src="http://platform.twitter.com/anywhere.js?id=APIKey" type="text/javascript"></script>

  

Replace APIKey with your API Key.

Some features that can be used are:

a. LinkifyUser

The script will change all the content that begins with "at " symbol to link twitter account.

b. Hovercards

Create a link led to a tooltip that contains information about a twitter account.

To do this place the following javascript:

<script>
twttr.anywhere(function(twitter) {
twitter(&quot;.comment-body&quot;).linkifyUsers();
twitter.hovercards();
});
</script>

Replace the letters in red with the appropriate class. If you are using Basic Minima, the comment box has a class. comment-body. If unsure and you want all the content in the body converted into a link then replace it with the body.

Simak

Baca secara fonetik

5. Conclusion

This method is very easy to do and quite effective remedy add interactivity in the comments box. But keep in mind is, if we write the username is wrong then the resulting link becomes irrelevant.

 

Besides the two features above, there are also features like:

• Follobutton
• Tweet Box
• Twitter Connenct

Read More - Installation Twitter @ Anywhere In Comments Box

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)