How to Add Circle Date Header Beside Blog Post Tile?
How to Add Circle Date Header Beside Blog Post Tile?
There
are different Template designer add and modify Template design to add some
variation in style. All template are not same, but by adding feature in Blogger
template we can make eye catching for viewers. You may have seen some Blogger
template which contain post date at the left side of the Blog post title. but
most of the template's post information remain below post title or between post
footer. In this tutorial we will learn how we can add a Circle Date header
beside Blog Post Tile. That means whenever you will create a post then post
publication date will show left side of post title in a circular container.
Step 1 Log in to your Blogger Account and Go
to your Blogger Dashboard
Step 2 Click on Now click on -> Layout -> Blog Post Gadget -> Edit -> Post Page
Options
-> first option Date -> Change to (Day Month Year) by clicking on Drop down option. Example:
12 January 2015.
-> first option Date -> Change to (Day Month Year) by clicking on Drop down option. Example:
12 January 2015.
Step 3 Now go through Settings
-> Language and Format -> Date Header Format -> Change to
(Day Month Year) by clicking on Drop down option. Example: 12 January 2015.
(Day Month Year) by clicking on Drop down option. Example: 12 January 2015.
Step 4 Now find
the </head> by pressing Ctrl+F
Step 5 Copy the code from below and Paste the code
above/before </head>
<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
day = "<strong class='date_day'>"+da[0]+"</strong>";
month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
year = "<strong class='date_year'>"+da[2]+"</strong>";
document.write(month+day+year);
DateCalendar = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
/* Circle Date by www.bloggerspice.com */
#SpiceDinCircle {
position:absolute;
background: #333333;
display: block;
width:60px;
height:60px;
float: left;
margin: 0px 2px 0 -60px;
padding: 0px;
border: 8px inset #F9F9F9;
text-transform: uppercase;
-webkit-border-radius: 70px;
-moz-border-radius: 70px;
border-radius: 70px;
box-shadow: 2px 1px 7px rgb(102, 102, 102);
}
.date_day {
display: block;
color:#FFFFFF;
font-size: 24px;
font-weight:normal;
margin-top:-5px;
text-align:center;
}
.date_month {
display: block;
font-size: 15px;
font-weight:normal;
color:#ccc;
margin-top:4px;
text-align:center;
}
.date_year {
display: block;
color:#CCCCCC;
font-size: 10px
margin-top:-8px;
text-align:center;
}
</style>
</b:if>
Customization
- Change code #333333; for altering the circle background color.
- Alter width:60px; height:60px; for increase or decrease the circle size.
- To change the Circle Color just replace border: 8px inset #F9F9F9; with border: 8px inset #3A9CE7; (for Blue CIrcle), border: 8px inset #E73A3A; (for Red CIrcle)
Step 6 Now again find the code like below.
<h2 class='date-header'>
<span>
<data:post.dateHeader/>
</span>
</h2>
Step 7 Now replace the above code by below code block. Note
that you will find the above code 2 times. So replace both code by using below
code block.
<div id='SpiceDinCircle'>
<script>changeDate('<data:post.dateHeader/>');</script>
</div>
<b:else/>
<div id='SpiceDinCircle'>
<script>changeDate('');</script>
</div>
Step 8 Finally hit the Save Template Button.
Fixing the Blog Post Title
After applying the above
code you will see your Blog Post title and circle Dare header merged. So for
making gap you have to add the below piece of code.
Step 1 Log in to your Blogger Account and Go
to your Blogger Dashboard
Step 2 Click on Now click on -> Template -> Edit
HTML
Step 3 Now find
the </b:skin> by pressing Ctrl+F
Step 4 Copy any code from below and Paste the code
above/before </b:skin>
Use below code for Blogger
default template
h3.post-title {
padding-left:20px;
}
Or Use below code for Blogger Custom template
.post h3 {
padding-left:20px;
}
Hope you have successfully installed the circular date header beside blog post. For further help leave your comment below.
2 comments