ကိုကြီးဇော် ( မုန်တိုင်း )

Date Calendar in blogs can be so helpful for both bloggers and readers to get informed regarding when the article was being made by the author, so in the future, it can also help them a lot to find out more about what the other articles that also being made in that date. So, adding date calendar element in blog post or article is so fundamental, especially for those of serious bloggers. Anyway, in my previous article telling you about - How to Replace Date Calendar Heading in Blogger blog -, i already uncovered to you about how to customize date calendar into a new stylish form by using some CSS codes along with the Javascript code into our blog template. That's why, in this post, i want to show you more about how exactly to customize the default date heading in our blog without using Javascript code.

1. Log in to Blogger Account
Now enter to your Blogger Account via address http://www.blogger.com and then Log in to your Blogger Account.

2. Go to Edit HTML
After landing to the Dashboard page, now pick one of your blog you want to customize, and then press the Layout/Design button. By doing so, you will be brought to the new page regarding the configuration of your blog layout. Now switch the sub-tab on the navigation bar to Edit HTML.

3. Give a tick at the Expand Widget Template
On the upper right position of the HTML box, you can see a small box called Expand Template widget. Now give a tick/check mark at the small box to begin expanding the blog template.

4. Find the Code
In the Edit HTML page, now press Ctrl + F at the same time to enter to your Blogger Account. In the Find mode, now find the code below in your blog template:
As you can see in the code above, the date calendar in your blog is set in the default mode without any particular style. In this area, you will be able to customize that default date calendar using some certain CSS commands.

5. Customize the Date Calendar
After locating the code that controls the date calendar, now you can add some certain commands inside the anchor code h2.date-header to start customizing with the new style. For example about customizing date heading in blogger, you can look at the code below:
As you can see in the code above, the 3 new commands have been added to the date heading. As many of you already know that, the code background:#800000 indicates the background color of the date heading has been changed to maroon color. And then, the code color:white indicates the color of the date heading text is white, and last but not least, the code padding:10px indicates the space 10px has been set inside the date heading.

6. Find the Date Heading Code
In order to make the new CSS style works on the date heading, you must firstly replace the date heading tag if you are currently using Minima Template. Now find the code that controls the date heading in Minima Template by pressing Ctrl + F at the same time.

7. Replace the Code
After locating the code that controls the date heading in your blog template, now block those codes on number 6 and replace it by using the code below:

8. Save the Template
By pressing the Save Template button, now you can start saving the current changes you've just made in your blog template. As you can see directly in your blog, the date calendar heading will have a new style. As the result, the new customized date heading will look like this:


Okay, that's all for now guys. Hope i can explore more about date heading in the future. If you have any question regarding the topic about customizing date heading, you can leave your comment in the comment section below and i will try my best effort to help you.

Labels: Blogger-III