Learn how to make a blog on Leadpages

Joshua Joshua
5 minute read

For many of us, Wordpress has begun to seem like a recycling bin of the same boring templates meant to appeal to the lowest common denominator. For those trying to create a powerful long-lasting brand, having the dexterity of constructing a site closest to your vision is essential. So instead of relying on a cheap and unmalleable template, or a pricey designer or developer (usually both), I offer you a wonderful alternative... Leadpages.   

With Leadpages you have an array of tools geared towards efficient brand building and lead conversion. The most important part is its nifty site builder, where we have a plethora of drag and drop widgets to achieve exactly the look and feel we're going for. However, since Leadpages doesn't currently offer a blogging service, but lets us add our own HTML, DropInBlog quickly seems like the perfect fit.

One note first, Leadpages requires adding a credit card before starting a 15-day trial. Now I'll share a trick with you... I found out that if you go to Account Settings then Billing to cancel your account, it'll give you a list of reasons asking why you're quitting. If you select Cost, Leadpages will offer you an extra 15 days on your trial! That should be plenty of time to get your site ready to launch and your blog primed with posts. But remember, you didn't hear this from us. 😉

Setting up your Leadpages site

Choose a template:

For this demo, I'll be using the Luxury LA Real Estate template, for no reason other than I personally like the look of it. You can choose whichever template tickles your fancy, integrating DropInBlog will be the same with any of them.

Leadpages templates

Create a new blank page:

After you complete the template's setup process you'll have access to the builder. On this page, we can control most aspects and settings of the site. What matters to us though, is the pages tab where we'll add a new Blog page to the navbar. 

The only really important setting, is to set the Page Type as Blank, just to have a clean slate and not have to worry about any other page type's default widgets getting in the way.

New page

Add an HTML widget:

After you've moved to your new blog page, click on Leadpage's Widgets panel. All of these widgets are what you can drag and drop onto the canvas to add functionality and content to your site. The only one we care about right now is the HTML component all the way at the bottom.

Add the HTML widget

When you drag the HTML widget over to your canvas, you'll get a big black box with some greater than/less than signs. When you click on this black box you'll see a little blue modal box pop up with HTML at the top. Let's leave it empty for now and hop over to grab some things from your DropInBlog account...

Grabbing the DropInBlog snippet code

In your DropInBlog account, on the Code & Layout page you'll find the Blog Code section containing two short code snippets. The first code snippet will tell Leadpages to connect to your specific DropInBlog account in order to grab your posts and settings. The second snippet will tell Leadpages where to render them on your page.

Once you've copied both of these code snippets, you can move back to the Leadpages builder.  

DropInBlog snippets

Making the magic happen

Are you ready to see something cool? Just paste the two code snippets you copied from your DropInBlog account over into the Leadpages HTML modal and hit Publish.

Once you've published the page, there will be a small dropdown next to the Publish button with the option to View Site. This will take you to the live version of your new blog, which is now ready to share with the world!

Add snippets to HTML

And voilà!

You've successfully added a blog to your Leadpages site

Assuming everything went as planned, you now have a gorgeous looking and fully responsive blog running on your live site!

Complete leadpages blog

The best part is, DropInBlog will adopt whatever styling is applied across the rest of your website site. I recommend checking out the Leadpages page builder's Styles tab and playing around with the values to see how you can customize your posts. 

If you're feeling a bit adventurous... you may even want to get crazy with a little custom CSS. 🤷

One last step

Fixing the blog post links

Okay, I lied, I'm sorry. We're not quite done yet...

Now... your blog posts are successfully rendering to your blog landing page. However, when you click on any of them, they won't load the post detail page. This is because DropInBlog works by using the blog landing page that we created as a template for the post detail pages. 

To get your blog posts linking correctly, all you have to do is view your new blog landing page and copy its full URL. Then, move back over to the Settings page on your DropInBlog account. Here, just under Blog URL, paste the URL.

Fix the urls

If you check out your live site again, now all of the post detail pages should be working perfectly. 😁

Closing thoughts

Leadpages really surprised me by being one of the easiest site-building platforms to integrate with DropInBlog so far. Without any previous experience using Leadpages, I was able to create a site, transform it into a fully functional blog, and deploy it live in just a few minutes. 

As always, if you have any questions on setting up your blog or using any of our features, just hit us up on Messenger.
Happy designing. ✌️

Get started embedding a blog into your website right now

Try It For Free