5:00 PM ,
Floating Twitter Feed Widget Hello Friends, Its Shivansh Verma, New Contributor of SoftsYard. We all Know, how much social traffic is important for you and for your Blogs/Websites. Their are some popular social Sites that help you to get social traffic. To populate your blog, Social Traffic is Must. So Today, I am Publishing Here a New Twitter Feed widget which is eye-catching, and does not take much space of your blog because it stick on your blog's scroll bar (as shown in Image). So, Let's start the concept!

Add this Widget in Blogger Blog

Steps are Following

  • Go to Blogger Dashboard-> Layout-> Add a Gadget-> HTML/JavaScript
  • Now just leave title box empty and navigate to Content Box
  • Copy Below code and Paste it on Content box
<style>
img,a {border:0;}
#on {visibility:visible;}
#off {visibility:hidden;}
#twitter_div {
width:246px;
height:353px;
overflow:hidden;
margin:1px 0 0 0px;
}
#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;
}
#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;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>
<script src="http://yourjavascript.com/1579515265/0b-1mqjd2tc8qdec3vghld2xswe0.js" type="text/javascript"></script>
<br />
<div id="on">
<div id="twitter_right" style="top: 20%;">
<div id="twitter_div">
<a href='http://www.placeforcompinfo.com/' rel='dofollow'/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdg4EL6q_bLCpKJLR8hGTZyxUGj0VogUvsmwf1n6CzmLIQ5cnAyevnh4spU8kWmu913mJjP-OOlrzeltXD10iRRk2sIUq8B63Se_hNeJ3GkmLhgZuRTggx5MReP8w8rJx8QWHGu2jykdU/s1600/Twitt.png" id="twitter_right_img" /> <a class="twitter-timeline" data-widget-id="563961379191652353" href="https://twitter.com/pfcitech">Tweets by @PFCITech</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>



Getting Widget Id and Code:

Above, In the code, I have highlighted some Codes, You have to replace these codes with the your codes. Now, the question is, How to get your code? Relax Buddy, Follow bellow steps and get your code to show your own profile on your website/blog
  • Login to Your Twitter Account
  • Go Here
  • Now, Click on Create New Button
  • Now, Change the height to 350 and Grab your code by clicking on save changes button
  • Now, At Last, Replace above highlighted code with the code you copied.
  • Done!

You can Change the Floating Position

  • Change top:20% with the numbers you want. Like, If you replace it with 50% it will go DownWard. I have set it with perfect position, So, You don't want to change it. Just Save it!
Read more »