Premium: Google Search Blogger Template

  

       
        संभवतः ब्लॉगर वेब पर चलने वाला सबसे पुराना ब्लॉगिंग प्लेटफॉर्म है, Google ब्लॉगर 16 वर्षों से अब तक लाखों ब्लॉगर्स का पसंदीदा प्लेटफार्म  रहा है, और अब भी इस सूची में एक महत्वपूर्ण स्थान रखता है। जो अभी भी दुनिया के करोडो यूजर्स की पहली पसंद है , ब्लॉगर प्लेटफार्म का एक बड़े यूजर्स का आधार है,लेखक और निजी ब्लॉगर्स । ब्लॉगर ने ऐसे कई लोगों के लिए विकल्प सुझाये जो इंटरनेट पर तकनीकी विशेषज्ञ नहीं हैं इसकी मुख्य विशेषताओं में पहला यह सरल और सीखने में आसान है मूल कंप्यूटर ज्ञान वाले कोई भी आसानी से एक ब्लॉगर खाता खोल सकता है और अपनी रचनात्मकता का पता लगा सकता है। 

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

        इसमें गूगल सर्च की ही तरह कुछ विशेष गैजेट  हैं जैसे 

• गूगल स्टाइल पृष्ठ नेविगेशन
• यूजर लोकेशन 
• मल्टी लैंग्वेज सपोर्ट 
• कस्टम सर्च ऑप्शन 
• गूगल स्टाइल रीलेटेड सर्च क्वेरी 
• गूगल sign in  ऑप्शन । 
• टेबलेट , मोबाइल एवं सभी रेसोलुशन पर रेस्पॉन्सिव 
• इनबिल्ट गूगल मैप्स लोकेशन डाटा 
• रिव्यु रेटिंग ऑप्शन

       
         टेम्पलेट्स ब्लॉगर प्लेटफॉर्म के लिए ख़ास  हैं, आप किसी भी डेटा को खोए बिना किसी भी समय आपके ब्लॉग के टेम्पलेट को आसानी से संपादित कर सकते हैं। ब्लॉगर के बहुत सारे टेम्पलेट इंटरनेट पर उपलब्ध हैं, दोनों मुफ्त और सशुल्क संस्करण उपलब्ध हैं।

         ब्लॉगिंग हाल के दशक में सबसे अधिक पसंदीदा  विषयों में से एक है, और न केवल व्यक्तियों और रचनात्मक लेखकों के लिए, जो नेट, छोटे और बड़े व्यापार मालिकों पर अपने स्वयं के समुदायों का निर्माण करना पसंद करते हैं, ब्लॉगिंग एक अद्भुत और किसी भी तरह की जोखिम से मुक्त एक बेहतरीन विकल्प है , मुद्दा चाहे व्यक्तिगत , व्यावसायिक या कुछ और हो हर किसी क्षेत्र में जैसे खोज इंजन की दृश्यता और ब्रांडिंग संभावनाओं में वृद्धि, प्राधिकरण जैसी चीज़ों, और रूपांतरण दर में वृद्धि से - ब्लॉगिंग में सभी के लिए सब कुछ उपलब्ध है

           क्लासीफायड या बिज़नेस डायरेक्टरी तो आप सभी जानते ही होंगे, Just Dial , FlipKart का नाम तो आप सभी ने सुना ही होगा।  इस तरह की कोई साइट या क्लासिफाइड एजेंसी आज कमाई के लिए बेहतरीन विकल्प है , अपने शहर का लोकल सर्च इंजन , या बिजनेस डायरेक्टरी आदि सभी तरह की साइट आज कल सबसे प्रचलित ऑनलाइन बिज़नेस  हेतु एक बेहतर विकल्प है।  

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

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

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

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

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

            आशा करता हूँ हिंदी 4 टेक पर सुझाई अन्य टेम्पलेट की तरह यह टेम्पलेट और जानकारी आप सभी के लिए उपयोगी सिद्ध होगी।   

