How to Create a Blog on Weebly

How to Create a Blog on Weebly

Dave Dave
5 minute read

Listen to article
Audio is generated by DropInBlog's AI and may have slight pronunciation nuances. Learn more

In this guide, we’ll show you how to add a fully functioning blog to your Weebly website with just a few lines of code.

Weebly is great for building clean, rich websites, but the blogging experience can be slow and hard to grapple with. The drag-and-drop editor gives you immense control of site building but doesn’t give you much freedom for writing. To some, Weebly can feel a little overwhelming and lacking. 

However, by integrating DropInBlog, you can get the best of both. Using DropInBlog with your existing Weebly website lets you place the blog wherever you want on your site, and regular content uploads become super easy. Your content creators can focus on reaping the benefits of blogging, and you can focus on the website structure and layout.

To get started, you’ll first need to create a DropInBlog account, which you can do for free with a 14-day trial, and you’ll need an existing Weebly website.

Creating a Blog Page

Navigate to the Weebly website builder, select Pages in the main navigation, and hit the plus (+) icon to create a new Standard Page.

Screenshot of Weebly with a Standard page being added

Then, choose a name for the blog page. I’m going to go with the imaginative name of “Blog.” Note that this name will be used for the page slug too.

Next, select SEO Settings and locate the Footer Code field. We’ll be adding the DropInBlog script here.

Open a new browser window, head over to your DropInBlog account, and select Code & Layout from the main navigation. Copy the code shown in Step 1. It looks something like this:

<script src="https://io.dropinblog.com/embedjs/XXXXXXXXXXXXXXXXX.js"></script>

Switch back to your Weebly website builder and paste the code into the Footer Code field. Hit the back arrow in the top left and then Done.

Before and after adding the DropInBlog code to the Footer Code field in Weebly

Here’s a helpful tip for you: copy or paste the code by selecting the area with your cursor and right-clicking it. You’ll then be shown the option to copy or paste.

Now that we’ve set up the new page and connected it to our DropInBlog account, we can insert the blog posts into it.

Inserting the Blog Posts

Open the newly created page in the Weebly builder and switch to the Build option in the main navigation.

Locate the Embed Code block in the sidebar and drag it onto your newly created blog page. Select the block you created and hit Edit Custom HTML.

Dragging an Embed Code block onto a Weebly site

Once in this editing mode, switch back to DropInBlog and copy the code shown in Step 2, which looks like this:

<div id="dib-posts"></div>

Go back to Weebly and paste the code into the custom HTML area.

The final steps are to define the blog page URL within DropInBlog and to publish your website changes at Weebly. 

Publishing Your New Blog

Head over to DropInBlog and select Settings from the main navigation. Locate the Blog URL field and add your Weebly blog URL. This will be your website domain, followed by your page slug. For example, my blog URL and slug is: https://mywebsite.weebly.com/blog.html

You can find out your website domain in Weebly by selecting the Settings item in the main navigation. The page slug will be created from your page title, followed by .html, but you can alter this in the page SEO Settings.

Hit Save All Changes in the DropInBlog settings and switch back to Weebly.

Finally, hit Publish in the top right corner of your Weebly editor. After that, Weebly will work on publishing your website changes and give you a link to your website. Navigate to your new blog page to test out your new and fully functioning blog! ✨

Finished blog shown within the Weebly published website

Tips for Using Weebly

Your newly created blog will automatically take on the styling from your website and match your branding. However, if you'd like, you can add custom styles within Weebly using another Embed Code block on the page and adding your own custom CSS. When using the Custom HTML block you’ll need to wrap your CSS in style tags like this: <style>…</style>

Once your DropInBlog account has been integrated with Weebly, there will be no need to log in to Weebly to create new blog posts. You can create your posts directly in your DropInBlog account, and they will be automatically published on your Weebly website.

FAQs

Weebly offers a free plan that gives you a reasonable degree of functionality. If you want more, you’ll have to upgrade. Plans start from $120, paid upfront for a year ($10/month).

Weebly does offer a built-in blogging platform. To publish blog posts on your Weebly site, you can simply add a page to your homepage and use this as your blog. However, It’s worth testing this out first because doing so can cause formatting problems to your site. 

Alternatively, you can integrate a specialized blogging platform like DropInBlog and easily add new posts without worrying about formatting problems each time.

Conclusion

There you have it – it’s super simple to integrate DropInBlog with Weebly. Just because Weebly wasn’t the convenient all-in-one solution you were hoping for, it doesn’t mean you have to migrate to another platform. 

If you still need assistance getting set up, please do get in touch, and we’ll be more than happy to help out. ⛑

« Back to Blog

Get started embedding a blog into your website right now.

Try It For Free