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:-)

10 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
Previous Post Next Post