More Stories
Css Social Menu Icon For Blogger
(image)ब्लॉग पर 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>
उसके सजदे को कोई यूँही व्यर्थ ने कह दे मेरे सर पर भी माँ की दुआओं का साया होगा  इसलिए समन्दर ने मुझे...
उसके सजदे को कोई यूँही व्यर्थ ने कह दे
मेरे सर पर भी माँ की दुआओं का साया होगा  इसलिए समन्दर ने मुझे डूबने से बचाया होगा   माँ की आगोश में लौट आया है बेटा फिर से  शायद दुनिया ने उसे बहुत सताया होगा   अब उसकी मोहब्बत की कोई क्या मिसाल दे  जिसने काट के अपना पेट  बच्चों को खिलाया होगा   की थी इनायत...
हिंदी ब्लॉग्स के लिए आज से एक नया ब्लॉग संकलक ! जी हाँ , सही सुना , वैसे तो हिंदी ब्लॉग्स के लिए ब्लॉग...
हिंदी ब्लॉग्स के लिए आज से एक नया ब्लॉग संकलक !
जी हाँ , सही सुना , वैसे तो हिंदी ब्लॉग्स के लिए ब्लॉग जगत में सेकड़ो की संख्या में
Read more...
गूगल सर्च में पोस्ट 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='http://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 दिन का इंतजार अवश्य करे ....


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

आशा करता हूँ लेख आपके लिए उपयोगी होगा :-) किसी तरह की परेशानी के चलते Comment के माध्यम से संपर्क करे ... - See more at: http://hindi4tech.blogspot.com/2013/06/post-thumb-rating-image-in-google-search-blogger-blogspot-hindi4tech.html#sthash.iXPxxRHv.dpuf

Blogger Threaded कमेन्ट में , कमेन्ट नंबर कैसे दिखाए
ब्लॉगर thread कमेन्ट में कमेन्ट numering कैसे दिखाए । पिछले लेख में मैने बताया था की कैसे ब्लॉगर thread कमेन्ट में याहू smiley's youtube विडियो , और सोंग लिंकरखी
Read more...
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


(image)


Asha Blogger


(image)


Asha Desert


(image)


Asha Dream


(image)


Asha Moon


(image)


Asha Shish


(image)


Asha Shri


(image)


Asha Divine


(image)



Asha Divine V-2.0


(image)

मेरी माँ से कहना वह रोया न करे मैं अक्सर मां से कहता था माँ!   प्रार्थना करना कभी तेरा यह बेटा खाकी ...
मेरी माँ से कहना वह रोया न करे
मैं अक्सर मां से कहता था
माँ!   प्रार्थना करना
कभी तेरा यह बेटा
खाकी वर्दी पहने   सीने पे पदक सजाये  शहीदो  का सा नूर लिए  तेरे सामने गर्व से खड़ा हो,   और मेरी माँ
मेरी माँ यह सुनकर
हंस दिया करती थी  कभी जो तुम्हें मेरी माँ मिले तो  उससे कहना
वह अभी ...
ब्लॉगर मोबाइल संस्करण पर Whatsapp, Email , Sms शेयर बटन कैसे जोड़े
हिंदी ब्लॉगर के लिए फेसबुक , ट्विटर , व्हाट्सएप्प जैसे सोशल नेटवर्क की हमेशा ही अहम भूमिका रही है। आज ब्लॉगर और इसी के साथ वर्डप्रेस , सेल्फ होस्टेड साइट

Read more...
Newspaper, News Channel Freemium Blogger Template

शीर्ष और सर्वश्रेष्ठ समाचार पत्रिका (News Paper) ब्लॉगर टेम्पलेट 2013 और 2014 में एक संग्रह इस साल में सबसे अच्छी गुणवत्ता कस्टम निर्मित ब्लॉगर टेम्पलेट की ओर जाता है. वैसे


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






Hindu Panchang Widget




Install Code:-

