वेबसाइट के लिए browser में address bar और status bar का color कैसे change करे। 

Change address bar and Status Bar Color :-नमस्कार दोस्तो, bloggers अपने website को बेहतर बनाने की पूरी कोशिश करते है। ताकि visitors को एक अच्छा user experience मिल पाए। आज हम इसे ही एक फीचर के बारे में जानेंगे जिससे आप mobile browser के address बार और status bar color को अपने website branding color के साथ बदल सकते है।

Google ने Chrome browser version 39 से custom status bar color का feature add किया है। आपने अक्सर देखा होगा कि मोबाइल से browser से कोई website open करने पर आपके status bar का color change हो जाता है। और यह color उस website के brand color जैसा होता है।

Address Bar और Status Bar change करने के क्या फायदे है?

1. Address bar और Status bar color को चेंज करने से आपके साइट की brand बढ़ जाएगी।
2. Material design color से आपके साइट के visitors को एक अच्छा user experience मिलेगा। जिससे लोग आपके साइट को पसंद करेंगे।
3. Visitors ज्यादा देर तक आपके website पर रहने से bounce rate कम होने में मदद होगी।

 

Browser Address bar और status bar colour को कैसे बदले?

Browser Address bar और status bar colour को change करने के लिए नीचे लिखा हुआ code आपको अपने WordPress theme के header में copy करना होगा।

1. WordPress dash board में लॉगिन करे और add new plugin पर क्लिक करे।
2. अब Insert Headers and Footers plugin को सर्च करे। इस plugin को अब install और activate कर ले।
3. Setting tab पर क्लिक करे और insert headers and footers option पर क्लिक करे।
4. अब plugin के head सेक्शन में नीचे दिया गए code को paste करे।

 

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#ff5722">

यह पर #ff5722 को आप आपके website brand color के मुताबिक change कर ले।

आपका HTML color code आप यहां से material design में चुन सकते है।

Blogspot Blog के लिए यह कोड आप अपने xml theme code में head section में डाल दे।

Color Change पर Geek Hindi की यह site कुछ इस तरह देखेगी।

 

Brand color से जुड़ी कुछ जरूरी बातें।

• ऊपर दिया गया code android lollipop 5.0 और ऊपर के OS में ही काम करेंगे।
• ऊपर दिया गया code Chrome, Firefox और Opera browser में काम करेगा।
• Chrome browser के incognito mode में यह colors काम नही करेंगे।
• Windows phone और apple के safari browser के लिये आप यह code पेस्ट कर सकते है।

<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#f5740d">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

 

मुझे उम्मीद है कि इस guide से आप address bar और status bar color को change कर पाएंगे। अगर आपका कोई सवाल या सुझाव है तो comment के जरिये जरूर बताएं।