इसी कड़ी में आज मैं आपको मोबाइल फ्रेंडली ब्लॉगर टेम्पलेट में अपने वर्तमान ब्लॉगर टेम्पलेट को परिवर्तित करने के लिए कुछ आसान चरण जिनसे की कुछ ही पलो में आपकी ब्लॉग टेम्पलेट पूरी तरह मोबाइल फ्रेंडली होगी बस नीचे बताई प्रक्रिया अपनाये :-
मोबाइल फ्रेंडली डिजाइन का मतलब क्या है?
एक मोबाइल फ्रेंडली वेबसाइट या ब्लॉग बनाने का उद्देश्य विभिन्न स्क्रीन आकार के डिवाइस पर ब्लॉग या वेबसाइट को भली भांति दिखाना जैसे : डेस्कटॉप, लैपटॉप, टैबलेट, स्मार्टफोन आदि । साधारण सा प्रक्रिया है की विभिन्न स्क्रीन आकार हेतु स्टाइलशीट का उपयोग करके मोबाइल फ्रेंडली वेबसाइट या ब्लॉग तैयार किया जा सकता है । इन दिनों हर ब्लॉग प्रयोक्ता मोबाइल फ्रेंडली वेबसाइट या ब्लॉग पसंद करते हैं कारन स्मार्ट फ़ोन का बढ़ता प्रचलन और ब्लॉग के तरफ लोगो की बढ़ती रूचि।
सबसे अच्छा मोबाइल फ्रेंडली डिजाइन या मोबाइल संस्करण कौन सा है?
- मोबाइल संस्करण वेब वर्सन की तुलना में अधिक एसईओ अनुकूल हैं।
- मोबाइल फ्रेंडली वेब डिज़ाइन स्मार्टफोन, टेबलेट या अन्य उपकरणों के अनुसार खुद को समायोजित करता है ।
- मोबाइल फ्रेंडली वेब डिज़ाइन साइट लोड करने की गति को कम करती है , जिससे वेबसाइट या ब्लॉग का समग्र प्रदर्शन बढ़ जाता है।
- मोबाइल फ्रेंडली वेब डिज़ाइन द्वारा अपनी आय बढ़ाने के लिए और अपनी कमाई को अधिकतम करने के लिए आप गूगल की 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 और अन्य खंड हेतु कोड रखे। /* 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 ---*/
}
/* 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; }
}
.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
2.Asha TheBlog
//// परिवर्तन सहजने के बाद गूगल सर्च में आपका ब्लॉग लिंक कुछ इस तरह दिखाई देगा.....
![How To Connect WiFi For Free [100% Works]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhorLENcORpxZ9C0rTL3D1idNqXmZ1WJtQewntGieO8bi3TJqI4sIojUlf_rmaSsDJtksbE3hmzeyfizUcpkxiJmbNovEtmlYR2-UVXIirmhHTRb4X9zkit3gO9VeOfWOTcS1InfAHxaeQ/s72-c/wi-fi-1655553_1920+%25281%2529.png)
Hello, my name is Kaushal. I'm a 21 year old self-employed Tech Guru from Jaipur.
No comments:
Post a Comment