एक साधारण 'Page' को अपनी Main Website/App Theme कैसे बनाएं? (IMP)♦️

Blogger Hack: एक साधारण 'Page' को अपनी Main Website/App Theme कैसे बनाएं? 🚀

दोस्तों, अगर आप Google Blogger इस्तेमाल करते हैं, तो आपको पता होगा कि इसका डिफ़ॉल्ट लुक एक टिपिकल "ब्लॉग" (Blog) जैसा होता है, जहाँ होमपेज पर लाइन से आर्टिकल्स दिखते हैं।

लेकिन क्या हो अगर आप Blogger पर एक प्रीमियम बिज़नेस वेबसाइट या App-like Dashboard (जैसे हमारा PT SEVA या Channel Deals) बनाना चाहते हों?

आज मैं आपको एक ऐसा Master Trick बताने जा रहा हूँ जिससे हमने Blogger की डिफ़ॉल्ट थीम को बायपास करके, अपने एक सिंगल Custom HTML Page को ही पूरी वेबसाइट की थीम बना दिया है! अब कोई भी हमारी साइट सर्च करता है, तो उसे ब्लॉगर का पुराना डिज़ाइन नहीं, बल्कि सीधा हमारा प्रीमियम पेज (Theme) खुलता हुआ दिखता है।

चलिए जानते हैं ये जादू कैसे किया:

Step 1: अपना Premium Page तैयार करें (HTML/CSS)

सबसे पहले Blogger डैशबोर्ड में 'Pages' सेक्शन में जाएं और एक नया पेज बनाएं (मान लीजिए इसका नाम "Home" रखा है)।

  • पेज के HTML View में जाएं।

  • अपना कस्टम डार्क थीम, नेविगेशन बार, ग्रिड और UI वाला पूरा HTML/CSS कोड यहाँ पेस्ट कर दें।

  • इस पेज को Publish करें और इसकी Link Copy कर लें (जैसे: yourwebsite.com/p/home.html)।

Step 2: Blogger का कचरा (Default Elements) छुपाएं 🧹

अब हमें ब्लॉगर के डिफ़ॉल्ट हेडर, साइडबार और फुटर को हटाना है ताकि हमारा पेज पूरी स्क्रीन पर एक App की तरह दिखे।

अपने Page के <style> सेक्शन में यह जादुई कोड डाल दें:

CSS
/* Aggressive Blogger Reset */
.page-title, .post-title, .date-header, .blog-pager, #comments, .post-footer, 
.blog-feeds, .feed-links, .post-feeds, .subscribe-wrapper, .Attribution, 
.status-msg-wrap, .widget-item-control, .navbar, #navbar, .sidebar, 
#b-navbar, .b-mobile-navbar, header, .Header { 
    display: none !important; 
}

इससे ब्लॉगर की डिफ़ॉल्ट थीम पूरी तरह से छिप जाएगी और सिर्फ आपका डिज़ाइन दिखेगा।

Step 3: Main Trick (Homepage को Page पर Redirect करें) 🔀

अब सबसे बड़ा सवाल: जब कोई yourwebsite.com खोले, तो उसे हमारा पेज कैसे दिखे? इसके लिए हम एक छोटा सा JavaScript Redirect इस्तेमाल करते हैं।

  1. Blogger के Theme > Edit HTML में जाएं।

  2. <head> टैग के ठीक नीचे यह कोड पेस्ट कर दें (अपनी लिंक बदलना न भूलें):

HTML
<script type='text/javascript'>
  var url = window.location.href;
  var home = "https://yourwebsite.blogspot.com/";
  // अगर यूजर होमपेज पर है, तो उसे हमारे Custom Page पर भेज दो
  if (url == home || url == home + "?m=1") {
    window.location.href = "https://yourwebsite.blogspot.com/p/home.html";
  }
</script>

बूम! 💥 अब जो भी आपकी मेन वेबसाइट पर आएगा, वो पलक झपकते ही आपके शानदार कस्टम थीम वाले पेज पर पहुँच जाएगा।

Step 4: "White Screen" Bug से बचें (Pro Tip) ⚠️

(इस छोटी सी गलती ने मेरे 3 घंटे बर्बाद किए थे, आप ये गलती मत करना!)

जब हम इतनी एडवांस कोडिंग करते हैं, तो कई बार मोबाइल फ़ोन पर वेबसाइट खुलने के बजाय सिर्फ़ एक 'सफ़ेद स्क्रीन' (White Screen) दिखती है। यह इसलिए होता है क्योंकि ब्लॉगर मोबाइल में अपनी डिफ़ॉल्ट थीम ज़बरदस्ती घुसेड़ता है।

इसे ठीक करने का 1 मिनट का इलाज:

  1. Blogger Dashboard में Theme पर जाएं।

  2. Customize के बगल वाले नीचे के Arrow (Dropdown) पर क्लिक करें।

  3. Mobile Settings चुनें।

  4. वहाँ "Desktop" वाला ऑप्शन सेलेक्ट करके Save कर दें।

बस! अब ब्लॉगर आपकी थीम से कोई छेड़छाड़ नहीं करेगा और आपका कस्टम पेज मोबाइल और लैपटॉप दोनों पर मक्खन की तरह चलेगा।

निष्कर्ष (Conclusion):

Blogger एक फ्री और बेहद पावरफुल प्लेटफार्म है। अगर आपको थोड़ी सी HTML/CSS की समझ है, तो आप इस "Page Redirect Hack" का इस्तेमाल करके ब्लॉगर पर दुनिया की किसी भी महँगी वेबसाइट जैसा डिज़ाइन बना सकते हैं, वो भी लाइफटाइम फ्री होस्टिंग के साथ!

अगर आपको यह ट्रिक अच्छी लगी हो या कोडिंग से जुड़ा कोई सवाल हो, तो नीचे कमेंट्स में ज़रूर बताएं! 👇