<div style="background: urlundefined"http://2.bp.blogspot.com/-vVlodHxPhXM/UyWdgfjcPqI/AAAAAAAABkU/sm4mzT0Nuvg/s1600/panchangyyy.png") no-repeat scroll left top transparent; height: 290px;overflow:hidden!important; margin: 0px auto; padding: 70px 0px 0px 5px; text-align: left; width: 290px;"><div class="gadget-preview"><div id="m_0"><div class="modtitle"><span class="my_gadget" style="display:none"></span><div class="dt" id="m_0_h"></div><div style="clear:both;*display:none"></div></div><div id="remote_0" style="border:0;padding:0;margin:0;width:275px"><script>function _tick_olundefinedshortname) {window.jstiming.load.tickundefined'ifr_' + shortname, '_ifr.' + shortname);}window.jstiming.load.tickundefined'_ifr.kw6P');</script><iframe id="remote_iframe_0" name="remote_iframe_0" style="border: 0px; padding: 0px; margin: 0px; width: 275px; height: 285px; overflow: auto;" frameborder="0" scrolling="auto" onload="_tick_olundefined'kw6P')" src="http://www-igprev-opensocial.googleusercontent.com/gadgets/ifr?exp_rpc_js=1&exp_track_js=1&url=http%3A%2F%2Fhosting.gmodules.com%2Fig%2Fgadgets%2Ffile%2F109787730588197067267%2Fhindi_panchang.xml&container=igprev&view=default&lang=hi&country=US&sanitize=0&v=180e6a550cacab11&parent=http://www.google.com&libs=core:core.io:core.iglegacy:auth-refresh&synd=igprev&view=default#rpctoken=-1609901078&ifpctok=-1609901078"></iframe></div><script>remote_modules.pushundefinednew RemoteModuleundefined"http://hosting.gmodules.com/ig/gadgets/file/109787730588197067267/hindi_panchang.xml","0","never","http://www-igprev-opensocial.googleusercontent.com/gadgets/ifr?exp_rpc_js\x3d1\x26exp_track_js\x3d1\x26url\x3dhttp%3A%2F%2Fhosting.gmodules.com%2Fig%2Fgadgets%2Ffile%2F109787730588197067267%2Fhindi_panchang.xml\x26container\x3digprev\x26view\x3ddefault\x26lang\x3dhi\x26country\x3dUS\x26sanitize\x3d0\x26v\x3d180e6a550cacab11\x26parent\x3dhttp://www.google.com\x26libs\x3dcore:core.io:core.iglegacy:auth-refresh\x26synd\x3digprev\x26view\x3ddefault#rpctoken\x3d-1609901078\x26ifpctok\x3d-1609901078",false,0,null));_IG_Prefs._addAllundefined"0", [["up_.lang","hi"],["up_.country","us"],["up_synd","igprev"]]);if undefinedwindow._isk) {window._isk[0] = "-1609901078";}if undefinedwindow._ifpc_relay_url) {window._ifpc_relay_url[0] = "//www-igprev-opensocial.googleusercontent.com/gadgets/files/container/rpc_relay.html";}gadgets.rpc.setRelayUrlundefined'remote_iframe_0','//www-igprev-opensocial.googleusercontent.com/gadgets/files/container/rpc_relay.html');gadgets.rpc.setAuthTokenundefined'remote_iframe_0','-1609901078');</script></div></div><p></p> </div><br/>


Hindi Rashifal Widget


Install Code:-

<iframe src="https://googledrive.com/host/0B9BypLLMMzvOZmRGY2d6N0x1dFk" height="250" width="300" scrolling="no" frameborder="0"></iframe>
ब्लॉग टेम्पलेट को कैसे मोबाइल फ्रेंडली बनाये ( Responsive Web Design)
    मोबाइल फ्रेंडली वेब डिज़ाइन  इन दिनों प्रोफेशनल  वेब डिजाइनिंग का एक हिस्सा बन गई  है। यहां तक ​​कि अपनी वेबसाइट या ब्लॉग पर हर कोई मोबाइल फ्रेंडली वेब डिजाइन चाहता हैं। लगभग सभी बड़े वेब प्लेटफार्म मोबाइल फ्रेंडली वेब  संस्करण का उपयोग कर रहे हैं। मोबाइल फ्रेंडली वेब डिज़ाइन तेज गति से लोड होने के साथ ही Seo Friendly भी है । लेकिन मुख्य सवाल है, हम मोबाइल फ्रेंडली वेब डिज़ाइन  के रूप में वेबसाइट टेम्पलेट डिजाइन कर सकते हैं,हम मोबाइल फ्रेंडली ब्लॉग टेम्प्लेट के रूप में ब्लॉगर आधारित टेम्पलेट डिजाइन कर सकते है?  तो जवाब है , हाँ आप कर सकते हैं। जैसा की आप जानते है की ब्लॉगर ब्लॉग के विकास के लिए एक बड़ा सीएमएस मंच  है। यहां तक ​​कि ब्लॉगर प्लेटफार्म पर WordPress की तुलना में कई अदभुत फीचर हैं। WordPress  की तुलना में टेम्पलेट डिजाइन और अधिक आसान ब्लॉगर में है। लेकिन हम हमेशा सोचते है की  WordPress की तरह ब्लॉगर टेम्पलेट Professhional  नहीं हैं , लेकिन मैं ऐसा नहीं सोचता। आकर्षक वेब  डिजाइन करने के लिए हमे  उन्नत तकनीकी  डिजाइन भाषाओं जैसे : एचटीएमएल, सीएसएस, 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

//// परिवर्तन सहजने के बाद गूगल सर्च में आपका ब्लॉग लिंक कुछ इस तरह दिखाई देगा.....
(image)
रेस्टोरेंट में हुआ भीषण विस्फोट , 35 की मौत , 50 से अधिक गंभीर घायल
       झाबुआ : झाबुआ जिले के पेटलावद में थांदला मार्ग पर स्थित सेठिया रेस्टोरेंट पर शनिवार सुबह 9 बजे के आसपास भीषण धमाका हुआ। जिसमें 35 से अधिक की मौत हो गई है, जबकि 50 से ज्यादा लोगों के घायल होने की खबर है। चारों ओर अफरा त...
यूट्यूब वीडियो को कैसे मोबाइल फ्रेंडली बनाये ( 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 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="http://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

3+ Professional Blogger Templates For Download

ब्लॉग टेम्पलेट किसी भी ब्लॉग के सफलता के लिए बेहद मायने रखती है। ब्लॉग का सिर्फ बेहतर दिखना ही ब्लॉग की यथार्ताता साबित नहीं करता। इसके अतिरिक्त भी कई आवश्यक


Read more...
ब्लॉगर ब्लॉग के लिए Breadcrumbs Navigation विजेट Plugin
ब्लॉगर ब्लॉग की एक मुलभुत और सबसे आवश्यक सुविधाओ में से एक . Breadcrumbs Navigation का उपयोग ब्लॉगर ब्लॉग पर पाठको को ब्लॉग की स्थिति के साथ ही यह बताने
Read more...
More posts are loading...