Home Discover Mobile E Sports Technology Business Viral Gadgets Movies Events


Make Web Stories on blogger using Visual Stories and Cloudflare with Sub Folder

Web Stories is a popular way to grow any new website and blog. In the internet there was many ways of creating web stories on blogger
Make Web Stories on blogger with Sub Folder using Cloudflare: Best way to create Web Stories on blogger
Web Stories for Blogger

Web Stories is a popular way to grow any new website and blog. In the internet there was many ways of creating web stories, but this is slightly hard for blogger CMS users. In WordPress, users can easily implement web stories using a simple plugin. But on blogger you don't have any option to make web stories or visual stories. Wait! What is different between web stories or visual stories? There was no different between web stories and visual stories.

How to Make Web Story For Blogger (Blogspot)

Also before posting this article i also searching web stories on blogger but I found this Google forums, here travler said that blogger do not support AMP and web stories. First blogger support AMP, because my website made in blogger and i am using amp, web stories and pwa also.

schema data for web stories for blogger 1 amp web stories for blogger 2

If you don't know that we have already discussed regarding PWA on blogger. Here in the second screenshot you can see 2 valid items detected: All have warnings - don't worry about that, this will not effect your SEO. If you followed these tutorial step by step, then this can be easy for you. Before starting check my website story here with custom domain and sub folder.

Sub Folder vs Sub domain in blogger Web stories

There was totally three methods to create a web story.

  1. Using default sub domain (blogspot domain)
  2. Using custom domain with sub directory or folder
  3. Using sub domain from your custom domain
Note that the sub folder and the sub directory is same.

So what is best for SEO. By default if you don't have a custom domain then you can easily make web stories by using visual stories sub domain. But listen, by applying this method you will waste your time. Why i am saying this? Because just think like Google. Why Google show your subdomain web stories in discover. There was many high authority websites options available for Google to show up in discover. So please, i you take blogging seriously then purchase a top level domain like .com or .in

2nd method is using sub domain means web-stories.example.com. by using sub domain you can easily make web stories. But you will lose your SEO. Google will see your website as a new website and if you are a old player in this industry then you know that domain trust level is most important for ranking on Google. If you make web stories by using this method then note that you need atleast 50+ domain authority or 2 years old domain (Personal experience).

Final method with sub directory. This is a best method to make web stories using by top websites in the internet. By using sub folder your will not lose any SEO.

Requirement for Web Stories on blogger

  • Custom domain
  • Connected with Cloudflare
First you need to connect your domain with Cloudflare.

Now set non www to www using Cloudflare rules

Note: Don't enable rocket loader in Cloudflare if you are using AMP in your website. Also in some case ALWAYS USE HTTPS options may be not shown (from 2nd video), please wait atleast 1 hours after connect your domain with Cloudflare.

Also visual stories free plan support only 50 stories and 2GB storage.

After completing Cloudflare setup now go to Visuals Stories and create a account with email id. Don't use facebook login because facebook lock any account if suspicious activity found. Hope Google login option will added soon.

Why choose Visualstories.com?

In my research time regarding web stories there was 2 types of platform available for custom coded website. First is makestories.io and second is visualstories.com.

Makestories is a popular platform to make web stories on blogger. But during my research time i got some error by adding my domain (unable to add domain). So then i deside to start with visual stories.

One more reason to choose visual stories, because this is fully comfortable with mobile and PC device but make stories do not support Mobile devices. But you can use by enabling desktop mode in your chrome browser.

Is Visual stories trusted?

Yes, visual stories is trusted platform promoted by Google, here you can see all the popular platform to make web stories

Let's get back to the tutorial. After creating account  successfully click on 3 dot and click create blog as shown in images below.

visual stories create blog for blogger 1 visual stories create blog for blogger 2 visual stories create blog for blogger 3 visual stories create blog for blogger 4

After getting approval follow the steps to connect with Cloudflare

1. Click on 3 dot and click on your website name and then click set up.

