how to make blog posts html

How TO - Blog Layout

Learn how to create a responsive blog layout with CSS.

Learn how to create a responsive blog layout that varies between two and full-width columns depending on screen width.

Resize the browser window to see the responsive effect:

Try it Yourself »

How To Create a Blog Layout

Step 1) add html:.

Advertisement

Step 2) Add CSS:

Tip: Go to our CSS Website Layout Tutorial to learn more about website layouts.

Tip: Go to our CSS Responsive Web Design Tutorial to learn more about responsive web design and grids.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

Top Tutorials

Top references, top examples, get certified.

DEV Community

Posted on Aug 13, 2021

FullStack - How to create a working blogging website with pure HTML, CSS and JS in 2021.

Hello, Today we'll see, how we can easily create a blogging website using HTML, CSS and JS only. No other library. We'll also use Firebase firestore to store/retrieve blog data.

This is a very good project to practice full-stack development. When I started with web development I always thought how can I make my own blogging website. And today, I am proud that I tried to make blogging site. Our website is very simple and has features like

• Dynamic Blog pages.
• Have a dedicated editor for blogs.
• You can add/make as many blogs you want.
• You can add Headings, paragraphs, and Images to the blog post.
• Have read more blogs section also.

To see demo or you want full coding tutorial video. You can watch the tutorial below.

Video Tutorial

I appreciate if you can support me by subscribing my youtube channel.

So, without wasting more time let's see how to code this.

As this is a node.js web app. We need NPM and Node.js in order to start with, so make sure you have them installed in your system.

So let's start with its folder structure.

Folder Structure.

This is our folder structure.

So let's make our server.

Open the project file (root directory) in your code editor. Open Terminal and run

This will initialize NPM to our project. After that install some packages by this.

npm i express.js express-fileupload nodemon

- express.js - is to create a server - express-fileupload - is to handle uploads - nodemon - is to run server continuously

once package installed. You should see a package.json file inside your root directory. Open it.

And change it scripts to

Now we are ready to create a server. Create a new file inside your root directory name it server.js . And open it.

First import all packages that we need.

And then store your public folder path inside a variable.

After that create expressJS server. And set public folder path to static path. Also use app.use(fileupload()) to enable file uploads.

After this make a home route and in response send home.html file. And run your server on 3000 port.

Run your server by npm start . And our server is done for now. Let's create homepage now.

Write basic HTML structure and link home.css file. Then start by creating a navbar.

Now create the header.

Now the last element for our homepage. Make blog card section and make one card, as we make these cards with JS later.

After this let's make our editor.

In editor.html link both home.css and editor.css files. And inside body tag start by making banner div.

And then make text fields for blog title, article.

And at last, make publish button with upload image button also.

Start by selecting all elements that we need.

After selecting all elements. Add change event to our upload inputs and process the upload.

Now create uploadImage function.

So this is how we can make our upload work. But it'll not work now because we haven't made our /upload route. For that open server.js and make /upload route.

By this we are done. You can check your upload is working or not. As you might notice that we are calling addImage() but we haven't make that yet. So let's make it.

This function will let you insert a text format of your image for example if I upload 1.png then this function insert something like this  inside our article field.

So up until now we have done with our uploads also. Now, go to your firebase and create a blogging project. And setup you firebase. You can refer this video for the setup.

After setting up firebase variables in firebase.js link that file inside editor.html above editor.js like this.

Then again go inside editor.js . And make publish button functional.

This is the way we create a document inside firebase firestore. After this our editor is fully working. If you test it you will see you are being re-directed to blog route. But we haven't make that route. For that open server.js last time. And make blog route and also 404 route.

Now, you should see blog.html file. So the last time let's first make blog page. this time link all 3 CSS files to blog.html and copy the navbar from home.html to this page.

Link firebase scripts, firebase.js and blog.js to it. And open blog.js

Start by extracting the blog id from the URL. and fetch data from firestore

Once we got the the blog data. Make setupBlog() .

In above function we selected all the elements we need and set their content. And at last. We are calling addArticle function because we need to format our article.

Make addArticle function and format the article text we got from the firstore.

After this let's compare what we enter in our editor and what we'll see in our blog.

So our blog is also done. Now we want a recommendation or read more element in our blog page.

So open blog.html and make one.

After this, copy the blog-section element from home.html to blog.html

And as you can see we are using same elements for read more and blogs. So we will use same JavaScript function to make both these elements. So for that link home.js file to blog.html above blog.js .

And then last thing open home.js and code this.

That how we do our blogs cards. We are done.

Outupt - Home.html

Output - Blog.html

So, that's it. I hope you understood each and everything. If you have doubt or I missed something let me know in the comments.

Articles you may find Useful

• Infinte CSS loader
• Best CSS Effect
• Wave Button Hover Effect
• Youtube API - Youtube Clone
• TMDB - Netflix Clone

I really appreciate if you can subscribe my youtube channel. I create awesome web contents.

Source Code

Thanks For reading.

Top comments (37)

Templates let you quickly answer FAQs or store snippets for re-use.