Live Demo

Continue Reading

यूट्यूब वीडियो को कैसे मोबाइल फ्रेंडली बनाये ( Responsive Video)

   हिंदी ४ टेक के पिछले लेख में मैंने बताया था की कैसे अपने ब्लॉग या वेबसाइट को मोबाइल फ्रेंडली स्क्रीन रेसोलुशन में बदला जाये , ब्लॉग टेम्पलेट responceive स्वरुप में बदलने के बाद सबसे पहला कदम ब्लॉग पर रखे गए youtube  वीडियो   को मोबाइल फ्रेंडली  responsive बनाना।  आज के इस लेख में बताया है की कैसे विभिन्न स्क्रीन रेसोलुशन पर Youtube वीडियो को एम्बेड किया जाये। यूट्यूब वीडियो स्वतः मोबाइल फ्रेंडली बनाने के लिए निम्न दो विकल्पों का इस्तेमाल कर सकते है  - 

•  आप एक मोबाइल फ्रेंडली डिज़ाइन से अपने ब्लॉग टेम्पलेट बदले , जिससे  सभी मौजूदा सामग्री स्वयं ब्राउज़र विंडो आकार के अनुसार समायोजित हो जाती है । 
• आप एक नया ब्लॉग या वेबसाइट बनाये और सभी नए एम्बेडेड वीडियो मोबाइल फ्रेंडली  आकार में बदले । 

    गूगल "ऑटो यूट्यूब वीडियो " सर्च करने पर ढेरो  साइटों पर इस हेतु  टिप्स  मिल जायेंगे  - मगर जहाँ तक मैंने देखा है उन तमाम ब्लॉग पर सुझाई गई टिप्स बेहत  पेचीदा है , इसी कड़ी में आज के इस लेख में बताया है की कैसे एक साधारण सी स्क्रिप्ट से youtube embed वीडियो को मोबाइल फ्रेंडली बनाया जाये , बस नीचे बताये कुछ आसान चरण अपनाये और कुछ ही पलो में बताई गयी टिप्स आपके ब्लॉग पर सक्रिय-----  

इस लेख द्वारा आपको  तीन चरणो का पालन करना है  - 

•  अपने सभी मौजूदा वीडियो का कोड नीचे बताये कोड से बदलने की जरुरत है ।
•  नए वीडियो के लिए, आप नए स्वरूप में उन्हें डालने के लिए विकल्प का अवश्य ख्याल रखे । 
• "56.25%" वास्तव में वीडियो के डिस्प्ले मोड का  अनुपात है। सबसे नए वीडियो इस श्रेणी में आते हैं, दूसरे  वीडियो  ठीक से प्रदर्शित करने के लिए इस कोड को पुराने कोड से बदले । 

यहाँ आप किसी भी मौजूदा कोड को बदलने की जरूरत नहीं है, जहां इस हेतु एक आसान समाधान है। आपको बस अपने एम्बेड youtube iframe में  कुछ लाइनें डालनी  है। 

Step 1 :-

 आवश्यकता: इस प्रक्रिया को पूरी करने के लिए jQuery JavaScript की आवश्यकता है। तो सबसे पहले अपने ब्लॉग शीर्ष <head>  में निम्नलिखित कोड  को जोड़े ।

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Step 2 :-

अपने ब्लॉग के <head> टैग के ठीक पहले नीचे बताया गया पूरा कोड डाले

<script src="https://cdn.rawgit.com/skipser/youtube-autoresize/master/youtube-autoresizer.js"></script>

Step 3 :-

अगर ऊपर बताया कोड आपके ब्लॉग पर काम नहीं कर रहा है तो इस नए स्क्रिप्ट कोड को अपने ब्लॉग पर यथावत डाले और परिवर्तन सहेजे

