सोमवार, 23 जुलाई 2012

Blog Owner Box Widget For Blogger Blog

ब्लॉग पर लिखी गयी प्रत्येक पोस्ट के नीचे 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'> के ठीक बाद में रख दे , व परिवर्तन सेव करे

शुक्रवार, 13 जुलाई 2012

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

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

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

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

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

रविवार, 8 जुलाई 2012

Css Social Menu Icon For Blogger

ब्लॉग पर 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>p#h4t_socialmenu img {
/* Social Menu Icons Widget By hindi4tech.blogspot.com */
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

p#h4t_socialmenu img:hover {
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
</style>



<center><p id="h4t_socialmenu">
<a href="http://www.facebook.com/hindi4tech">
<img border="0" src="http://2.bp.blogspot.com/-mXdkegiowik/T_jucGnLBvI/AAAAAAAABwo/eYODwavY610/s400/hindi4tech.blogspot.com-facebook.png" /></a>
<a href="http://www.twitter.com/piushtrivedi/">
<img border="0" src="http://4.bp.blogspot.com/-sqdApuTIqZc/T_juj-Yy-LI/AAAAAAAABw0/dFCwOnSECv8/s400/hindi4tech.blogspot.com-twitter.png" /></a>
<a href="https://plus.google.com/u/0/102214245923918648841">
<img border="0" src="http://1.bp.blogspot.com/-ogqFvu6DqIg/T_juqNEaZII/AAAAAAAABxA/ZaNjxHS-HLk/s400/hindi4tech.blogspot.com-google_plus.png" /></a>
<a href="http://www.feeds.feedburner.com/hindi4tech/">
<img border="0" src="http://2.bp.blogspot.com/-H0pV7Oshud4/T_juw5742_I/AAAAAAAABxM/3RkAb2d5Sh0/s400/hindi4tech.blogspot.com-rss.png" /></a>
<a href="http://www.youtube.com/piushtrivedi/">
<img border="0" src="http://2.bp.blogspot.com/-ucodCgF-ZVY/T_ju3ZQSBGI/AAAAAAAABxY/9MraTIUcTnQ/s400/hindi4tech.blogspot.com-youtube.png" /></a>
</p></center>



Style 2




<style>p#h4t_socialmenu img {
/* Social Menu Icons Widget By hindi4tech.blogspot.com */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

p#h4t_socialmenu img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>



<center><p id="h4t_socialmenu">
<a href="http://www.facebook.com/hindi4tech">
<img border="0" src="http://2.bp.blogspot.com/-mXdkegiowik/T_jucGnLBvI/AAAAAAAABwo/eYODwavY610/s400/hindi4tech.blogspot.com-facebook.png" /></a>
<a href="http://www.twitter.com/piushtrivedi/">
<img border="0" src="http://4.bp.blogspot.com/-sqdApuTIqZc/T_juj-Yy-LI/AAAAAAAABw0/dFCwOnSECv8/s400/hindi4tech.blogspot.com-twitter.png" /></a>
<a href="https://plus.google.com/u/0/102214245923918648841">
<img border="0" src="http://1.bp.blogspot.com/-ogqFvu6DqIg/T_juqNEaZII/AAAAAAAABxA/ZaNjxHS-HLk/s400/hindi4tech.blogspot.com-google_plus.png" /></a>
<a href="http://www.feeds.feedburner.com/hindi4tech/">
<img border="0" src="http://2.bp.blogspot.com/-H0pV7Oshud4/T_juw5742_I/AAAAAAAABxM/3RkAb2d5Sh0/s400/hindi4tech.blogspot.com-rss.png" /></a>
<a href="http://www.youtube.com/piushtrivedi/">
<img border="0" src="http://2.bp.blogspot.com/-ucodCgF-ZVY/T_ju3ZQSBGI/AAAAAAAABxY/9MraTIUcTnQ/s400/hindi4tech.blogspot.com-youtube.png" /></a>
</p></center>


Style 3




<style>p#h4t_socialmenu img {
/* Social Menu Icons Widget By hindi4tech.blogspot.com */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

p#h4t_socialmenu img:hover {
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
</style>



