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

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


   हिंदी ४ टेक के पिछले लेख में मैंने बताया था की कैसे अपने ब्लॉग या वेबसाइट को मोबाइल फ्रेंडली स्क्रीन रेसोलुशन में बदला जाये , ब्लॉग टेम्पलेट 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


Continue Reading


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

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

    मोबाइल फ्रेंडली वेब डिज़ाइन  इन दिनों प्रोफेशनल  वेब डिजाइनिंग का एक हिस्सा बन गई  है। यहां तक ​​कि अपनी वेबसाइट या ब्लॉग पर हर कोई मोबाइल फ्रेंडली वेब डिजाइन चाहता हैं। लगभग सभी बड़े वेब प्लेटफार्म मोबाइल फ्रेंडली वेब  संस्करण का उपयोग कर रहे हैं। मोबाइल फ्रेंडली वेब डिज़ाइन तेज गति से लोड होने के साथ ही 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


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

Location: Jaipur, Rajasthan, India |

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

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

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

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

Step 1 :-

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


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

Step 2 :-

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


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

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



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


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

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

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

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

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





Continue Reading


Newspaper, News Channel Freemium Blogger Template

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

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


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

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

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

1.Newspaper Blogger Template


Live Demo | Mobile Version Cheak


2.News Channel / Video Blogger Template


Live Demo | Mobile Version Cheak



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

Continue Reading

Location: Bhopal, Madhya Pradesh, India |

Newspaper Premium Blogger Template V-2

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


नमस्कार , आदाब , शस्त्रियकाल :-) सबसे पहले आप सभी को हनुमान जयंती की हार्दिक शुभकामनाये.. पिछले १ वर्ष के भीतर अपनी व्यक्तिगत दिनचर्या और कार्यो में इस कदर व्यस्त रहा की चाह  कर भी ब्लॉगिंग  हेतु समय न निकल सका और शायद इस १ वर्ष के भीतर अपनी व्यक्तिगत और काम काजी जिंदगी में जो बदलाव हुआ है वो शायद जिंदगी का बड़ा बदलाव है ,,,  ठहराव और निरंतरता ज़िन्दगी के दो ऐसे पहलु जो हर शख्स के जीवन में बेहद मायने रखते है ,, और शायद इन्ही के बुते आज  एमपी को दरकिनार कर राजस्थान के इस जयपुर शहर में ही जिंदगी गुजर रही है,, पीएचडी के चलते भोपाल  भी हर सप्ताह - दस दिन में आना होता ही है,,, आशा करता हु आज का ये लेख आपके लिए उपयोगी और सार्थक सिद्ध हो .... 


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

Demo Link :-


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

Location: Jaipur, Rajasthan, India |

3+ Professional Blogger Templates For Download

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

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

My Blogger Tricks





My Blogger Lab





Google Search





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


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

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

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

Location: Jhabua, Madhya Pradesh, India |

Hindi4tech 2'nd Annivercery

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


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


Newspaper Premium Blogger Template

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

                ब्लॉगर ब्लॉग के लिए प्रीमियम Newspaper  टेम्पलेट .... Hindi 4 Tech   ब्लॉग पर पिछले लेख में बताई गयी 7+ ब्लॉगर टेम्पलेट की तरह ही यह Newspaper  टेम्पलेट भी बेहतर Seo  , सुलभ Css  कोडिंग के साथ डिजाईन की गयी है ... साथ ही टेम्पलेट में  विजेट रखने हेतु भी पर्याप्त  स्थान रखा गया है .. चाहूँगा पहले आप नीचे लाइव डेमो लिंक पर इसे लाइव देखे ..

                अगर आप इस ब्लॉगर टेम्पलेट को पसंद करते है और इसका उपयोग करना चाहते है  तो नीचे Buy  Now  बटन पर क्लिक कर मुझसे संपर्क कर सकते है .. शेष जानकारी मुझे ईमेल प्राप्त होते ही आपको भेज दी जाएगी।

Asha Jhabua News
Continue Reading

Location: Bhopal, Madhya Pradesh, India |

