In this guide, we’ll show you how to add a fully functioning blog to your Duda website by copying and pasting just a few lines of code.
The Duda website builder is great for building rich and complex websites without writing code. Its drag and drop editor gives you immense control of your site design... but it doesn’t really help you focus on your blog writing. Additionally, you may not want all of your blog contributors to have access to your entire website backend. Using DropInBlog with your existing Duda website lets you extract the blog, meaning your content creators can focus on blogging and you can focus on the website structure and layout.
You’ll need to create a DropInBlog account, which you can do for free with a 14-day trial, and you’ll need an existing Duda website.
Creating a blog page
Navigate to the Duda website builder, select Pages in the sidebar, and hit the New Page button to create a new Blank Page.
Alternatively, you can duplicate an existing page using the individual page settings. This saves you from creating the whole page from scratch.
Name your newly created page, I’m going with the imaginative name of “Blog”.
You’ll also need to set a page URL. This can be done by hitting the cog icon on the page item in the Pages sidebar and typing a value for the field titled Page URL. Again, I’m going to set my page URL to “blog”. Make a note of this along with the rest of the website URL, as we'll be using it in just a bit.
Connecting your DropInBlog account
Next, select Settings from the main sidebar, and then Head HTML from the sub-navigation. Locate the textarea titled Body end HTML. This is where we’ll be adding the DropInBlog script.
Open a new browser window and head on over to your DropInBlog account. Select Code & Layout from the main navigation. In the Blog Code steps, copy the code shown in Step 1 and Step 2, which looks something like this:
<script> var dib_id = 'XXXXXXXXXXXXXXXXXXX'; </script> <script src="https://dropinblog.com/js/embed.js"></script>
Switch back to the Duda website builder and paste the code into the Body end HTML textarea. Once you’ve added the code hit the Save button just underneath the textarea.
Now that we’ve set up the new page and connected it to our DropInBlog account, next we need to insert the blog posts into it.
Integrating the blog posts
Open the newly created page in the Duda builder and hit Widgets in the main sidebar. Locate the HTML widget and drag it onto your newly created blog page. Once the widget is dropped, the HTML Content editing area should automatically open.
Now, switch back to DropInBlog and copy the code shown in Step 2, which looks like this:
Return to Duda and paste the code into the HTML Content textarea.
The final steps are to set the blog page URL in DropInBlog and publish the website.
Publishing your new blog
Head back over to DropInBlog and select Settings from the main navigation. Locate the Blog URL field and add your Duda blog URL. This will be your website domain followed by your page slug. For example, my blog URL and page slug is
Hit Save all changes in the DropInBlog settings and switch back to Duda.
Finally, hit Publish in the top right corner of Duda. After that Duda will publish 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! ✨
Tips for using Duda
Your newly created blog will automatically take the styling from your website and match your branding. However, you can add custom styles within Duda using another HTML Content widget on the page and adding custom CSS. When using the HTML Content widget you’ll need to wrap your CSS in style tags like this:
Once your DropInBlog account has been integrated with Duda, there will be no need to use Duda to add new blog posts. You can now log in to DropInBlog to create new posts, and they will be automatically published on your Duda-created website!
If you'd like a hand connecting DropInBlog to your Duda site, please do get in touch. We are more than happy to help out.