Monday, December 10, 2012

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(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;
}

Perhatian :

  • Gambar pada img http://3.bp.blogspot.com/-k6_8TWlD4Hw/Tzt-ABkEYsI/AAAAAAAABE0/MStiezjcvfM/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.


Join wazzub Now

2 comments:

Terimakasih Anda telah silaturakhim keblog ini dengan misi didaktik metodik pembelajaran di SMK, sehingga setiap saat dapat berubah sesuai kompetensi Pembelajaran. Silahkan berikan komentar yang sangat berharga demi kemajuan blog ini. Sehubungan dengan hak cipta apabila ada konten Anda disini dengan rendah hati saya mohon ijin memuatnya dan jika tidak berkenan mohon konfirmasinya, Mari berbagi untuk info yang manfaat dan belajar sepanjang hayat, salam sukses buat Anda dan keluarga!!! Klik gambar emoticon berikut jika Anda ingin menggunakannya.



Tahukah Anda bagaimana menjadi marketter yang bijak,hebat dan tepat?
daftarkan segera hari ini silahkan klik img bergoyang dibawah!!!

Formula Bisnis ClickBank
Marilah Tukar Link Untuk Meningkatkan Performance Blog/Web dengan membuka tombol berikut untuk melihat link Anda yang "Sukses!!!" :

Tukar Link Untuk Meningkatkan Performance Blog/Web

Mari kita tukar link secara otomatis untuk meningkatkan rank kita bersama.
Terima kasih atas kebersamaannya untuk menjalin kesetiakawanan,seia dan sekata kita.
Masuklah Anda ke Contact Formuntuk tukar link atau
untuk cek link-bunner sahabat di Link Partner atau kesini saja Kapten untuk silaturahmi bersama teman lainnya.
Adapun link saya seperti berikut ini:
<a href="http://s-surya62.blogspot.com"title="Free blog tutorials on toko information HTML and CSS"target="_blank">Info Toko Surya62</a>



Join Wazzub Now

Silahkan masukkan kode HTML(bebas)jangan lebih dari 50 baris,kemudian klik"convert",
maka akan didapat kode HTML yang siap di posting dan selanjutnya Anda hanya mencopy hasilnya.
Editlah pada program notepad atau wordpad terlebih dahulu ya...

bisnis syariah

Apabila anda ingin menkonvert lengkap encoding dan decoding online
silahkan kunjungi situs Encode/Decode HTML Entities kesini
Salam Pershabatan Selalu dari saya di Info Toko Surya62

MARI MAJU BERSAMA MEMBANGUN BANGSA DENGAN AKHLAQUL KARIMAH
Online Job for All. Work from home computer.