CSS3 Count Label Blogger

Effect css transition pada label widget blogger saya akan gunakan beberapa properti elemen seperti pseudo :before untuk css count label. dengan style css pada count label yang tampilannya begitu saja kali ini kita akan rubah dengan lebih menarik. dengan sedikit animasi css hover. tutorialnya hampir sama dengan membuat css3 tooltips.
CSS3 Count Label Blogger
Gambar di samping menunjukan saat pernargetan hover yang akan memunculkan count(jumlah artikel pada label) dengan efek transition cubic-bezier. saya tidak ragu untuk menggunakan efek berbeda karena browser sekarang sudah banyak perkembangan dengan beberapa pendukung efek animasi.
pada dasarnya widget label blogger hampir sama seperti halnya pada widget menu navigation dengan menggunakan properti ul dan li.
berikut deretan HTML label dengan count label.
<ul>
   <li><a href="#">CSS</a><span>120 artikel</span></li>
   <li><a href="#">Javascript</a><span>150 artikel</span></li>
   <li><a href="#">HTML</a><span>200 artikel</span></li>
   <li><a href="#">Jquery</a><span>80 artikel</span></li>
   <li><a href="#">Tutorial</a><span>100 artikel</span></li>
</ul>
Namun jika kita menggunakan deretan tersebut pada widget tidak akan menghasilkan label secara otomatis. pada blogger sendiri widget sudah di sediakan dan kita bisa mengatur count label atau tanpa count label.
Terus seperti apa hasilnya jika tutorial tersebut jika di pasang pada blogger. lihat demonya di bawah.
Demo - Arahkan/targetkan mouse pada salah satu link label di bawah
CARA MEMASANG STYLE PADA WIDGET BLOGGER
Pastikan anda sudah memasang widget blogger.caranya :
CSS3 Count Label Blogger
Masuk dasbor kemudian pilih tata letal atau layout.
CSS3 Count Label Blogger
Tambah Gadegt pada bagian sidebar atau footer anda.
CSS3 Count Label Blogger
Setelah setelah itu anda akan di pelihatkan dengan beberapa widget  pilih widget label blogger dan tambahkan
CSS3 Count Label Blogger
Pengaturan pada widget label. centang pada text Tampilkan Jumlah Entri Per Label
Cara di atas jika pada template anda belum memasang widget Label Blogger
Kemudian simpan.
2. Masuk ke edit template atau edit HTML dan centang Expand Template Widget.
3. Cari id widget Label atau temukan barisan code mirip seperti ini .
<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
Perhatikan :
lihat pada bagian ini
<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>

hapus semua pada bagian ini.

</b:includable>
</b:widget>
Tiap template id='Label1' akan berbeda cari yang kira-kira mirip seperti itu
4.Jika sudah di hapus lalu masukan code ini pada bagian yang di hapus tadi:
<b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
<ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> <b:if cond='data:showFreqNumbers'> <span class='label-count' dir='ltr'><data:label.count/> Artikel</span> </b:if> </b:if> </li> </b:loop> </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
  </div>
5. Lalu Masukan CSS berikut caranya cari code ]]</skin>. letakan css di atasnya.
.sidebar ul li {
  background:transparent url(http://3.bp.blogspot.com/-k6_8TWlD4Hw/Tzt-ABkEYsI/AAAAAAAABE0/MStiezjcvfM/s1600/icon-new-window.png) no-repeat left center;
  list-style-type:none;
  margin:0 0 5px;
  padding-left:20px;
  transition:padding 0.26s ease;
  -moz-transition:padding 0.26s ease;
  -webkit-transition:padding 0.26s ease;
}
.sidebar ul li:hover {
  padding-left:23px;
}
.sidebar ul li:hover span.label-count {
  opacity:0.5;
  margin-left:10px;
}
span.label-count {
  background:#000;
  border-radius:0 10px 10px 0;
  -moz-border-radius:0 10px 10px 0;
  -webkit-border-radius:0 10px 10px 0;
  color:#FFF;
  height:auto;
  margin-left:50px;
  opacity:0;
  position:relative;
  text-align:center;
  width:auto;
  padding:2px 8px;
  transition:all 0.3s cubic-bezier(1,2,0,0) 0s;
  -moz-transition:all 0.3s cubic-bezier(1,2,0,0) 0s;
  -webkit-transition:all 0.3s cubic-bezier(1,2,0,0) 0s;
}
span.label-count:before {
  content:"";
  width:0;
  height:0;
  position:absolute;
  right:100%;
  top:0;
  border-width:10px;
  border-style:solid;
  border-color:transparent black transparent transparent;
}
Terakhir Simpan template anda dan lihat hasilnya .
Faktor kesalahan
CSS diatas saya menggunakan class dengan class='sidebar' . mungkin pada template anda akan berbeda. jika anda memasangnya pada bagian footer. css yang perlu di rubah pada css bagian yang di garis bawahi berikut ini.
.sidebar ul li {
  background:transparent url(http://3.bp.blogspot.com/-k6_8TWlD4Hw/Tzt-ABkEYsI/AAAAAAAABE0/MStiezjcvfM/s1600/icon-new-window.png) no-repeat left center;
  list-style-type:none;
  margin:0 0 5px;
  padding-left:20px;
  transition:padding 0.26s ease;
  -moz-transition:padding 0.26s ease;
  -webkit-transition:padding 0.26s ease;
}
.sidebar ul li:hover {
  padding-left:23px;
}
.sidebar ul li:hover span.label-count {
  opacity:0.5;
  margin-left:10px;
}
Banyak terjadi kesalahan adalah karena perbedaan id atau class pada CSS. jadi perhatikan dulu widget Label di taruh di sebelah mana .
Jika anda mengalami kesulitan. silahkan ajukan pertanyaan dengan benar dan jelas. agar jawabannya pun jelas
mulailah berdiskusi.

license by under 88 blogspot.com
Post By : denzdii
Transition : CSS Effect Transtition

14 comments:

  1. wah mantp sob..
    bisa ni minta d ajarin css..hehe
    fanpage sudah d like sob..

    ReplyDelete
    Replies
    1. thnx sob..
      yu mari belajar sama-sama..
      makasih ya likenya..

      Delete
  2. nah, begini atuh berkreasi terus \o/
    sok di lanjut yah karya2nya...ojo ngesu :D

    ReplyDelete
  3. Brad aku posting di forum dilihat yah... \m/

    ReplyDelete
    Replies
    1. Forum diskusi yang di blog ini kang denddy...

      Delete
    2. sudah saya check blognya.. gak ada masalah ko.. emang eror nu manana kank...

      Delete
  4. Mantap sob tutornya,,,,salam kenal

    ReplyDelete
  5. Kelihatanya mntp nch untuk d'cba ... \m/

    ReplyDelete
  6. Mantab sob tutuornya... \o/
    berhasil.. hehehe

    ReplyDelete
  7. Hehehe masih bingung euy,,,salam kenal mas,,,,, \m/

    ReplyDelete
  8. cara mengganti warnanya gimana...

    ReplyDelete
  9. lantas bagaimana jika kita ingin menghitung jumlah kata dalam postingan (count word blogger)

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top