visual stories domain setup for blogger 1 visual stories domain setup for blogger 2 visual stories domain setup for blogger 3 visual stories domain setup for blogger 4

2. Click self hosting instructions

3. Method 1: via CDN, means Cloudflare. I already embedded the video above to connect Cloudflare and give 2 rules for http to https redirection.

4. Choose CMS blogger and choose CDN Cloudflare

5. Now login to Cloudflare and select your website.

visual stories cdn setup for blogger 1 visual stories CDN setup for blogger 2 visual stories CDN setup for blogger 3 visual stories CDN setup for blogger 4 visual stories CDN setup for blogger 4

6. Remove default service name and Enter service name ex: web-stories and click create service.

Note that if your website do not support www then make sure to watch the Cloudflare video above and learn to redirect non www to www. This is good for SEO

7. After creating service click on Triggers and add route

8. Here enter route name ex: www.example.com/web-stories/* . In your case you can get route name in your visual stories self hosting page shown as image below.

visual stories route setup for blogger 1 visual stories route setup for blogger 2 visual stories route setup for blogger 3

9. You need to create one more route ex: www.example.com/web-stories

10. Go to resources section and click quick edit and remove old or default code and go to Visual stories, copy the hole code given by Visual Stories in self hosting instructions page for your website and paste it to Cloudflare and click save and deploy.

visual stories workers setup for blogger 1 visual stories workers setup for blogger 2 visual stories workers setup for blogger 3

Done! now you can see you sub folder live at www.yourdomain.com/web-stories

Now let's do some SEO for your web stories.

1. Go to Visual stories settings by clicking 3 dots and then branding. Here upload favicon and logo size minimum 512×512 and a regular logo size minimum 270×60 px with png format no background.

2. Select change blog theme and add best theme and apply and add social link and privacy policy, contact us url as shown in these images below.

seo for web stories for blogger 1 seo for web stories for blogger 2 seo for web stories for blogger 2

Adsense approval for Web stories in blogger

Please upload at least 5 web stories before applying for approval and make sure to don't violate any web stories policy.

Go to email and compose a mail to info@visualstories.com 

Subject: Web Stories ad request

Message: 

Hi visual stories team,

data-ad-client="ca-pub-0000000000"

data-ad-slot="000000000"

Website: https://www.yourdomain.com/web-stories

Please monitize as soon as possible 

Thank you!


Make sure to generate a display ad on your adsense account and replace the publisher id in data ad client and replace data ad slot with your own. Also replace your domain name.

Also contact visual stories at instagram to get approval, this is a manual process. So don't panic and wait for 2 to 5 days. Also note in free account of Cloudflare can handle 3 milion traffic per month for your web stories.

You can upgrade your account any time if your website get millions of traffic in a month.

After this all set up you can learn making web stories on blogger by seeing images below. Open chrome browser in your android device and don't enable desktop mode. Because visual stories is comfortable with mobile devices.

web stories for blogger 1 web stories for blogger 2 web stories for blogger 3 web stories for blogger 4 web stories for blogger 5 web stories for blogger 6 web stories for blogger 7 web stories for blogger 8 web stories for blogger 9 web stories for blogger 10 web stories for blogger 11 web stories for blogger 12 web stories for blogger 13 web stories for blogger 14 web stories for blogger 15 web stories for blogger 16 web stories for blogger 17 web stories for blogger 18

Now the main point is indexing, if your website approved in Google news then indexing is easy for you. Just go to Google search console and add web stories sitemap and submit.

Index web stories on blogger

My sitemap: https://www.gamenewsmania.in/web-stories/storylists.xml 

Make sure to replace the url with your domain name.

To index the story go to web stories home page https://www.gamenewsmania.in/web-stories and open your story and copy url and go to search console and request indexing. Make sure to add this robots.txt file to not block your web stories from crawlers.

Wait for 5 to 24 hours to index your web stories on Google. To check indexed or not go to google.com and paste your web stories link in Google search bar. Don't paste it directly on browser to check indexing status.

Index your web stories as they got published within 5 minutes using Google news, read full tutorial here.