Menambah Icon dan Bakcground-Image pada elemen post-footer

Ini merupakan tulisan ke tiga tentang post-footer. yang mengacu dan intinya masih bersandar kepada tulisan pertama yakni “ Mengenal tag Html post-footer “.

Dan untuk tulisan sekarang , Bagiaman cara menambah icon/ gambar pada setiap elemen yang ada pada post-footer , seperti menambah icon untuk label, komentar dll.

Dan bagaimana cara-nya menambah bingkai,  warna atau background gambar  .

oceh deh …

Pertamaxxxx :

untuk menambah icon ke dalam elemen label, yang perlu kita lakukan yaitu menambah selector class dan properti-nya ke dalam Css seperti ini:

.post-labels {
background:url(http://3.bp.blogspot.com/_Zuzii37VUO4/
RnzHDsXWxoI/ AAAAAAAABzw/qHnaTuNxrLQ/s1600/tags.gif)
left no-repeat;
padding-left:20px;
}

hasilnya seperti ini :

sedangkan untuk menambah bingkai  (border) , icon dan background warna, misalkan pada elemen komentar kita cuman cari tulisan selecktor Class ini :

.comment-link

kemudian dalam propertinya kita tambahkan seperti tulisan yang saya beri warna.

.comment-link {
  margin-$startSide:.6em;
  border:1px solid #000;
  padding:5px 5px 5px 20px ;
  background:#C7DFB5 url
(http://4.bp.blogspot.com/_Zuzii37VUO4/RnzG_8XWxjI/
AAAAAAAABzI/LduyqkCDRJo/s1600/mini-comments.gif)
no-repeat left;
  }

hasilnya seperti ini :

Keduaaaxxx :

Untuk menambah bingkai, warna dan background image ke dalam  post-footer, cari saja selector class  ini.

.post-footer {
  }

* Contoh Menambah border ;

.post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  ……
  ……
  Border: 1px solid #DFDFDF;
  padding:5px;

}

hasilnya seperti ini :

* Menambah border radius ;

.post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  …..
  …..
   Border: 1px solid #DFDFDF;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  padding:5px;
}

hasilnya seperti ini :

- Note : border radius di atas tidak berlaku utuk Ie6 dan Ie7.

* Menambah background warna ;

.post-footer {
  Background:#C7DFB5;
  padding:5px;
  margin: .75em 0;
  color:$sidebarcolor;
  …..
  ….. 
}

hasilnya seperti ini :

* Menambah background gambar :

/* yg perlu kita lakukan menyiapkan dulu gambar yang akan kita jadikan background.

Contoh gambar di samping ini ukuran widht ; 5 px height; 40px

kemudian dalam propertinya saya beri nilai background repeat-x

.post-footer {
  Background:#C7DFB5 url
(http://i120.photobucket.com/albums/o190/jaloewig/
catalog-tut/bg_com01.gif) repeat-x left top;
  padding:5px 0 2px 5px;
  margin: .75em 0;
  color:$sidebarcolor;
  ……
  …… 
}

hasilnya seperti ini :

 

Related Posts

from tag editblog

• Post-Footer : Menambah Sosial Bookmarking
• Post–footer : mengenal tag html “post–footer” pada template minima

(more..)

Related Posts

from tag blogger_layout

• Menambah Gambar Untuk Header ( Judul Blog )
• Membuat Read More Di New Blogger
• Menambah Sebuah Breadcrumb Trail ke dalam blogger Post
• Menambah Kolom di New Blogger
• Read More Style Ala yahoo
• Menambah Figura atau gambar icon dalam tanggal postingan
• Menambah Background-Gambar pd Blog

(more..)

del.icio.us tags: tutorial blogger, Blogspot

Page views this post: reader