• Location India
• Work Software engineer, MERN and Java Developer
• Joined Dec 4, 2019

it would be more declarative if you change res.json("404"); with res.status(404).send("...");

github.com/kunaal438/blogging-site...

• Email [email protected]
• Location Delhi, India
• Joined May 2, 2021

Yes actually we can change the status but this tutorial was not about "404" error that's why I left it.

It's a basics coding practice, which every developer should follow either for teaching or development.

Yes, I agree. I'll make sure to return status code also from the next time☺️

• Location Amsterdam
• Joined Mar 11, 2020

Could you elaborate on how you would use such a set-up + firebase connection on a production blog? How would you control who can/can't publish blogs?

I like the simplicity of this set-up, but feel there's more to it before you can get an actual secure backend up and running.

Actually yes, it is a very basic blogging site I made this because on internet i couldn't find a working blogging website tutorial. And for the security I am working on some advance feature including login/logout, dashboard, edit post. If you don't want to miss that make sure to follow me☺️☺️

Thanks! I already do, enjoy reading your articles.

• Joined Aug 29, 2021

Hi, I really like this tutorial. However, I have some thoughts regarding the presentation and content of it.

First of all, I feel your video is straightforward and easy to follow. However, it would be better for you to thoroughly explain all the step you do, rather than just having loud electronic music.

Also, if you notice, the content of this article is not in the same flow with the video, so it is pretty hard to understand further what you do in the video by reading this article. I think one should sticks to either of these.

And unfortunately, the version of Firestore I use during development is 9.0.0 (which is different than the one here) and it does not work. So I had to manually edit the version number to the one of yours, and it magically works. If you know why that is, I hope you can help.

Anyway, the tutorial is amazing and easy to understand. Will take a look at your advanced features video soon.

Keep it up!

Hi, I am glad you followed the tutorial. Thanks for your feedback. I am improving my tutorial quality and always will. As you said it is hard to follow the tutorial because of no explanation. That's why I am making all tutorials with voice now. And I just uploaded the advance feature tutorial. If you want you can checkout it

Why are you doing date.getDate() + date.getTime() + file.name;

Well, I am doing this to give a unique name to uploaded image for example if, user uploads an image "img.png" then the uploaded image on server side will have current date and time to make that image specific. Than the uploaded image maybe look like this. "1657381749img.png"

getTime() would be sufficient to give unique id, date.getDate() is unnecessary.

Because for any instance of time, both will be same.

I think getDate can give more uniqueness. And if we want to see specific date published images we can also filter it.

getTime() is same as getDate(), getTime() will return unix epoch time in milli seconds.

You can also see date from getTime ().

Advantage of getTime() ":

sort by date because getTime () is just a number

sort by date range

smaller image name

Oh! My bad😅😅, I didn't knew about it. Thanks for telling 😄😄

• Location Den Haag, The Netherlands
• Work Principal Programmer
• Joined Apr 1, 2021

Thank you very much for this long introduction. What I do like is the step by step procedure. Well written and maybe easy to setup. Hav not tested it but fully read because I am writing my own small blog engine in golang currently. What I do not like is the use of Google. It’s a good project but does not respect privacy and totally misses the GDPR consent while using third party products.

• Joined Jan 4, 2017

Video tutorial doesn't add any value. You should explain the steps rather than playing random background music. This blog article is more useful, although the entire project on GitHub even more useful. Thanks. For those who wish to understand fullstack, see devopedia.org/full-stack-developer

I am sorry for this. I'll try my best to explain everything from next time☺️

• Joined Aug 13, 2021

Hello Friends, we provide full customization service with installation process. We also provide all types source codes with setup work at very cheap prices, contact me on: Telegram: t.me/pipquantum

• Joined Feb 15, 2023

Thank you for the tutorial, it was very helpful, however I was wondering how I could incoporate TailwindCSS instead of Vanilla CSS. I tried it, however it was not working. any help I could get would be greatly appreciated

• Joined Dec 12, 2022

• Joined Dec 27, 2021

i like the topic of the tutorial. just curious though how you handled the SEO side of this, can you help to share it as well?

• Joined Oct 13, 2021

PUBLISH button doesnt work!

• Location Nigeria
• Education Nigeria
• Work Frontend Developer
• Joined Aug 16, 2021

Thank you so much. It came just in time.

• Location Bangalore, India
• Education B.Tech
• Work Full Stack Javascript
• Joined Jun 25, 2019

Hey, if I understood that correctly, the images are getting stored in local directory and the blogs on firebase, correct?

Yeah images are getting stored in local directory but when you host this site on server, images will be store on server and their path will be store on firebase ☺️

• Joined Jul 19, 2021

I was looking for this, thank you

Glad to here that☺️☺️

• Location Atlanta GA
• Education Bachelor's of Science in Computer Engineering Technology
• Work Software Engineer @ PureCars
• Joined Sep 10, 2020

Super cool.

This was my first experience using firebase and it is surprisingly easy. Thanks for the tut.

Glad to here that.☺️☺️

