webdesign-android-devlopement-news-portal-designing-india-indore-bhopal-mp
Showing posts with label blogger. Show all posts
Showing posts with label blogger. Show all posts

Premium: Google Search Blogger Template

Posted :| Posted By: Piush Trivedi | Labels: , , 48 Comments

    गूगल सर्च ब्लॉगर टेम्पलेट- Premium: Google Search Blogger Template high quality blogger template 2017
       
        संभवतः ब्लॉगर वेब पर चलने वाला सबसे पुराना ब्लॉगिंग प्लेटफॉर्म है, Google ब्लॉगर 16 वर्षों से अब तक लाखों ब्लॉगर्स का पसंदीदा प्लेटफार्म  रहा है, और अब भी इस सूची में एक महत्वपूर्ण स्थान रखता है। जो अभी भी दुनिया के करोडो यूजर्स की पहली पसंद है , ब्लॉगर प्लेटफार्म का एक बड़े यूजर्स का आधार है,लेखक और निजी ब्लॉगर्स । ब्लॉगर ने ऐसे कई लोगों के लिए विकल्प सुझाये जो इंटरनेट पर तकनीकी विशेषज्ञ नहीं हैं इसकी मुख्य विशेषताओं में पहला यह सरल और सीखने में आसान है मूल कंप्यूटर ज्ञान वाले कोई भी आसानी से एक ब्लॉगर खाता खोल सकता है और अपनी रचनात्मकता का पता लगा सकता है। 
         बात करते है आज की इस ब्लॉग टेम्पलेट के बारे में बताना चाहूंगा यह टेम्पलेट पूरी तरह गूगल सर्च लुक और फील के अनुरूप डिज़ाइन है जो आपके ब्लॉग को एक बेहतरीन कस्टम सर्च इंजन या बिजनेस डायरेक्टरी , क्लासिफाइड डायरेक्टरी वेबसाइट में बदल देगा।
        इसमें गूगल सर्च की ही तरह कुछ विशेष गैजेट  हैं जैसे 
  • गूगल स्टाइल पृष्ठ नेविगेशन
  • यूजर लोकेशन 
  • मल्टी लैंग्वेज सपोर्ट 
  • कस्टम सर्च ऑप्शन 
  • गूगल स्टाइल रीलेटेड सर्च क्वेरी 
  • गूगल sign in  ऑप्शन । 
  • टेबलेट , मोबाइल एवं सभी रेसोलुशन पर रेस्पॉन्सिव 
  • इनबिल्ट गूगल मैप्स लोकेशन डाटा 
  • रिव्यु रेटिंग ऑप्शन
       
         टेम्पलेट्स ब्लॉगर प्लेटफॉर्म के लिए ख़ास  हैं, आप किसी भी डेटा को खोए बिना किसी भी समय आपके ब्लॉग के टेम्पलेट को आसानी से संपादित कर सकते हैं। ब्लॉगर के बहुत सारे टेम्पलेट इंटरनेट पर उपलब्ध हैं, दोनों मुफ्त और सशुल्क संस्करण उपलब्ध हैं।
         ब्लॉगिंग हाल के दशक में सबसे अधिक पसंदीदा  विषयों में से एक है, और न केवल व्यक्तियों और रचनात्मक लेखकों के लिए, जो नेट, छोटे और बड़े व्यापार मालिकों पर अपने स्वयं के समुदायों का निर्माण करना पसंद करते हैं, ब्लॉगिंग एक अद्भुत और किसी भी तरह की जोखिम से मुक्त एक बेहतरीन विकल्प है , मुद्दा चाहे व्यक्तिगत , व्यावसायिक या कुछ और हो हर किसी क्षेत्र में जैसे खोज इंजन की दृश्यता और ब्रांडिंग संभावनाओं में वृद्धि, प्राधिकरण जैसी चीज़ों, और रूपांतरण दर में वृद्धि से - ब्लॉगिंग में सभी के लिए सब कुछ उपलब्ध है
           क्लासीफायड या बिज़नेस डायरेक्टरी तो आप सभी जानते ही होंगे, Just Dial , FlipKart का नाम तो आप सभी ने सुना ही होगा।  इस तरह की कोई साइट या क्लासिफाइड एजेंसी आज कमाई के लिए बेहतरीन विकल्प है , अपने शहर का लोकल सर्च इंजन , या बिजनेस डायरेक्टरी आदि सभी तरह की साइट आज कल सबसे प्रचलित ऑनलाइन बिज़नेस  हेतु एक बेहतर विकल्प है।  
             Just Dial , FlipKart की तरह ही स्वयं की बिजनेस क्लासीफायड या बिज़नेस डायरेक्टरी  शुरू करना मतलब निश्चित है की मोटी रकम का निवेश।  साइट मेंटेनेंस, वेब स्पेस  आदि कई चीजों में बड़ी रकम खर्च होना निश्चित है , सोचे की अगर यह सभी कार्य बिना किसी वेब स्पेस के बिना किसी कस्टमाइज टेम्पलेट के और बिना किसी प्रोग्रामिंग के हो सके तो ???
         सबसे पहले आपको बताना चाहूंगा की अगर आप अपने लिए किसी ऐसे ही तरह की कोई लोकल सर्च इंजन , क्लासीफायड या बिज़नेस डायरेक्टरी शुरू करना चाहते है तो हमारे  सुझाई गई यह टेम्पलेट इंटरनेट पर आपके लिए एकमात्र और सर्वश्रेष्ठ टेम्पलेट है खासियत में यही बताना चाहूंगा की हमारे द्वारा सुझाई गई उक्त साइट ब्लॉगर प्लेटफार्म पर है जिससे की न तो होस्टिंग का खर्च  , न वेब स्पेस का खर्च और न ही कोई अन्य खर्च। 
         उक्त ब्लॉगर टेम्पलेट आपके ब्लॉग को जिस भी तरह से आप दिखाना चाहते हैं, उसे उस ही रूप में के दुनिया के सामने रखता है. अपना स्वयं का व्यवसाय इंटरनेट के माध्यम से आरंभ करने के लिए आपको थोड़ा एचटीएमएल और सीएसएस जानने की आवश्यकता है, और इसके साथ ही कोई भी अपने स्वयं के कस्टम सर्च इंजन या बिजनेस डायरेक्टरी , क्लासिफाइड डायरेक्टरी बनाने में सक्षम है 
          अपने स्वयं के लिए कस्टम सर्च इंजन या बिजनेस डायरेक्टरी , क्लासिफाइड डायरेक्टरी आदि शुरू करने के लिए ब्लॉगर प्लेटफार्म पर इस तरह की टेम्पलेट इंटरनेट पर शायद ही कही उपलब्ध हो , हमारे द्वारा सुझाई गई उक्त ब्लॉगर  टेम्पलेट आप सभी को एक साथ रखकर अपना सही टेम्पलेट खोजने के इस समाधान को इस लेख के माध्यम से हमने सुलझाने का प्रयास किया है ,  मोबाइल रेस्पॉन्सिव डिज़ाइन के साथ  नवीनतम सुविधाओं, विजेट्स  और सीएसएस और html5  कोडिंग  के साथ अनुकूलित  है।
         अंत में यही कहना चाहूंगा की सबसे पहले आप हमारे द्वारा हाल ही में शुरू की गयी लोकल सर्च डायरेक्टरी का  लाइव डेमो देखे साथ ही अगर आप भी अपने व्यवसाय , बिजनेस  स्वयं का लोकल सर्च इंजन , या बिजनेस डायरेक्टरी शुरू करने का सोच रहे है तो सुझाई गई उक्त ब्लॉग टेम्पलेट आप के लिए बेहत फायदेमंद सिद्ध होगी , जैसा की में पहले भी बता चूका हूँ की टेम्पलेट प्रीमियम केटेगरी  में शामिल है अतः आपको इसके लिए कुछ शुल्क अवश्य चुकाना पड़ेगा , निवेदन यही रहेगा की आप अगर इस टेम्पलेट को पाना चाहते है तो मुझे ईमेल, कॉल  या नीचे कमेंट के माध्यम से संपर्क करे शेष जानकारी आपको जल्द ही प्राप्त होगी। 
            आशा करता हूँ हिंदी 4 टेक पर सुझाई अन्य टेम्पलेट की तरह यह टेम्पलेट और जानकारी आप सभी के लिए उपयोगी सिद्ध होगी।   