Hindu Panchang & Hindi Rashifal Widget For Your Blog

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

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






Hindu Panchang Widget




Install Code:-

<div style="background: urlundefined&quot;http://2.bp.blogspot.com/-vVlodHxPhXM/UyWdgfjcPqI/AAAAAAAABkU/sm4mzT0Nuvg/s1600/panchangyyy.png&quot;) 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="http://dl.dropbox.com/u/14422613/hindi_astrology_google_gadget_part_1_updated_html2.html" height="250" width="300" scrolling="no" frameborder="0"></iframe>
Continue Reading


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

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

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

Blog Screenshot



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

Search Engine Screenshot



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

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

Step 1 :-

  • सबसे पहले ब्लॉगर खाते में प्रवेश करे , यहाँ जाये Blogger--->Design--->Edit HTML
  • अब ऊपर expand widget template cheakbox पर क्लिक करे
  • अब keyboard की ctrl+F कुंजी दबाये व यहाँ ]]></b:skin> कोड तलाशे
  • अब इस कोड के ठीक पहले नीचे दिया गया पूरा कोड यथावत डाल दे
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Step 2 :-


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

Step 3 :-


अब अपनी ब्लॉग टेम्प्लेट में <b:includable id='main' var='top'> कोड तलाशे, और इसके ठीक पहले नीचे बताया गया कोड यथावत डाले
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
» <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>


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

Location: Bhopal, Madhya Pradesh, India |

कैसे बनाये Blogspot डेमो iframe ...

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

जी हां ब्लागस्पाट डेमो पेज ... डेमो पेज का अधिकांश उपयोग ब्लॉगर templete sites पर ब्लॉग templete का live preview दिखाने के लिए किया जाता है ... मगर हर कोई अपनी सुविधा अनुसार इसका उपयोग कर सकता है ... इस टूलबार का अपने ब्लॉग पर उपयोग करने से पहले देखे की इस demo iframe में अपनी साईट का url कैसे डाले , और कैसे live preview देखे ॥ नीचे आदरणीय रतनसिंह शेखावत जी के ब्लॉग ज्ञान दर्पण को iframe टूलबार में दिखाया गया है =D7 नीचे live डेमो बटन पर क्लिक करे । और live डेमो देखे ... :)



ध्यान दे वापस पीछे आने के लिए iframe टूलबार में ठीक नीचे Go Back बटन पर क्लिक करे

Live Demo

टूलबार को अपने ब्लॉग पर कैसे लगाये

  • नीचे बताये गए पुरे कोड को कॉपी कर एक notepad फाइल में डाल ले व इसे myiframetoolbar.html नाम से सेव करले ।



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title> Hindi4Tech Live Demo </title>

<meta content='index,follow' name='robots'/>
<meta content='en' name='language'/>

<link href='http://dl.dropbox.com/u/14422613/piushtrivedi/favicon.png' rel='shortcut icon'/>
<style type="text/css">
*{margin:0;padding:0;}

