Hindi4Tech ( Seo Tricks, Tips,Gadjets & Tutorial For Blogger, Wordpress )

Premium: Google Search Blogger Template

2016-08-23T12:20:00.000+05:30

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

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

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

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

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

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

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

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

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

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

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

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

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

Live Demo

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

2015-06-21T13:50:00.000+05:30

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

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

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

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

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

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

Step 1 :-

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

Step 2 :-

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

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 को नए कोड के साथ बदलने का तरीका बताया गया है -

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

Step 4 :-

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

Livedemo

Mobile Version Cheak

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

2015-06-20T13:21:00.000+05:30

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

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

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

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

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

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

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

Step 1 :-

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

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

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

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

2015-03-23T15:31:00.000+05:30

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

आज के इस ट्यूटोरियल में बताया गया है की कैसे अपनी ब्लॉग पोस्ट को साझा करने के लिए 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 पर जाये
अपनी ब्लॉग टेम्पलेट में नीचे दिए गए कोड खोजें:

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

<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("entry-content");
document.getElementById("wshare").href+=elements[0].textContent + ' For More posts visit URL';
document.getElementById("smsshare").href+=elements[0].textContent + ' For More posts visit URL';
document.getElementById("emailshare").href+=elements[0].textContent + ' For More posts visit URL';
}
</script>

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

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

2014-12-15T14:36:00.009+05:30

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

Hindu Panchang Widget

Install Code:-

English Rashifal Widget

Install Code:-

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

2014-11-25T17:01:00.000+05:30

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

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

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

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

3+ Professional Blogger Templates For Download

2013-08-06T14:33:00.000+05:30

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

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

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

My Blogger Tricks

Download

My Blogger Lab

Download

Google Search

View Live Demo

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

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

2013-06-25T11:51:00.000+05:30

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> कोड तलाशे
इस कोड के ठीक पहले नीचे बाते गया कोड डाले

Step 3 :-

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

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 के माध्यम से संपर्क करे ...

Hindi4tech 2'nd Annivercery

2013-06-12T15:41:00.002+05:30

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

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

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

2012-09-11T12:54:00.005+05:30

ब्लॉगर ब्लॉग की एक मुलभुत और सबसे आवश्यक सुविधाओ में से एक . 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"'>

<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"'>

<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>

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

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

2012-08-03T09:22:00.000+05:30

ब्लॉगर 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 लिंक के साथ बदलना न भूले ///

Blog Owner Box Widget For Blogger Blog

2012-07-23T18:50:00.000+05:30

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

Screenshot

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

सभी विकल्प भरे
विजेट सेटिंग अपने अनुसार बदले
अब genrate बटन पर क्लिक करे
विजेट का Live Preview देखने के लिए Preview बटन पर क्लिक करे

विजेट को ब्लॉग पर ले जाने के लिए नीचे दो आसन चरणों में बताई प्रक्रिया पूर्ण करे ... कुछ ही पल में विजेट आपके ब्लॉग पर होगा ....

Step 1 :-

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

Step 2 :-

अब keyboard की ctrl+F कुंजी दबाये व यहाँ <div class='post-footer-line post-footer-line-1'> कोड तलाशे
अब ऊपर विजेट कोड में बताये HTML कोड को <div class='post-footer-line post-footer-line-1'> के ठीक बाद में रख दे , व परिवर्तन सेव करे

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

2012-07-13T21:07:00.000+05:30

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

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

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

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

Css Social Menu Icon For Blogger

2012-07-08T07:39:00.012+05:30

ब्लॉग पर social profile लिंक मेनू लगाये । पिछले लेख में मैने social bookmarking विजेट, सात का दम विजेट , All In One Sharebox Widget के बारे में बताया था इसी कड़ी में आज ब्लॉग पर css Social मेनू लगाने हेतु लेख आपके सामने है ॥ विजेट की खासियत के बारे में सिर्फ इतना कहना चाहूँगा की यह विजेट भी Hindi4Tech के अन्य विजेट की तरह सुन्दर और सुविधा युक्त है , कारण इसे css3, html5 कोड के साथ डिजाईन किया गया है । नीचे क्रमशः तिन स्टाइल के साथ इनका लाइव डेमो भी दिखाया गया है , अतः इसे ब्लॉग पर ले जाने के लिया नीचे क्रमशः पक्रिया अपनाये, कुछ ही मिनटों में विजेट आपके ब्लॉग पर होगा...

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

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

Style 1

Style 2

Style 3

ब्लॉगर प्रोफाइल को गूगल + प्रोफाइल से बदले

