webdesign-android-devlopement-news-portal-designing-india-indore-bhopal-mp

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

Posted :| Posted By: Piush Trivedi | Labels: , , 134 Comments
Posted by: Piush

    मोबाइल फ्रेंडली वेब डिज़ाइन  इन दिनों प्रोफेशनल  वेब डिजाइनिंग का एक हिस्सा बन गई  है। यहां तक ​​कि अपनी वेबसाइट या ब्लॉग पर हर कोई मोबाइल फ्रेंडली वेब डिजाइन चाहता हैं। लगभग सभी बड़े वेब प्लेटफार्म मोबाइल फ्रेंडली वेब  संस्करण का उपयोग कर रहे हैं। मोबाइल फ्रेंडली वेब डिज़ाइन तेज गति से लोड होने के साथ ही Seo Friendly भी है । लेकिन मुख्य सवाल है, हम मोबाइल फ्रेंडली वेब डिज़ाइन  के रूप में वेबसाइट टेम्पलेट डिजाइन कर सकते हैं,हम मोबाइल फ्रेंडली ब्लॉग टेम्प्लेट के रूप में ब्लॉगर आधारित टेम्पलेट डिजाइन कर सकते है?  तो जवाब है , हाँ आप कर सकते हैं। जैसा की आप जानते है की ब्लॉगर ब्लॉग के विकास के लिए एक बड़ा सीएमएस मंच  है। यहां तक ​​कि ब्लॉगर प्लेटफार्म पर WordPress की तुलना में कई अदभुत फीचर हैं। WordPress  की तुलना में टेम्पलेट डिजाइन और अधिक आसान ब्लॉगर में है। आकर्षक वेब  डिजाइन करने के लिए हमे  उन्नत तकनीकी  डिजाइन भाषाओं जैसे : एचटीएमएल, सीएसएस, 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


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


Do you Like this Article?

rss twitter facebook
Get Subscribe to Free Email Updates!!
*Your email address will not be shared with anyone.

Post A Comment Blogger Disqus

134 comments:


