News template for blogger free
Here is a basic news template for Blogger that you can use for free:
News Template for Blogger
Header
- Title: News
- Subtitle: Stay up-to-date with the latest news and updates
- Logo: Add your blog's logo or a relevant image
Navigation
- Menu: Add a menu with links to your blog's main pages, such as Home, About, Contact, etc.
Hero Section
- Image: Add a relevant image or a video to grab the reader's attention
- Headline: Add a catchy headline that summarizes the latest news
- Summary: Add a brief summary of the latest news
News Section
- News Feed: Add a news feed that displays the latest news articles in a list or grid format
- Article Template: Use the following template for each news article:
- Title: Add the title of the news article
- Image: Add a relevant image or a thumbnail
- Summary: Add a brief summary of the news article
- Read More: Add a "Read More" link to the full article
Sidebar
- Categories: Add a list of categories or tags to help readers navigate the news articles
- Recent Posts: Add a list of recent posts or news articles
- Archives: Add a list of archives or older news articles
Footer
- Copyright: Add a copyright notice with your blog's name and year
- Social Media: Add links to your social media profiles
- Contact: Add a contact form or email address
CSS Styles
- Font Family: Use a clean and modern font family such as Open Sans or Lato
- Font Size: Use a font size of 16px or 18px for the main content
- Color Scheme: Use a color scheme that is easy to read and visually appealing, such as a combination of black, white, and gray
- Spacing: Use a consistent spacing throughout the template to make it easy to read and navigate
HTML Code
Here is the basic HTML code for the news template:
<!DOCTYPE html>
<html>
<head>
<title>News</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<style>
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.hero {
background-image: url('hero-image.jpg');
background-size: cover;
background-position: center;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.news-feed {
margin-top: 20px;
}
.news-feed li {
list-style: none;
margin-bottom: 20px;
}
.news-feed li img {
width: 100px;
height: 100px;
margin: 10px;
}
.sidebar {
width: 20%;
margin-top: 20px;
padding: 20px;
background-color: #f7f7f7;
border: 1px solid #ddd;
}
.sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar li {
margin-bottom: 10px;
}
.sidebar a {
color: #337ab7;
text-decoration: none;
}
.sidebar a:hover {
color: #23527c;
}
.footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>News</h1>
<p>Stay up-to-date with the latest news and updates</p>
</div>
<div class="hero">
<h2>Latest News</h2>
<p>Check out the latest news and updates from our blog</p>
</div>
<div class="news-feed">
<ul>
<!-- News articles will be listed here -->
</ul>
</div>
<div class="sidebar">
<h2>Categories</h2>
<ul>
<!-- Categories will be listed here -->
</ul>
<h2>Recent Posts</h2>
<ul>
<!-- Recent posts will be listed here -->
</ul>
<h2>Archives</h2>
<ul>
<!-- Archives will be listed here -->
</ul>
</div>
<div class="footer">
<p>© 2023 Your Blog Name</p>
<p>Follow us on social media:</p>
<ul>
<li><a rel="nofollow" target="_blank" href="https://www.facebook.com/yourblogname" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a rel="nofollow" target="_blank" href="https://www.twitter.com/yourblogname" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a rel="nofollow" target="_blank" href="https://www.instagram.com/yourblogname" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</body>
</html>This is just a basic template, and you can customize it to fit your needs. You can add or remove sections, modify the CSS styles, and add your own content.