Blogger Mobile Responsive Theme Kaise banaye(कैसे बनाये)?

दोस्तों, आज का topic है Blogger Mobile Responsive Theme Kaise banaye(कैसे बनाये)?  बहुत से Blogger theme ऐसे है जो की mobile responsive या Mobile Friendly नहीं है ऐसे जब भी कोई Visitor आपके Website को Mobile में open करता है. तो Website का UI बहुत खराब दीखता है जिसके वजय से Users को Navigation में Problem होता है.
Mobile Responsive theme
चुकी आज के समय में 70% -80% Visitor Mobile से आते है. इसलिए Website या blog को Mobile Responsive बनाना बहुत जरुरी है और यह Google Search Engine Optimization के हिसाब से भी बहुत जरुरी है.

Blogger Mobile Responsive Theme Kaise banaye(कैसे बनाये)?

बहुत से New Blogger theme ऐसे है जो की पहले से mobile friendly होते है, लेकिन अभी कुछ Templates ऐसे है जो Mobile Responsive नहीं है. ऐसे में अगर आपका भी Blogger template Mobile friendly नहीं है तो यहाँ बताये गए तरीके से उसे mobile responsive बना सकते है.
सबसे पहले आप अपने Blog को Google Mobile-Friendly test tool की मदद से  test करे और ये पता लगाये की जब आपका Website/blog Mobile पर open किया जाता है तो कौन -कौन से CSS & JavaScript Code Block हो जाते है और क्यों?
Test करने के बाद जो भी issue हो उन्हें Fix करे और Code Optimize करके या Remove करके Mobile Friendly test pass करे. उसके बाद ये स्टेप follow करके Website mobile Friendly बनाये?
स्टेप 1. सबसे पहले आप ये code copy करके Blogger Code में जाकर <head> Tag के नीचे paste करे और theme को Save करे.
<meta name=’viewport’ content=’width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0’/>
स्टेप 2. अब आप फिर से Blogger Dashboard में Theme option पर जाये और Customize पर click करे, उसके बाद Advance option जाकर Add CSS option में जाये उसके बाद ये Code copy करके paste करे और Apply on blog option पर click करे.
* Laptops and Desktops */
@media only screen and (max-width : 1280px) {
/* The following css will be rendered if device width is less than 1280px */
}
/* Tablets (Landscape) */
@media only screen and (max-width : 1024px) {
/* The following css will be rendered if device width is less than 1024px */
}
/* Tablets (Portrait) */
@media only screen and (max-width : 768px) {
/* The following css will be rendered if device width is less than 768px */
}
/* iPhones */
@media only screen and (max-width : 640px) {
/* The following css will be rendered if device width is less than 640xpx */
}
/* Mobiles */
@media only screen and (max-width : 480px) {
/* The following css will be rendered if device width is less than 480px */
}
/* Small Mobiles */
@media only screen and (max-width : 320px) {
/* The following css will be rendered if device width is less than 320px */
}
स्टेप 3. ये दोनों Code add करने के बाद आप फिर से Theme option में जाये और जहा पर Mobile theme Preview का option के नीचे दिए गए Setting icon पर click करे और theme option से जाकर Custom Select करे.
ये सभी Process Visual तरीके से देखने के लिए Video Guide देखे,
दोस्तों, Blogger Mobile Responsive Theme बनाने का यह सबसे आसान तरीका है. लेकिन यह सभी Blog या Website के लिए काम नहीं करता है. आप एक बार इसे Try करे हो सकता है की आपके Theme के लिए यह कोड काम कर जाये. अगर कोई सवाल हो तो Comment जरुर करे.

2 Replies to “Blogger Mobile Responsive Theme Kaise banaye(कैसे बनाये)?”

  1. Nice article . I am a new blogger and facing a problem with my Blog.I have posted 21 posts but it is showing only 15 .How to solve this problem.please help me out…

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.