/*
* Youtube video auto-resizer script
* Created by https://hindi4tech.blogspot.com
*/
$(document).ready(function() {
if(typeof YOUTUBE_VIDEO_MARGIN == 'undefined') {
YOUTUBE_VIDEO_MARGIN=5;
}
$('iframe').each(function(index,item) {
if($(item).attr('src').match(/(https?:)?\/\/www\.youtube\.com/)) {
var w=$(item).attr('width');
var h=$(item).attr('height');
var ar = h/w*100;
ar=ar.toFixed(2);
//Style iframe
$(item).css('position','absolute');
$(item).css('top','0');
$(item).css('left','0');
$(item).css('width','100%');
$(item).css('height','100%');
$(item).css('max-width',w+'px');
$(item).css('max-height', h+'px');
$(item).wrap('<div style="max-width:'+w+'px;margin:0 auto; padding:'+YOUTUBE_VIDEO_MARGIN+'px;" />');
$(item).wrap('<div style="position: relative;padding-bottom: '+ar+'%; height: 0; overflow: hidden;" />');
}
});
});

 यह काम किस प्रकार करता है। 

बताई गयी स्क्रिप्ट पेज में youtube वीडियो iframe को स्वतः ही मोबाइल फ्रेंडली संस्करण के साथ उन्हें बदल देता है। उदाहरण के लिए, यहाँ एक एम्बेडेड यूट्यूब iframe को नए कोड के साथ बदलने का तरीका बताया गया है -

<div style="max-width:560px;margin:0 auto; padding:5px;">
<div style="position: relative;padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe width="560" height="315" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/hzixp8s4pyg?showinfo=0" style="position: absolute; top: 0px; left: 0px; width: 100%;
height: 100%; max-width: 560px; max-height: 315px;"></iframe>
</div>
</div>

आप देख सकते हैं, उक्त कोड में youtube iframe को एक div टैग से बदला गया है वीडियो शुरू में मूल आकार में दिखाई देंगे और जैसे ही ब्राउज़र चौड़ाई कम होती है, तो यह उसके अनुसार स्वतः ही मोबाइल आकर में रूपांतरित हो जायेगा । 

Step 4 :-

ऊपर उदाहरण में बताये गए div टैग से अपने ब्लॉग पोस्ट के youtube iframe कोड को बदले .....

Livedemo

Mobile Version Cheak

Continue Reading

ब्लॉग टेम्पलेट को कैसे मोबाइल फ्रेंडली बनाये ( Responsive Web Design)

    मोबाइल फ्रेंडली वेब डिज़ाइन  इन दिनों प्रोफेशनल  वेब डिजाइनिंग का एक हिस्सा बन गई  है। यहां तक ​​कि अपनी वेबसाइट या ब्लॉग पर हर कोई मोबाइल फ्रेंडली वेब डिजाइन चाहता हैं। लगभग सभी बड़े वेब प्लेटफार्म मोबाइल फ्रेंडली वेब  संस्करण का उपयोग कर रहे हैं। मोबाइल फ्रेंडली वेब डिज़ाइन तेज गति से लोड होने के साथ ही Seo Friendly भी है । लेकिन मुख्य सवाल है, हम मोबाइल फ्रेंडली वेब डिज़ाइन  के रूप में वेबसाइट टेम्पलेट डिजाइन कर सकते हैं,हम मोबाइल फ्रेंडली ब्लॉग टेम्प्लेट के रूप में ब्लॉगर आधारित टेम्पलेट डिजाइन कर सकते है?  तो जवाब है , हाँ आप कर सकते हैं। जैसा की आप जानते है की ब्लॉगर ब्लॉग के विकास के लिए एक बड़ा सीएमएस मंच  है। यहां तक ​​कि ब्लॉगर प्लेटफार्म पर WordPress की तुलना में कई अदभुत फीचर हैं। WordPress  की तुलना में टेम्पलेट डिजाइन और अधिक आसान ब्लॉगर में है। आकर्षक वेब  डिजाइन करने के लिए हमे  उन्नत तकनीकी  डिजाइन भाषाओं जैसे : एचटीएमएल, सीएसएस, js , jQuery, ajax आदि की जरूरत होती है।