Continue Reading


ब्लॉगर मोबाइल संस्करण पर Whatsapp, Email , Sms शेयर बटन कैसे जोड़े

Posted :| Posted By: Piush Trivedi | Labels: , , 42 Comments

         हिंदी ब्लॉगर के लिए फेसबुक , ट्विटर , व्हाट्सएप्प जैसे सोशल नेटवर्क की हमेशा ही अहम भूमिका रही  है। आज  ब्लॉगर  और इसी के साथ वर्डप्रेस , सेल्फ होस्टेड साइट आदि चिट्ठो पर  पाठको के आवागमन का अनुमान लगाया जाये तो हम देखते है की ब्लॉगों पर प्रतिदिन आने वाले पाठको में सोशल नेटवर्क साइट्स द्वारा सबसे ज्यादा पाठको का आवागमन रहा है , निश्चित रूप से कारण फेसबुक , व्हाट्सएप , ट्विटर जैसे सोशल नेटवर्क का बढ़ता हुआ प्रचलन और लोगो का इस और बढ़ता हुआ जबरदस्त रुझान।  
         आज के इस ट्यूटोरियल में बताया गया है की कैसे अपनी ब्लॉग पोस्ट को साझा करने के लिए WhatsApp Share, Email Share और Sms Share  के द्वारा लोगो तक पहुचाया जाये । बस नीचे दी हुई प्रक्रिया अपनाये और अपने ब्लॉग पर कुछ ही मिनटों में   WhatsApp Share, Email Share और Sms Share बटन द्वारा ब्लॉग ट्रैफिक बढ़ाये , ध्यान दे की ब्लॉग द्वारा ब्लॉगर पाठको को दी गयी आधिकारिक मोबाइल टेम्पलेट पर यह कोड कार्यशील नहीं है इस सम्बन्ध में निवेदन करेंगे की अपनी ब्लॉग टेम्पलेट को मोबाइल फ्रेंडली  (Responceive ) ब्लॉग टेम्पलेट में बदले तत्पश्चात नीचे बताये कोड का इस्तेमाल करे। 

विजेट ब्लॉग पर ले जाये

Step 1 :-

  • अपने ब्लॉगर खाते में प्रवेश करे
  • अब Template पर जाये
  • अब Backup/Restore पर क्लिक कर टेम्पलेट सेव करे
  • अब Mobile Template Setting पर जाये


whatsapp-share-email-share-sms-share-button-for-blogger-mobile

Step 2 :-

  • अब Edit HTML पर जाये
  •   अपनी ब्लॉग टेम्पलेट में नीचे दिए गए कोड खोजें:
<div class=’post-header’>
<div class=’post-header-line-1’/>
</div>


इस कोड के बाद, नीचे बताया पूरा कोड यथावत पेस्ट करें:

<a data-action=”share/whatsapp/share” href=”whatsapp://send?text=” id=”wshare” onclick=”share()” >Share on Whatsapp</a>
<a href=”sms://+91?body=” id=”smsshare” onclick=”share()” >Share Via SMS</a>
<a href=”mailto:urfrnd@mail.com?body=” id=”emailshare” onclick=”share()” >Share via Email</a>
<script>
function share(){
var elements = document.getElementsByClassName(&quot;entry-content&quot;);
document.getElementById(&quot;wshare&quot;).href+=elements[0].textContent + &#39; For More posts visit URL&#39;;
document.getElementById(&quot;smsshare&quot;).href+=elements[0].textContent + &#39; For More posts visit URL&#39;;
document.getElementById(&quot;emailshare&quot;).href+=elements[0].textContent + &#39; For More posts visit URL&#39;;
}
</script>



    टेम्पलेट सहेजें और परिणाम की जाँच करें। आशा करते है कोड आप सभी की ब्लॉग टेम्पलेट में ठीक तरह से काम कर रहा होगा किसी परेशानी के चलते कमेंट के माध्यम से संपर्क करे।
Continue Reading


हिंदी ब्लॉग्स के लिए आज से एक नया ब्लॉग संकलक !

Posted :| Posted By: Piush Trivedi | Labels: , 108 Comments

      जी हाँ , सही सुना , वैसे तो हिंदी ब्लॉग्स के लिए ब्लॉग जगत में सेकड़ो की संख्या में ब्लॉग संकलक मौजूद है , और इसी कड़ी में आज आपके सामने एक नया ब्लॉग संकलक।  पिछले ४ वर्षो के भीतर हिंदी ब्लॉग जगत में कई ब्लॉग संकलक अनवरत एक के बाद आते गए इनमे कुछ सफल हुए और कुछ अन्य कारणों से कुछ ही समय में अलविदा कह गए , अपनीवाणी, चिट्ठाजगत ऐसे ही कुछ ब्लॉग संकलकों का जिवंत उदाहरण है , खेर जो भी है फ़िलहाल तो आप सभी को इस नए ब्लॉग संकलक से रूबरू कराना था , 
           आशा करता हूँ , इस प्रयास को आप सराहेंगे , इस नए ब्लॉग संकलक के बारे में बताना चाहूंगा की अन्य ब्लॉग डायरेक्टरी की तरह यहाँ भी आपको ब्लॉग पंजीकरण के कुछ आसान प्रक्रिया से गुजरना होगा , और कुछ ही मिनटों में आपका ब्लॉग , ब्लॉग संकलक पर सक्रिय होगा।  

               हमारे इस नए ब्लॉग संकलक के बारे में अपने विचार , परेशानी , राय  को  अवश्य शेयर करे :-)





Continue Reading


Newspaper, News Channel Freemium Blogger Template

