Blogging is an important element of online marketing – if you’re not blogging, you’re missing out. Why is blogging so valuable? It allows you to establish expertise in your niche, strengthen customer relationships, and gain high-quality organic traffic to your site.
More importantly, it’s a cost-effective way to promote your business or services and get found online. Of course, this is all much easier to accomplish if you follow a quality blog setup checklist.
All the tutorials online will tell you it’s super easy, but to add a blog to your custom coded website from scratch is no quick task. As with many things, there’s a hard way and an easier way to do it. We’ll show you how it’s done.
Table of Contents
How to Create a Blog from Scratch Using Custom Code
Building a responsive blog into your HTML website will require you to develop a text editor with the ability to add headings, paragraphs, images, and other media, not to mention other features like a “related blogs” carousel.
There are a lot of fine details involved in coding your own blog, but we’re just going to summarize the process so you understand the number of steps involved.
First, you’ll need to set up a server and folder structure for your blog. You’ll need to create folders for the different pages, CSS files, Javascript files, images, and blog uploads. Then, you can code the first page, the homepage.
The homepage is written in basic HTML, after which you can link the CSS file to get the style and look you want for your homepage content. You follow much the same process for the other pages on your blog and also the editor.
The editor needs to be functional and requires Javascript code to make things like upload buttons. Remember, every additional element and button will require more code. Eventually, the final step is to make your blog live with a URL.
How to Add a Blog Using DropInBlog
Benefits of Using DropInBlog
If you're looking to add a blog to your custom-coded website, DropInBlog is likely to be the solution you’re looking for. This professional blogging app is platform-agnostic and can be integrated into virtually any website and be ready to go in seconds.
DropInBlog conveniently adopts your website's CSS and style. This saves you hours that would otherwise be spent formatting each blog post every time you upload fresh content. All your content is managed and uploaded through the DropInBlog dashboard and a neat WordPress-style editor.
DropInBlog gives you access to a wide range of professional blogging features, like the ability to:
- Schedule posts
- Pin a post
- Add a featured image
- Change the layout of your blog
- Manage multiple authors
- Add categories and tags
- Add social sharing buttons
- Include a “related posts” widget or a reading progress indicator
- Edit URLs, meta titles, and meta descriptions
- Add schema markup
Probably one of the best features, though, is the in-built SEO Analyzer. This tool scores your content as you type and gives you recommendations for improvement, so you can ensure your content is perfectly SEO-optimized.
These kinds of features are often not included in a regular subscription and often cost extra, but with DropInBlog, it’s included with both pricing plans.
Get DropInBlog and Start Blogging
To get started with DropInBlog, you can create an account today and try the platform for free for 14 days. After that, you can select the pricing plan that suits your budget and needs.
The process for integrating DropInBlog into your website is pretty easy and can be done in one of two ways: HTML embed or JSON API key.
HTML Embed Method of Integration
To use the HTML embed method, you only need to open up your DropInBlog dashboard and go to Code & Layout, where you’ll find the embed codes to use.
Under Step 1, you will see a code that looks like this:
<script src="https://io.dropinblog.com/embedjs/XXXXXXXXXXXXXXX.js"></script>
Copy that code and paste it into the HTML of your website just before the </body> tag.
Then, you can copy the code shown in Step 2, which looks like this:
<div id="dib-posts"></div>
Paste the code from Step 2 into the body of the page where you want your blog to be displayed. That’s all the “coding” you need to do. Now you have a fully functional blog on your website, allowing you to start creating content right away and publishing it as you please.
JSON API Key for Integration
If you’d prefer to use the JSON API key for integration, this can also be found in the Code & Layout tab.
The benefit of the JSON API integration option is that it allows you to completely customize the front end of your blog. For more detail, check out our full documentation on the JSON API integration.
FAQs
What benefits does adding a blog bring to my website?
Adding a blog to your website has a range of SEO benefits, but it also serves to develop relationships with customers and position you as an expert in your niche. Blogging doesn’t have to be expensive, and it can lead to an increase in leads and revenue, so it’s a worthwhile endeavor.
Should I code the complete blog system or use an existing blog platform?
This is entirely up to you. If you’ve already coded your website from start to finish, then you certainly have the skills, but do you have the time? Coding the entire blog system will take much longer than using an existing blog platform. Plus, why reinvent the wheel if there’s already a perfectly good blogging platform like DropInBlog ready and waiting?
Can DropInBlog be linked to a custom-coded website?
Yes, DropInBlog can be linked to a custom-coded website either through the HTML embed method or using the JSON API key provided.
Final Thoughts
There you have it, two options to add a blog to your custom-coded website. Obviously, the choice is yours as to whether you code the blogging functionality entirely from scratch or use an existing platform like DropInBlog.
In our view, convenience usually wins out, and DropInBlog is easy to integrate and has more than enough built-in features to satisfy even the most demanding of bloggers.
If you have any further questions about DropInBlog or the integration process, don’t hesitate to reach out.