इसी कड़ी में आज मैं आपको मोबाइल फ्रेंडली ब्लॉगर टेम्पलेट में अपने वर्तमान ब्लॉगर टेम्पलेट को  परिवर्तित करने के लिए कुछ आसान चरण जिनसे की कुछ ही पलो में आपकी ब्लॉग टेम्पलेट पूरी तरह मोबाइल फ्रेंडली होगी बस नीचे बताई प्रक्रिया अपनाये :- 

मोबाइल फ्रेंडली डिजाइन का मतलब क्या है? 

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

सबसे अच्छा मोबाइल फ्रेंडली डिजाइन या मोबाइल संस्करण कौन सा है? 

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

मोबाइल फ्रेंडली वेब डिज़ाइन में अपने वर्तमान ब्लॉगर टेम्पलेट कन्वर्ट करना

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

Step 1 :-

• keyboard की ctrl+F कुंजी दबाये व यहाँ <head> कोड तलाशे
• अब इस कोड के ठीक बाद में नीचे दिया गया पूरा कोड यथावत डाल दे

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

Step 2 :-

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

@media screen and (max-width : 1280px) {

/* For Size Screen Less than 1280 ---*/
/* CSS CODE HERE FOR DESKTOP ---*/
} @media screen and (max-width : 1024px) {

/* For Size Screen Less than 1024 ---*/
/* CSS CODE HERE FOR TABLETS ---*/
} @media screen and (max-width : 768px) {

/* For Size Screen Less than 768 ---*/
/* CSS CODE HERE FOR SMALL TABLETS ---*/
} @media screen and (max-width : 640px) {

/* For Size Screen Less than 640 ---*/
/* CSS CODE HERE FOR IPHONE ---*/
} @media screen and (max-width : 480px) {

/* For Size Screen Less than 480 ---*/
/* CSS CODE HERE FOR SMARTPHONES ---*/
} @media screen and (max-width : 320px) {

/* For Size Screen Less than 320 ---*/
/* CSS CODE HERE FOR SMALL MOBILES ---*/
}

अपने  ब्लॉग के सभी कोड्स जैसे Header, Post Body, Sidebar, Footer  और अन्य खंड हेतु कोड रखे।

/* CSS CODE HERE ---*/ कोड को नीचे उदाहरण में बताये अनुसार बदले

 @media स्क्रीन टैग अलग अलग स्क्रीन आकार के लिए उत्तरदायी है 

 (max-width : **px) कोड से आशय है की इस कोड से अधिकतम चौड़ाई पर यह कोड स्वतः ही निष्क्रिय हो जायेगा उद्धरण के लिए आपने इस कोड को 320 px के  अंतर्गत रखा तो यह कोड सिर्फ (0 -320 px ) तक ही कार्य करेगा जैसे ही स्क्रीन साइज 320 पक्स से अधिक हुई यह कोड निष्क्रिय हो जायेगा 

एक उदाहरण देखें

#main-wrapper  { width:100%; margin:0px auto; }
.header-wrapper {  width:100%;  }
#content {   margin-right:0; width:100%; float:left;  }
#sidebar {  display:none;  }
#footer-wrapper { display:none; }
}

नीचे मेरे दोनों ब्लॉग Hindi4Tech , और Asha The Blog दोनों का ही मोबाइल वर्सन बताया गया है निवेदन करूँगा पहले मोबाइल संस्करण चेक करले :-

1.Hindi4Tech

Mobile Version Cheak

2.Asha TheBlog

Mobile Version Cheak

//// परिवर्तन सहजने के बाद गूगल सर्च में आपका ब्लॉग लिंक कुछ इस तरह दिखाई देगा.....

Continue Reading

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

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

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

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

Step 1 :-

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

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

