Label Ala Sora Template

Label Ala Sora Template,label biasanya di pakai untuk melihat daftar dari kumpulan-kumpulan/ringkasan dari sebuah tulisan yang di rangkum dengan satu nama,seperti kita membuat tutorial dan di ringkas dengan satu  kelompok,yang mana kelompok itu di beri nama atau judul dari keseluruhan tutorial tapi dengan judul yang berbeda.Nah sobat blogger itulah yang disebut dengan label,kali ini saya akan memberikan tutorial tentang cara membuat label yang lumayan menarik bagi blog kita,seperti yang bisa kita lihat label banyak macam mode,bentuk dan variasi.Nah untuk kali ini saya akan memberikan cara membuat label yang agak berbeda sedikit,mungkin sudah banyak juga yang membuatnya seperti contoh yang saya berikan disini yaitu tertera di sora template yang mana nama tersebut bagi para blogger sudah tidak asing lagi.Ya,web tersebut yang memberikan template buat para blogger secara gratis.Kalau sobat mau memakai template tersebut silahkan kunjungi disini.
Dan lihat icone labelnya pasti hampir sama dengan label di zigzoor Blog.
Lihat gambar di bawah:

                               

Nah kita langsung saja ke topik yang kita bicarakan yaitu cara membuat label ala sora template.karena kita kali ini khusus membahas tutorialnya bukan menerangkan tentang template.Terus bagaimana cara membuatnya? ok ikuti saja caranya dibawah.

Pertama: Login Blog >> pilih edit html  >> Add gadget >> HTML Javascript,dan masukan kode di bawah ke html tersebut.

<style type="text/css"><br />/*<![CDATA[*/<br />.label-size {<br />    float: left;<br />    margin: 0 0 7px 20px;<br />    position: relative;<br />    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;<br />    font-size: 0.75em;<br />    font-weight: bold;<br />    text-decoration: none;<br />    color: #996633;<br />    text-shadow: 0px 1px 0px rgba(255,255,255,.4);<br />    padding: 0.417em 0.417em 0.417em 0.917em;<br />    border-top: 1px solid #d99d38;<br />    border-right: 1px solid #d99d38;<br />    border-bottom: 1px solid #d99d38;<br />    -webkit-border-radius: 0 0.25em 0.25em 0;<br />    -moz-border-radius: 0 0.25em 0.25em 0;<br />    border-radius: 0 0.25em 0.25em 0;<br />    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));<br />    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));<br />    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));<br />    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));<br />    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));<br />    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');<br />    -webkit-box-shadow: inset 0 1px 0 #faeaba,<br />        0 1px 1px rgba(0,0,0,.1);<br />    -moz-box-shadow: inset 0 1px 0 #faeaba,<br />        0 1px 1px rgba(0,0,0,.1);<br />    box-shadow: inset 0 1px 0 #faeaba,<br />        0 1px 1px rgba(0,0,0,.1);<br />    z-index: 1;<br />}<br />.label-size:before {<br />    content: '';<br />    width: 1.30em;<br />    height: 1.39em;<br />    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));<br />    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));<br />    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));<br />    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));<br />    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));<br />    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');<br />    position: absolute;<br />    left: -0.69em;<br />    top: .2em;<br />    -webkit-transform: rotate(45deg);<br />    -moz-transform: rotate(45deg);<br />    -o-transform: rotate(45deg);<br />    transform: rotate(45deg);<br />    border-left: 1px solid #d99d38;<br />    border-bottom: 1px solid #d99d38;<br />    -webkit-border-radius: 0 0 0 0.25em;<br />    -moz-border-radius: 0 0 0 0.25em;<br />    border-radius: 0 0 0 0.25em;<br />    z-index: 1;<br />}<br />.label-size:after {<br />    content: '';<br />    width: 0.5em;<br />    height: 0.5em;<br />    background: #fff;<br />    -webkit-border-radius: 4.167em;<br />    -moz-border-radius: 4.167em;<br />    border-radius: 4.167em;<br />    border: 1px solid #d99d38;<br />    -webkit-box-shadow: 0 1px 0 #faeaba;<br />    -moz-box-shadow: 0 1px 0 #faeaba;<br />    box-shadow: 0 1px 0 #faeaba;<br />    position: absolute;<br />    top: 0.667em;<br />    left: -0.083em;<br />    z-index: 9999;<br />}<br />#Label1 {<br />    height: 210px;<br />}<br />.label-size:hover {<br />    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));<br />    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));<br />    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));<br />    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));<br />    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));<br />    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');<br />    border-color: #e1b160;<br />}<br />.label-size:hover:before {<br />    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));<br />    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));<br />    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));<br />    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));<br />    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));<br />    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');<br />    border-color: #e1b160;<br />}<br />/*]]>*/<br /></style>.</div><br /><br />Setelah terpasang kodenya silahkan anda edit labelnya,cara pengeditannya lihat gambar di bawah.<br /><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">                                     <img alt="Label Ala Sora Template" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYYTwp6mhX_ViOYPW8HS0pTB67IOzE6Uy4vpaIF3Pys7uz9mdfyjz4Knbx3w7WVGckLZehZInVJtnFoTwDeXbT3tHOle3TKMkb6o1Ji9cRdCr-QDSfRPgaaBCoV10zzUPZky2Fz2kZfC0s/s320/label.jpg" title="Label" /> </div><div class="separator" style="clear: both; text-align: left;"><br />

CTRL+c untuk copy dan CTRL+v untuk mempaste script

Nah sobat blogger sampai disitu kita sudah selesai cara pembuatan Label Ala Sora Template,selanjutnya tinggal disave saja dan lihat hasilnya.Semoga bermanfaat,selamat mencoba dan semoga berhasil.