Posted :| Posted By: Piush Trivedi | Labels: , , 106 Comments

               शीर्ष और सर्वश्रेष्ठ समाचार पत्रिका (News Paper) ब्लॉगर टेम्पलेट 2013 और 2014 में एक संग्रह इस साल में सबसे अच्छी गुणवत्ता कस्टम निर्मित  ब्लॉगर टेम्पलेट की ओर जाता है. वैसे तो  इंटरनेट से डाउनलोड करने के लिए लाखो की तादाद में न्यूज़ पेपर  ब्लॉगर टेम्पलेट का विशाल संग्रह है. लेकिन अपने ब्लॉग के लिए सबसे अच्छा  ब्लॉगर / Blogspot टेम्पलेट का चयन एक कठिन और पेचीदा काम है  . हिन्दी 4 टेक ब्लॉग पर मैंने  पिछले लेखो में भी  न्यूज़ पेपर और इसी तरह अन्य ब्लॉगर टेम्पलेट का एक विस्तृत समूह रखा था , जो नीचे क्रमशः एक बार पुनः आपके सामने है 


      इसी कड़ी में वर्ष २०१३ और  २०१४ के लिए शीर्ष और सर्वश्रेष्ठ समाचार पत्रिका (News Paper) ब्लॉगर टेम्पलेट आज के इस लेख में आपके सामने है , नीचे बताई गयी दो ब्लॉगर टेम्पलेट जो की हिंदी 4 टेक पर सुझाई  ब्लॉगर टेम्पलेट की तरह seo , meta tag , html 5 कोडिंग , जैसी सभी आवश्यक बातो को ध्यान में रख  कर डिज़ाइन है। नीचे दोनों ही टेम्पलेट के स्क्रीन शॉट, और लाइव डेमो लिंक उपलब्ध है। .  

           साथ ही बताई गयी दोनों टेम्पलेट पूरी तरह मोबाइल फ्रेंडली है , मतलब यह की  बताई दोनों ही टेम्प्लेट सभी मोबाइल , टेबलेट , और कम्प्यूटर की भिन्न भिन्न स्क्रीन रेसोलुशन में किस तरह से दिखाई देगा , इसका भी लाइव डेमो नीचे दोनों ही टेम्पलेट की लाइव डेमो लिंक के साथ दिया गया है , निवेदन करूँगा की लिंक पर क्लिक कर दोनों ही टेम्पलेट का मोबाइल वर्शन जरूर देखे।  

               हिंदी 4 टेक पर हमने कोशिश की है कि नियमित रूप से आप सभी के लिए  ब्लॉगर टेम्पलेट , और इसी के साथ बेहतर ब्लॉगर टेम्पलेट  का विस्तृत समावेश रख सके ,,,, प्रयास क्रमशः जारी है :० ) आशा करता हूँ हमारे इन प्रयासों को आप सभी सराहेंगे, और आज के इस लेख से लाभान्वित होंगे //////

1.Newspaper Blogger Template


Live Demo | Mobile Version Cheak


2.News Channel / Video Blogger Template


Live Demo | Mobile Version Cheak



टेम्प्लेट को प्राप्त करने के लिए नीचे टिप्पणी के माध्यम से संपर्क करे , या ऊपर Contact बटन लिंक पर क्लिक कर सीधे संपर्क करें। ///

Continue Reading


Newspaper Premium Blogger Template V-2

Posted :| Posted By: Piush Trivedi | Labels: , , 12 Comments


पिछले लेख में मैंने आपके सामने  न्यूज़ पेपर ब्लॉगर टेम्पलेट  रखी  थी जिसे पाठको का बढ़िया रेस्पॉन्स मिला , धन्यवाद उन तमाम पाठको को जिन्होंने इस प्रयास को पसंद  किया,, इसी कड़ी में आज आप के सामने ब्लॉगर प्लेटफार्म पर ही उपलब्ध ये न्यूज़ पेपर टेम्पलेट./// पिछले लेख में सुझाई गई टेम्पलेट में जिन मुद्दो और बातो को ध्यान में रख कर टेम्पलेट डिज़ाइन किया गया था उसी कसोटी पर आज की ये न्यूज़ पेपर ब्लॉगर टेम्पलेट ... नीचे क्रमशः  उपलब्ध सभी टेम्पलेट का लिंक उपलब्ध कराया गया है निवेदन करूँगा टेम्पलेट देखने के लिए सीधे लिंक पर क्लिक करे 





Demo Link :-


बताई टेम्पलेट को पाने के लिए आप मुझसे ईमेल द्वारा संपर्क कर सकते है , या ऊपर मेनू में Contact लिंक द्वारा भी संपर्क किया जा सकता है। 
Continue Reading


3+ Professional Blogger Templates For Download

Posted :| Posted By: Piush Trivedi | Labels: , 22 Comments

           ब्लॉग टेम्पलेट किसी भी ब्लॉग के सफलता के लिए बेहद मायने रखती है।  ब्लॉग का सिर्फ बेहतर दिखना ही ब्लॉग की यथार्ताता साबित नहीं करता।  इसके अतिरिक्त भी कई  आवश्यक पहलु जैसे , सर्च इंजन ऑप्टिमाइजेशन , ब्लॉग गुणवत्ता आदि कई बाते भी इस समबन्ध में उतना ही मायने रखती है जितना की ब्लॉग का डिजाईन।  हिनदी ४ टेक ब्लॉग पर मैने पिछले लेखो में भी ब्लॉगर ब्लॉग के लिए SEo Friendly , Professhional  ब्लॉगर टेम्पलेट सुझाई थी जो नीचे क्रमशः लिंक में बताई गई  है।  
                   वर्ष २०११ से आज तक मैने सेकड़ो ऐसे हिंदी ब्लॉग देखे जिनमे के अतिदुर्लभ सामग्री , और दुर्लभ विषयो का संग्रह है बावजूद इसके वे सभी ब्लॉग गूगल सर्च , और  सर्च इंजन ऑप्टिमाइजेशन  में पिछडे हुए है ।  हिंदी ४ टेक ब्लॉग पर क्रमशः ब्लॉग टेम्पलेट को सुझाने के पीछे एक मात्र मकसद उन सभी हिंदी ब्लॉग और चिठो को बढावा देने से ही है .….  हिंदी ४ टेक ब्लॉग पर सुझाई गई लगभग सभी ब्लॉग टेम्पलेट पूरी तरह से  Seo , HTml Valid Coding  और Mobile Device Friendly  है  सुझाई गयी सभी टेम्पलेट में गूगल सर्च इंजन में ब्लॉग रैंकिंग को बेहतर करने के लिए सभी आवश्यक Meta  टैग  मोजूद है.…. 
                           इसी संदर्भ में आज Hindi Blogs के लिए मेरा सुझाव ये  तिन प्रोफेशनल ब्लॉग टेम्पलेट जो  ऊपर बताये गए सभी विषयों को ध्यान में रख कर ही डिजाईन की गयी है।  नीचे सभी का स्क्रीनशॉट भी मोजूद है डाउनलोड करने के लिए डाउनलोड लिंक पर क्लिक करे। 

My Blogger Tricks





My Blogger Lab





Google Search





   आशा करता हूँ , लेख और बताई गयी ब्लॉग टेम्पलेट आपके ब्लॉग के लिए उपयोगी साबित होगी  :० )
Continue Reading


कैसे बनाये ब्लॉगर ब्लॉग .....

Posted :| Posted By: Piush Trivedi | Labels: , 22 Comments

पिछले सप्ताह किन्ही श्याम जी का ईमेल प्राप्त हुआ॥ श्याम जी का कहना था की ॥ उन्होने hindi4tech ब्लॉग को देखा और वो भी ब्लॉगर प्लेटफोर्म पर एक ब्लॉग बनाना चाहते है ... मगर इसमें परेशानी के चलते उन्होने मुझसे संपर्क किया ॥ :० )

अपने बारे में तो श्याम जी ने कुछ ख़ास बताया नहीं...और न ही में उनसे उनके बारे में कुछ पूछ सका सिर्फ इतने बताया की वो जोनपुर उत्तरप्रदेश के रहने वाले है ... व्यस्तता के चलते पिछले सप्ताह मिले उनके ईमेल का जवाब उन्हे आज दे पा रहा हूँ... श्याम जी अगर hindi4tech की इस पोस्ट को पड़ रहे है तो बताना चाहूँगा की आपके ईमेल के प्रति उतर ईमेल आपको आपके ईमेल पते पर भेज दिया गया है कृपया अपना ईमेल चेक करे ... और जवाबी ईमेल भेजने में हुई देरी के लिए खेद व्यक्त करता हूँ ॥