Some comments have been hidden by the post's author - find out more

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Nextjs 14 app router authentication & role-based authorization using nextauth & mongodb adapter

Peter Kelvin Torver - Dec 2

STORED PROCEDURE

Johnny Willian - Dec 2

Why you should ditch NPM UUID. Node has you covered!

Pierre-Henry Soria ✨ - Dec 1

Amazing css loaders

Freecodez - Dec 1

Once suspended, themodernweb will not be able to comment or publish posts until their suspension is removed.

Once unsuspended, themodernweb will be able to comment and publish posts again.

Once unpublished, all posts by themodernweb will become hidden and only accessible to themselves.

If themodernweb is not suspended, they can still re-publish their posts from their dashboard.

Once unpublished, this post will become invisible to the public and only accessible to Modern Web.

They can still re-publish the post if they are not suspended.

Thanks for keeping DEV Community safe. Here is what you can do to flag themodernweb:

themodernweb consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy.

Unflagging themodernweb will restore default visibility to their posts.

We're a place where coders share, stay up-to-date and grow their careers.

< BACK TO COMPONENTS

Designing a Responsive Blog Post Layout with HTML and CSS

By Faraz - June 12, 2023

Learn how to design a responsive blog post layout using HTML and CSS. Enhance your website's visual appeal and user experience with our step-by-step guide.

Table of Contents

• Project Introduction

In today's digital landscape, a well-designed blog post layout plays a crucial role in engaging readers and delivering content effectively. When visitors come to your blog, they expect a visually appealing and user-friendly experience that allows them to consume your content seamlessly. This is where the combination of HTML and CSS comes into play.

HTML, which stands for Hypertext Markup Language, provides the structural foundation for your blog post layout. It allows you to organize your content into meaningful sections and elements such as headings, paragraphs, images, links, and more. By using these HTML elements, you can create a clear hierarchy within your blog post and make it easier for readers to navigate and understand the structure of your content.

On the other hand, CSS, or Cascading Style Sheets, brings life to your blog post layout by providing visual styling. With CSS, you can customize the appearance of your blog post, including the typography, colors, spacing, and positioning. CSS empowers you to create a unique and visually appealing design that aligns with your brand and enhances the overall reading experience.

One of the key advantages of using HTML and CSS for your blog post layout is its ability to be responsive. In today's mobile-centric world, it's essential to ensure that your blog post looks great and functions well on various devices and screen sizes. With the proper implementation of responsive design techniques, you can make your blog post adapt seamlessly to different devices, providing an optimal reading experience for both desktop and mobile users.

In this comprehensive guide, we will delve into the process of designing a responsive blog post layout using HTML and CSS. We will explore the fundamental HTML elements and structure needed for a well-organized blog post. Additionally, we will dive into CSS techniques that will enable you to style and customize your layout, making it visually captivating and user-friendly.

By the end of this guide, you will have a solid understanding of how to create an engaging and responsive blog post layout. Whether you're a beginner starting your blogging journey or an experienced web developer looking to enhance your blog's design, this guide will equip you with the knowledge and skills to create stunning blog post layouts using HTML and CSS. So let's dive in and unlock the secrets of designing a responsive blog post layout that will captivate your readers and elevate your content

Join My Telegram Channel to Download the Projects Source Code: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our blog post layout.

After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Here's an explanation of each part:

1. <!DOCTYPE html> : This is the doctype declaration and informs the browser that the document is written in HTML5.

2. <html lang="en"> : This is the opening tag for the HTML document. The lang attribute specifies the language of the document, in this case, English.

3. <head> : The head section contains metadata and other non-visible elements of the web page.

4. <title> Blog Post Layout </title> : The title element sets the title of the web page, which is displayed in the browser's title bar or tab.

5. <meta charset="UTF-8" /> : This meta tag specifies the character encoding of the document, ensuring that the browser interprets the text correctly.

6. <meta name="viewport" content="width=device-width" /> : This meta tag configures the viewport settings for responsive web design, ensuring the page adapts to different screen sizes.

7. <link rel="stylesheet" href="styles.css" /> : This link element references an external CSS file named "styles.css" that is used to apply styles to the HTML elements.

8. <body> : The body section contains the visible content of the web page.

9. <div class="wrapper"> : This div element serves as a container for other elements and has the class "wrapper".

10. <a href="#" class="men"> ☰ </a> : This anchor (link) element with the class "men" and the text "☰" represents a menu icon or button.

11. <nav> : This nav element represents a navigation section.

12. <a href="#"> Menu Item </a> : These anchor elements inside the nav represent individual menu items.

13. <div class="hero"> : This div element with the class "hero" represents a section of the webpage.

14. <h1> <a href="#"> Create better Titles for your blog </a> </h1> : This heading level 1 (h1) element contains a link to create better titles for a blog.

15. <a href="#" data-tip="Share" class="gen"> ⚒ </a> : This anchor element with the class "gen" and the text "⚒" represents a share icon or button. It also has a data attribute called "data-tip" with the value "Share".