2012-07-03T17:35:00.000+05:30

अपनी ब्लॉगर प्रोफाइल को गूगल+ प्रोफाइल से बदले. गूगल द्वारा हाल ही में अपनी इस नयी सुविधा के बारे में बताया गया. ब्लॉगर का उपयोग करने वाले सभी साथी अपने सभी ब्लॉग पर ब्लॉगर प्रोफाइल की जगह गूगल + प्रोफाइल का इस्तमाल कर पाएंगे . गूगल की इस सुविधा का उपयोग करने पर ब्लॉगर प्रोफाइल से सम्बंधित सभी लिंक , कमेन्ट, फोटो आदि सीधे गूगल + प्रोफाइल में redirect हो जायेंगे.

इस सुविधा को अपने ब्लॉग पर सक्रिय करने से पहले , इन बातो का अवश्य ध्यान रखे .

१. अपनी ब्लॉगर प्रोफाइल को गूगल + प्रोफाइल से बदलने के बाद , पुनः ब्लॉगर प्रोफाइल पर आने के लिए आपके पास केवल ३० दिन होंगे, ३० दिन की अवधी समाप्त होने के बाद आपका ब्लॉगर प्रोफाइल डाटा पूरी तरह से डिलीट हो जायेगा...

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

अपनी ब्लॉगर प्रोफाइल को गूगल + प्रोफाइल से बदलने के लिए नीचे लिंक पर क्लिक करे

यहाँ क्लिक करे

ध्यान दे :- नियम व शर्ते ठीक तरह से पढ़कर "Switch Now" बटन पर क्लिक करे

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

2012-06-13T19:08:00.000+05:30

ब्लॉगर की तुलना हमेशा ही वर्डप्रेस से की जाती रही है ॥ इसका कारन शायद ब्लॉग्गिंग हेतु यह दूसरा विस्तृत प्लेटफोर्म है ... वर्डप्रेस पर ब्लॉगर के तुलना में अधिक ब्लॉग बनाये जाने का कारन वर्डप्रेस ब्लॉग की उन्नत तकनीक और इसी के साथ विभिन तकनिकी भाषा विकल्पों जैसे 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> के ठीक पहले यथावत डाल दे

Step 2

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

Step 3

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

Step 4

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

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] कोड का उपयोग करे

ब्लॉगर Thread कमेन्ट में reply बटन क्यों काम नहीं कर रहा..??

2012-05-18T11:14:00.004+05:30

कुछ ही महीनो पहले ब्लॉगर टीम द्वारा नयी सुविधा " ब्लॉगर Thread Comment" को सार्वजनिक किया गया ... लगभग सभी ने इसे अपने ब्लॉग पर सक्रिय कर लिया होगा... ब्लॉगर द्वारा सुझाये गए इस कमेन्ट फॉर्म और साधारण कमेन्ट फॉर्म में कई संशोधन के साथ ही नए thread comment में कई नयी सुविधाओ को भी जोड़ा गया ॥ जिनमे एक मुख्य .....कमेन्ट का reply बटन ... जिसके द्वारा पाठको द्वारा लेख पर दी गयी प्रतिक्रिया पर अन्य पाठक भी अपने विचार सीधे reply बटन द्वारा पूर्व में टिपण्णी करता को भेज सकते है॥ जैसे ही टिपण्णी में reply बटन या प्रतिउतर बटन का इस्तेमाल कर प्रतिक्रिया भेजी जाती है ब्लॉगर द्वारा उसे स्वतः ही सम्बंधित टिपण्णीकर्ता के ईमेल पते पर अग्रेषित कर दिया जाता है...
सभी ने इसे सुविधा को अपने ब्लॉग पर सक्रिय तो कर लिया ,,, मगर बहुत से ब्लोगों पर " reply" बटन अभी भी कार्य नहीं कर रहा है॥ इसके जीवंत उदाहरण मैने बहुत से हिंदी ब्लोगों पर देखे है ॥ इसी के चलते सोचा आज इसी परेशानी के निराकरण हेतु एक पोस्ट लिखी जाये ॥ सबसे पहले ये समझे के thred comment सुविधा शुरू होने के बाद reply बटन का कार्य न करने का क्या कारण है ... इसका जवाब सिर्फ एक ही है की ब्लॉगर thred comment में thread comment हेतु प्रक्रिया तो पूर्ण कर ली गयी मगर सुविधा हो पूर्ण करने के पश्चात् ब्लॉगर द्वारा ब्लॉग टेम्पलेट में स्वतः ही एक स्क्रिप्ट को add कर लिया जाता है ॥ अतः यह जान ले की reply बटन का काम न करना का एक और सिर्फ एक कारन इस स्क्रिप्ट का छतिग्रस्त होना ही है॥ अतः आज इस लेख में यही बताया गया है की कैसे इस छतिग्रस्त स्क्रिप्ट को बदल कर ब्लॉग पर reply बटन सक्रिय किया जाये ॥
अतः reply बटन सक्रिय करने के लिए नीचे बताई प्रक्रिया अपनाये ....:)

