इस तरह बनाइए अपना टैब बॉक्स (Tab Box Widget)

विजेट आपके ब्लॉग पर

इस पोस्ट में एक खास टैब बॉक्स की जानकारी दी गई थी, जिसे कई ब्लॉगर साथियों ने पसंद किया और वे इसे अपने ब्लॉग की साइडबार में लगाना चाहते हैं। आज इसे तैयार करने की आसान सा तरीका आपको बताया जा रहा है। आप ध्यानपूर्वक नीचे दिए गए चरणों का अनुसरण करें और उसके बाद तैयार कोड को अपने पेज के लेआउट में एचटीएमएल/जावास्क्रिप्ट में जोड़ लें।

कोड तैयार करने से पहले आपको अपने ब्लॉग में लेबल (टैग) की पोजिशन ठीक करनी होगी। साथ ही यह भी सुनिश्चित करना होगा कि आपके टैग आवश्यक रूप से रोमन (अंग्रेजी लिपि) में होने चाहिए। टैग पोजिशन ठीक करने की जानकारी इस पोस्ट में दी गई है।

यह स्पष्ट कर देना चाहूंगा कि नीचे दिखाए गए चरण केवल ब्लॉगर (ब्लॉगस्पॉट) चिट्ठों के लिए ही मान्य हैं। जो साथी इस टैब बॉक्स को वर्डप्रेस, किसी अन्य ब्लॉग या अपनी वेबसाइट के लिए चाहते हैं वे मुझसे टिप्पणी के माध्यम से संपर्क कर सकते हैं।

चरण-1

सबसे पहले नीचे दिए गए कोड को कॉपी कर लीजिए और इसे अपनी मेल के कम्पोज बॉक्स में पेस्ट कर लीजिए (मेल के कम्पोज बॉक्स में पेस्ट करने का फायदा यह है कि इस कोड के विभिन्न रंग आपको पेस्ट करने के बाद भी दिखते रहेंगे।)

<iframe scrolling="NO" frameborder="0" width="100%" src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108384585615022758673/tfr2_v1_sj.xml&up_t1=http://आपका-ब्लॉग.blogspot.com/feeds/posts/default/-/पहला-लेबल&up_t2=http://आपका-ब्लॉग.blogspot.com/feeds/posts/default/-/दूसरा-लेबल&up_t3=http://आपका-ब्लॉग.blogspot.com/feeds/posts/default/-/तीसरा-लेबल&up_t4=http://आपका-ब्लॉग.blogspot.com/feeds/posts/default/-/चौथा-लेबल&up_t5=http://आपका-ब्लॉग.blogspot.com/feeds/posts/default/-/पांचवां-लेबल&up_tn1=पहला-शीर्षक&up_tn2=दूसरा-शीर्षक&up_tn3=तीसरा-शीर्षक&up_tn4=चौथा-शीर्षक&up_tn5=पांचवां-शीर्षक&up_inc_desc=0&up_num_entries=10&up_show_summ=200&up_link_target=_blank&synd=open&w=360&h=250&title=Tabbed+Feed+Reader+v2a&border=%23ffffff%7C3px%2C1px+solid+%23999999&source=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fcreator%3Fsynd%3Dopen%26url%3Dhttp%253A%252F%252Fmjin.kyungnam.ac.kr%252Ftfr2_v1_sj.xml%26lang%3Den" height="240px"></iframe><span style="font-size: 80%"><a href="http://tips-hindi.blogspot.com/2009/05/tab-box-widget_07.html">विजेट आपके ब्लॉग पर </a></span>

चरण-2

इस कोड में पांच जगहों पर आपका-ब्लॉग लिखा है और इसे लाल रंग से हाइलाइट किया गया है। आप इस जगह अपने ब्लॉग का पता लिख लीजिए (हिन्दी ब्लॉग टिप्स के उदाहरण में आपका-ब्लॉग की जगह केवल tips-hindi लिखना है, शेष पता वहां पहले से लिखा है)।

चरण-3