Hindu Panchang & Hindi Rashifal Widget For Blogger/ Wordpress Website/ Astrology Widget Horoscope Widget Daily Horoscope Hindi

हिंदी ब्लोग्स के लिए हिन्दू तिथि पंचांग, और हिंदी राशिफल विजेट। विजेट की खासियत में यह ही कहना चाहूँगा की हिन्दू पंचांग विजेट प्रतिदिन की तिथि, वार , समय, योग, नक्षत्र आदि सभी की जानकारी देता है।। और हिंदी राशिफल विजेट सभी 12 राशियों का दैनिक राशिफल बताता है .. यह राशिफल प्रतिदिन स्वतः ही अपडेट होता रहता है ,,, नीचे क्रमशः दोनों विजेट के लाइव डेमो के साथ ही इन्हे अपने ब्लॉग/ साईट पर ले जाने का लिंक भी दिया है . ....
आशा करता हूँ विजेट आप पसंद करेंगे :-)

Hindu Panchang Widget

Install Code:-

<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRPb8MqGwHc2K6v3U5mOz0u2yXxFVEdOgLQL0ntERjiT8lojbe13gSPM7UBxFHTbr4tKNPQfzN2IDAcCtucNLR-teQ1Z4xz0GC2bdZtyFF1m2f53RlDMW8HeoJWpayVF6FrhMN5mVxXSWw/s1600/panchangyyy-copy.png') no-repeat scroll left top transparent; height: 325px;overflow:hidden!important; margin: 0px auto; padding: 40px 0px 0px 5px; text-align: left; width: 290px;"><iframe style="width: 273px; height: 270px;border: 2px solid #ddd;" src="https://www.igoogleportal.com/shindig/gadgets/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/109787730588197067267/hindi_panchang.xml&lang=en&country=ALL" allowtransparency="true" frameborder="0" scrolling="auto"> </div>

English Rashifal Widget

Install Code:-

<iframe src="https://bit.ly/2DLbYIl" height="500" width="300" scrolling="no" frameborder="0"></iframe>

Continue Reading

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

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

           आशा करता हूँ , इस प्रयास को आप सराहेंगे , इस नए ब्लॉग संकलक के बारे में बताना चाहूंगा की अन्य ब्लॉग डायरेक्टरी की तरह यहाँ भी आपको ब्लॉग पंजीकरण के कुछ आसान प्रक्रिया से गुजरना होगा , और कुछ ही मिनटों में आपका ब्लॉग , ब्लॉग संकलक पर सक्रिय होगा।  

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

अपना ब्लॉग जोड़ने के लिए यहाँ क्लिक करे 

Continue Reading

3+ Professional Blogger Templates For Download

           ब्लॉग टेम्पलेट किसी भी ब्लॉग के सफलता के लिए बेहद मायने रखती है।  ब्लॉग का सिर्फ बेहतर दिखना ही ब्लॉग की यथार्ताता साबित नहीं करता।  इसके अतिरिक्त भी कई  आवश्यक पहलु जैसे , सर्च इंजन ऑप्टिमाइजेशन , ब्लॉग गुणवत्ता आदि कई बाते भी इस समबन्ध में उतना ही मायने रखती है जितना की ब्लॉग का डिजाईन।  हिनदी ४ टेक ब्लॉग पर मैने पिछले लेखो में भी ब्लॉगर ब्लॉग के लिए SEo Friendly , Professhional  ब्लॉगर टेम्पलेट सुझाई थी जो नीचे क्रमशः लिंक में बताई गई  है।  

• Asha Blogger Template ( 7+ Ultimate Version)
• 15 + उच्च संस्करण blogger templete
• Css Template For Blogger

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

                           इसी संदर्भ में आज Hindi Blogs के लिए मेरा सुझाव ये  तिन प्रोफेशनल ब्लॉग टेम्पलेट जो  ऊपर बताये गए सभी विषयों को ध्यान में रख कर ही डिजाईन की गयी है।  नीचे सभी का स्क्रीनशॉट भी मोजूद है डाउनलोड करने के लिए डाउनलोड लिंक पर क्लिक करे। 