16. <a href="#" data-tip="Favorites" class="sel"> ★ </a> : This anchor element with the class "sel" and the text "★" represents a favorites icon or button. It has a data attribute called "data-tip" with the value "Favorites".

17. <div class="container"> : This div element with the class "container" serves as a container for the main content of the webpage.

18. <p> Rockstar developer... </p> : These paragraph (p) elements contain some placeholder text representing the main content of the webpage.

19. <a href="#" id="btn-twtr" target="_b"> Follow me on Twitter </a> : This anchor element with the ID "btn-twtr" and the text "Follow me on Twitter" represents a link to follow the page author on Twitter. The target attribute is set to "_b", which means the link will open in a new browser tab or window.

20. <footer> : This footer element represents the footer section of the webpage.

21. <p> Text generated by <a href="#"> Startup Ipsum </a> </p> : This paragraph element contains some text with a link to "Startup Ipsum".

This is the basic structure of our blog post layout using HTML, and now we can move on to styling it using CSS.

Create better Titles for your blog

Rockstar developer internet of things bleeding edge browser extension social capital Sandboxing. Podcasting visionary, feeds; open-source one-to-one user-contributed world-class e-markets action-items rich initiatives proactive real-time, webservices; synergies, granular holistic relationships, portals communities. Dynamic redefine, web-enabled authentic folksonomies, distributed implement B2B iterate, channels beta-test, web-enabled disintermediate harness repurpose orchestrate.

Maximize deliverables initiatives brand next-generation redefine, channels one-to-one innovative strategic architectures. Revolutionize aggregate world-class distributed data-driven social evolve real-time. Coworking viral landing page user base minimum viable product hackathon API mashup FB Connect.

Step 2 (CSS Code):

Once the basic HTML structure of the blog post layout is in place, the next step is to add styling to the layout using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our blog post layout.

Let's break down the code and explain what each part does:

The code starts with a selector for the body element. It sets the font size to 14 pixels, the font family to sans-serif, the text color to #333 (a shade of gray), and the background color to #ddd (a light gray). The overflow-x property is set to hidden to hide horizontal scrollbars if the content overflows horizontally.

The code then applies styles to a element (hyperlinks). It removes the default underline (text-decoration: none) and sets the text color to #aaa (a lighter shade of gray).

The nav selector styles a navigation bar. It sets the position to fixed (the element stays fixed in its position even when the page is scrolled), the background color to a semi-transparent dark gray, and the z-index to 9 (a higher value means the element is placed in front of elements with lower z-index values). The navigation bar is set to be 100% wide and centered using flexbox (display: flex, align-items: center, and justify-content: center). The top is initially set to -90px to hide the navigation bar above the viewport. The transition property is used to animate the navigation bar's position change.

The styles for nav a elements (links within the navigation bar) set the font size to 1em, and add padding around the links. The transition property is used to animate the styles when hovering over the links.

When hovering over nav a elements, the background color changes to a semi-transparent yellowish color (rgba(252, 198, 0, 0.6)) and the text color changes to #333.

The nav:before selector adds content before the navigation bar (the text "NodCMS"). It sets the position to absolute (relative to the nearest positioned ancestor), places it on the left side with some padding and border, and gives it a rounded border.

The .wrapper selector styles a container element. It sets the position to relative (relative to its normal position), and creates a responsive aspect ratio for the element using padding-bottom (56.25125%). This is commonly used for responsive media, like videos or images.

The .hero selector styles a hero section. It sets the position to absolute (relative to the nearest positioned ancestor), covers the entire container (top: 0, left: 0, width: 100%, height: 100%), and specifies a minimum height of 200 pixels. It applies a background color and positions the background image using CSS background properties. It also sets the overflow to hidden and applies an animation called fader that cycles through different background images.

The .hero h1 selector styles a heading element within the hero section. It sets the padding, width, and position to be positioned at the bottom of the section.

The .hero a selector styles links within the hero section. It removes the default underline and adds a background color, padding, font size, line height, text color, and other styles. It applies a transition effect when hovering over the links.

The .container selector styles a container element. It sets the padding, text alignment, line height, letter spacing, and background color.

The .gen , .sel , and .men selectors style certain elements positioned absolutely in the bottom-right corner. They set the display to flex and align and justify the content in the center. They have different background colors, colors, and sizes. When hovered over, the background and text colors change.

The footer selector styles a footer element. It sets the background color, padding, text alignment, color, and font size.

The [data-tip]::after selector styles elements with a data-tip attribute. It positions a tooltip below the element, sets the text and background colors, and adds some styling for the tooltip.

The :hover pseudo-class is used to show the tooltip when hovering over an element with a data-tip attribute.

The #btn-twtr selector styles a button element with the ID btn-twtr. It sets the color, border, border radius, text alignment, font family, font size, width, padding, font weight, and margin. It also applies a background color and box shadow. When hovered over, the color and opacity change.

This will give our blog post layout an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

Final Output:

Conclusion:

In conclusion, a well-designed blog post layout using HTML and CSS can significantly enhance the visual appeal, readability, and user experience of your blog. By implementing the techniques and strategies discussed in this guide, you have the tools to create stunning, responsive blog post layouts that captivate your readers and keep them engaged with your content.

