Ads (728x90)

Latest Post

Kesehatan

Tips

फेसबुक लाइक बॉक्स(Facebook Like Box) और गूगल फ्रेंडकनेक्ट (Google Friend Connect) की तरह से अब पेश है ट्विटर फ़ॉलोअर बॉक्स (Twitter Follower Box) जिसमें आपके ट्विटर फ़ॉलोअरस्‌ के चेहरे सामने दिखेंगे और इसमें आपको ट्विटर पर फ़ॉलो करने के लिए एक बटन भी उपलब्ध रहेगा, लेकिन यह सब एक बिल्कुल नये अंदाज़ में। आपके ब्लॉग पर यह बहुत कम जगह घेरेगा और जब कोई पाठक इस लोगो पर अपना माउस ऐरो ले जायेगा तभी यह उसके सामने खुलकर आयेगा। इसे फ्लोटिंग ट्विटर फ़ॉलोअरस्‌ बॉक्स(Floating Twitter Followers Box) कहा जा सकता है। इसका स्क्रीन शॉट नीचे दिया जा रहा है। आशा है इससे आपको बहुत कुछ स्पष्ट हो जायेगा।

Demo | सजीव उदाहरण देखने के लिए यहाँ क्लिक करें

बंद विजेट | Inactive Widget

Inactive Floating Twitter Follower Box Widget


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

Active Floating Twitter Follower Box Widget


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


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

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

नोट: चरण 1 और चरण 2 को किस प्रकार पूरा करना है आप इसे इस पोस्ट से समझ सकते हैं। [Guide] Blogger Template में Edit करना << Click HERE

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

jQuery Min Code:
<script src='http://code.jquery.com/jquery-1.7.2.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 जोड़ें

छूमंतर Twitter Follower Box कोड:
<!-- 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqjvgpnPkXCLYS2lhU_yKPo2eMeExb0Lkwcns4LeQ07IlMpVb2WEDyMhHoxFbXFvbTQgRzXVY906Rx32YUzE-kPJM7c4uKEwghHAJvsxdhyGsWxNATiQdJeDlROtDuF7VH7ikid-3yr8kT/s1600/twitter.png") no-repeat scroll right top transparent !important;display:block;float:left;height:136px;padding:0 46px 0 0;width:245px;z-index:99998;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:99998;}
.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">
<script type='text/javascript'>
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 250px; height: 237px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';}
</script>
<div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("TWITTER_USER_NAME");</script>
</div>
<!-- End Twitter Follower Box -->

लाल रंग से दर्शाये गये TWITTER_USER_NAME को अपने ट्विटर User Name से बदलना न भूलें।

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

Post a Comment