नीचे ब्लॉगर ब्लॉग बनाने हेतु बेहत आसन tutorial विडियो माध्यम से बताया गया है ॥ आशा करता हूँ इसके द्वारा आप ब्लॉगर प्लेटफोर्म पर अपना ब्लॉगर ब्लॉग तैयार कर पायेंगे :० )

ध्यान दे की ब्लॉगर ब्लॉग पर ब्लॉग बनाने के लिए प्रथम प्रक्रिया ईमेल खता बनाने से शुरू होती है ... अतः मेरी राय में सबसे पहले आप गूगल के gmail.com साईट पर जा कर अपने लिए ईमेल खता पंजीकृत करे ॥ अगर आप के पास yahoo , या Rediffmail का ईमेल खता पहले ही से है व आप इसी के द्वारा अपना ब्लॉग बनाना चाहते है । तो नीचे विडियो में बताये अनुसार blogger.com पर जाये व विडियो tutorial में बताये अनुसार प्रक्रिया अपनाये

Continue Reading


ब्लॉगर Thread कमेन्ट में Smiley's, Youtube विडियो कैसे दिखाए

Posted :| Posted By: Piush Trivedi | Labels: , 3 Comments

ब्लॉगर की तुलना हमेशा ही वर्डप्रेस से की जाती रही है ॥ इसका कारन शायद ब्लॉग्गिंग हेतु यह दूसरा विस्तृत प्लेटफोर्म है ... वर्डप्रेस पर ब्लॉगर के तुलना में अधिक ब्लॉग बनाये जाने का कारन वर्डप्रेस ब्लॉग की उन्नत तकनीक और इसी के साथ विभिन तकनिकी भाषा विकल्पों जैसे html5, css, php आदि का यथासंभव प्रयोग है... वही ब्लॉगर पर भी वर्डप्रेस के मुकाबले आये दिन नयी सुविधाओ का अनावरण कर गूगल द्वारा ब्लागस्पाट प्लेटफोर्म को बेहतर बनाने का प्रयास क्रमशः जारी है ... अभी कुछ ही समय पहले ब्लॉगर द्वारा ब्लॉगर thread comments को शुरू किया गया .... शायद सभी ने इसे अपने ब्लॉग पर सक्रिय तो कर ही किया होगा ... :०)

मेरे पिछले लेख में मैने बताया था की कैसे Blogger Thread Comments में याहू स्मिले'स को दिखाया जाए ...इस लेख पर कुछ पाठको ने अपनी परेशानी बताते हुवे कहा था की ये मोजिला , और क्रोम ब्राव्सर में तो ठीक तरह कार्य करती है मगर Internet Explore में नहीं ... पाठको की इसी परेशानी के निवारण हेतु आज की इस पोस्ट में मैने बताया है की कैसे Smiley's को Internet Explore में भी ठीक तरह से दिखाया जा सके ... ध्यान दे की आज इस लेख में न सिर्फ Internet Explore में Smiley's को दिखाने हेतु tutorial , बल्कि ब्लॉगर thread कमेन्ट में youtube विडियो डालना , किसी ब्लॉग या साईट की Iframe डालना आदि हेतु भी जानकारी दी गयी है ... अतः इसे अपने ब्लॉग पर सक्रिय करने के लिए नीचे क्रमशः प्रक्रिया अपनाते चले :०)

Screenshot






Live Demo

Step 1

  • अपने blogger dashboard पर जाए
  • यहाँ जाए Dashbord > Design > Edit HTML
  • अब ऊपर Expand Widgets चेक बॉक्स पर क्लिक करे
  • यहाँ पर </body> कोड तलाशे
  • अब नीचे बताया गया पूरा कोड </body> के ठीक पहले यथावत डाल दे