body{background:transparant; color:#333;font-family:arial;font-size:12px}
a{color:#333;text-decoration:none}
a:hover{color:#FF6600}
a img{border:0}
tr.bar{top:0;width:100%}
tr.bar td {background: #fff ;}
#bartop{background:#E7E7E7 url(http://3.bp.blogspot.com/_C6KkooKXCEw/TUP2QV3Ut4I/AAAAAAAAH5w/MYcoSss0M28/s400/bg.png) repeat-x; width:100%;height:0px; border-bottom:0px solid #CDCDCD;margin:0; padding:0}
#bartop ul{}
#bartop ul li{list-style:none;float:left}
#iframe{overflow:hidden;}/*this is to remove the scroll when not needed*/#iframe, iframe{width:100%;height:100%;}
#mainnav{ height:46px; position:fixed; top:0px; left:0px; right:0px; z-index:9999; background-image:url(http://lh3.ggpht.com/_dKIQkAGa2xA/S09eoQxunEI/AAAAAAAAAx4/Wz07cM_CsNQ/mainnav.png); background-repeat:repeat-x; background-position:center left}
#menu{width:870px; margin:0 auto; padding:0 auto}
#searchbot{float:right; margin:-6px -438px 0 0px; padding:0}
#nav ul{ height:25px; list-style:none; margin:8px 38px 0 0; padding:0; width:390px; float:right}
#nav ul li{ display:inline; float:right; margin:0px 2px}
#nav a{ text-indent:-9999px; float:right; padding:0; text-decoration:none; cursor:pointer; background-image:url(https://piushtrivedi.googlecode.com/svn/trunk/html/h4tdemo/navmenu2.png); background-repeat:no-repeat; height:28px; width:72px}
#nav-equipe{background-position:0 0; *position:relative; *top:-112px; *left:-310px}
#nav-equipe:hover, #nav-equipe.hover{background-position:0 -28px}
#nav-freebies{background-position:-78px 0; *position:relative; *top:-84px; *left:-232px}
#nav-freebies:hover, #nav-freebies.hover{background-position:-78px -28px}
#nav-servico{background-position:-156px 0; *position:relative; *top:-56px; *left:-156px}
#nav-servico:hover, #nav-servico.hover{background-position:-156px -28px}
#nav-portfolio{background-position:-234px 0; *position:relative; *top:-28px; *left:-78px}
#nav-portfolio:hover, #nav-portfolio.hover{background-position:-234px -28px}
#nav-contato{background-position:-312px 0}
#nav-contato:hover, #nav-contato.hover{background-position:-312px -28px}
#navlogo ul{ height:20px; list-style:none; margin:4px 0 0 0; margin-top /*\**/:-14px\9; *margin-top:4px; padding:0; width:110px; float:left}
#navlogo ul li{ display:inline; margin:0px 2px}
#navlogo a{ text-indent:-9999px; float:left; padding:0; text-decoration:none; cursor:pointer; background-image:url(https://piushtrivedi.googlecode.com/svn/trunk/html/h4tdemo/H4T_LOGO.png); background-repeat:no-repeat; height:20px; width:110px}
#logo-logo{background-position:0 0}
#logo-logo:hover, #logo-logo.hover{background-position:0 -90px}
.bot{margin:0px 0 0; padding:0; list-style:none}
.bot li{padding:0; margin:0 2px; float:right; position:relative; text-align:center}
.bot .link{padding:14px 10px; display:block; color:#000; width:34px; height:28px; text-indent:-9999px; text-decoration:none; font-weight:bold; background-image:url(http://lh4.ggpht.com/_dKIQkAGa2xA/S1CMxf7isWI/AAAAAAAAAyw/lFEsQg1NRnE/searchicon.png); background-repeat:no-repeat; background-position:center center; cursor:pointer}
.bot li em{background:url(images/hover.png) no-repeat; width:135px; height:28px; position:absolute; top:-20px; top /*\**/:-15px\9; *top:-10px; left:-200px; text-align:center; padding:20px 0px 10px; font-style:normal; z-index:2; display:none}

@media screen and undefined-webkit-min-device-pixel-ratio:0){ .bot li em{top:-19px}
}
fieldset.search{border:none; width:135px; margin:5px 0 0 0; background:transparent}
.search input, .search button{border:none; float:left}
.search input.box{color:#908e8e; font-size:1.1em; font-weight:normal; font-family:Trebuchet MS,sans-serif; width:135px; height:29px; padding:8px 5px 0 10px; margin-right:5px; margin-left:5px; background-image:url(http://lh4.ggpht.com/_dKIQkAGa2xA/S1Jt5iA7VlI/AAAAAAAAA0I/1L2-kgtMqq8/searchfield.png); background-repeat:no-repeat; background-position:center center; background-color:transparent}
.search input.box:focus{background-color:transparent; background-image:url(http://lh3.ggpht.com/_dKIQkAGa2xA/S1Lk9_MVIbI/AAAAAAAAA0Q/UA--3xIiHl0/searchfieldfocus.png); background-repeat:no-repeat; background-position:center center; color:#b4b4b4; outline:none}
.search button.btn{display:none}

#links
{
height: 25px;
}

#close
{

width: 16px;
height: 16px;
margin:18px 0 0 0;
position: absolute;
right: 5px;
background: url(http://1.bp.blogspot.com/-MSEzL6EtjrM/Tt-hrSkKVnI/AAAAAAAAFiQ/AGUGFpnSUHk/s400/cancel.png) transparent no-repeat;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script>
<script src='http://dl.dropbox.com/u/978994/twittertrackbacks-1.0.min.js' type='text/javascript'></script>
<script type='text/javascript'>

$(function() {

$("#explore-nav li a").click(function() {

// Figure out current list via CSS class
var curList = $("#explore-nav li a.current").attr("rel");

// List moving to
var $newList = $(this);

// Set outer wrapper height to height of current inner list
var curListHeight = $("#all-list-wrap").height();
$("#all-list-wrap").height(curListHeight);

// Remove highlighting - Add to just-clicked tab
$("#explore-nav li a").removeClass("current");
$newList.addClass("current");

// Figure out ID of new list
var listID = $newList.attr("rel");

if (listID != curList) {

// Fade out current list
$("#"+curList).fadeOut(300, function() {

// Fade in new list on callback
$("#"+listID).fadeIn();

// Adjust outer wrapper to fit new list snuggly
var newHeight = $("#"+listID).height();
$("#all-list-wrap").animate({
height: newHeight
});

});

}

// Don't behave like a regular link
return false;
});

});
</script>
<script type='text/javascript'>

$("#explore-nav2 li a").click(function() {

// Figure out current list via CSS class
var curList = $("#explore-nav2 li a.current2").attr("rel");

// List moving to
var $newList = $(this);

// Set outer wrapper height to height of current inner list
var curListHeight = $("#all-list-wrap2").height();
$("#all-list-wrap2").height(curListHeight);

// Remove highlighting - Add to just-clicked tab
$("#explore-nav2 li a").removeClass("current2");
$newList.addClass("current2");

// Figure out ID of new list
var listID = $newList.attr("rel");

if (listID != curList) {

// Fade out current list
$("#"+curList).fadeOut(300, function() {

// Fade in new list on callback
$("#"+listID).fadeIn();

// Adjust outer wrapper to fit new list snuggly
var newHeight = $("#"+listID).height();
$("#all-list-wrap2").animate({
height: newHeight
});

});

}

// Don't behave like a regular link
return false;
});

});
</script>
<script type='text/javascript'>
$(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#mainnav').stop().animate({'opacity':'0.2'},400);
else
$('#mainnav').stop().animate({'opacity':'1'},400);
});

$('#mainnav').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#mainnav').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#mainnav').stop().animate({'opacity':'0.2'},400);
}
}
);
});
</script>
<script src='https://dl.dropbox.com/u/978994/jquery.blend.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){

$("#nav a").blend();
$("#navlogo a").blend();
$("#navredes a").blend();
$("#blogger-icon").blend();
});
</script>
<script type='text/javascript'>
$(document).ready(function(){

$(".bot .link").click(function() {
$(this).next("em").animate({opacity: "toggle", left: "-157"}, "slow")


});


});
</script>
<script src="https://piushtrivedi.googlecode.com/svn/trunk/html/h4tdemo/iframe.js" type="text/javascript" ></script>
</head>
<body>

