• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Increase Website And Blog Traffic:latest article for Increasing Blog and website Traffic free gide.....
  • Create and Upload Site Map to Google:Google is fist largest Search Engine by upploading SITE MAP Google Easily Search Links from Ur site in Searching.......
  • Fix WEB SITE Errors:Google and other search engines always take those site in there fist page in searching which ha too less web Errors...
  • Top 20 Search Engine:Submit Ur site to top 20 Search Engines to Increasing Ur Site Traffic and making money top search engines like as Google, Yahoo, Ask, AOl, MSN...
  • Top Social Sites:Top 100 Social sites which real help U make a Affliate Marketer and in Pormoting ur Producdts...

New Posts

Style blogspot blogger date header

Posted by Mohsin On 2/27/2012 12:03:00 PM No comments

This can be a really cool addition to your blog and something that can be customized to suit your layout and design. What we are going to do in this tutorial is changing the Blogger date header background color with some simple CSS adjustments that will make the date header to float on the left side of your post and to be partially out of the structure like a banner with a colorful appearance.

stylish blogger date header

Customize the Blogger Date Header of a Blogspot Blog


Step 1. Log in your Blogger Dashboard, go to Template Edit HTML (don't forget to make a back-up of your current template by clicking on the Backup/Restore button)


Step 2. Click anywhere inside the code area and search (CTRL + F) for the following code:
.date-header span
Below this code you should see a few lines like these:
.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);
}

date header, blogger
Screenshot

Step 3. You need to replace the code above with this one:
.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;
}
Customization

- to change the background color of the date header, replace #DDEDAA with the hex code of your color
- to change the date font color, replace #444;
- to change the border color of the bigger circle below the date header, replace #FFBD54
- to change the border color of the smaller circle, replace #bada55
- to set the distance between date and post, change the -190px from margin-left

Step 4. Click on the Save template button to save the changes.
So this is how you can add a new style to the blogger posts date header. Please keep in mind that codes vary from template to template - if you're having a customized template, then you might have a different CSS selector for the date header. 

0 comments:

Post a Comment

All types of Comments are welcome