<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("emocomments");
theText = bodyText.innerHTML;
theText = theText.replace(/:\)\)/gi, "<img src='https://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt_XVZKI/AAAAAAAAATI/Q35_W0anT6A/21.gif'/>");
theText = theText.replace(/=d&gt;/gi, "<img src='https://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzUt1yQI/AAAAAAAAATY/QHNvnj0gYbU/41.gif'/>");
theText = theText.replace(/:d/gi, "<img src='https://lh3.ggpht.com/_u7a1IFxc4WI/TM-voxnkRKI/AAAAAAAAAS4/PjDn098vm3w/4.gif'/>");
theText = theText.replace(/:p/gi, "<img src='https://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpDb68dI/AAAAAAAAAS8/Yv0Uu3qzG_Q/10.gif'/>");
theText = theText.replace(/:\(\(/gi, "<img src='https://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt5z16MI/AAAAAAAAATE/Hx-7Thmr6do/20.gif'/>");
theText = theText.replace(/:\)/gi, "<img src='https://lh6.ggpht.com/_u7a1IFxc4WI/TM-voiNIw2I/AAAAAAAAASw/aav2hwqeG0c/1.gif'/>");
theText = theText.replace(/:\(/gi, "<img src='https://lh6.ggpht.com/_u7a1IFxc4WI/TM-voq7QQnI/AAAAAAAAAS0/UzoFJOCcPPU/2.gif'/>");
theText = theText.replace(/:-\?/gi, "<img src='https://lh5.ggpht.com/_u7a1IFxc4WI/TM-vua5MF2I/AAAAAAAAATU/N4X-ouMd1-I/39.gif'/>");
theText = theText.replace(/\[\-\(/gi, "<img src='https://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuMg6RQI/AAAAAAAAATQ/rWj7euuKOZs/33.gif'/>");
theText = theText.replace(/:-o/gi, "<img src='https://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpLiW1GI/AAAAAAAAATA/fPyPJcBks7s/13.gif'/>");
theText = theText.replace(/:-t/gi, "<img src='https://lh3.ggpht.com/_u7a1IFxc4WI/TM-vz4hwcNI/AAAAAAAAATo/4ySXuvQWma8/104.gif'/>");
theText = theText.replace(/:-ss/gi, "<img src='https://lh4.ggpht.com/_u7a1IFxc4WI/TM-vzUOH79I/AAAAAAAAATc/oNE5H5vcNtI/42.gif'/>");
theText = theText.replace(/b-\(/gi, "<img src='https://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzrqI4MI/AAAAAAAAATk/BhfFnT0Gbro/66.gif'/>");
theText = theText.replace(/@-\)/gi, "<img src='https://lh6.ggpht.com/_u7a1IFxc4WI/TM-vziH8NXI/AAAAAAAAATg/2evEbN2cJwc/43.gif'/>");
theText = theText.replace(/=\)\)/gi, "<img src='https://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuJ1G41I/AAAAAAAAATM/_jLHXvz6PTg/24.gif'/>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("comment-holder");
theText = bodyText.innerHTML;
theText = theText.replace(/\[img\].*?'.*?\[\/img\]/gi, "");
theText = theText.replace(/\[nct\].*?'.*?\[\/nct\]/gi, "");
theText = theText.replace(/\[youtube\].*?'.*?\[\/youtube\]/gi, "");
theText = theText.replace(/\[img\]/gi, "<div style='clear:both'></div><img style='float:left;margin:10px 0;border:1px solid #DDD;max-width:590px;background:#FFF;padding:4px' src='");
theText = theText.replace(/\[\/img\]/gi, "'/><div style='clear:both'></div>");
theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<iframe width='480' height='390' src='https://www.youtube.com/embed");
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='https://www.youtube.com/embed/");
theText = theText.replace(/&amp;feature=/gi, "?rel=0' '");
theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
theText = theText.replace(/\[nct\]http:\/\/www.nhaccuatui.com\/nghe\?L=/gi, "<div style='overflow:hidden'><embed style='margin-top:-250px;width:300px;height:400px' src='https://www.nhaccuatui.com/l/");
theText = theText.replace(/\[nct\]http:\/\/www.nhaccuatui.com\/nghe\?M=/gi, "<div style='overflow:hidden'><embed style='margin-top:-350px;width:300px;height:400px' src='https://www.nhaccuatui.com/m/");
theText = theText.replace(/\[\/nct\]/gi, "' quality='high' wmode='transparent' type='application/x-shockwave-flash'></embed></div>");
}replaceText();
//]]>
</script>

Step 2

  • अब अपनी ब्लॉग टेम्प्लेट में <b:loop values='data:post.comments' var='comment'> कोड तलाशे
  • अब नीचे बताया गया पूरा कोड <b:loop values='data:post.comments' var='comment'> के ठीक पहले यथावत डाल दे

<div id='emocomments'>

Step 3

  • <b:loop values='data:post.comments' var='comment'> के बाद आपको </b:loop> कोड दिखाई देगा
  • इस कोड के ठीक नीचे </div> कोड रख दे

Step 4

  • अब अपनी ब्लॉग टेम्प्लेट में <data:blogTeamBlogMessage/> कोड तलाशे
  • अब नीचे बताया गया पूरा कोड <data:blogTeamBlogMessage/> के ठीक बाद यथावत डाल दे

<script type="text/javascript">
//<![CDATA[
function moreSmilies() {
    document.getElementById('smiley-more').style.display = 'inline';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()">&#8592;</a></span>';
}
function lessSmilies() {
    document.getElementById('smiley-more').style.display = 'none';
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()">&#8594;</a>';
}
//]]>
</script>
<div class='emoticons'>
<img src='https://lh6.ggpht.com/_u7a1IFxc4WI/TM-voiNIw2I/AAAAAAAAASw/aav2hwqeG0c/1.gif'/>:)
<img src='https://lh6.ggpht.com/_u7a1IFxc4WI/TM-voq7QQnI/AAAAAAAAAS0/UzoFJOCcPPU/2.gif'/>:(
<img src='https://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt_XVZKI/AAAAAAAAATI/Q35_W0anT6A/21.gif'/>:))
<img src='https://lh4.ggpht.com/_u7a1IFxc4WI/TM-vt5z16MI/AAAAAAAAATE/Hx-7Thmr6do/20.gif'/>:((
<img src='https://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuJ1G41I/AAAAAAAAATM/_jLHXvz6PTg/24.gif'/>=))
<span id='smiley-more' style='display: none;'>
<img src='https://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzUt1yQI/AAAAAAAAATY/QHNvnj0gYbU/41.gif'/>=D&gt;
<img src='https://lh3.ggpht.com/_u7a1IFxc4WI/TM-voxnkRKI/AAAAAAAAAS4/PjDn098vm3w/4.gif'/>:D
<img src='https://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpDb68dI/AAAAAAAAAS8/Yv0Uu3qzG_Q/10.gif'/>:P
<img src='https://lh6.ggpht.com/_u7a1IFxc4WI/TM-vpLiW1GI/AAAAAAAAATA/fPyPJcBks7s/13.gif'/>:-O
<img src='https://lh5.ggpht.com/_u7a1IFxc4WI/TM-vua5MF2I/AAAAAAAAATU/N4X-ouMd1-I/39.gif'/>:-?
<img src='https://lh4.ggpht.com/_u7a1IFxc4WI/TM-vzUOH79I/AAAAAAAAATc/oNE5H5vcNtI/42.gif'/>:-SS
<img src='https://lh3.ggpht.com/_u7a1IFxc4WI/TM-vz4hwcNI/AAAAAAAAATo/4ySXuvQWma8/104.gif'/>:-t
<img src='https://lh6.ggpht.com/_u7a1IFxc4WI/TM-vuMg6RQI/AAAAAAAAATQ/rWj7euuKOZs/33.gif'/>[-(
<img src='https://lh6.ggpht.com/_u7a1IFxc4WI/TM-vziH8NXI/AAAAAAAAATg/2evEbN2cJwc/43.gif'/>@-)
<img src='https://lh6.ggpht.com/_u7a1IFxc4WI/TM-vzrqI4MI/AAAAAAAAATk/BhfFnT0Gbro/66.gif'/>b-(
</span>
<span id='smiley-toggle'><a href="javascript:moreSmilies()">&#8594;</a></span>
</div>

Step 5

  • अब अपनी ब्लॉग टेम्प्लेट में ]]></b:skin> कोड तलाशे
  • अब नीचे बताया गया पूरा कोड ]]></b:skin> के ठीक पहले यथावत डाल दे

.emoticons {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;}
.emoticons a, .emoticons a:hover {font-size: 28px;margin-left: 20px;text-decoration:none;}

ध्यान दे :- प्रक्रिया पूर्ण करने के बाद कमेन्ट में image , youtube विडियो , Song लिंक आदि जोडने के लिए नीचे बताये कोड का उपयोग करे :-

  • image डालने के लिए [img] Link [/img] कोड के उपयोग करे //
  • Song लिंक डालने के लिए [nct] Link song [/nct] कोड का उपयोग करे
  • youtube विडियो डालने के लिए [youtube] Youtube Video Link [/youtube] कोड का उपयोग करे
Continue Reading


All In One Share Box Widget for Blogger/blog

Posted :| Posted By: Piush Trivedi | Labels: , 1 Comments

ब्लॉग पर share box widget लगाये । hindi4tech के do you like box, social bookmarking widget की तरह ही इस विजेट में भी facebook, twitter, googleplus link के साथ ही email subscribtion box भी उपलब्ध है । विजेट को आसानी से ब्लॉग पर ले जाया जा सकता है , नीचे बताई गयी प्रक्रिया अपनाये ।

Screen Shot




विजेट ब्लॉग पर ले जाये

  • यहाँ जाये Blogger--->Design--->Page Element
  • यहाँ Add a Gadget पर क्लिक करे
  • यहाँ html/javascript आप्शन चुने
  • नीचे बताया गया पूरा कोड यहाँ डाल दे व विजेट सेव करे :))