Now it's time to take action and apply the knowledge you've gained. Start by implementing the HTML structure for your blog posts, incorporating the necessary elements to organize and structure your content effectively. Then, leverage CSS to style your blog post layout, ensuring it aligns with your brand and enhances the overall visual experience.

Remember to prioritize responsiveness and optimize your blog post layout for different devices and screen sizes. Regularly test and refine your design, ensuring it remains accessible and user-friendly across various platforms.

By following these guidelines, you can master the art of designing a responsive blog post layout using HTML and CSS. So go ahead and create captivating and visually stunning blog post layouts that leave a lasting impression on your readers. Happy designing!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks! Faraz 😊

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox, related post.

• How to Create Simple Responsive Blog Cards with Bootstrap 4
• NGO Website Template Development using HTML, CSS, and JavaScript
• Create a Stunning Bakery Shop Landing Page | HTML, CSS, JavaScript
• How to Create an Accordion Using Bootstrap: Step-by-Step Tutorial
• Create Responsive Card Layout with HTML, CSS, and JavaScript (Source Code)
• How I Created a Google Clone with HTML and CSS
• Create a Search Filter with HTML, CSS, and JavaScript (Source Code)
• Creating Your Own Direct Clone Of Google's Search Results Page With Pure CSS

How to Add a Blog to an HTML/CSS Website

If you’re looking to learn how to add a blog to an HTML/CSS website, we can help. However, if you’re still unsure whether you should even add a blog, I think we can settle that question for you. A blog increases your website's visibility online and, in turn, drives traffic to your site.

Increased traffic to your site is a good thing, especially if your website brings in money – whether it’s an e-commerce store or other form of income. Quality traffic can lead to increased revenue.

Blogging is also a clever way to build relationships and connections with your readers. There’s a bit of work behind effective blogging , of course, but once established, this personal voice in your blog is better than any paid advertising. 

So, how do you add a blog to your HTML/CSS website? Let’s go through the options and help you reap the benefits.

Table of Contents

Custom code to add a blog, dropinblog: an easy third-party blogging platform, how to integrate dropinblog, simple, powerful, and intuitive, feature-packed, use the right words, consider user experience, hit the mark, final thoughts, two options to add a blog to your html/css website.

There are two ways to add a blog to your website – you either custom code it in or use a third-party blogging platform. 

If you have some experience with HTML and CSS coding, you can write your own custom code to build a blog . However, you need to be very well-versed in the matter because it’s no simple task. 

Not only is there a challenge in writing the code yourself, but this is also going to be extremely time-consuming. Depending on the complexity of the blog you want, it could take anywhere from a week to several weeks to complete if you’re in it alone. In comparison, a third-party blogging platform can be up and running in a matter of minutes.

There are a ton of blogging platforms available today. Some of these content management systems (CMSs) are free and open-source, while others require a paid subscription. Using a CMS , as opposed to custom coding your own blog, is a far easier approach. 

However, not all blogging platforms and CMSs offer the same features and functionality, so it pays to do your homework when choosing a blogging platform . 

That said, the research is that much easier when one platform offers many more benefits than the others. Enter DropInBlog – a professional blogging app that connects seamlessly with almost any existing website. 

Integration is fast and easy, and the only coding you’ll need to do with DropInBlog is quickly copying and pasting two lines of code. We’ll show you how.

To begin with, you’ll need to sign up for a DropInBlog account. The good news is that you don’t have to commit to a plan immediately – you can get started with the 14-day free trial. 

• Go to the Code & Layout tab and copy the code shown in Step 1, which looks like this: <script src="https://io.dropinblog.com/embedjs/XXXXXXXXXXXXXXX.js"></script>
• You can then paste this code into the HTML of your website just before the </body> tag.
• Next, copy the code shown in Step 2. It looks like this: <div id="dib-posts"></div>
• Paste the Step 2 code in the body of the page where you want your blog to display.
• Now, save and that’s it!

Once set up, what you’ll get is a simple but powerful WordPress-style CMS and content editor. It’s intuitive to use, and you can style your blog any way you choose. In fact, it’s so convenient to use because DropInBlog automatically adopts your site's CSS and style. 

All you have to do is develop and optimize your content, then hit publish. No need to spend time reformatting to make your blog pages match up with the rest of your site.

DropInBlog comes packed with everything you need to produce a winning blog. With DropInBlog, you can: 

• Schedule posts to publish at the optimal time. 
• Add multiple authors if you have contributing authors to credit. 
• Manage comments and user interactions. 
• Add social sharing buttons to expand your audience reach. 
• Optimize for SEO – the built-in SEO Analyzer tool is a game changer that will put you ahead of the competition.

Make Great Blog Posts

Once you’ve got your blog built and running, you need to know a few basics about how to create great content that performs its purpose of driving traffic to your site. Ensuring your blog pages and the content is SEO-optimized is a number one priority, but beyond that, there are some additional things to consider that make great blog posts.