ध्यान दे:-टेम्पलेट में कुछ भी बदलाव करने से पहले नीचे छवि में बताये अनुसार लिंक पर क्लिक कर टेम्प्लेट जरुर डाउनलोड कर ले

Step 1

अपने blogger dashboard पर जाए
यहाँ जाए Dashbord > Design > Edit HTML
अब ऊपर Expand Widgets चेक बॉक्स पर क्लिक करे
यहाँ पर <b:includable id='threaded_comment_js' var='post'> कोड तलाशे
इस कोड के ठीक नीचे एक स्क्रिप्ट होगी , अतः इस कोड को मय स्क्रिप्ट नीचे बताये कोड से बदले

<b:includable id='threaded_comment_js' var='post'>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var config = <data:post.commentConfig/>;
// <![CDATA[
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}
var bodyFromEntry = function(entry) {
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
return '<span class="deleted-comment">' + entry.content.$t + '</span>';
}
}
}
return entry.content.$t;
}
var parse = function(data) {
cursor = null;
var comments = [];
if (data && data.feed && data.feed.entry) {
for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
var comment = {};
// comment ID, parsed out of the original id format
var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array) {
var auth = entry.author[0];
if (auth) {
comment.author = {
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
};
}
}
if (entry.link) {
if (entry.link[2]) {
comment.link = comment.permalink = entry.link[2].href;
}
if (entry.link[3]) {
var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
if (pid && pid[1]) {
comment.parentId = pid[1];
}
}
}
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
}
}
}
comments.push(comment);
}
}
return comments;
};
var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor) {
url += '&published-min=' + new Date(cursor).toISOString();
}
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length < 50 ? null
: parseInt(parsed[parsed.length - 1].timestamp) + 1
callback(parsed);
window.bloggercomments = null;
}
url += '&callback=bloggercomments';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
};
var hasMore = function() {
return !!cursor;
};
var getMeta = function(key, comment) {
if ('iswriter' == key) {
var matches = !!comment.author
&& comment.author.name == config.authorName
&& comment.author.profileUrl == config.authorUrl;
return matches ? 'true' : '';
} else if ('deletelink' == key) {
return config.baseUri + '/delete-comment.g?blogID='
+ config.blogId + '&postID=' + comment.id;
} else if ('deleteclass' == key) {
return comment.deleteclass;
}
return '';
};
var replybox = null;
var replyUrlParts = null;
var replyParent = undefined;
var onReply = function(commentId, domId) {
if (replybox == null) {
// lazily cache replybox, and adjust to suit this style:
replybox = document.getElementById('comment-editor');
if (replybox != null) {
replybox.height = '250px';
replybox.style.display = 'block';
replyUrlParts = replybox.src.split('#');
}
}
if (replybox && (commentId !== replyParent)) {
document.getElementById(domId).insertBefore(replybox, null);
replybox.src = replyUrlParts[0]
+ (commentId ? '&parentID=' + commentId : '')
+ '#' + replyUrlParts[1];
replyParent = commentId;
}
};
var hash = (window.location.hash || '#').substring(1);
var startThread, targetComment;
if (/^comment-form_/.test(hash)) {
startThread = hash.substring('comment-form_'.length);
} else if (/^c[0-9]+$/.test(hash)) {
targetComment = hash.substring(1);
}
// Configure commenting API:
var configJso = {
'maxDepth': config.maxThreadDepth
};
var provider = {
'id': config.postId,
'data': items,
'loadNext': paginator,
'hasMore': hasMore,
'getMeta': getMeta,
'onReply': onReply,
'rendered': true,
'initComment': targetComment,
'initReplyThread': startThread,
'config': configJso,
'messages': msgs
};
var render = function() {
if (window.goog && window.goog.comments) {
var holder = document.getElementById('comment-holder');
window.goog.comments.render(holder, provider);
}
};
// render now, or queue to render when library loads:
if (window.goog && window.goog.comments) {
render();
} else {
window.goog = window.goog || {};
window.goog.comments = window.goog.comments || {};
window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
window.goog.comments.loadQueue.push(render);
}
})();
// ]]>
</script>
</b:includable>

