Display your blog posts on your website with Widget Code
Your blog isn’t the only place where you can show off your latest posts – you can do that on other pages of your website, too, i.e., the homepage or the About Us page.
To do this, you can use DropInBlog’s Widget Code, and here you’ll learn how to add that code to your website.
The Widget Code section is located on the Code & Layout page of your DropInBlog admin account.
This section contains four different code options, allowing you to choose how, and which, posts will be displayed on your website.
These include the following:
Recent Posts Code: This code displays the most recent posts from your blog. By default, this code is set to show three posts, but you can change that to any number of posts you want to show on your site.
Recent Posts List Code: This code displays your recent posts, much like the Recent Posts code, but instead of a post thumbnail, title, and the post meta you selected in the Output section of the Settings page, it shows your posts as a list of links.
Specific Posts Code: This code works like the Recent Posts code, but instead of recent posts, it displays the posts you select manually.
Specific Posts List Code: This code works like the Recent Posts List code, and like the Specific Posts Code, it displays the posts you want to show on your website.
To add the code that will show your blog posts on your website, you need to go to the platform where you created your website ( Shopify, Wix, Carrd, etc.).
In this tutorial, we’ll show you how to add the code for showing recent or specific posts on a Carrd website, but the process is the same regardless of the platform you use.
Go to the platform where your site was built and, using the page editor, open the page where you want to show your DropInBlog blog posts.
The image below shows our Homepage within Carrd’s editor.
Next, find the option to add an element or block to the selected page, and look for the Embed code/html option.
After you’ve added an embed section to your page, move it to where you want your blog posts to show.
In the settings of the embed section, find the option that allows you to paste code, then head over to the Widget Code section on the Settings page of your DropInBlog account.
To show the recent posts from your blog, find the Recent Posts Code (1) in the Widget Code section and copy the first block of code by clicking on Copy code (2).
Return to your website, and paste the code into the Embed code section that you previously added.
Go back to your DropInBlog account, and copy the second block of code.
Return to your website, and paste the code into the embed section right after the first block of code you pasted earlier.
Save your changes, and open the page you edited to view the recent posts section.
This is how it looks on our Carrd website.
As with the Recent Posts Code, to display the list of your recent posts, you need to copy and paste the two blocks of code from your DropInBlog account to an embed element on your main website’s page where you want the posts to appear.
Be sure to copy the code under Recent Posts List Code as shown in the image below.
After you save the changes, your blog posts will be shown as a list similar to the image below.
DropInBlog allows you to display your blog posts across your main website and choose which particular posts to show. For that, you will copy the two code blocks under Specific Posts Code or Specific Posts List Code and paste them to your website.
However, unlike with recent posts, you’ll also need to add the ID of the posts you want to show on your site to your code.
If you look at the image of the Specific Posts Code, you’ll notice that the first block of code includes the numbers 1 and 3, which are post IDs.
You need to replace these numbers with the IDs of the posts you want to display on your site.
Each post on your blog has a unique ID number, which you’ll find by opening a blog post in the post editor and expanding the Advanced section on the right-hand side of the page.
At the very bottom of the section, you’ll see Post ID with the number assigned to that particular post.
We suggest finding the IDs of the posts you’ll display on your site first and noting them down somewhere.
Then, you need to go to your main website and add the code, which you’ll then edit by adding your posts’ IDs.
In the page editor of your main website, find the embed code element, add it to your page, then go back to your DropInBlog account and copy the first block of code under the Specific Posts Code section.
Return to your main website, and paste that code in the embed element. Before you copy the second block of code, change the default post IDs to the ones you selected.
Then, return to your DropInBlog account and copy the second block of code.
Paste that code into the embed element on your main website, and save your changes.
The posts will have the same look as your recent posts – the difference is that they won’t be your blog’s recent posts, but the specific ones you selected.
The process of getting the list of the specific posts from your blog to show on your main website is the same as showing specific posts from your blog.
The important thing here is that once you paste the first block of code, you need to replace the default post IDs with the ones you want to show on your site.
That’s it! Now you can show your blog posts anywhere on your site.
Happy blogging!
To do this, you can use DropInBlog’s Widget Code, and here you’ll learn how to add that code to your website.
Locating the Widget Code
The Widget Code section is located on the Code & Layout page of your DropInBlog admin account.
Widget Code options
This section contains four different code options, allowing you to choose how, and which, posts will be displayed on your website.
These include the following:
Recent Posts Code: This code displays the most recent posts from your blog. By default, this code is set to show three posts, but you can change that to any number of posts you want to show on your site.
Recent Posts List Code: This code displays your recent posts, much like the Recent Posts code, but instead of a post thumbnail, title, and the post meta you selected in the Output section of the Settings page, it shows your posts as a list of links.
Specific Posts Code: This code works like the Recent Posts code, but instead of recent posts, it displays the posts you select manually.
Specific Posts List Code: This code works like the Recent Posts List code, and like the Specific Posts Code, it displays the posts you want to show on your website.
Adding the posts code to your website
To add the code that will show your blog posts on your website, you need to go to the platform where you created your website ( Shopify, Wix, Carrd, etc.).
In this tutorial, we’ll show you how to add the code for showing recent or specific posts on a Carrd website, but the process is the same regardless of the platform you use.
Go to the platform where your site was built and, using the page editor, open the page where you want to show your DropInBlog blog posts.
The image below shows our Homepage within Carrd’s editor.
Next, find the option to add an element or block to the selected page, and look for the Embed code/html option.After you’ve added an embed section to your page, move it to where you want your blog posts to show.In the settings of the embed section, find the option that allows you to paste code, then head over to the Widget Code section on the Settings page of your DropInBlog account.
Recent Posts Code
To show the recent posts from your blog, find the Recent Posts Code (1) in the Widget Code section and copy the first block of code by clicking on Copy code (2).
Return to your website, and paste the code into the Embed code section that you previously added.Go back to your DropInBlog account, and copy the second block of code.
Return to your website, and paste the code into the embed section right after the first block of code you pasted earlier.Save your changes, and open the page you edited to view the recent posts section.This is how it looks on our Carrd website.
Recent Posts Lists Code
As with the Recent Posts Code, to display the list of your recent posts, you need to copy and paste the two blocks of code from your DropInBlog account to an embed element on your main website’s page where you want the posts to appear.
Be sure to copy the code under Recent Posts List Code as shown in the image below.
After you save the changes, your blog posts will be shown as a list similar to the image below.Specific Posts and Specific Posts List Code
DropInBlog allows you to display your blog posts across your main website and choose which particular posts to show. For that, you will copy the two code blocks under Specific Posts Code or Specific Posts List Code and paste them to your website.
However, unlike with recent posts, you’ll also need to add the ID of the posts you want to show on your site to your code.
If you look at the image of the Specific Posts Code, you’ll notice that the first block of code includes the numbers 1 and 3, which are post IDs.
You need to replace these numbers with the IDs of the posts you want to display on your site.Where Can I Find My Post ID?
Each post on your blog has a unique ID number, which you’ll find by opening a blog post in the post editor and expanding the Advanced section on the right-hand side of the page.
At the very bottom of the section, you’ll see Post ID with the number assigned to that particular post.We suggest finding the IDs of the posts you’ll display on your site first and noting them down somewhere.Then, you need to go to your main website and add the code, which you’ll then edit by adding your posts’ IDs.
Specific Posts Code
In the page editor of your main website, find the embed code element, add it to your page, then go back to your DropInBlog account and copy the first block of code under the Specific Posts Code section.
Return to your main website, and paste that code in the embed element. Before you copy the second block of code, change the default post IDs to the ones you selected.Then, return to your DropInBlog account and copy the second block of code.Paste that code into the embed element on your main website, and save your changes.The posts will have the same look as your recent posts – the difference is that they won’t be your blog’s recent posts, but the specific ones you selected.
Specific Posts List Code
The process of getting the list of the specific posts from your blog to show on your main website is the same as showing specific posts from your blog.
The important thing here is that once you paste the first block of code, you need to replace the default post IDs with the ones you want to show on your site.
That’s it! Now you can show your blog posts anywhere on your site.
Happy blogging!
Updated on: 04/03/2025