उपयुर्क्त बदलाव के बाद आप नीले रंग से दिखाए गए पहला-लेबल, दूसरा-लेबल, तीसरा-लेबल, चौथा-लेबल और पांचवां लेबल की जगह अपने लेबल के नाम कॉपी कर पेस्ट कर दें। यहां मैंने केवल पांच लेबल लगाने की ही सुविधा दी है। अगर आप कोड की समझ में दक्ष हैं तो इसकी संख्या घटा-बढ़ा सकते हैं अन्यथा आप कुछ और छेड़छाड़ नहीं करें।

चरण-4

इस अंतिम चरण में आपको वह सूचना भरनी है, जो टैब बॉक्स के पांच शीर्षकों के रूप में आपको दिखेगी। इसे यहां हरे रंग से दिखाया गया है। यहां आपको हरे रंग में पहला-शीर्षक, दूसरा-शीर्षक, तीसरा-शीर्षक, चौथा-शीर्षक और पांचवां-शीर्षक दिख रहे होंगे। इनकी जगह आप वह वेल्यू भर दीजिए, जो आपको अपने टैब बॉक्स में देखनी है।

ध्यान रखें बदलाव का काम बहुत सावधानी से करें। न तो किसी डॉट या अन्य करेक्टर को मिटाएं और न ही अतिरिक्त स्पेस छोड़ें।

यह करने के बाद आपका कोड पूरी तरह तैयार है। अब इसे अपने ब्लॉग के लेआउट में जाकर एड ए गैजेट में एचटीएमएल/जावास्क्रिप्ट में लगा दीजिए। परिवर्तन को सेव करते ही आपको अपना टैब बॉक्स दिखने लगेगा।

उदाहरण- हिन्दी ब्लॉग टिप्स के टैब बॉक्स का कोड कुछ इस तरह से दिख रहा है-

<iframe scrolling="NO" frameborder="0" width="100%" src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108384585615022758673/tfr2_v1_sj.xml&up_t1=http://tips-hindi.blogspot.com/feeds/posts/default/-/widget&up_t2=http://tips-hindi.blogspot.com/feeds/posts/default/-/cool-tips&up_t3=http://tips-hindi.blogspot.com/feeds/posts/default/-/simple-tricks&up_t4=http://tips-hindi.blogspot.com/feeds/posts/default/-/useful-things&up_t5=http://tips-hindi.blogspot.com/feeds/posts/default/-/start-a-blog&up_tn1=साधन&up_tn2=युक्तियां&up_tn3=सजावट&up_tn4=औज़ार&up_tn5=गुर&up_inc_desc=0&up_num_entries=10&up_show_summ=200&up_link_target=_blank&synd=open&w=360&h=250&title=Tabbed+Feed+Reader+v2a&border=%23ffffff%7C3px%2C1px+solid+%23999999&source=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fcreator%3Fsynd%3Dopen%26url%3Dhttp%253A%252F%252Fmjin.kyungnam.ac.kr%252Ftfr2_v1_sj.xml%26lang%3Den" height="240px"></iframe><span style="font-size: 80%"><a href="http://tips-hindi.blogspot.com/2009/05/tab-box-widget_07.html">विजेट आपके ब्लॉग पर </a></span>

और यह टैब बॉक्स में सबसे ऊपर दिखाए अनुसार परिवर्तित हुआ है।

उम्मीद है कि यह उदाहरण आपको इसके चरण समझने में मदद करेगा।

इस टैब बॉक्स की सबसे बड़ी खासियत यह है कि यह आपके ब्लॉग की साइडबार में मौजूद जगह में अपने आप फैल जाएगा। इसे आपको छोटा या बड़ा करने की जरूरत नहीं है। इसके अंत में हिन्दी ब्लॉग टिप्स का लिंक लगाया गया है। यह इस विजेट के प्रसार में मदद करता है। आप चाहें तो इसे अपने टैब बॉक्स के साथ रखिए। जो लोग इसे हटाना चाहते हैं वे इसके लिए स्वतंत्र हैं।

अगर किसी तरह की समस्या आ रही हो तो बिना किसी संकोच के टिप्पणी कीजिए। मैं आपसे व्यक्तिगत रूप से संपर्क करूंगा।






क्या आपको यह लेख पसंद आया? अगर हां, तो ...इस ब्लॉग के प्रशंसक बनिए ना !!

हिन्दी ब्लॉग टिप्स की हर नई जानकारी अपने मेल-बॉक्स में मुफ्त मंगाइए!!!!!!!!!!