Spend a bit of time on keyword research before you start developing any content. That way, your blog will already have a head start. Make sure you use language that is clear and concise – plain English. While your blog doesn’t need to be easily understood by everyone – you do have a target audience. After all – you’ll lose readers if you use too much complicated or technical language. 

Finally, the headline is crucial to drawing in readers in the first instance. Make it catchy and to the point.

A good blog post starts with ease of navigation. Your site will lose points with search engines if you have a high bounce rate because of slow-loading pages or a confusing site structure. Technical SEO is as important as in-content SEO.

There are a couple of things that improve user experience on a blog. Adding things like a table of contents and reading progress indicators are a nice touch to help with page navigation.

Always aim to develop content that is useful to your readers. Research what topics are of interest and what type of content they want. Add your own personality to the content and a variety of media to keep readers’ attention.

What are the benefits of having a blog on my website?

There are multiple benefits to having a blog on your website. Most people start a blog with the intention of using it to increase traffic to their site, boost SEO, and increase high-quality leads. Blogging is proven to benefit small businesses as a cost-effective marketing method, and when done right, it can dramatically increase revenue.

Can I use a blogging platform on my HTML/CSS website?

You can, and there are many blogging platforms specifically designed to be integrated with an HTML/CSS website. WordPress is the most common one, but DropInBlog is another up-and-coming star.

Can DropInBlog be integrated with a custom HTML/CSS website?

DropInBlog has been designed to be easily integrated with any website. You aren’t limited just because you’ve built your own custom code HTML/CSS website – you can take the easy path and avoid coding your own CMS by integrating DropInBlog. 

It is a 100% worthwhile investment to add a blog to your HTML/CSS website. Maybe you have the coding skills to develop the custom code yourself, but why spend the time when there are second-to-none blogging platforms already developed? 

You can integrate DropInBlog with any website quite easily, and our customer support is available to troubleshoot any problems you may encounter. 

You can try it for yourself for free for 14 days and then select from two paid pricing plans . 

« Back to Blog

Related Articles

How to add a secondary blog to your kajabi website.

5 minute read

Aug 7th, 2023

How to Add a Blog to Your Custom-Coded Website

6 minute read

Aug 20th, 2023

How to Change the Blog Layout on Duda

Jul 11th, 2023

Get started embedding a blog into your website right now

Try It For Free

• Help Center
• Knowledge Base Setup, how-to, and troubleshooting guides
• API Documentation Reference for API Development
• CMS Documentation Reference for CMS Development
• Academy Content Library A complete library of Academy’s free online video lessons and certification courses.
• Academy Certification Courses A collection of lessons and practical exercises leading to an industry-recognized certification in HubSpot’s tools or strategy.
• Classroom Training Schedule in-person training for a hands-on and personalized HubSpot training experience.
• CRM & Sales Hub Ask and answer questions about using HubSpot’s CRM and Sales Hub.
• Marketing Hub Discuss and learn HubSpot’s marketing tools and inbound strategy.
• Service Hub Learn about Service Hub and share your expertise.
• Meet the Experts Learn how to get the most out of HubSpot from those who know it best.
• Submit Ideas Search, vote for, and submit ideas to improve the HubSpot platform.
• HubSpot Developers Ask questions and connect with users building on HubSpot.
• HubSpot User Groups Meet regularly with your local community of HubSpot users.
• HubSpot Blog Marketing, sales, agency, and customer success blog content.
• Customer Blog Examples of how real customers use HubSpot for their business.
• Product Updates Blog Updates on the latest releases from HubSpot’s Product team.

Create and customize blog posts

Last updated: November 3, 2023

Available with any of the following subscriptions , except where noted:

Once you've created a blog , you can create blog posts, either from scratch or imported from an external blog or Google Doc . You can customize blog content and settings and optimize blog posts for search engines. 

Create blog posts 

• In your HubSpot account, navigate to Marketing > Website > Blog .
• In the upper right, click Create , then select  Blog post . 
• In the dialog box, click the  Select a blog  dropdown menu and select a blog , then click  Create blog post . 
• In the content editor, click the  Blog post body module and add content to your post. You can edit the formatting of your blog content in the rich text toolbar .
• To write your blog post in a streamlined editing environment, click to toggle the  Focus Mode switch on in the top right. You can turn this mode on or off at any time. 

• Click the  Blog content  module.
• In the rich text toolbar, click the  Insert  dropdown menu and select  Read more separator . 
• Click the  More separator and drag it to the desired position in the blog post. 
• In the left sidebar, click the add Add  icon.
• Click a module and drag it over the  Blog post body module, then drop it in place. 
• To edit a specific module within the  Blog post body module, click the  siteTree c ontents  icon in the left sidebar, then click the module . 
• Use the drag and drop editing tools to clone, reposition and copy & paste modules. 

Edit blog post settings

Once you've  edited your blog post content , you can customize page attributes like URL slug, meta description, and language. 

Customize basic post settings 