अब परिवर्तन सेव करे ... आशा करता हूँ आपके ब्लॉग पर " Reply" बटन कार्य करने लगा होगा... किसी परेशानी के चलते कमेन्ट के माध्यम से संपर्क करे ...:)

Hindi4tech 1'st Annivercery

2012-05-11T13:27:00.001+05:30

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

√√ लहरों से डर कर नौका पार नहीं होती,
कोशिश करने वालों की कभी हार नहीं होती.

नन्हीं चींटी जब दाना लेकर चलती है,
चढ़ती दीवारों पर, सौ बार फिसलती है.
मन का विश्वास रगों में साहस भरता है,
चढ़कर गिरना, गिरकर चढ़ना न अखरता है.
आख़िर उसकी मेहनत बेकार नहीं होती,
कोशिश करने वालों की कभी हार नहीं होती.

डुबकियां सिंधु में गोताखोर लगाता है,
जा जा कर खाली हाथ लौटकर आता है.
मिलते नहीं सहज ही मोती गहरे पानी में,
बढ़ता दुगना उत्साह इसी हैरानी में.
मुट्ठी उसकी खाली हर बार नहीं होती,
कोशिश करने वालों की कभी हार नहीं होती.

असफलता एक चुनौती है, इसे स्वीकार करो,
क्या कमी रह गई, देखो और सुधार करो.
जब तक न सफल हो, नींद चैन को त्यागो तुम,
संघर्श का मैदान छोड़ कर मत भागो तुम.
कुछ किये बिना ही जय जय कार नहीं होती,
कोशिश करने वालों की कभी हार नहीं होती ......√√

Blogger Thread Comment में Yahoo Smiley's कैसे दिखाए

2012-04-10T09:47:00.009+05:30

Blogger की नयी सुविधा Thread कमेंट्स से तो सभी परिचित होंगे ... और शायद सभी ने इसे ब्लॉग पर सक्रिय कर लिया होगा । इसी कड़ी में आज Blogger Thread Comment में Smiley's का उपयोग कैसे किया जाय बताया गया है॥ Blogger के सामान्य Comment फॉर्म में Smiley's का उपयोग बिना किसी परेशानी के एक सामान्य सी स्क्रिप्ट के द्वारा आसानी से किया जा सकता है ॥ वही Thread Comment में Smiley का उपयोग करने हेतु स्क्रिप्ट के साथ साथ css और कुछ मामूली template code के द्वारा इसे ब्लॉग पर रखा जा सकता है ... इसे अपने ब्लॉग पर सक्रिय करने के लिए नीचे पक्रिया अपनाये ।

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

Yahoo Smiley's को ब्लॉग पर ले जाने के लिए प्रक्रिया तीन चरणों में बताई गयी है ॥ अतः क्रमश इन्हे अपने ब्लॉग पर सक्रीय करते चले

Step 1

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

.h4tsmile {
    background: none repeat scroll 0 0 #EFF5FB !important;
    font-size: medium !important;
    padding: 10px !important;
    text-align: left !important;
    font-weight:bold !important;
    font-size:11px !important;
}
img.hindi4techsmly {
    height: auto !important;
    vertical-align: middle !important;
    width: auto !important;
    border:0px !important;
}

Step 2

अब अपनी ब्लॉग templete में ctrl+f कुंजी द्वारा </body> कोड ढूंढे
अब नीचे बताया गया पूरा कोड यथावत </body>कोड के ठीक पहले डाल दे व Template सेव करे

<script src='https://googledrive.com/host/0B9BypLLMMzvOV3VBRFlaanc2VlU' type='text/javascript'/>

Step 3

अब पुनः अपनी ब्लॉग templete में <div class='post-footer-line post-footer-line-3'> कोड तलाशे

यह कोड आपको अपनी ब्लॉग templete में ऊपर बताये अनुसार प्राप्त होगा ,, यहाँ code की जगह नीचे बताया गया पूरा कोड डाल दे