<center><p id="h4t_socialmenu">
<a href="http://www.facebook.com/hindi4tech">
<img border="0" src="http://2.bp.blogspot.com/-mXdkegiowik/T_jucGnLBvI/AAAAAAAABwo/eYODwavY610/s400/hindi4tech.blogspot.com-facebook.png" /></a>
<a href="http://www.twitter.com/piushtrivedi/">
<img border="0" src="http://4.bp.blogspot.com/-sqdApuTIqZc/T_juj-Yy-LI/AAAAAAAABw0/dFCwOnSECv8/s400/hindi4tech.blogspot.com-twitter.png" /></a>
<a href="https://plus.google.com/u/0/102214245923918648841">
<img border="0" src="http://1.bp.blogspot.com/-ogqFvu6DqIg/T_juqNEaZII/AAAAAAAABxA/ZaNjxHS-HLk/s400/hindi4tech.blogspot.com-google_plus.png" /></a>
<a href="http://www.feeds.feedburner.com/hindi4tech/">
<img border="0" src="http://2.bp.blogspot.com/-H0pV7Oshud4/T_juw5742_I/AAAAAAAABxM/3RkAb2d5Sh0/s400/hindi4tech.blogspot.com-rss.png" /></a>
<a href="http://www.youtube.com/piushtrivedi/">
<img border="0" src="http://2.bp.blogspot.com/-ucodCgF-ZVY/T_ju3ZQSBGI/AAAAAAAABxY/9MraTIUcTnQ/s400/hindi4tech.blogspot.com-youtube.png" /></a>
</p></center>

मंगलवार, 3 जुलाई 2012

Asha Blogger Template ( 7+ Ultimate Version)

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

मगर आम तोर पर मिलने वाली ये सभी ब्लॉग टेम्पलेट में ये असंभव है की ये सभी बढ़िया लुक , सुलभ css कोडिंग और मोबाइल device friendly हो..... और शायद सेकड़ो टेम्पलेट खंगालने के बाद शायद कुछ एक टेम्पलेट मिल सके .... Hindi4Tech ब्लॉग पर आज ब्लॉग टेम्पलेट हेतु उक्त सभी मदों को ध्यान में रख कर कुछ टेम्पलेट आप सभी के लिए उपलब्ध है । नीचे क्रमशः सभी टेम्पलेट में लाइव डेमो लिंक द्वारा डेमो देखे , डाउनलोड लिंक फ़िलहाल प्रथम टेम्पलेट में ही दिया गया है ,,,, एक के बाद एक क्रमशः सभी टेम्पलेट का डाउनलोड लिंक उपलब्ध कराता चलूँगा , धीरज रखे व ब्लॉग पर क्रमशः आते रहे , कोशिश करूँगा की जल्द से जल्द सभी टेम्पलेट का डाउनलोड लिंक ब्लॉग पर रख सखू ।
टेम्पलेट की कुछ खासियत :-

  • बताई गयी सभी टेम्पलेट में ब्लॉग हेतु सभी आवश्यक META TAG , जो ब्लॉग को सर्च engine में दिखाने हेतु जरुरी होते है......मोजूद है ॥ ध्यान दे की META TAG के ब्लॉग टेम्पलेट में न होने के कई नुक्सान है ..जिनमे ख़ास Search engine में से ब्लॉग Url ब्लाक , या अद्रश्य होना मुख्य है..अतः ये अवश्य जान ले अपने ब्लॉग पर नयी या वर्त्तमान ब्लॉग टेम्पलेट में META TAG यथावत है इसका जरुर ख्याल रखे ।
  • आम तौर पर मिलने वाली ब्लॉग टेम्पलेट , उच्च गुणवत्ता और वेब संस्करण हेतु डिजाईन होती है यही कारन है की मोबाइल प्रयोक्ता जब ब्लॉग को मोबाइल पर खोलता है तो ब्लॉग का मोबाइल संस्करण ही खुलता है ..जिससे की ब्लॉग पोस्ट तो ठीक तरह से दिखाई देती है मगर sidebar की सामग्री पूरी तरह से गायब होती है ...ऊपर बताई गयी लगभग सभी ब्लॉग टेम्पलेट मोबाइल friendly , या मोबाइल device संरूपित है , यानि ब्लॉग को मोबाइल पर खोलने पर भी sidebar के साथ ही सम्पूर्ण ब्लॉग वेब संस्करण के अनुरूप दिखाई देती है इस हेतु आवश्यक css code उक्त सभी टेम्पलेट में मोजूद है ।
  • ब्लॉग टेम्पलेट में अनावश्यक css कोड का उपयोग , सर्च engine में ब्लॉग की सक्रियता , ब्लॉग रेकिंग और प्रभाव को कम या निष्क्रिय करने हेतु पर्याप्त है , अतः ब्लॉग में मनमर्जी या अनावश्यक css कोड का उपयोग न करे , और यह भी ध्यान रखे की ब्लॉग टेम्पलेट में css कोड को ]]></b:skin>के ठीक पहले ही रखे इसके अतिरिक्त css code का उपयोग कही भी न करे . ऊपर बताई गयी सभी टेम्पलेट उपयुक्त या यथा स्थान css code से डिजाईन है , अतः सर्च engine में ब्लॉग की सक्रियता और रेकिंग को क्रमशः आगे लाने हेतु उपयुक्त सभी ब्लॉग टेम्पलेट निर्देशित है ।


Asha Valley





Asha Blogger





Asha Desert





Asha Dream





Asha Moon





Asha Shish





Asha Shri





Asha Divine






Asha Divine V-2.0




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

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

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



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

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

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


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