• Hover over a post and click  Edit .
• In the content editor, click the Settings menu and select  General . 
• To separate the page's displayed title and h1 tag from the name of the page in the browser and search results, click  Customize blog's page title . 
• In the  Blog title field, enter the  title  of the post that will appear on the page in an h1 tag. 
• In the  Page title  field, enter the name  of the blog post that will appear in the browser title bar and search results. 
• To move the post to a different blog, click the  Blog  dropdown menu and select a  blog . Once you publish this change, the URL of the post will automatically change to reflect its new destination. A redirect will be put in place from the post's previous URL. 
• To edit the post's URL, enter a  URL string  in the  Content slug  field. Learn more about editing a blog post's URL . 

• To set an author for the post, click the Author dropdown menu and select an author . Learn more about managing blog authors.
• To add an existing tag to the post, click the  Tags  dropdown menu and select the  tag . To add a new tag, click the  Tags  dropdown menu, then type the tag into the field and click Add "[name of your new tag]" tag . Learn more about managing blog tags . 

Set the featured image

To add a featured image that will be included when the post is shared on social media: 

• In the content editor, click the Settings menu and select  Featured Image . 
• In the dialog box, click to toggle the  Enabled f eatured image  switch on.
• Click  Upload  to select an image from your computer, or  Browse images  to select an image from the  files tool. 
• To increase accessibility, enter a description of your image in the  Image alt text  field. 

Set meta description and campaign

• In the content editor, click the Settings menu and select  Metadata . 
• In the M eta description  field of the dialog box, enter a description of the post's content that will appear in search results.
• To associate the page with a campaign , click the Campaign dropdown menu and select a campaign . To create a new campaign instead, select Add new .

Manage blog templates

• In the content editor, click the Settings menu and select  Template . 
• In the dialog box, click Change template for this blog to change the template used for this blog. 

Please note: changing a blog's post template will change the template used for all posts on that blog. Unique templates cannot be applied to individual blog posts. 

• To edit your blog post template, click  Edit this template . 
• To select a different blog listing template , click the  Actions  dropdown menu in the  Blog listing page  section and select  Change template . If your blog listing template supports drag and drop editing, you can click Edit page to make edits in the content editor. 

Set post language

• In the content editor, click the Settings menu and select  Advanced . 
• In the dialog box, click the Blog post language  dropdown menu and select a  language . Learn more about  creating blog posts in multiple languages . 

Manage advanced post settings

• To add code snippets to the head HTML of the post, click the Head HTML field in the dialog box, then enter your code snippet . To add code snippets to all posts and pages on a domain instead, access your website settings . 
• To change this blog's subscription email settings , click  Manage  in the  Notification emails  section.
• To add a custom canonical URL, enter the  URL  in the  Customize canonical URL  field. Learn more about  using canonical URLs .

Publish posts

• Click Publish in the top right. 
• If you have social sharing turned on , click  Preview  in the dialog box to change how the post will appear on social media. In the right panel, edit the text and images that appear, then click Save . 
• To turn on Google AMP for this post, select the  Enable Google AMP for just this blog post checkbox. This option will not be visible if Google AMP is turned on for all posts on this blog. Learn more about setting up Google AMP for blogs . 
• In the dialog box, click  Publish now . 

• In the top right, click the dropdown menu next to the Publish  button, then select  Publishing options. 
• In the dialog box, select the  Schedule publish for later  checkbox. 
• Click the  date  field and select the date  when your page will be published. 
• Click the time  dropdown menu and select the  time  when your page will be published. 
• If you have social sharing turned on , click  Preview  in the dialog box to change how the post will appear on social media. In the right panel, edit the text and images that appear, then click Save .
• Click  Schedule , or click  Schedule and continue editing to schedule the page's publication and return to the content editor. 

Import blog content from Google Docs

You can import pre-written blog content into the content editor from a Google Doc in a connected Google account. Google Docs shared with you by other users cannot be used.

• Hover over a post and click Edit , or create a new post . 
• In the content editor, click the  Blog content module. 
• In the rich text toolbar, click the Advanced  dropdown menu and select Import Google Doc .
• If your Google account does not appear, click  Connect a new account . In the dialog box, click  Accept and connect to Google . On the Google authorization page, select a  Google account . then click  Allow . When you start the import process again, your account should be selectable. 
• In the Select the Google account you want to use for your import section, click the connected Google account  that owns the Google Doc. 

• In the dialog box, select a  Google Doc , then click Select . 
• In the dialog box, select the  From link option. 
• In the Google Doc  link  field, paste the  URL  of your Google Doc. The URL must be formatted like docs.google.com/document/d/documentId/  or drive.google.com/open?id=documentId . 
• Click  Import . 

• In the content editor, finish editing the blog post .

Please note: blog content imported from Google Docs will preserve some of its original formatting. Learn more about importing formatting from Google Docs . 

• To take your changes live, click  Publish  or  Update  in the top right.

Optimize posts for search engines

In the Optimize section of the sidebar editor, you can view a post's SEO recommendations or attach it to a topic . 

Navigate to your content:

• Website Pages : In your HubSpot account, navigate to Marketing > Website > Website Pages .
• Landing Pages : In your HubSpot account, navigate to Marketing > Landing Pages .
• Hover over the post and click Edit . 
• In the content editor, click the gauge Optimize  icon in the left sidebar. 
• To add an existing topic, click the Topic  dropdown menu and select a  topic  for your page.
• To create a new topic, click the Topic dropdown menu and select  Add core topic . In the dialog box, enter the topic , then click  Save
• Select the Is this supporting content? checkbox.
• Click the Subtopic keyword  dropdown menu and select a  subtopic  keyword
• To create a new keyword, click the Subtopic keyword dropdown menu and click Add subtopic keyword . In the dialog box, enter the  subtopic keyword , then click  Save . 

• To view incomplete SEO recommendations, click a  category  with a red circle. Each completed recommendation will have a green checkmark. Each incomplete recommendation will have a grey checkmark. Learn more about working with SEO recommendations . 

Preview blog posts

Before publishing a post, you can preview it on different device types and test smart content and personalization. 

• Hover over a post and click Edit . 
• In the content editor, click  Preview  in the top right. 
• To access a full page preview, click  Open in a new tab in the top right. To share this preview page with other users in your HubSpot account, click Copy link on the preview page. Users must be logged into HubSpot to view this preview.
• To preview the post on a different device, click a mobile   device icon  in the upper right of the preview page. 
• If you have Google AMP turned on for this blog post, click  Google AMP  at the top of the page to preview the AMP version of the post. To return to the regular view, click  Standard . 
• To preview how the post will appear on the listing page, click  Main List View in the  View  section. To preview the post itself, click  Full Post View . 
• Select C ontact  to preview the post's personalization . Then click the second dropdown menu  and select a  contact  to preview how the post would appear for that contact. 
• Select  Smart rule  to preview the post's smart content . Then click the second dropdown menu  and select one or more  smart rules   to preview how the post would appear for a visitor matching those rules. 

Related content

• Limit access to your HubSpot assets
• Prevent content from appearing in search results
• Integrate Google Analytics with HubSpot content

• 400+ Features
• Website Templates
• Website Designs
• WordPress Themes
• Joomla Templates
• HTML Templates
• HTML Website Builder
• WordPress Website Builder
• Joomla Page Builder
• Documentation
• Contact Support
• Html Code Examples

Blog Posts Html Code Examples

HTML Template Categories

Html Block Styles

Blog Posts Website Templates

You can design a blog website template with Blog & Posts Web Templates designed to simplify the process of creating a website greatly. It’s time a pick of blog content for your blog and magazine will leave a lasting first impression. Choose free blog WordPress themes using an HTML blog template with best free WordPress blog of your own color and style to improve your blogging. Top free blog WordPress themes set up logo maker and custom best free blog post websites that will leave a strong ever lasting first impression. Everything you need to personalize your content and design, you can find in blog CSS templates. Blog template is known for its incredibly powerful infinite options panel. In the blog, HTML templates built-in filters by authors, tags, and categories. The web design of creative blog templates is not inferior to those sets of options that the best templates have. You can publish a blog post in free video stock footage, audio, and other formats.

Decide to start a blog and looking for a blog news website template? Time to get serious about it. Blog website templates, these blogs have a strong look and feel - bright design, simple and impressive. Due to the free WordPress plugins, you can edit each element directly as it looks on the site. WordPress blog site templates focused on creating unique content for your content marketing. Blog templates, which explore popular categories, use their web builder and logo maker tool for wordpress theme. WordPress tutorials have the most popular retina ready grid layout includes a large image slider for categories, as the name suggests, it combines Google fonts and responsive with fully customizable free templates to create the best blog themes. Clean design keeps landing page post layouts up and running for constant easily customize improvements of wordpress theme and blog website template.

New WordPress blog theme uses free WordPress web design to help multipurpose responsive blog theme realize its full potential and make any modern food blog template or WordPress blog theme, wordpress theme and blog post logo maker exquisite. Our WordPress hosting provides the best free blog website templates, which makes it easy to quickly set up your online business WordPress theme, travel magazine WordPress blog theme, or custom premium themes based on Bootstrap 4. Regardless of the settings, it has a fully responsive website mobile-friendly design and always maintains mobile adaptability. Blog designers, blog templates free and designed for any blog format (food blog, travel blog website template, real estate blog, personal blog, etc.), news sites. You can even make an online magazine based on the functionality of the template website design. Best blog free WordPress themes have a creative interface for navigation and make it easy for readers to access the content of interest. You can see how visitors grow when you install blog-free templates. Free online tutorials will show you why you need web hosting similar to ours. Today responsive blog website, and blog website template are an easy dream world you can work and build with our blog themes, so do it now!

• Terms of Use
• Privacy Policy
• License Agreement

Themes & Templates

• CSS Templates
• WooCommerce Themes
• HTML5 Templates
• One Page Templates
• Website Builder
• WYSIWYG HTML Editor
• Static Site Generator
• HTML Code Generator
• Web Page Designs
• Web Page Designer
• Landing Pages
• Homepage Designs
• Website Mockup