How to Create a Twitter Like Retweet Links

Twitter is one of the most visited social networking sites , and one of the factors in their success is the intuitiveness of  the user interface .

In this tutorial We are going to learn how to create a twitter like mouse over effect for retweet , favorite links

Twitter mouse over effect

To achieve this effect we are going to be using HTML, CSS and jQuery .

First the HTML :

<div class="<span class=">TweetContainer"></div>
        		<div class="Tweet">
        			<span class="TweetAuthor">
        			<span class="TweetText">
        				I am #Bond, #James Bond ! @JamesBond007
<div class="<span class=">TweetActions"></div>


We create a Container DIV and 2 separate DIVs one for the Tweet and another for the TweetActions. The actual Tweet content is put inside the Tweet DIV and TweetActions contains Favorite and ReTweet .

Next The Styling

                		margin: 15 auto;
                		width: 500px;
                		height: 70px;
                		background: #C7EEFE;
                		padding: 30px;
                		border-radius: 15px;
                		font-family:  Arial,sans-serif
                		border-color: #B7EEFE;
                		position: relative;
                		left: 300px;
                		cursor: pointer

And now comes the jQuery Code

                        	//Hide the Favorite and Retweet Buttons
                        	//Trigger the Mouse over action
                        		 * Show the Retweet and Favorite buttons for the Current
                        		 * Tweet
                        		//Highlight the Current Tweet by changing the background Color

                        	//Trigger the mouse leave action
                        		 * Hide the Retweet and Favorite buttons for the Current
                        		 * Tweet
                        		//Change the background color of the Current Tweet to normal

Putting it all together we get


To get the full Source code just save the Demo Page as html and open it with a text editor .

As always comments and Suggestions are welcome .
Please Post your comments below


How to be a successful troll on web Via: Hindustan Times

Online Trolls , love them , despise them ,hate them , ban them , but somehow they still are here to stay .

Everyone from Famous celebs to ordinary bloggers  can come into contact with trolls , So how do you cope with trolls ?

Or are you a troll your self  ? Post your comments .

Here is an article about Trolls on the web .

Ps: Read the part called  “Toxic tweets”

Here is my favorite :

@ Abhishek Bachchan, Actor
And that was the last 100 bucks I spent on any movie starring this joker. Period

Via :How to be a successful troll on web – Hindustan Times.