Google WebStories – आप इस पोस्ट को अगर पढ़ रहे हैं तो आप भी मेरी तरह Google की Webstories को अपने ब्लॉगर साइट मे जोड़ना चाहते है।
अगर हाँ तो ये विडियो आपके लिए ही है – ऐसा नहीं है की केवल wordpress वाले ही webstories बना सकते हैं। क्योंकि बहुत सी ऐसी वैबसाइट है जो wordpress नहीं चलती है लेकिन वो भी Google की Webstories का प्रयोग करती हैं।
also read PFMS DSC
Google WebStories Platform
अब बात ये आती है की अगर WordPRess नहीं तो और कौन कौन से प्लैटफ़ार्म है तो Google की Webstories को सपोर्ट करते हैं तो उनकी लिस्ट नीचे दी गयी है।
| प्लैटफ़ार्म का नाम | प्लैटफ़ार्म की वैबसाइट पर जाएँ |
| MakeStories | यहाँ क्लिक करें |
| Newsroom AI | यहाँ क्लिक करें |
| WebStories for WordPress (Plugin) | यहाँ क्लिक करें |
| Webstoryz | यहाँ क्लिक करें |
| Zmmoz | यहाँ क्लिक करें |
| Pendular.io | यहाँ क्लिक करें |
| Zazu | यहाँ क्लिक करें |
| Visual Stories | यहाँ क्लिक करें |
| Tappable | यहाँ क्लिक करें |
| Pruduct Stories | यहाँ क्लिक करें |
| Join Stories | यहाँ क्लिक करें |
| StorifyMe | यहाँ क्लिक करें |
| Viqeo Studio | यहाँ क्लिक करें |
| Glia Story | यहाँ क्लिक करें |
| CleverPush | यहाँ क्लिक करें |
| Unfold | यहाँ क्लिक करें |
ये सभी प्लैटफ़ार्म WordPress के सभी बाकी सभी तरह की वैबसाइट को सपोर्ट करते हैं
How to Create Google’s WebStories for Blogger?
अब सवाल ये आता है की इन सभी मे हम कौनसा प्लैटफ़ार्म प्रयोग करें जिससे की हमारी ब्लॉगर की वैबसाइट पर भी Google Webstories दिखने लगे तो चलिये इस सवाल का जवाब देखते हैं।
हम सबसे पहले वाले प्लैटफ़ार्म का प्रयोग करेंगे MakeStories का
सबसे पहले अपने ब्राउज़र पर जाएँ और MakeStories सर्च करें। आप चाहें तो लिंक पर भी क्लिक करे सकते हैं।
वैबसाइट खुलने पर आपको कुछ ऐसा दिखेगा। आप ऊपर की तरफ बने हुए sign up आइकॉन पर क्लिक करें और अपना अकाउंट बना लें।
एक बार जब आप लॉगिन करलेंगे तो आपको प्लैटफ़ार्म कुछ इस तरह का दिखेगा
MakeStories वैबसाइट मे जाकर लेफ्ट साइड आपको कुछ ऑप्शन दिखेंगे।
इन सभी ऑप्शन मे से लास्ट ऑप्शन डोमैन (Domain) पर क्लिक करें बाकी सभी का प्रयोग हम बाद मे करेंगे।
Domain ऑप्शन पर क्लिक करने के बाद आपको ऊपर की तरफ Add domain name मिलेगा। मैंने पहले ही अपना डोमैन इसमे जोड़ रखा है तो आपके मे फ्रेश add करना होगा
Add Domain Name पर क्लिक करने के बाद आपके सामने कुछ ऐसा दिखेगा
उसके बाद आपको अपने डोमैन के लिए सब डोमैन बनाने के लिए कहेगा जैसे नीचे मैंने बना रखा है अपने डोमैन के आगे web-stories लगा दिया है आप भी ऐसा ही कर सकते हैं। और उसके बाद proceed पर क्लिक करें
Setup Domain name पर क्लिक करने के बाद आपको ये DNS रेकॉर्ड देगा जो आपको अपने domain प्रोवाइडर अकाउंट मे जाकर Add करना होगा
Add Google WebStories Widget to your blogger website
वेब स्टोरी बनाना से पहले हम ये भी जान लेते हैं की अपनी ब्लॉगर की वैबसाइट पर वेबस्टोरी का Widget कैसे लगाया जाए ताकि visitor को पता चल सके की हमने वेबस्टोरी बनी हुई है
Widget को अपने ब्लॉगर मे जोड़ने के लिए ये स्टेप देखें
सबसे पहले आपको MakeStories के ऑप्शन मे जाकर Widgets सेक्शन पर क्लिक करें
ऑप्शन खुलने के बाद आपके सामने जो स्क्रीन आएगी उसमे टॉप पर आपको एक ऑप्शन मिलेगा CREATE NEW WIDGET उसपर आपको क्लिक करना हैं।
यहाँ आपको कुल 6 तरह के Widget स्टाइल दिखेंगे जिनमे से Instagram Type वाला हमने प्रयोग किया है
सिलैक्ट करने के बाद जो आपके सामने स्क्रीन आएगी उसमे थोड़ी बहुत जानकारी भर के Save and proceed करें
proceed होने के बाद आपको यह बताएगा की Widget किस तरह से आपकी वैबसाइट मे दिखेगा अगर आपको ठीक लग रहा है तो आप Export Widget code पर क्लिक करें और आगे बढ़ें
उसके बाद आपको यहाँ से दो कोड मिलेंगे जिनको आप अपने ब्लॉगर मे Add करेंगे।
<div id="ms-story-player570ddb1309ea"><style>#mss4 *{box-sizing:border-box}.mpsa{scroll-behavior:smooth;width:100%;height:100%;padding:15px 0}#mss4{position:relative;padding: 15px;margin:0 auto;display:flex;flex-wrap:nowrap;max-width:1140px;overflow-x:auto;overflow-y:hidden;z-index:0;height:auto}.mpsa::-webkit-scrollbar{height:0;width:0}@keyframes shimmer{0%{left:-100px}100%{left:100px}}#mss4 .msmd{height:93px;min-height:93px;width:93px;min-width:93px;background:#e6e6e6;border-radius:100px;object-fit:cover;margin:0 15px;position:relative;overflow:hidden}#mss4 .msmd::after{content:'';position:absolute;top:0;left:0;height:100px;width:100px;background:linear-gradient(to right,#e6e6e6,rgba(255,255,255,.5),#e6e6e6);overflow:hidden;animation:shimmer 1.5s ease infinite}</style><div id="msfb"></div><script>document.querySelector("#msfb").innerHTML = `<div id="mss4" class="mpsa"><div class="msmd "></div><div class="msmd "></div><div class="msmd "></div><div class="msmd "></div><div class="msmd "></div><div class="msmd "></div><div class="msmd "></div><div class="msmd "></div><div class="msmd "></div><div class="msmd "></div></div>`;</script></div>इस कोड़ को आपके अपने ब्लॉगर की थीम मे जाकर <head> से ऊपर paste करना हैं और दूसरे कोड जो की इस तरह से है
<link href="https://cdn.ampproject.org/amp-story-player-v0.css" rel="stylesheet" type="text/css" />
<script async src="https://cdn.ampproject.org/amp-story-player-v0.js" ></script>
<script src="https://js.makestories.io/player/StoryPlayer.js"></script>
<script>let playerhjg = msPlayer({root: "#ms-story-player570ddb1309ea",widgetId: "c5f584c1-8596-4a74-8887-570ddb1309ea"});</script>
इस कोड़ को आप अपने ब्लॉगर की थीम मे जाकर सबसे नीचे जहां body क्लोज़ हो रही हो वहाँ Paste करना है
WebStories Create For Blogger ब्लॉगर के लिए वेबस्टोरी बनाए!
सभी स्टेप पूरे करने के बाद अब अपको लास्ट स्टेप करना हैं अपने ब्लॉगर के लिए वेबस्टोरी बनाना जिसके लिए आप नीचे दी गयी विडियो को देख सकते हैं।
