5 Aralık 2010 Pazar

how customize blogger html css code edit html

There are not only some text on your blog but also there are some links,images etc.Your links and images must be compatible with your theme,the image and the links styles exist under your body {...} css codes
they appear like that
body {...}
a:link {...}
a:visited {...}
a:hover {...}
and lastly
a img {...}
i.e: search2add
a:link {
color: #ff6600;
text-decoration:none;
}
i.e: search2adda:hover {
color: #0000FF;
text-decoration:underline;
}
a img {
margin:2px;
  border:1px solid #0000ff;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
}
i.e:
.trial img {
padding:4px;
}
.trial img{
border: 1px solid #ccc;
}
.trial img:hover{
border: 1px solid navy;
}
.trial img:hover{
color: red; }
i.e:
  body a:link property   body a img property        another img property facebook style
images must be in  (<div class="trial"><img src="#.jpg" alt="abc" /></div>)

And now /* Header
------------------------------
*/
in other words
#header-wrapper
in this section your blog title(header h1),title color(header a)  vs. is here,you can personalize all tag in this section as you wish.You can use an image instead of description,and title but attantion on sizes that must be equal.
This your header area in minima template

here it is an example header-wrapper
#header-wrapper {
margin: 0; padding: 0; width: 100%; height: 200px; border-bottom: 1px solid #0000FF; background: #212121 url(your image.jpg); border-top-color: #FF0000;
clear:both; overflow:show;
}


/* Posts      in this part your  blog date( shows when your post published),post text size,post text font,post link vs exists
------------
 */
h2.date-header {...} this is your template date-header your every post has a date-header so your readers may know when your article was published
But think! you've composed a nice article,like people articles also get older,but to prevent our articles getting older is not beyond our power.


on this sample image you see a date,so we can get from that image it is very old,readers may hasitate to read this article when they see its date


when we hide the time, our post will be always young,add display:none; css code into your h2.date-header
But how?
h2.date-header {
  margin:1.5em 0 .5em;
 display:none; if you add this code line your post date will be hidden
  }

0 yorum:

Yorum Gönder