<div style='background:#E7E7E7 url(http://3.bp.blogspot.com/_C6KkooKXCEw/TUP2QV3Ut4I/AAAAAAAAH5w/MYcoSss0M28/s400/bg.png) repeat-x;font-weight:bold; border:1px solid #CDCDCD; display:scroll;position: fixed; bottom:0px;left:0px;padding:5px 7px 4px 2px; -moz-border-radius:0px 6px 0 0; -khtml-border-radius:0px 6px 0 0; -webkit-border-radius:0px 6px 0 0; border-radius:0px 6px 0 0'>
<a href="javascript:history.go(-1);" title="GO BACK">&#9668; GO BACK</a>



</div>


<table cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr class="bar" height="25px">
<td class="c11">

<div id="bartop">


<div id='mainnav'>
<div id='menu'>
<div id='navlogo'>
<ul>
<li><a href='http://hindi4tech.blogspot.com' id='logo-logo'>Home</a></li>
</ul>
</div>
<div id='nav'>
<ul>
<li><a href='http://hindi4tech.blogspot.com/2010/08/celebreating-40-years-of-journey-c.html' id='nav-contato'>Contact</a></li>
<li><a href='http://www.contactify.com/11eed' id='nav-portfolio'>Portfolio</a></li>
<li><a href='http://hindi4tech.blogspot.com/2011/09/blog-sitemap.html' id='nav-servico'>Services</a></li>
<li><a href='http://hindi4tech.blogspot.com/2009/09/something-about-me.html' id='nav-freebies'>About</a></li>