<b:if cond='data:blog.pageType == "item"'>
<div style='background-color:#FEF8EC; border:none; width:100%; padding:10px; height:100px; overflow:auto;'>
<div class='h4tsmile'>
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/> ;;-)
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif'/> :-S
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif'/> 7:)
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> :|
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif'/> /:)
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif'/> O:-)
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif'/> =;
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/> :-t
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/105.gif'/> 8-7
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> 8-|
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/29.gif'/> L-)
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/31.gif'/> :-a
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/32.gif'/> :-$
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/> [-(
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/34.gif'/> :O)
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/> 8-
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/> 2:-P
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/37.gif'/> (:|
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/38.gif'/> =P~
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/>
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/> #-o
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/42.gif'/> :-SS
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/44.gif'/> :^o
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/> X_X
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^
<img alt='' class='hindi4techsmly' src='http://l.yimg.com/a/i/us/msg/emoticons/pirate_2.gif'/> :ar!
</div></div></b:if>

ध्यान दे : अगर आप Smile's का उपयोग Comment के साथ post और sidebar widget में भी करना चाहते है तो नीचे बताये गए कोड को </body> कोड के ठीक पहले डाल दे..

अब अपनी ब्लॉग template को सेव करे :)

Social Sharing Bookmark Widget For Blog

2012-03-27T13:41:00.006+05:30

आम तौर पर हम अगर ब्लॉग पर facebook fanpage Widget रखना चाहते है तो उसके लिए facebook likebox, twitter follower दिखाना चाहते है तो उसके लिए twitter follower विजेट , और google + circal विडजेट दिखाना चाहते है तो गूगल + विजेट इसी प्रकार feeburner email subscribtion बॉक्स आदि भी रखते है ॥ इन सभी लिंक , और विजेट को hindi4tech के इस एक ही विजेट में दिखाया गया है ॥ विजेट को आसानी से ब्लॉग पर रखा जा सकता है ॥ बस नीचे दी गयी प्रक्रिया अपनाये ...

Screen Shot

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

नीचे बताये गयी सभी विकल्पों में hindi4tech को अपने facebook, twitter, google + , feedburner , आदि लिंक से बदले
फिर Genrate बटन पर क्लिक करे
Add To Blogger बटन पर क्लिक करे
ध्यान दे की Add To Blogger पर क्लिक करने से पहले आप अपने ब्लॉगर खाते में लोगिन अवश्य हो ॥

Page Navigation Plugin Widget For Blogger Blog

2012-03-21T15:57:00.006+05:30

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

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

नीचे page navigation स्टाइल में अपने ब्लॉग हेतु स्टाइल चुने। चुनने के लिए चेक बॉक्स पर क्लिक करे , व फिर Add To Blogger बटन पर क्लिक करे फिर यहाँ जाए

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

Newer Post, Older Post लिंक को Post Title से बदले

2012-02-26T14:48:00.008+05:30

newer post , older post लिंक ब्लॉग पर पाठको को बिना पोस्ट प्रष्ट को छोड़े अगले प्रष्ट पर जाने हेतु आवश्यक है। इसी कड़ी में आज hindi4tech के इस लेख में बताया गया है के कैसे newer post, older post लिंक को post title से बदला जाये .. नीचे बताई गयी स्क्रिप्ट को ब्लॉग के sidebar विजेट में कही भी डाल कर परिवर्तन सेव करे ... विडजेट की खासियत यह की ब्लॉग पर पोस्ट पृष्ट पर दिखने वाली newer post , older post लिंक को post title से बदला जा सकता है ॥ विजेट को ब्लॉग पर ले जाने से पहले screenshot देखे की यह आपके ब्लॉग पर किस तरह दिखाई देगा।

Live Demo

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

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

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

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

<style type="text/css">
#blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}
#blog-pager-older-link {font-size:85%;width:200px;text-align:right;}
</style>
<script type="text/javascript">

$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt
});
});
</script>

All In One Share Box Widget for Blogger/blog

2012-02-26T14:17:00.006+05:30

ब्लॉग पर 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 आप्शन चुने
नीचे बताया गया पूरा कोड यहाँ डाल दे व विजेट सेव करे :))

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

Hindi Tech Blog के लिए 7 Blockquote Effect

2012-02-19T18:15:00.001+05:30

ब्लॉग पर HTML,CSS कोड आदि दिखाने के लिए कुछ blockquote effect । blockquote effect का उपयोग आम तौर पर hindi tech blog , में tech Tips हेतु html , css कोड को दिखाने के लिए किया जाता है लेकीन अपनी सुविधा अनुसार हर कोई इसे अपने blog पर लगा सकता है । नीचे कुछ blockquote डिजाईन बताये गए है साथ ही लाइव डेमो भी दिखाया गया है , आशा है आपको पसंद आयेंगे... इन्हे आसानी से blog पर लगाया जा सकता है , बस नीचे दिए गए चरणों का पालन करें :-

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