<style type="text/css">.h4tbar{width:300px;float:left;background:#FFF url(https://3.bp.blogspot.com/-_xtIGsWA8ak/T0jOgAtcwjI/AAAAAAAABGU/lPRBfMEbD80/s400/%255Bwww.hindi4tech.blogspot.com%255Dsidebartop.gif) top no-repeat;margin:0 0 10px;padding:10px;border:1px solid #DDD;}.h4tbar .h4t-credit{}.h4tbar .h4t-credit a{float:right;font-size:10px;font-weight:bold;text-shadow:1px 1px white;color:#1E598E;text-decoration:none;}.h4tbar h2{background:URL(https://3.bp.blogspot.com/-woBQBoC0Upc/T0jOojv66-I/AAAAAAAABGg/KkyhDv1WF0k/s400/%255Bwww.hindi4tech.blogspot.com%255DSUBSCRIBE.gif) no-repeat;height:50px;margin:0px 0 0px 0;padding:0px 20px 0px 0px;font-size:0px;font-family:Sans-serif, Arial, Helvetica;font-weight:bold;text-transform:uppercase;color:#ffffff;text-shadow:0 1px 0 #fff;}.h4tbar .count{color:#F17C18;font-size:14px;font-weight:bold;font-family:Helvetica, Arial;height:40px;line-height:40px;vertical-align:middle;width:310px;padding:0 0px 0 4px;margin:0;}.h4tbar .count span.bigcount{color:#F17C18;font-size:24px;font-family:Helvetica, Arial;line-height:39px;vertical-align:middle;margin:0px;padding:10px 0px 0px 0;}.h4tbar .subicons{border-bottom:1px solid #e6e6e6;margin:0px 0 0px 0;float:left;width:300px;font-family:Helvetica, Arial;font-size:12px;}.h4tbar .subicons a{text-decoration:none;color:#333333;}.h4tbar .subicons a:hover{text-decoration:underline;color:#333333;}.h4tbar .subicons .rssicon{border-right:1px solid #e6e6e6;background:url(https://4.bp.blogspot.com/-_Sl6mdHtjG4/T0jOwfC480I/AAAAAAAABGs/h6IIuyMba7Y/s400/%255Bwww.hindi4tech.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px 5px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.h4tbar .subicons .googleicon{border-right:1px solid #e6e6e6;background:url(https://4.bp.blogspot.com/-_Sl6mdHtjG4/T0jOwfC480I/AAAAAAAABGs/h6IIuyMba7Y/s400/%255Bwww.hindi4tech.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -37px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.h4tbar .subicons .fbicon{border-right:1px solid #e6e6e6;background:url(https://4.bp.blogspot.com/-_Sl6mdHtjG4/T0jOwfC480I/AAAAAAAABGs/h6IIuyMba7Y/s400/%255Bwww.hindi4tech.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -79px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.h4tbar .subicons .twittericon{background:url(https://4.bp.blogspot.com/-_Sl6mdHtjG4/T0jOwfC480I/AAAAAAAABGs/h6IIuyMba7Y/s400/%255Bwww.hindi4tech.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -121px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}.h4tbar .emailsub{border-bottom:0px solid #e6e6e6;padding:15px 0 0px 0;float:left;width:100%;font-family:Helvetica, Arial;}.h4tbar .emailsub .emailicon{background:url(https://4.bp.blogspot.com/-T98IjxqsJWU/T0jPAlzfjAI/AAAAAAAABG4/-21nr0uMTsU/s400/email.png) no-repeat 0 2px;float:left;padding:0px 15px 0px 50px;margin:0 0 0 5px;width:300px;line-height:20px;vertical-align:middle;font-size:14px;color:#333;}.h4tbar .emailsub .emailupdatesform{margin:15px 0 5px 5px;width:300px;float:left;}.h4tbar .emailsub .emailupdatesform input.emailupdatesinput{background:#fff !important;float:left;border:1px solid #d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:185px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}.h4tbar .emailsub .emailupdatesform input.joinemailupdates{/*linear-gradient*/background:-webkit-gradient(linear,left top,left bottom,color-stop(#F9EAD4,0),color-stop(#F9780E,1));background:-webkit-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-moz-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-o-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#F9780E));border:1px solid #F9780E;text-transform:none;font:bold 12px arial;color:#fff;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;}</style><div class="h4tbar"><h2 class='title'>Subscribe Now!</h2><div class="count"><span class="bigcount"><a rel="nofollow" href="https://feeds.feedburner.com/hindi4tech"><img style="border:0" alt="" src="https://feeds.feedburner.com/%7Efc/hindi4tech?bg=F2F2F2&amp;fg=666&amp;anim=1" height="26" width="88" /></a> </span>Learn Free Pro Tricks daily </div><div class="subicons"><div class="rssicon">&nbsp;<a rel="nofollow" href="https://feeds.feedburner.com/hindi4tech" target="_blank"> RSS</a></div><div class="googleicon">&nbsp;<a href="https://plus.google.com" rel="author" target="_blank"> G+</a></div><div class="fbicon"> &nbsp;<a href="https://www.facebook.com/hindi4tech" target="_blank" rel="nofollow">FB</a></div><div class="twittericon">&nbsp;<a href="https://www.twitter.com/hindi4tech" target="_blank" rel="nofollow">Twitter</a></div></div><div class="emailsub"><div class="emailicon"><p style=" width:270px; color:#3A3A3A; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial; padding:0; margin:0;">Receive Our All Updates In Your Inbox by &nbsp; &nbsp; submitting your Email ID below.</p></div><div class="emailupdatesform"><form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=hindi4tech', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="hindi4tech" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form><span class="h4t-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="https://hindi4tech.blogspot.com/" target="_blank" >Blogger Widgets &#62;&#62;</a></span></div></div> </div>

ध्यान दे :- हरे रंग में बताये गए कोड को बदलना ना भूले
Continue Reading


Social Bookmarking Widget For Blogger

Posted :| Posted By: Piush Trivedi | Labels: , 1 Comments

ब्लॉग पर 4 इन 1 विजेट लगाये । पिछले लेखो में में multi tab widget , drop down widget और do you like box विजेट के बारे में आपको बता चूका हूँ । do you like box विजेट की तरह ही इस विडजेट की खासियत यह की एक ही विजेट में फेसबुक, twitter, google+ , feedburner विजेट को आसानी से रखा जा सकता है। इस widget को अपने ब्लॉग पर लगाने से पूर्व इसका लाइव डेमो देखे :


Live Demo





विजेट को ब्लॉग पर कैसे ले जाए

  • सबसे पहले ब्लॉगर खाते में प्रवेश करे , यहाँ जाये Blogger--->Design--->Edit HTML
  • अब ऊपर expand widget template cheakbox पर क्लिक करे
  • अब keyboard की ctrl+F कुंजी दबाये व यहाँ </head> कोड तलाशे
  • अब इस कोड के ठीक पहले या बाद में नीचे दिया गया पूरा कोड यथावत डाल दे


<link href='https://piushtrivedi.neocities.org/4in1widgetv2.css' rel='stylesheet'/>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });
</script>


ध्यान दे :-अगर आपकी ब्लॉग template में Ajax 1.4.2 jQuery script पहले से ही उपलब्ध है तो लाल कलर में दर्शाए गए कोड को अपनी ब्लॉग template में डाले

विजेट कोड अपने ब्लॉग पर रखे

  • नीचे सभी fild को भर कर Generat button पर क्लिक करे
  • इसके बाद add To Blogger tab पर क्लिक करे

Continue Reading


अपनी गूगल + प्रोफाइल हेतु custom url बनाये

Posted :| Posted By: Piush Trivedi | Labels: , 1 Comments