My Blogger Tricks

Download

My Blogger Lab

Download

Google Search

View Live Demo

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

Continue Reading

गूगल सर्च में पोस्ट Thumb और रेटिंग इमेज कैसे दिखाए ..

Hindi4Tech  के पिछले लेख में मैंने बताया था की कैसे गूगल सर्च में Google + प्रोफाइल और image दिखाए, और कैसे गूगल सर्च में सम्बंधित पोस्ट की Lable या श्रेणी  दर्शाए इसी कड़ी में आज के इस लेख में बताया है की कैसे गूगल सर्च में सम्बंधित पोस्ट की छवि के साथ ही पोस्ट रेटिंग image दिखाई जाये ... अपनी ब्लॉग टेम्पलेट में कुछ मामूली से फेर बदल और नीचे बताये कुछ आसान Step से कुछ ही मिनटों में यह सुविधा आपके ब्लॉग पर होगी इसे अपने ब्लॉग पर सक्रिय करने से पहले देखे की गूगल सर्च में आपका ब्लॉग लिंक किस तरह दिखाई देगा ....

Search Engine Screenshot

Blog Screenshot

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

Step 1 :-

• अपने ब्लॉगर खाते में प्रवेश करे
• अब Template पर जाये
• अब Edit HTML पर जाये
• अब Backup/Restore पर क्लिक कर टेम्पलेट सेव करे
• अब अपनी ब्लॉग टेम्पलेट में  ]]></b:skin> कोड तलाशे
• इस कोड के ठीक पहले नीचे बाते गया कोड डाले

.hrecipe{font:1px oswald;}

Step 2 :-

• अब अपनी ब्लॉग टेम्पलेट में <body> कोड तलाशे
• इस कोड के ठीक पहले नीचे बाते गया कोड डाले

<div><div itemscope='' itemtype='https://data-vocabulary.org/Recipe'>

Step 3 :-

• अब अपनी ब्लॉग टेम्पलेट में <h3 class='post-title entry-title'> कोड तलाशे
• इस पुरे कोड को नीचे बताये नए कोड से बदले

<span itemprop='itemreviewed'><span itemprop='description'>
<h3 class='post-title entry-title' itemprop='name'>

Step 4 :-

• अब इस पुरे कोड को </span></span>  टैग से बंद करे
• देखे की ये कोड आपके ब्लॉग टेम्पलेट में कुछ इस तरह दिखाई देगा :

<span itemprop='itemreviewed'><span itemprop='description'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a><b:else/>
<b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a>
<b:else/><data:post.title/>
</b:if>
</b:if>
</h3>
</span></span>

Step 5 :-

अब नीचे बताये पुरे कोड को या तो अपनी ब्लॉग टेम्पलेट में <data:post.body/> के ठीक नीचे या post footer भाग में कही भी यथावत डाल दे

<div class='hrecipe'>
<span class='item'>
<span class='fn'>Blog Title</span>
</span>
<img class='photo' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
By <span class='author'><b><data:blog.title/></b></span>
Published: <span class='published'><data:post.timestampISO8601/></span>
<span class='summary'><data:post.title/></span>
<span class='review hreview-aggregate'>
<span class='rating'>
<span class='average'>3</span>
<span class='count'>11</span> reviews
</span>
</span>
</div>

Step 6:-

• अब अपनी ब्लॉग टेम्पलेट में </body> कोड तलाशे
• इस कोड के ठीक बाद में नीचे बाते गया कोड डाले

</div></div>

