Style Blogspot Blogger Engagement Header
Sunday, May 24, 2020
Edit
This tin survive a actually cool improver to your weblog which tin survive easily customized to suit your layout together with design. What nosotros are going to create inwards this tutorial is to alter the Blogger engagement header background color amongst around uncomplicated CSS adjustments that volition brand the engagement header float on the left side of your post service together with survive partially out of the structure, similar a banner amongst a colorful appearance.
Step 2. Click anywhere within the code expanse together with search (CTRL + F) for the next CSS code:
Step 3. You volition require to supercede the CSS code inwards a higher house amongst this one:
- background color, replace #DDEDAA with the hex code of your color
- font color, supercede #444
- edge color of the bigger circle below the engagement header, replace #FFBD54
- edge color of the dark-green circle, supercede #bada55
- distance betwixt engagement together with post, alter the -190px value from margin-left
Step 4. Click the "Save template" push to salve the changes. That's it!
Now you've applied a novel mode to the engagement header of your Blogger posts. Please greenback that codes vary from template to template together with if yous convey a custom template, at that topographic point mightiness survive a unlike CSS selector for the engagement header.
Customize the Date Header of a Blogger Blog
Step 1. Log inwards your Blogger account together with larn to Template > Edit HTMLStep 2. Click anywhere within the code expanse together with search (CTRL + F) for the next CSS code:
.date-header spanBelow this code yous should encounter around lines similar to these:
.date-header bridge {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
}
Step 3. You volition require to supercede the CSS code inwards a higher house amongst this one:
.date-header {
margin: 0px 0px -50px -190px;
}
.date-header bridge {
background-color: #DDEDAA;
color: #444;
padding: 16px;
border-radius: 70%;
border: 3px venture #bada55;
}
.date-header:before {
background: none repeat scroll 0 0 #FCFCFC;
border: 10px venture #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 venture #bada55;
border-radius: 100%;
bottom: -17px;
content: "";
display: block;
height: 15px;
position: absolute;
width: 15px;
z-index: 10;
margin-left: 166px;
}
How to Customize the Date Header
To alter the:- background color, replace #DDEDAA with the hex code of your color
- font color, supercede #444
- edge color of the bigger circle below the engagement header, replace #FFBD54
- edge color of the dark-green circle, supercede #bada55
- distance betwixt engagement together with post, alter the -190px value from margin-left
Step 4. Click the "Save template" push to salve the changes. That's it!
Now you've applied a novel mode to the engagement header of your Blogger posts. Please greenback that codes vary from template to template together with if yous convey a custom template, at that topographic point mightiness survive a unlike CSS selector for the engagement header.