फेसबुक की तरह ही अपने गूगल+ खाते के लिए कस्टम प्रोफाइल url बनाये. जब फेसबुक द्वारा प्रोफाइल हेतु उपयोगकर्तानामों की पेश की गयी तब ब्रांडिंग अपने चरम पर थी , और लगभग हर किसी ने इसे अपने सामाजिक प्रोफाइल में ब्रांड बनाने की कोशिश की. अब आप भी अपने गूगल + प्रोफाइल के लिए एक अनौपचारिक gplus.to / user name की तरह ही पूरी तरह से कस्टम उपयोगकर्ता नाम बना सकते हैं. गूगल की इस नयी सुविधा को अपने गूगल + प्रोफाइल में सक्रिय करने के लिए नीचे प्रक्रिया देखे .
  • सबसे पहले इस साईट पर जाए gplus.to
  • यहाँ पर अपनी गूगल + प्रोफाइल हेतु एक प्रयोक्ता नाम चुने .
  • अगले कदम में अपने गूगल + खाते से अपनी profile id ले जो नीचे बताये अनुसार होगी.

Google+ profile url

Google plus ID

4. दोनों आंकडे भर कर ADD बटन पर क्लिक करे , आपको अपनी गूगल + प्रोफाइल नीचे बताये अनुसार प्राप्त होगी .

gplus.to/username


मेरा गूगल + प्रोफाइल url :

gplus.to/piushtrivedi

5.
प्रक्रिया पूरी करने पर गूगल के database में आपका प्रोफाइल url संग्रहित हो चूका है , अब आप अपने इस नए प्रोफाइल url को सार्वजनिक रूप से कही भी प्रयोग कर सकते है. ! :)

Continue Reading


Multi Tab Widget For Blogger Blog

Posted :| Posted By: Piush Trivedi | Labels: , 2 Comments

ब्लॉग पर Multi Tab Widjet लगाये. विडजेट की खासियत यह की ब्लॉग के Sidebar में अधिक सामग्री को एक ही विडजेट के स्थान पर रखा जा सकता है. और दूसरा यह की विडजेट को templete में सहेजने के बाद यह ब्लॉग के sidebar में sidebar gadjet के रूप में आ जाता है, जिसमे अपने अनुसार विडजेट को एडिट करके सामग्री डाली जा सकती है.
इस विडजेट को अपने ब्लॉग पर लगाने के लिए नीचे पक्रिया अपनाये.







  • अपने ब्लॉगर खाते में प्रवेश करे
  • अब Layout > Edit HTML पर जाए
  • यहाँ</head> कोड तलाशे
  • इस कोड के तुरंत बाद नीचे बताया कोड पेस्ट करे

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
  var arg;
  this.div = null;
  this.classMain = "tabber";
  this.classMainLive = "tabberlive";
  this.classTab = "tabbertab";
  this.classTabDefault = "tabbertabdefault";
  this.classNav = "tabbernav";
  this.classTabHide = "tabbertabhide";
  this.classNavActive = "tabberactive";
  this.titleElements = ['h2','h3','h4','h5','h6'];
  this.titleElementsStripHTML = true;
  this.removeTitle = true;
  this.addLinkId = false;
  this.linkIdFormat = '<tabberid>nav<tabnumberone>';
  for (arg in argsObj) { this[arg] = argsObj[arg]; }
  this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
  this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
  this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
  this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
  this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
  this.tabs = new Array();
  if (this.div) {
    this.init(this.div);
    this.div = null;
  }
}

tabberObj.prototype.init = function(e)
{

  var
  childNodes,
  i, i2,
  t,
  defaultTab=0,
  DOM_ul,
  DOM_li,
  DOM_a,
  aId,
  headingElement;
  if (!document.getElementsByTagName) { return false; }
  if (e.id) {
    this.id = e.id;
  }
  this.tabs.length = 0;
  childNodes = e.childNodes;
  for(i=0; i < childNodes.length; i++) {
    if(childNodes[i].className &&
       childNodes[i].className.match(this.REclassTab)) {
      t = new Object();
      t.div = childNodes[i];
      this.tabs[this.tabs.length] = t;

      if (childNodes[i].className.match(this.REclassTabDefault)) {
    defaultTab = this.tabs.length-1;
      }
    }
  }
  DOM_ul = document.createElement("ul");
  DOM_ul.className = this.classNav;
  for (i=0; i < this.tabs.length; i++) {

    t = this.tabs[i];

    t.headingText = t.div.title;

    if (this.removeTitle) { t.div.title = ''; }

    if (!t.headingText) {

      for (i2=0; i2<this.titleElements.length; i2++) {
    headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
    if (headingElement) {
      t.headingText = headingElement.innerHTML;
      if (this.titleElementsStripHTML) {
        t.headingText.replace(/<br>/gi," ");
        t.headingText = t.headingText.replace(/<[^>]+>/g,"");
      }
      break;
    }
      }
    }

    if (!t.headingText) {
      t.headingText = i + 1;
    }

    DOM_li = document.createElement("li");

    t.li = DOM_li;

    DOM_a = document.createElement("a");
    DOM_a.appendChild(document.createTextNode(t.headingText));
    DOM_a.href = "javascript:void(null);";
    DOM_a.title = t.headingText;
    DOM_a.onclick = this.navClick;

    DOM_a.tabber = this;
    DOM_a.tabberIndex = i;

    if (this.addLinkId && this.linkIdFormat) {

      aId = this.linkIdFormat;
      aId = aId.replace(/<tabberid>/gi, this.id);
      aId = aId.replace(/<tabnumberzero>/gi, i);
      aId = aId.replace(/<tabnumberone>/gi, i+1);
      aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));

      DOM_a.id = aId;
    }

    DOM_li.appendChild(DOM_a);

    DOM_ul.appendChild(DOM_li);
  }

  e.insertBefore(DOM_ul, e.firstChild);

  e.className = e.className.replace(this.REclassMain, this.classMainLive);

  this.tabShow(defaultTab);

  if (typeof this.onLoad == 'function') {
    this.onLoad({tabber:this});
  }

  return this;
};

tabberObj.prototype.navClick = function(event)
{

  var
  rVal,
  a,
  self,
  tabberIndex,
  onClickArgs;

  a = this;
  if (!a.tabber) { return false; }

  self = a.tabber;
  tabberIndex = a.tabberIndex;

  a.blur();

  if (typeof self.onClick == 'function') {

    onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};

    /* IE uses a different way to access the event object */
    if (!event) { onClickArgs.event = window.event; }

    rVal = self.onClick(onClickArgs);
    if (rVal === false) { return false; }
  }

  self.tabShow(tabberIndex);

  return false;
};

tabberObj.prototype.tabHideAll = function()
{
  var i;

  for (i = 0; i < this.tabs.length; i++) {
    this.tabHide(i);
  }
};

tabberObj.prototype.tabHide = function(tabberIndex)
{
  var div;

  if (!this.tabs[tabberIndex]) { return false; }

  div = this.tabs[tabberIndex].div;

  if (!div.className.match(this.REclassTabHide)) {
    div.className += ' ' + this.classTabHide;
  }
  this.navClearActive(tabberIndex);

  return this;
};

tabberObj.prototype.tabShow = function(tabberIndex)
{

  var div;

  if (!this.tabs[tabberIndex]) { return false; }

  this.tabHideAll();

  div = this.tabs[tabberIndex].div;

  div.className = div.className.replace(this.REclassTabHide, '');

  this.navSetActive(tabberIndex);

  if (typeof this.onTabDisplay == 'function') {
    this.onTabDisplay({'tabber':this, 'index':tabberIndex});
  }

  return this;
};

tabberObj.prototype.navSetActive = function(tabberIndex)
{

  this.tabs[tabberIndex].li.className = this.classNavActive;

  return this;
};