अब अपनी ब्लॉग टेम्पलेट सेव करे .. ध्यान दे की ऊपर बताई प्रक्रिया पूरी करने के ८-१ ० दिन के भीतर जब भी Google Fetch द्वारा आपके ब्लॉग को Reboot किया जायेगा .. गूगल सर्च में बताये अनुसार Preview दिखाई देने लगेगा ..निवेदन करूँगा की कम से कम 8 से १0 दिन का इंतजार अवश्य करे ....

प्रक्रिया पूरी करने के बाद नीचे बताई लिंक पर जाकर देखे की आपका ब्लॉग गूगल सर्च में कैसा दिखाई देगा
https://www.google.com/webmasters/tools/richsnippets

आशा करता हूँ लेख आपके लिए उपयोगी होगा :-) किसी तरह की परेशानी के चलते Comment के माध्यम से संपर्क करे ...

Continue Reading

Hindi4tech 2'nd Annivercery

                    जी हाँ सही सुना। Hindi4Tech ब्लॉग आज २ वर्ष पूरे कर चूका है . ..वर्ष २०११  में दिनांक ११ मई  को Hindi4Tech ब्लॉग की शुरुआत ब्लॉगर ब्लॉग , और तकनीक चेत्र  से जुडे कुछ छोटे और आवश्यक पहलुओं को आप सभी के सामने रखने हेतु किया था …। कोशिश हमेशा यही रही की ब्लॉग पर हमेशा नयी जानकारियों के साथ आपके सामने कुछ नया रख सकू ... और शायद अपनी इस              कोशिश में काफी हद तक कामयाब भी हुआ हूँ... 2 वर्ष के लम्बे समय अन्तराल में ब्लॉग पर मात्र 39 पोस्ट ही लिख पाया ,, इसके पीछे कभी मेरे व्यक्तिगत कारण और कभी कुछ और ..???? चाहते हुए भी इस हेतु समय नहीं निकाल पाया।                                      ब्लॉग और ब्लॉग पर प्रकाशित लेख महज़ एक कोशिश थी अपने तकनीकी ज्ञान को आप तक पहुचाने की एक कोशिश थी उन सभी जानकारियों को ब्लॉग पर रखने की जो पिछले 4 वर्षो में मैने सिखा ...... और इस छोटी सी कोशिश को आप सभी ने सराहा इसके लिए में सदेव आपका आभारी रहूँगा कोशिश करूँगा कम समय अन्तराल में आपके सामने कुछ नया ला सकू..:) में ब्लॉग के सभी पाठको , प्रशंशको के प्रति कृतज्ञता व्यक्त करता हूँ ....और आशा करता हूँ कि आपका प्यार, स्नेह और विश्वास मुझ पर और Hindi4Tech ब्लॉग पर इसी तरह बना रहेगा ... :)

                 
                  समय अभाव के चलते इस पोस्ट को आज पुरे १ माह देरी से  अभी सभी की बीच पंहुचा पा रहा हूँ .... खेर जो भी है ???   देर आये दुरुस्त आये .... 

Continue Reading

ब्लॉगर ब्लॉग के लिए Breadcrumbs Navigation विजेट Plugin

ब्लॉगर ब्लॉग की एक मुलभुत और सबसे आवश्यक सुविधाओ में से एक . Breadcrumbs Navigation का उपयोग ब्लॉगर ब्लॉग पर पाठको को ब्लॉग की स्थिति के साथ ही यह बताने में किया जाता है की वे अभी किस निर्धारित लिंक पर है ... Breadcrumbs Navigation ब्लॉग में पोस्ट शीर्षक के ठीक ऊपर होता है ... इसका लाइव डेमो Hindi4Tech पर भी देखा जा सकता है .. लगाने के फायदों में कुछ यह की पाठको को किसी भी पोस्ट पड़ते समय तुरंत मुख्य प्रष्ट के साथ ही पोस्ट को जिस श्रेणी के अंतर्गत रखा गया है वे सभी पोस्ट भी पोस्ट श्रेणी लिंक पर क्लिक कर आसानी से देखा जा सकता है .. सबसे पहले स्क्रीनशॉट देखे की यह आपके ब्लॉग पर किस तरह दिखाई देगा ...