<li><a href='http://hindi4tech.blogspot.com' id='nav-equipe'>Blog</a></li>
</ul>
</div>
<div id='searchbot'>
<ul class='bot'>
<li class='bot'>
<span class='link'>Search</span>
<em><div id='search-wrapper'>
<a class='search'><form action='/search' id='searchform' method='get'>
<fieldset class='search'>
<input class='box' id='s' name='q' onblur='if(this.value==&quot;&quot;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&quot;&quot;;' type='text' value='Search...' vinput=''/>
<button class='btn' title='Submit Search'>Search</button>
</fieldset>
</form>

</a></div></em>
</li>
</ul>
<div id='links'>
<a id='arrow' href='javascript:void(0);'</a></div>

<a id='close' href='javascript:void(0);'</a></div>
</div>
</div>
</div>
<div style="border-bottom:1px solid #fff;"/>

</td>
</tr>

<tr>
<td>
<div id='iframe'><iframe src='' /></div>
</td>
</tr>

</table>



<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>


</body>

</html>

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

अब इस फाइल को अपनी सुविधा अनुसार होस्ट करले ध्यान दे की बताई गयी फाइल .html फॉर्मेट में है , अतः इसे होस्ट करने से पहले यह जाँच ले की आप इसे जहाँ होस्ट कर रहे है , वो .html format सपोर्ट करता है या नहीं... नीचे .html फाइल को मुफ्त होस्ट करने हेतु एक बेहतर विकल्प dropbox के बारे में बताया गया है ॥ ध्यान दे की dropbox कुछेक चुनिन्दा ऐसी मुफ्त होस्टिंग service में से एक है जो लगभग सभी फाइल format को सपोर्ट करता है , जिनमे कुछ .mp3, .mp4, .swf, .html, .dmg आदि है , अतः dropbox पर फाइल होस्ट करने के लिए नीचे प्रक्रिया देखे ...
  • सबसे पहले अपने dropbox खाते में लोगिन करे यहाँ जाये dropbox.com
  • यहाँ फाइल अपलोड करने के लिए नीचे बताये अनुसार विकल्प पर क्लिक करे

  • फाइल अपलोड हो जाने पर नीचे बताये अनुसार पब्लिक लिंक कॉपी करले

  • ये पब्लिक लिंक आपको कुछ इस तरह मिलेगा

  • इस प्रकार आपको अपनी iframe टूलबार का लिंक प्राप्त हो गया होगा...
  • अब प्राप्त इस लिंक के ठीक बाद ?iframe=YOUR DEMO PAGE URL कोड को रख दे
  • अब आपका पूरा लिंक url कुछ इस तरह से दिखाई देगा....

http://dl.dropbox.com/u/14422613/hindi4tech/myiframetoolbar.html?iframe=YOUR DEMO PAGE URL

ध्यान दे की YOUR DEMO PAGE URL को अपना डेमो पेज url से बदलना न भूले .///

अब आप जहा भी डेमो पेज लिंक रखना चाहते है वहा नीचे बताये अनुसार लिंक का प्रयोग करे ... :-bd
<a href="http://dl.dropbox.com/u/14422613/hindi4tech/myiframetoolbar.html?iframe=Any site Or Demo Page URL">View Demo</a>
Continue Reading