Modifkasi Label Blogspot dengan CSS-3

Solusi memodifikasi label blogspot dengan css3

Assalamu'alaikum warakhmatullahi wabarakatuh. Tertarik dengan konten dari http://under-88.blogspot.com/2012/08/css3-count-label-blogger.html yang telah memberikan tutorial memodifikasi label dengan css3, saya telah mencobanya dan berhasil dengan baik di blog ini seperti gambar berikut maaf gambar saya tampilkan karena suatu saat blog ini dapat berubah :

Seperti kita pahami bahwa konten label blogspot belum ada pengaturan secara khusus penampilannya dengan css, maka saya cocok dengan para pengembang css3 untuk berupaya menampilkan sajian label yang leih menarik, adapun konten label milik saya ala blog spot adalah sebagai berikut

Tag Label Original:

<b:widget id='Label1' locked='false' title='Neo Label Surya62' 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>

Tag tersebut setelah kita mengaktifkan konten label dari menu tambah htmljavascript fasilitas blogspot, selanjutnya kita rubah menjadi seperti berikut:

Tag Label Modifikasi:

<b:widget id='Label1' locked='false' title='Neo Label Surya62' 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 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>
</b:includable>
</b:widget>

Perubahan tersebut belum cukup karena penampilan label 1 belum diatur, untuk itu aturlah konten label1 tersebut dengan css yang dapat diletakkan di atas tag ]]></b:skin> seperti berikut ini :

Tag CSS3 Label:

.sidebar ul li {
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-4xZ2w1qMW-P1MOkXvv6X7hRE_asyH1gl6j13a31Du52oC7Lg7nL_Q6VYWqL95XMDq-OO8544wSi9aC58hNE-g06DX_8SE8O_oB8VPr5tNqAHe1eoVlUoLpcb5QSkOZE_5hWTtHm9NP0A/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;
}

Perhatian :

• Gambar pada img https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-4xZ2w1qMW-P1MOkXvv6X7hRE_asyH1gl6j13a31Du52oC7Lg7nL_Q6VYWqL95XMDq-OO8544wSi9aC58hNE-g06DX_8SE8O_oB8VPr5tNqAHe1eoVlUoLpcb5QSkOZE_5hWTtHm9NP0A/s1600/icon-new-window.png dapat dirubah sesuai kreasi kita misalnya milik saya dirubah dengan img berikut : http://i1222.photobucket.com/albums/dd489/surya546/anima.gif
• span.label-count {background:#000; dapat dirubah menjadi warna hijau #7CE916 atau lainnya
• Apabila Anda meletakkan label ini di footer maka perlu ada perubahan seperti berikut untuk cssnya, maaf mohon di edit terlebih dahulu dengan notepad atau lainnya untuk menghindari hal yang tidak diinginkan.

Tag CSS3 Label footer:

.sidebar ul li {
  background:transparent url(http://i1222.photobucket.com/albums/dd489/surya546/anima.gif) 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;
}

Selanjutnya silahkan Anda dapat mengatur dalam css label1 tersebut, oh ya tambahan background milik saya ditambahkan pengaturan gradient seperti berikut :

Tag penampilan CSS label:

.sidebar .widget{
  margin:0 auto;padding:0;
  color:#4A4A4A;font-size:13px;
  }
.boxwidget {
  height: 0 auto 0;
  overflow: auto;margin: 0;
  padding: 0;background: #111;
  color: #666;border: 0 solid #555;
  border-radius: 8px;-moz-border-radius: 6px;-webkit-border-radius: 6px;
  opacity: 0.4;filter:alpha(opacity=40);
         -o-transition: all ease-in 1.2s;
         -moz-transition:   all ease-in 1.2s;
         -webkit-transition: all ease-in 1.2s;
  }
.boxwidget:hover {
  background: #660000;
  color: #eee;opacity: 1.0;
  filter: alpha(opacity=100);
  }
.main .widget{
  margin:0 0 5px;padding:0 0 2px;
  }
.main .Blog{
  border-bottom-width:0;
  }

Maka hasilnya seperti gambar yang tampil diatas. Demikian konten saya kali ini semoga bermanfaat dan terima kasih kepada Saudaraku di http://under-88.blogspot.com/2012/08/css3-count-label-blogger.html, mohon maaf link ini tidak saya aktifkan karena sudah terlalu banyak link keluar di blog ini. terimakasih.
Wassalamu;alaikum warakhmatullahi wabarakatuh.

Bergabunglah bersama kami dengan para Mentor Bisnis ternama !

Bisnis terpercaya di Joko Susilo.com dan Stop Dreaming in action Info Toko Surya62. Bisnis spektakuler Best Marketing place, Konten Islami, Bisnis click-bank, Balkblakan Marketing Online, Smart Machine System V 2.0, submit terbaik, MobiGarda-Iphone.