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 :

<body></pre>
<div class="<span class=">TweetContainer"></div>
<pre>
        		<div class="Tweet">
        			<span class="TweetAuthor">
        				<p><strong>JamesBond007</strong>:-</p>
        			</span>
        			<span class="TweetText">
        				I am #Bond, #James Bond ! @JamesBond007
        			</span>
        		</div></pre>
<div class="<span class=">TweetActions"></div>
<pre>

        			<em>Favorite</em>&nbsp;
        			&perp;
        			<em>Retweet</em>&nbsp;
        		</div>
        	</div>
</body>

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

<style>
                	.TweetContainer
                	{
                		margin: 15 auto;
                		width: 500px;
                		height: 70px;
                		background: #C7EEFE;
                		padding: 30px;
                		border-radius: 15px;
                		font-family:  Arial,sans-serif
                		border-color: #B7EEFE;
                		border-width:medium;
                	}
                	.TweetActions
                	{
                		position: relative;
                		left: 300px;
                		cursor: pointer
                	}
</style>

And now comes the jQuery Code

                <script>
                        $(document).ready(function(){
                        	//Hide the Favorite and Retweet Buttons
                        	$('.TweetContainer').find('.TweetActions').hide();
                        	//Trigger the Mouse over action
                        	$('.TweetContainer').mouseenter(function(){
                        		/*
                        		 * Show the Retweet and Favorite buttons for the Current
                        		 * Tweet
                        		*/
                        		$(this).find('.TweetActions').show();
                        		//Highlight the Current Tweet by changing the background Color
                        		$(this).css({
                        			'background':'#C7FFFE',
                        		});
                        	});

                        	//Trigger the mouse leave action
                        	$('.TweetContainer').mouseleave(function(){
                        		/*
                        		 * Hide the Retweet and Favorite buttons for the Current
                        		 * Tweet
                        		 */
                        		$(this).find('.TweetActions').hide();
                        		//Change the background color of the Current Tweet to normal
                        		$(this).css({
                        			'background':'#C7EEFE',
                        		});
                        	});
                        });
                </script>

Putting it all together we get

Live DEMO

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.