Thursday, May 7

इस तरह बनाइए अपना टैब बॉक्स (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>



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

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

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

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






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

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

43 comments:

  1. बहुत उपयोगी है यह कोड .. पर टैग के हिन्‍दी में होने में क्‍या दिक्‍कतें आएंगी ?

    ReplyDelete
  2. बहुत सरल बना दिया आशिष आपने... धन्यवाद.

    ReplyDelete
  3. बहुत शुक्रिया ..

    पर मेरी समस्या का कोई जवाब नहीं दिया बंधुवर...
    क्या हर पोस्ट पर नए टैग लिखकर ही पब्लिश करना होगा? आपकी पिछली पोस्ट पर मैने दो टिप्पणियां दी थीं।

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. आशीष जी, कमाल की तकनीक है. फिलहाल मैंने तो आपके ब्लॉग के लेबल ही लगाये है अपने ब्लॉग पर. देखिये कैसा दिख रहा है. मैंने अपने इस टाइमपास वाले ब्लॉग :) के लेबल को भी यूज करके देखा था. काम कर रहा है, लेकिन मेरे ब्लॉग में ऐसा कुछ नहीं है जिसे प्रर्दशित करूँ. इसलिए मैं तो आपके लेबल्स ही यूज करूँगा अगर आपको कोई आपत्ति न हो तो.

    एक समस्या, इसमें बैक ग्राउंड ग्रे है, क्या वो सफ़ेद हो सकता है?

    ReplyDelete
  6. धन्‍यवाद आशीष भाई, बहुत उपयोगी तरकीब है।

    ReplyDelete
  7. बहुत उपयोगी बात आपने सहज और सरलता से समझा दी. धन्यवाद.

    रामराम.

    ReplyDelete
  8. yah bahut hi asaan vidhi bataayee hai.shukriya..jarur try karke dekhengey.

    ReplyDelete
  9. उपयोगी जानकारी हेतु आभार

    ReplyDelete
  10. इस बहु प्रतीक्षित विजेट के लिये धन्यवाद ।

    ReplyDelete
  11. फुरसत में आजमाया जायेगा जी।

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. भाई मैं तो आपके यहां आ आकर ही थोडा बहुत जानने लगा हूं कम्प्यूटर की भाषा। सिर्फ़ आभार कहकर मुक्त नहीं होना चाहता।

    ReplyDelete
  14. आशीष जी, बहुत - बहुत धन्यवाद काफी अच्छी तरह से आपने समझाया है, मैं अभी इसको इस्तेमाल नहीं करूंगा अभी मैं अपने ब्लॉग को नया रूप देने की कोशिश कर रहा हूँ...कोशिश में कामयाब होने के बाद में इसका इस्तेमाल ज़रूर करूंगा....

    आशीष जी मैंने अपने ब्लॉग का नवबार आपके बताये तरीके से हटाया तो मेरा ब्लॉग पुरे पेज पर फैल गया, साईड़ बार पोस्ट के नीचे आ गया, कुछ मदद करें

    ReplyDelete
  15. उपयोगी जानकारी. आभार.

    ReplyDelete
  16. बड़े काम की चीज़ है ये ..

    ReplyDelete
  17. wah..! wah..! wah..!
    umda jankari hai ye to..
    meet

    ReplyDelete
  18. लो जी एक ओर शुक्रिया कैच करो.....

    ReplyDelete
  19. रेडीमेड कोड व आसान, सरल विवरण देने के लिए धन्यवाद. रचनाकार में इसका प्रयोग करते हैं.

    ReplyDelete
  20. वाह जी, मजेदार जानकारी, वो भी फस्ट फूड की तरह तैयार माल ।

    ReplyDelete
  21. काशिफ आरिफ जी,
    आप मुझे टेम्पलेट की .xml फाइल भेज दीजिए। मैं इसे सुधारने की कोशिश करता हूं।

    ReplyDelete
  22. सैयद जी, इसमें आपत्ति कैसी? आप तो हिन्दी ब्लॉग टिप्स के प्रसार में मदद कर रहे हैं.. आभार.. अगर आप कोड समझते हैं और रंगों के एचटीएमएल कोड जानते हैं तो कोड में दिए गए रंगों में आसान से परिवर्तन कर सकते हैं।

    ReplyDelete
  23. आशीष भाई एक बार फिर से काम की जानकारी दी । आपका हार्दिक आभार!

    ReplyDelete
  24. जानकारी तो काम की है। देखते है कोशिश सफल होती है या नही। पर आपका शुक्रिया।

    ReplyDelete
  25. आशीष जी
    धन्यवाद।
    लुधियाना पंजाब से टिप्पणी कर रहा हैँ।
    खटीमा वापिस लौट कर
    इसे अपने ब्लॉग पर लगाऊँगा।

    ReplyDelete
  26. आदरणीय आशिषभाई
    नमस्कार
    आपका फोर्मुला मुझे अच्छा लगा। नये अविष्कार कि बधाई।
    मेरे "हे प्रभु यह तेरापन्थ " के ब्लोग पर यह विजेट लगाना है पर अन्तिम चरण वाली बात समझ नही आई।
    { वेल्यू भर दीजिए वेल्यू क्या है ? मुझे यह पता नही पडा रहा है कि हरे वाले मे कोनसे शिर्षक भरने है ? }और मुझे उपरोक्त १२ लेबल वाला विजेट बनाकर मेल करेगे तो आपकी मेहरबानी होगी। आभार

    आपका अपना
    महावीर बी सेमलानी
    हे प्रभु यह तेरापन्थ
    http://ombhiksu-ctup.blogspot.com/
    ..........................................
    धर्मकर्म
    तेरापन्थ
    जैन धर्म
    व्यग
    समाचार
    लेख
    कविता
    कहानी
    परिचय
    शुभकामनाऐ
    विडीयो
    भेलपुरी

    ReplyDelete
  27. सर मैनेकल १२ लेबलो वाला एक विजेट के लिऐ प्रार्थना पत्र आपको भेजा था। कृपया सुचित करे/

    आभार

    हे प्रभू

    ReplyDelete
  28. महावीर जी, आग्रह करना चाहूंगा कि आपने जो श्रेणियां मुझे मेल से भेजी हैं, वे आपके लेबल में कहीं मौजूद नहीं है। बॉक्स आपके लिए तभी बनाया जा सकता है जब आप अपने ब्लॉग के लेबल सिस्टम में आवश्यक परिवर्तन करें। इसके लिए आपको यह पोस्ट पढ़ने की जरूरत है- पोस्ट के नीचे लेबल (टैग) की स्थिति सुधारें

    ReplyDelete
  29. बहुत बहुत धन्यवाद आपका.

    ReplyDelete
  30. मैंने अपने ब्लोग्स में tab-box लगा लिया है...
    मैं जानना चाहता हूँ की क्या अनेक icons को एक साथ लगाने की कोई युक्ति है?
    इसकी आवस्यकता इसलिए महसूस हुई क्योंकि अधिकतर सोशल साइट्स अपने लिंक को ब्लॉग पर लगाने को कहते हैं और इस तरह ब्लॉग का लुक ख़राब होता है और crowded दीखता है।
    add HTML में स्पेस देकर इन्हे एक line में शायद रखा जा सकता है लेकिन शक होता है की कहीं इससे स्पीड वगेरह पर कोई प्रभाव न पड़ता हो...

    Thankx...

    ReplyDelete
  31. रेडीमेड माल तो सभी को पसंद आता है। फिर मैं इसका अपवाद कैसे हो सकता हूं।


    -Zakir Ali ‘Rajnish’
    { Secretary-TSALIIM & SBAI }

    ReplyDelete
  32. बहुत उपयोगी है यह कोड ..

    ReplyDelete
  33. yah Widget main ne bhi apne blog par laga liya hai.
    aur khaas dhnywaad aap ko kahne dobara aayi hun.

    is widget ke liye bahut bahut dhnywaad.
    May God bless you.

    ReplyDelete
  34. Sir ji yeh vijet pichhale 2 din se kaam nahi kar raha hai..........

    ReplyDelete
  35. This comment has been removed by a blog administrator.

    ReplyDelete
  36. hey bhut accha likha ha tumne

    ReplyDelete
  37. आशीष जी सहायता करें यह दिख नहीं रहा है मैं इस विजेट का उपयोग करना चाहता हूँ,

    kalptaru.blogspot.com

    ReplyDelete
  38. आशीष भैया,
    मैं अपने ब्लॉग पर पेज की संख्या बढ़ाना चाहता हु, जैसे मेरा ब्लॉग है , मुझे जैसे होम लिख कर केवल एक तब आ रहा है, वैसे ही मई ४-५ तब चाहता हु... जिससे मई अपने पोस्ट को अलग-अलग रख सकू.

    कृपया मेरी मदद करे...


    -धन्यवाद्
    "आशु"
    http://ashu4ever4u.blogspot.com/

    ReplyDelete
  39. Dear sir mena Tab use kiya lakin ye sirf loding feed dikha raha h post show nhi kar raha h plez help me

    ReplyDelete
  40. प्रिय मित्र आशीष जी वास्तव मेँ आप हिन्दी ब्लाँग जगत मेँ एक शानदार कार्य कर रहे है आपके ब्लाँग से काफी लोग लाभाविँत हो रहे है मेने भी आपके ब्लाँग की सहायता से ब्लाँग बनाया है वेसे मेँ भी HTML का अच्छा जानकार हुँ लेकिन जावा लेग्वेज मुझे नही आती है। मेने ब्लाँग पर टेब लगाने वाली आपकी पोस्ट पढी लेकिन वो मेरे ब्लाँग पर काम नही कर रही है मेने सभी लेबल शिर्षक के अन्तर्गत जोड दिये लेकिन शिर्षक दिखा रहा है लेकिन लेबल या पोस्ट Show नही हो रही है सिर्फ Looding feed Show कर रहा है अगर आप मेरी समस्या का समाधान कर दे मेहरबानी होगी ।मेरा ब्लाँग http://raikasamaj.in

    ReplyDelete
  41. प्रिय मित्र आशीष जी वास्तव मेँ आप हिन्दी ब्लाँग जगत मेँ एक शानदार कार्य कर रहे है आपके ब्लाँग से काफी लोग लाभाविँत हो रहे है मेने भी आपके ब्लाँग की सहायता से ब्लाँग बनाया है वेसे मेँ भी HTML का अच्छा जानकार हुँ लेकिन जावा लेग्वेज मुझे नही आती है। मेने ब्लाँग पर टेब लगाने वाली आपकी पोस्ट पढी लेकिन वो मेरे ब्लाँग पर काम नही कर रही है मेने सभी लेबल शिर्षक के अन्तर्गत जोड दिये लेकिन शिर्षक दिखा रहा है लेकिन लेबल या पोस्ट Show नही हो रही है सिर्फ Looding feed Show कर रहा है अगर आप मेरी समस्या का समाधान कर दे मेहरबानी होगी ।मेरा ब्लाँग http://raikasamaj.in

    ReplyDelete