Insert Image Before Title Pages

If you want your blog more expressive, its better insert a picture/image or a small icon before title pages.
Look this tutorial:


1. Log in to your Blogger
2. Select Layout -> Edit HTML
3. Find the following code or similar like this code

.post h3 {
margin:.5em 0;
padding:30px 0px 0px 45px;
font-size:120%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;
}

If does not present, find like this code:

.post-title {
margin:.5em 0;
padding:30px 0px 0px 45px;
font-size:120%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;
}

Delete code padding:30px 0px 0px 45px; and replace with the following code:

padding:48px 0px 0px 45px;
height:48px;
background:url(http://www.iconarchive.com/icons/mayosoft/aero-vista/TextoPlano-48x48.png) no-repeat left center;

replace http://www.iconarchive.com/icons/mayosoft/aero-vista/TextoPlano-48x48.png with your url image.

All the above code would look like this:

.post h3 {
margin:.5em 0;
padding:48px 0px 0px 45px;
height:48px;
background:url(http://www.iconarchive.com/icons/mayosoft/aero-vista/TextoPlano-48x48.png) no-repeat left center;
font-size:120%;
font-weight:bold;
font-style:italic;
line-height:1.3em;
color:#333;
}

4. Save

Related Posts