tabberObj.prototype.navClearActive = function(tabberIndex)
{

  this.tabs[tabberIndex].li.className = '';

  return this;
};

function tabberAutomatic(tabberArgs)
{
  var
    tempObj,
    divs,
    i;

  if (!tabberArgs) { tabberArgs = {}; }

  tempObj = new tabberObj(tabberArgs);

  divs = document.getElementsByTagName("div");
  for (i=0; i < divs.length; i++) {
    if (divs[i].className &&
    divs[i].className.match(tempObj.REclassMain)) {
      tabberArgs.div = divs[i];
      divs[i].tabber = new tabberObj(tabberArgs);
    }
  }
  return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{
  var oldOnLoad;

  if (!tabberArgs) { tabberArgs = {}; }

  oldOnLoad = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = function() {
      tabberAutomatic(tabberArgs);
    };
  } else {
    window.onload = function() {
      oldOnLoad();
      tabberAutomatic(tabberArgs);
    };
  }
}

/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */

if (typeof tabberOptions == 'undefined') {

    tabberAutomaticOnLoad();

} else {

  if (!tabberOptions['manualStartup']) {
    tabberAutomaticOnLoad(tabberOptions);
  }

}

//]]>
</script>

 

 

Step 4:-  अब अपनी templete में ]]></b:skin> कोड तलाशे व इसके ठीक बाद नीचे दिया गया कोड पेस्ट करदे .

/*---------- Tabber Start-------- */


.tabberlive{
margin:0;
padding:5px;
clear:both;
background:$tbbxbgcolor;
border:1px solid $tbbxbrcolor;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid $tbbxbrcolor;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid $tbbxbrcolor;
border-top:0;
background:$tbbxcolor1;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}


/*------- Tabber End--------*/

 

Step 5:-अब अपनी templete में variable definitions कोड तलाशे व इसके ठीक बाद नीचे दिया गया कोड पेस्ट करदे .

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">

 

अगर आपकी templete में Variable definitions   कोड नहीं है तो #navbar-iframe कोड तलाशे व ठीक इसके ऊपर यह कोड पेस्ट कर दे

/* Variable definitions
   ====================

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">

*/

 


Step 6:- अब अपनी templete में <div id='sidebar-wrapper'> कोड तलाशे व इसके ठीक बाद नीचे दिया गया कोड पेस्ट करदे .

<div style='clear:both;'/>

<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
<b:section class='tabbertab' id='tab4' maxwidgets='1'/>

</div>

 

Step 7:- परिवर्तन सेव करे .

अब Layout
> Page Elements पर जाए

यह विडजेट आपकी ब्लॉग templete में कुछ इस तरह दिखाई देगा



विजेट का लाइव डेमो मेरे ब्लॉग के Sidebar में भी उपलब्ध है ----->>>
Continue Reading


Css Template For Blogger

Posted :| Posted By: Piush Trivedi | Labels: , 1 Comments

Blogger , Wordpress ,और Website template सभी में उपलब्ध Css Templete . Meta Tag , Java Script , और बेहतर डिजाईन के साथ ही ये सभी Templete लगभग सभी मुफ्त और प्रीमियम होस्टिंग सर्वर हेतु डिजाईन है. इन Templete को पाने के लिए आप मुझे मेल कर सकते है.




































Continue Reading


Related Post Widget Plugin For Blogger Blog

Posted :| Posted By: Piush Trivedi | Labels: , , 4 Comments


ब्लॉग पर realeted post विडजेट लगाये . realeted post विडजेट का ब्लॉग पर उपयोग सम्बंधित पोस्ट या label से जुडी अन्य पोस्ट को दर्शाने तक ही सीमित नहीं है. बल्कि यह विडजेट तकनीकी कारणों से भी ब्लॉग हेतु बेहत उपयोगी है जिनमे कुछ ख़ास कारण Blog traffic , alexa rank , और ऐसे ही कुछ कारण.


इस realeted post विडजेट को अपने ब्लॉग पर लगाये मिनटों में नीचे पक्रिया देखे .
  • अपने ब्लॉगर खाते में प्रवेश करे .
  • Layout >>Edit HTML पर जाए
  • यहाँ Expand Widget Templates checkbox. पर क्लिक करे
  • अब ]]></b:skin> कोड ढूंढे
अब नीचे दिया गया पूरा कोड ]]></b:skin> के पहले यथावत डाल डे.
<!--RelatedPostsStarts-->
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
list-style:none;
}
#related-posts ul li {
background: transparent url(https://3.bp.blogspot.com/_7wsQzULWIwo/SuM3oFg5zlI/AAAAAAAACHo/n5UluB5ugMI/s400/255.gif) no-repeat scroll 0px 4px;
margin: 0.3em 0;
padding: 0 0 0.8em 20px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

#related-posts ul li:hover{
background: transparent url(https://2.bp.blogspot.com/_7wsQzULWIwo/SuM3oYoTkRI/AAAAAAAACHw/Dig1etGrcpY/s400/251.gif) no-repeat scroll 0px 4px;
}

</style>
<script language='JavaScript'>
//<![CDATA[
var relatedTitles = new Arrayundefined);
var relatedTitlesNum = 0;
var relatedUrls = new Arrayundefined);
function related_results_labelsundefinedjson) {
for undefinedvar i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for undefinedvar k = 0; k < entry.link.length; k++) {
if undefinedentry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicatesundefined) {
var tmp = new Arrayundefined0);
var tmp2 = new Arrayundefined0);
forundefinedvar i = 0; i < relatedUrls.length; i++) {
ifundefined!containsundefinedtmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function containsundefineda, e) {
forundefinedvar j = 0; j < a.length; j++) if undefineda[j]==e) return true;
return false;
}
function printRelatedLabelsundefined) {
var r = Math.floorundefinedundefinedrelatedTitles.length - 1) * Math.randomundefined));
var i = 0;
document.writeundefined'<ul>');
while undefinedi < relatedTitles.length && i < 20) {
document.writeundefined'<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if undefinedr < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.writeundefined'</ul>');
}
//]]>
</script>
<!--RelatedPostsStops-->

  • अब अपनी ब्लॉग templete में <div class='post-footer'> कोड तलाशे
  • इस कोड के ठीक नीचे यह कोड डाल दे
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=9&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicatesundefined); printRelatedLabelsundefined);
</script>
</div>


परिवर्तन सेव करे :)

कोड का लाइव डेमो नीचे Related Posts पर देखे
Continue Reading


Twitter Fanbox Widget For Bloger/ Wordpress Blog

Posted :| Posted By: Piush Trivedi | Labels: , , 1 Comments

Facebook की तरह Twitter Fanbox विडजेट . जिससे ब्लॉग पर आने वाले पाठक बिना ब्लॉग को छोडे twitter पर ब्लॉग गतिविधि follow कर सकते है.
इसके लिए नीचे बताये अनुसार पक्रिया पूरी करे कुछ ही मिनटों में twitter fanbox आपके ब्लॉग पर सक्रिय होगा.








  • अपने ब्लॉगर खाते में जाए;
  • अब Add A Gadjet >>HTML/JavaScript में जाए



व यहाँ नीचे बताया पूरा कोड पेस्ट करदे .


<script type="text/javascript"
src="https://s.moopz.com/fanbox_init.js"></script><div
id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("HINDI4TECH");</script>

 


ध्यान दे इस कोड में HINDI4TECH कोड की जगह आपका Twitter User Name डालना न भूले .
Continue Reading