लेख पर अपनी प्रतिक्रिया अवश्य दे..
ध्यान दे !!:-
• हिंदी में प्रतिक्रिया देने के लिए यहाँ क्लिक करे
• टिप्पणी में Html Code डाला जा सकता है
• टिप्पणी में Image डालने के लिए [im]Your Image Link [/im] कोड का उपयोग करे
• टिप्पणी में Youtube Video डालने के लिए [youtube]Youtube Video Link [/youtube] कोड का उपयोग करे
• टिप्पणी में Smiley's का उपयोग करने के लिए बताये गए कोड को डाले
• टिप्पणी प्रकाशन में कोई परेशानी है तो यहां क्लिक करें..
Regards, Hindi4Tech
:) :-) :)) =)) :( :-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

  1. @Rustam Youtube Currentle Blocked All Download Sourses For Youtube Video Download... We Are No Longer Able To Download Youtube Video..... :-?

    ReplyDelete
  2. Yes you are right this is best part of mobile friendly users they can easily access the webpages in to the mobile after coming these kind of update.
    web design company in delhi | internet marketing services

    ReplyDelete
  3. HELLO SIR MOBILE FRIENDLY WALA CODE KAAM NAHI KAR RAHA HAIN

    ReplyDelete
    Replies
    1. @ Dharmendra Provided Code Worked Perfectly ..... Plz Put This Code In Right Place In Ur Blog Template & Change Widget Area Code.... Main-wrapper, crosscol-wrapper, sidebar Etc Code With Ur Default Code... Hope U R Probleam Solve Now...... :-$

      Delete
  4. bahut hi achhe ache template hai sir ji thank you for sharing Online Free Help

    ReplyDelete
  5. Bahut acchi tips....thanks for share.......

    ReplyDelete
  6. Truely a very good article on how to handle the future technology. After reading your post,thanks for taking the time to discuss this, I feel happy about and I love learning more about this topic. keep sharing your information regularly for my future reference. This content creates a new hope and inspiration with in me. Thanks for sharing article like this. The way you have stated everything above is quite awesome. Keep blogging like this. Thanks.
    SAS training in chennai

    ReplyDelete
  7. Thank You for sharing the article with us. please keep on updating more useful informations...
    Informatica Training in Chennai

    ReplyDelete
  8. I must thank you for the efforts you have put in penning this site. I am hoping to check out the same high-grade content by you later on as well. In truth, your creative writing abilities has inspired me to get my own, personal blog now..

    Linux Training in Chennai

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. There are lots of information about latest technology and how to get trained in them, like this have spread around the web, but this is a unique one according to me. The strategy you have updated here will make me to get trained in future technologies.

    Datawarehousing Training in Chennai

    ReplyDelete
  11. All are saying the same thing repeatedly, but in your blog I had a chance to get some useful and unique information, I love your writing style very much, I would like to suggest your blog in my dude circle, so keep on updates.


    SAP SD Training in Chennai

    ReplyDelete
  12. Career Source Bangladesh gives you the guideline about online marketing and how to earn from online. Our Blog Topics: google adsense, seo, article writing, graphic design, web design, cpa marketing, video marketing, tips tricks, blogging and others.
    If You need any guideline, help or tutorial you can visit our site.

    For More: Career Source


    ReplyDelete
  13. Excellent incredible blog layout! How long have you been blogging for? you make running a blog look easy. The overall glance of your website is magnificent, let alone the content!
    Best Interior Designers in Chennai
    Interior Designers in Chennai

    ReplyDelete
  14. "I would like to say thanks for your sharing this useful information. Nice post keep it up. Hope to see you next post again soon.
    With Regards,"!!
    Local SEO Services UAE

    ReplyDelete
  15. Excellent information on your blog, thank you for taking the time to share with us. Amazing insight you have on this, it's nice to find a website that details so much information about different artists.
    wordpress web design

    ReplyDelete
  16. Nice And Very useful info,
    This article important and really good the for me is.Keep it up and thanks to the writer.Amazing write-up,Great article. Thanks!
    used to really good
    your info is quite helpful to forever. Historyhindi

    ReplyDelete
  17. LATEST NIIT PROJECTS, NIIT CYCLE TEST, NIIT ASSIGNMENTS, NIIT PMR, AND ALL KIND OF PROJECTS AND TECH TRICKS, EDUCATION TRICKS AND LOT'S MORE.. CLICK https://gniithelp.blogspot.in

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. Thank you so much. This blog is really helpful for me, I’m lucky to find out this informative blog.
    Best Website Design Company in Delhi

    ReplyDelete
  20. मेरे ज्ञान को बेहतर बनाने के लिए यह अच्छा लेख है। उपयोगी पोस्ट साझा करने के लिए धन्यवाद
    web programming tutorial
    welookups

    ReplyDelete
  21. Great information...Your post the very informative i have learned some information about your blog thank you for Sharing the great information.....
    WordPress development company in South Delhi
    Best WordPress development company in South Delhi
    Best WordPress development company in Gurgaon

    ReplyDelete
  22. Hi, its a very nice article , i really appreciate your knowledge .
    -Digital marketing course is on boom now days. It has been provided by many institutes in Delhi. There are many institutes who provide digital marketing course in Delhi among those digimanthan is best. digimanthan is known for its renowned faculties and the qualitative knowledge which has been provided to students.
    there are many following branches of digimanthan in delhi digital marketing course in preet vihar and digital marketing course in shahdara

    ReplyDelete
  23. I've always wanted to learn this language to enable my Liberation in knowing them all.

    ReplyDelete
  24. একটি মহান এবং আকর্ষণীয় নিবন্ধ থাকার অভিনন্দন। আপনাকে অনেক ধন্যবাদ!


    Bồn ngâm massage chân

    Bồn ngâm chân

    Có nên dùng bồn ngâm chân

    Cách sử dụng bồn ngâm chân

    ReplyDelete
  25. Thanks for sharing the knowledgeable stuff to enlighten us no words for this amazing blog.. learnt so many things I recommend everyone to learn something from this blogger and blog.. I am sharing it with others also..
    We are a professional training institute providing training under the following courses, if any one is looking for them click on the blink below:
    Summer training in Lucknow
    SAP training in Lucknow
    SAP FICO training in Lucknow
    Python Training in Lucknow
    Advance Java Training in Lucknow
    SEO Training in Lucknow
    Digital marketing training in Lucknow
    PHP Training in Lucknow
    Android Training in Lucknow
    am going to share it with others also, it is a nice article

    ReplyDelete
  26. Waktu ini, kalian semua jelas sudah biasa tergugah dengan sifat dasar game ini & tentu bertanya-tanya bagaimana jalan tampil selang poker
    asikqq
    http://dewaqqq.club/
    http://sumoqq.today/
    interqq
    pionpoker
    bandar ceme terpercaya
    betgratis
    paito warna terlengkap
    syair sgp

    ReplyDelete

  27. Hello,

    we provide affordable and result-oriented SEO services, please give a chance to serve you.


    Thanks
    Admin: E07.net

    ReplyDelete
  28. This comment has been removed by the author.

    ReplyDelete
  29. Hey!
    Fell free to
    👉Check These One


    And Also you wanna download new movies for free! Check Out Below link!

    Free Movies Download➤.

    ReplyDelete
  30. I have read a few of the articles on your website now, and I really like your style of blogging. I added it to my favorites blog site list and will be checking back soon. Please check out my site as well and let me know what you think.
    Live Running Train Status

    ReplyDelete
  31. I really loved reading your blog. It was very well authored and easy to understand. Unlike other blogs I have read which are really not that good.Thanks alot!
    http://sattaking.online/

    ReplyDelete
  32. Its really great being a content writer I can understand how tough is it to write and develop the content ,Thanks for sharing this wonderful informationSAP Training in Lucknow 
    Digital marketing training in Lucknow 
    AUTOCAD Training in Lucknow  
    PYthon Training in Lucknow  
    SAP FICO Training in Lucknow  

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

    ReplyDelete
  34. Such a nice tips. Thanks for sharing your information. If you want to do Buy instagram followers Mumbai enjoy your day :) More details Contact On us +917339876756

    ReplyDelete

  35. Nice Blog!!!
    Here we are manufacturer of sand blasting machine Price in india. for more details contact us. We are also Manufacturers of shot blasting machines & grit blasting machines.
    See More:
    Portable Sand Blasting Machine
    Sand Blasting Cabinet
    Sand Blasting Machine

    ReplyDelete
  36. ধন্যবাদ ভাই আপনার ব্লগ থেকে কিছু শিখতে পেরেছি এবং আমি নিজেও চেষ্টা করছি আপনাদের মত কিছু করার আপনাদের থেকে অনুপ্রেনিত হয়ে, তাই ফেসবুক মার্কেটিং কি এবং কিভাবে করবেন সেই বিষয়ে একটি কন্টেন্ট লিখেছি আপনি চাইলে দেখতে পারেন।

    ReplyDelete
  37. Such a nice blog. Really helpful Info! that’s all i can say about your Posts.
    Thanks for sharing your information. Golden Triangle Tour Packages India

    ReplyDelete
  38. Hi I am Siya, I am providing the Home tuition in Sahibabad. Hometutorials.net also provide the Home tution in Sahibabad. Many parents find that their children are more receptive in working through their studies with a teacher at home.

    ReplyDelete
  39. I suppose that is an informative claim and it's far rather beneficial and knowledgeable. consequently, i might finally to thank you for the undertakings that you have made in writing this text. all of the content is truly adeptly-researched. thanks...
    Read More:-
    satta king
    sattaking
    Satta king chart 2020
    Satta king Online Result
    Satta king Chart
    Satta King Record Chart
    Satta king Live Chart
    Satta king Up
    Satta king Today
    Up Satta King Chart
    Sattaking Chart March
    Sattaking October Chart
    Sattaking November Chart
    Sattaking Chart June
    Our Services Partner
    Gas Stove  Repair
    Digital Marketing Agency
    Exporter and Importer

    ReplyDelete
  40. Welcome to Satta King Best – the reliable and acclaimed platform to get the accurate result and with precise information on time and with honesty. Satta King Guru is for the gaming enthusiasts, who wish to try their luck for something best and with accuracy.

    Read More:-

    satta king
    sattaking
    satta king 786
    Gali Satta Result
    Satta King 2020

    Our Services Partner

    Gas Stove Repair
    Buyer and Seller
    Digital Marketing Services

    ReplyDelete
  41. satta king - Satta King Fix is India's No 1 website that provides the Satta king result online. We offer the live result for Satta king game, now get the live result for Satta king game.

    Read More:-

    satta king
    sattaking
    Gali Satta Result
    Satta King 2020
    satta king 786

    ReplyDelete
  42. Do you want to play Satta King Lottery , found this term on internet or heard about this unique lottery from your friends .
    If Want Play online Satta King Games Click Satta King:-

    ReplyDelete
  43. Saving this will be really helpful for me. The most important part of any business is it's brand identity, so click down now and get a custom one.
    buy logo

    ReplyDelete
  44. WOW…
    I love this post. The information in this article is useful for me. After reading this article, I think I have some ideas for myself.
    Thanks for sharing!
    https://lowcostseo83475854.wordpress.com/

    ReplyDelete
  45. Nice Blog... Thank you for sharing this information.

    Brigade Citadel

    2/3 BHK Flats for Sale in Hyderabad

    ReplyDelete
  46. I really enjoyed reading your article. I found this as an informative and interesting post, so i think it is very useful and knowledgeable. I would like to thank you for the effort you have made in writing this article.
    SEO services

    ReplyDelete
  47. Very informative post. SEO on Instagram We’re new to blogging as our primary source of income has always been freelance software engineering.
    Thanks for sharing with us.

    ReplyDelete
  48. Thanks for provide great informatic and looking beautiful blog, really nice required information & the things i never imagined and i would request, wright more blog and blog post like that for us. Thanks you once agian
    Profile Creation

    ReplyDelete
  49. This is very interesting, You’re a very skilled blogger. I have joined your feed and look forward to seeking more of your great post. Also, I have shared your web site in my social networks!

    digital marketing

    ReplyDelete
  50. Love your rare tech blog in Hindi, Anyways lot tech blog are in English

    ReplyDelete
  51. Hello
    Great post .article submission sites
    there was much important information in it. I always follow your blog and learned a lot of things.
    thank you

    ReplyDelete
  52. you guys must have to visit this site:
    this is really a useful blog thanks for sharing it with us!
    we design the best websites & custom logos at a discount are you guys interested?
    Logo Designer Online

    ReplyDelete
  53. WOW!
    I love this post. document sharing sites
    The information sites list in this article is useful for me. it is a very important post.

    ReplyDelete
  54. Hello
    Thanks for providing a great informatic and looking beautiful blog, really nice required information & the things I never imagined and I would request,development technologies wright more blog and blog post like that for us.
    Thanks for sharing!

    ReplyDelete
  55. Thanks for sharing,these sites are really amazing. I appreciate your hard work. Keep posting new updates with us. This is really a wonderful post. Nice Blog Very interesting and useful information on your website.
    High PR PDF Thanks for sharing the blog and this great information which is definitely going to help us.

    ReplyDelete
  56. great post. The information in this article is useful for me. After reading this article,ranking factors
    I think I have some ideas for myself.

    ReplyDelete
  57. This content is outstanding and extremely informative. I found here an important topic what I want actually. instagram stalker
    Thanks for sharing. I recommended this post to all readers.

    ReplyDelete
  58. Great post. I was once checking constantly this weblog and I'm impressed! Extremely useful information specially the closing part. I maintain such information much. Product Submission Sites
    I was once seeking this specific information for a very long time. Many thanks and best of luck.

    ReplyDelete
  59. Thank you for sharing it with us.
    I am really happy to see this blog.
    It is very helpful for me.

    Nursing assignment help

    ReplyDelete
  60. nice post checkout this post by click here sattaking vip
    nice post checkout this post by click here sattaking best
    nice post checkout this post by click here sattaking disawar

    ReplyDelete

  61. This is a fantastic article. I've been looking for this for a long time! It's a good thing I found it on. You've brightened my day! Thank you once more!

    digital marketing in telugu
    free digital marketing in telugu



    ReplyDelete
  62. Great! Thanks for sharing valuable information about the list of Blog comment sites and this really helped to improve my site rank on search engine result pages.social networks
    please keep it up!

    ReplyDelete
  63. Interesting article, thanks for sharing it with us.

    law dissertation Writers

    ReplyDelete
  64. good information
    visit for tech information
    intech101.in

    ReplyDelete
  65. Good post Aaj Ki Tithi Thanks for sharing this great article

    ReplyDelete
  66. I'm usually to blogging and i actually appreciate your content. The article has genuinely peaks my interest. I'm going to bookmark your web page

    ReplyDelete
  67. Excellent writing Hindi attitude status for FB thanks for sharing this great article

    ReplyDelete