How To Make Blogger Blog Date Header Stylish

In this tutorial, we are going to see how can we make the style of blogger blog date header stylish. This hack is awesome. By this hack, your blog will look more professional. This hack will make the date header float on left the side of the post like a banner with colorful appearance. It is very easy to customize. This is the best way to make your blog design fit for your daily visitors. So, let's start implementing it into our blog.


Steps To Make Blogger Blog Date Header Stylish

Step 1: Login to your Blogger Dashboard and go to "Template" And hit "Edit HTML".

make-blogger-blog-date-header-stylish


Step 2: Click anywhere inside the template code and press Ctrl + F keys to open the search box.


Step 3: Now search for the code given below:

.date-header span

Note:- Date Header code varies from template to template. If you use custom blogger template, it might vary.

Step 4: When you will find the code then you will see other codes like given below:

.date-header span {
  background-color: $(date.header.background.color);
  color: $(date.header.color);
  padding: $(date.header.padding);
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);
}

make-blogger-blog-date-header-stylish


Step 5: Now replace the above code with the code given below:

.date-header {
margin: 0px 0px -50px -190px;
}
.date-header span {
background-color: #DDEDAA;
color: #444;
padding: 16px;
border-radius: 70%;
border: 3px solid #bada55;
}
.date-header:before {
background: none repeat scroll 0 0 #FCFCFC;
border: 10px solid #FFBD54;
border-radius: 100%;
bottom: -50px;
content: "";
display: block;
height: 30px;
position: absolute;
width: 30px;
z-index: 10;
margin-left: 140px;
}
.date-header:after {
background: none repeat scroll 0 0 #F9F9F9;
border: 7px solid #bada55;
border-radius: 100%;
bottom: -17px;
content: "";
display: block;
height: 15px;
position: absolute;
width: 15px;
z-index: 10;
margin-left: 166px;
}




Change the #DDEDAA with your own hex color code if you want to customize background color of the date header

Change the #444 if you want to customize the color of the fonts

Change the #FFBD54 if you want to change the border color of the circle

Change the #bada55 if you want to customize the border color green circle

Change the 190px to your own value if you want to change distance between the date and the post


Wrapping Up


Now you have applied a new style to make the date header of the blogger blog stylish. And I hope you liked the post. If there is a problem don't forget to comment down and Happy Blogging:-)

15 Comments

  1. Data management platform is the new currency. It’s what marketers need in order to make informed decisions and get ahead of their competition. But it can be hard to manage all that data, especially when you have multiple sources coming from different places. That’s where we come in! We offer a DMP that helps you organize all your digital data into one place so it’s easy for you to access and act on at any time.

    ReplyDelete
  2. In this tutorial, we are going to see how can we make the style of blogger blog date header stylish. This hack is awesome. By this hack, your blog will look more professional. This hack will make the date header float on left the side of the post like a banner with colorful appearance. It is very easy to customize. This is the best way to make your blog design fit for your daily visitors. So, let's start implementing it into our blog 10w30 engine oil

    ReplyDelete
  3. VCH.ca Login provides the VCH Staff Hub Portal to get VCH Pay Stub, My VCH Schedule, VCH Webmail, VCH Intranet, VCH Medical Staff Information & many more details with the official website.

    VCH Pay Stub Login

    ReplyDelete
  4. CPR is a platform where customers can have the best shopping experience by enjoying the daily updated deals, coupons, and products.

    ReplyDelete
  5. https://thegentech.com/protein-diet-plan-for-weight-loss-in-7-days/
    https://thegentech.com/get-the-best-deals-during-the-steam-winter-when-is-the-winter-sale-on-steam/

    ReplyDelete
  6. Nice article! If anyone's seeking the digital marketing company in bangalore , do check out our website. We offer effective solutions. Would love to connect with fellow enthusiasts here.

    ReplyDelete
  7. Connect, collaborate, and thrive in our real estate social network, a dynamic platform designed to bring together professionals, buyers, and sellers. Our real estate social network offers property listings, market insights, and targeted advertising to help you build your brand and grow your business.

    ReplyDelete
  8. CRO Marketing aims to increase the number of conversions by improving the overall user experience on a website. Through detailed analysis of visitor behavior and targeted testing, CRO marketing identifies key areas of improvement in design, layout, and content. By implementing optimized solutions, businesses can see significant improvements in conversion rates, turning more visitors into customers. Whether it’s through faster page loading times or clearer calls-to-action, CRO marketing plays a crucial role in driving better business outcomes.

    ReplyDelete
  9. For those planning on moving to Florida, there’s a lot to look forward to, including sunny skies, warm temperatures, and an active outdoor lifestyle. Whether you want to live near the coast or explore cities like Tampa and Jacksonville, Florida offers a diverse range of living options. Moving to Florida also brings the benefit of a lower cost of living and no state income tax, making it an attractive option for anyone seeking a fresh start in a warm climate.

    ReplyDelete
  10. When it's time to get rid of an old couch, there are several options to consider. One approach is to repurpose the couch, giving it a new life as a garden bench or outdoor seating area. Alternatively, consider selling the couch online or at a garage sale, generating some extra cash for a new piece of furniture. If the couch is no longer usable, getting rid of it through a bulk pickup or junk removal service is a convenient option. Getting rid of an old couch can also be a chance to declutter and refresh your living space, creating a more organized and peaceful environment.

    ReplyDelete
Previous Post Next Post