Floating Twitter Follower Box – नया संस्करण

Floating Twitter follower box is a widget that floats on blog and shows your twitter followers. It is designed to work with Blogger but you can use on any site which support HTML, CSS and JavaScript. It’s easy to configure this widget for your site or blog.

फेसबुक लाइक बॉक्स “Facebook Like Box” की तरह से अब पेश है ट्विटर फ़ॉलोअर बॉक्स “Twitter Follower Box” जिसमें आपके ट्विटर फ़ॉलोअर्स के चेहरे सामने दिखेंगे और इसमें आपको ट्विटर पर फ़ॉलो करने के लिए एक बटन भी उपलब्ध रहेगा, लेकिन यह सब एक बिल्कुल नये अंदाज़ में। आपके ब्लॉग पर यह बहुत कम जगह घेरेगा और जब कोई पाठक इस लोगो पर अपना माउस ऐरो / कर्सर “Mouse Arrow / Cursor” ले जायेगा तभी यह उसके सामने खुलकर आयेगा। इसे फ्लोटिंग ट्विटर फ़ॉलोअर बॉक्स “Floating Twitter Follower Box” कहा जा सकता है। इसका स्क्रीन शॉट नीचे दिया जा रहा है। आशा है इससे आपको बहुत कुछ स्पष्ट हो जायेगा।

Floating Twitter Follower Box

बंद विजेट | Hidden Widget

Hidden Twitter Follower Box

खुला विजेट | Visible Widget

Visible Twitter Follower Box

आइए इसे ब्लॉग पर लगायें

1. सबसे पहले आपको आपके ब्लॉगर टेम्पलेट में <head> टैग के नीचे jquery min JavaScript जोड़नी है। इसके लिए आप –

ब्लॉगर Dashboard पर जायें > Blog को चुनें > Template पर क्लिक करें > EDIT HTML पर क्लिक करें

2. इसके बाद जो बॉक्स खुलेगा उसमें <head> टैग की खोज करके उसके ठीक अगली लाइन में नीचे दिया गया कोड पेस्ट कर लें।

jQuery Min Code:

<script src='http://code.jquery.com/jquery-1.10.1.min.js' type='text/javascript'></script>

नोट: यदि आपने पहले ही किसी विजेट के लिए jQuery Min अपने ब्लॉगर टेम्पलेट में इस्तेमाल की हुई है तो इसे दुबारा <head> टैग के नीचे प्रयोग न करें। इससे आपके ब्लॉग के खुलने की स्पीड पर प्रभाव पड़ेगा।

3. इतना कर लेने के बाद आपको अपने ब्लॉग में एक HTML/Javascript Gadget जोड़ना है और उसमें नीचे दिया गया कोड कॉपी करके उसे पेस्ट कर गैजेट को सहेज देना है।

HTML/Javascript Gadget जोड़ना:

ब्लॉगर Dashboard पर जायें > Blog को चुनें > Layout पर क्लिक करें > Add a Gadget पर क्लिक करें > एक HTML/Javascript Gadget जोड़ें

Floating Twitter Follower Box कोड:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<!-- Twitter Follower Box -->
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".tp-twitter-follower-box").hover(function() {jQuery(this).stop().animate({left: "0"}, "medium");}, function() {jQuery(this).stop().animate({left: "-250"}, "medium");}, 500);});
/*]]>*/
</script>

<style type="text/css">
.tp-twitter-follower-box{background: url("http://1.bp.blogspot.com/-HxB7yedhvgc/UD30hWRWK2I/AAAAAAAACyM/3LnzEFok3uY/s1600/twitter.png") no-repeat scroll right top transparent !important;display:block;float:left;height:136px;padding:0 43px 0 0;width:246px;z-index:1000000;position:fixed;left:-250px;top:40%;}
.tp-twitter-follower-box div{border:none;position:relative;display:block;}
.tp-twitter-follower-box span{bottom:12px;font:8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right:7px;text-align:right;z-index:1000000;}
.tp-twitter-follower-box span a{color:gray;text-decoration:none;}
.tp-twitter-follower-box span a:hover{text-decoration:underline;}
</style>

<div class="tp-twitter-follower-box">
<div style="height:234px;overflow:hidden">
<div id="twitter-box">
</div>
</div>
<script>
  var tw_user = 'techprevue';
  var tw_width = 248;
  var tw_height = 250;
  var no_face = 8;
    (function() {
      var tw_box = document.createElement('script'); tw_box.type = 'text/javascript'; tw_box.async = true;
      tw_box.src = '//www.twitter-fanbox.com/tw.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);
  })();
</script>
</div>
<!-- End Twitter Follower Box -->

इस कोड में हमने अपना ट्विटर यूज़रनेम “techprevue” प्रयोग किया है आप इसे अपने Twitter Username से बदल दीजिए।

4. इसके बाद यह विजेट आपके ब्लॉग पर दिखने लगेगा और जिस पर कुछ ऐसा लिखा होगा : Code Generate @username

Twitter follower box activation link

5. आपको इस पर क्लिक करके ट्विटर पर लॉगिन करना होगा। जिससे यह विजेट आपके ट्विटर यूज़रनेम के लिए काम करने लगेगा।

आशा है आपको यह मज़ेदार लगेगा और आपके लिए उपयोगी सिद्ध होगा।

Credit: MatiasMX
Link: http://www.twitter-fanbox.com/

Keywords: Floating twitter follower box, Twitter follower box, Floating Twitter fan box, Twitter fan box, Twitter, Blogger