Tampilkan postingan dengan label twitter. Tampilkan semua postingan
Tampilkan postingan dengan label twitter. Tampilkan semua postingan

Senin, 14 Januari 2013

How To Add Floating Twitter Recent Tweets Widget

In the last Tutorial, i tried to show you that how to add Twitter Floating Fan Box Widget which basically was Twitter Fan Box. You can see that Tutorial here. In this Tutorial, i show you HOW TO ADD FLOATING TWITTER RECENT TWEETS Widget in Wordpress & Blogger. This Twitter Fan Box Is Similar To Facebook Like Box. This is Floating Twitter Recent Tweets Widget For WordPress & Blogger. When you move cursor on it, It pop out with Recent Tweets.



Adding Recent Tweets To Wordpess:
1. Go to Dashboard > Appearance > Widgets > Available Widgets.
2. Drag Text widget into a sidebar.
3. Paste in the code.
4. Save.


Adding Recent Tweets To Blogger:
1. Go to Dashboard > Design > Page Elements.
2. Click Add A Gadget. In window, select HTML/Javascript .
3. Copy the code below and paste it inside the box.
4. Click Save button.


<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#twitter_div{width:246px;height:353px;overflow:hidden;}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px;}#knfeedburner_div{width:300px;height:97px;margin-top:25px;overflow:hidden;}#kakinetwork_div{width:300px;height:97px;overflow:hidden;}

#twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px;}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0;}

#kakinetwork_right{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_right img{position:absolute;top:-2px;left:-101px;}/* left side style */#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}#twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px;}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0;}
#kakinetwork_left{z-index:10003;border:2px solid #303030;background-
color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_left img{position:absolute;top:-2px;right:-101px;}

</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script>

<div id="on"><div id="twitter_right" style="top: 20%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB3ck9Rq5xt-MxWZ-Lvh7ccPkb0d1eSSgRnw1sEyQl1KKOhtdd92tbrt-iVTHTq6H82uu9iy0Ya7hMBGeepzxszjny0otmnDf7YMRmKtAwkWdsBYQtOUWysSgT0nq-713gO_gt48CwmIg/s320/allbloggingtips.com-twitter-icon.png" /><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 260,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('crackmodo').start();</script></div></div></div>

</div>

Replace the crackmodo with your twitter username.

You are done! That's it.




    Diposting oleh di Tidak ada komentar:
    Label: , , , , ,

    How To Add Twitter Floating Widget

    This article contains some simple codes and steps which you have to follow in order to get Twitter Floating Widget. Do you want Twitter floating (Bird With Tree) widget? yes. then follow the following simple 3 steps and get your own Twitter floating widget on a left side of your blog.


    Like us on Facebook and Follow us on Twitter.

    Step 1. Go to Blogger Dashboard > Design > Page Layout.
    Step 2. Choose Add A Gadget > HTML/Javascript.
    Step 3. Paste below code and save it.


    <div style="position: fixed; bottom: 20%; right: 0%;"><a href="http://twitter.com/crackmodo" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4N5v4PNXYNvJYeWrUPlGj67ksMH7FW12YoQIASlKTgEouedM-CAK5-EGkj8lfnPlGKl_2yOOi3xhgCYhqKKlCNPWWywf7LiFqjy67ZZMbeSkkxdsjO6reqHbqpEZNyNF3g8hY1L4nIZ4/s1600/btsnts-twitter-float.png"></a></div>


    Now replace crackmodo with your twitter username and save it.

    That's it. You are done.




      Diposting oleh di Tidak ada komentar:
      Label: , , , , ,
      Langganan: Postingan (Atom)