दोस्तों, आज का topic है Blogger Mobile Responsive Theme Kaise banaye(कैसे बनाये)? बहुत से Blogger theme ऐसे है जो की mobile responsive या Mobile Friendly नहीं है ऐसे जब भी कोई Visitor आपके Website को Mobile में open करता है. तो Website का UI बहुत खराब दीखता है जिसके वजय से Users को Navigation में Problem होता है.
चुकी आज के समय में 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 करे.