Blog Screenshot

ये तो हुई ब्लॉग पर की स्क्रीनशॉट की बात अब नीचे बताये गए दुसरे स्क्रीनशॉट में यह देखे की गूगल सर्च में आपका ब्लॉग लिंक किस तरह दिखाई देगा ... बताये गए स्क्रीनशॉट में ब्लॉग लिंक के साथ पोस्ट को जिस श्रेणी में रखा गया है वह लेबल भी दिखाई देता है जिससे पाठक सीधा लाबेल लिंक पर क्लिक कर उस श्रेणी की सभी पोस्ट को एक साथ देख सकते है ....

Search Engine Screenshot

अंत में यही कहना चाहूँगा की मेटर चाहे सर्च इंजन रेकिंग का हो , ब्लॉग ट्राफिक का हो या और कुछ हो सभी तरह से Breadcrumbs Navigation एक बहुत आसान और ब्लॉग हेतु एक आवश्यक सुविधा है .. इसे अपने ब्लॉग पर सक्रिय करने के लिए नीचे बताये कुछ आसन चरणों का पालन करे कुछ ही मिनटों में आपके Breadcrumbs Navigation ब्लॉग पर सक्रिय होगा :-)

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

Step 1 :-

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

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Step 2 :-

अब अपनी ब्लॉग टेम्प्लेट में <b:include data='top' name='status-message'/> कोड तलाशे, और इसके ठीक बाद में नीचे बताया गया कोड यथावत डाले

<b:include data='posts' name='breadcrumb'/>

Step 3 :-

अब अपनी ब्लॉग टेम्प्लेट में <b:includable id='main' var='top'> कोड तलाशे, और इसके ठीक पहले नीचे बताया गया कोड यथावत डाले

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == "true"'>

» <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>

</b:if>

</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

ब्लॉग टेम्पलेट सेव करे :-)

Continue Reading

Blogger Threaded कमेन्ट में , कमेन्ट नंबर कैसे दिखाए

ब्लॉगर thread कमेन्ट में कमेन्ट numering कैसे दिखाए । पिछले लेख में मैने बताया था की कैसे ब्लॉगर thread कमेन्ट में याहू smiley's youtube विडियो , और सोंग लिंक रखी जाये इसी कड़ी में आज के इस लेख में बताया गया है की कैसे ब्लॉगर thread कमेन्ट में क्रमशः numbering दिखाई जाये । नीचे बताई गए चरणों को क्रमशः अपने ब्लॉग पर सक्रीय करते चले कुछ ही मिनटों में सुविधा आपके ब्लॉग पर सक्रिय होगी .... लाइव डेमो hindi4tech ब्लॉग पर देखा जा सकता है ....

Screenshot

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

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

/*Comment Numbering Code Start hindi4tech.blogspot.com */
.comment-thread ol {
counter-reset: countcomments;
}

.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;
font-size: 22px;
color: #555555;
padding-left: 10px;
padding-top: 3px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzMg3NwJKxKtr0M16AoBiRgMZV-rBJc9GEaJ_L18hDT82_DqDWOoFjD-50eMIr_UntMGCLVsDTEpdnWqcmklOEBlGIk37i-POJ-bo6M-0brCn1ouSwSpZNf3hIWq8672Dd1gLUoXb5jAl_/s1600/comment+bubble2.png) no-repeat;
margin-top: 7px;
margin-left: 10px;
width: 50px;
/*image-width size*/
height: 48px;
/*image-height size*/
}

.comment-thread ol ol {
counter-reset: contrebasse;
}

.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 18px;
color: #666666;
}
/*Comment Numbering Code End hindi4tech.blogspot.com */

ध्यान दे की लाल रंग में बताये गए image कोड को अपनी पसंदीदा Image लिंक के साथ बदलना न भूले ///

Continue Reading