Membuat label keren ala BIE ~ blog sepot

Hallo,.. agan² ganteng dan cantik lagi pada ngapain nich :) udah sahurr apa belumm,.?? kalo' belum, cepet sahuurr dulu sana mumpung belum imsak /hehe
Untuk postingan kali ini saya akan share tutorial yang sangat menarik dan pasti nya buat mempercantik Tampilan BLog sobat biar tambah kereennn

yaitu Membuat label keren ala BIE
Okeyy, sobb langsung ajah menuju ke TKP :ngacir gak apke basa basi soalnya udah ngantuk banget ini,.. :) Untuk DEMO nya silahkan sobat lihat langsung di bawah ini,..

Kategori ala BIE

Animasi

Blogger

CSS

Image Efeck

Gnerator

Info

Islamic

Komputer

Motivasi

Network

Theme

Trick

Widget

Winamp

Gimana sobb,..?? keren kan,..???

Jika sobat minat/tertarik untuk membuat label keren ini silahkan sobat ikuti step by step

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Tata Letak » Tambahkan Gadget » HTML/Javascript

3. Kemudian tambahkan Script berikut ini ke dalam Gadget tersebut.

<style type="text/css">@media only screen and (max-width: 640px){
.BIEkategori{display:none;}
}
.BIEkategori{background-color:#dcdcdc;margin:0 auto;height:380px;min-width:290px;width:290px;transition:transform 1s ease-in-out;border-radius:10%}.BIEkategori .luhurx{width:200px;height:20px;margin:10px auto}.BIEkategori
.salox{border-radius:8px;height:8px;width:150px;margin:6px 0}.BIEkategori .kamerx{width:14px;height:14px;border-radius:20px;margin:3px 0 4px 30px}.BIEkategori .kamerx,.BIEkategori .salox{display:inline-block;background-color:#333}.BIEkategori .layarxa{background-color:#333;width:90%;height:300px;margin:0 auto}.BIEkategori .katingalixa{width:100%;height:300px;overflow:hidden}.BIEkategori .utamaxa{height:285px;background:linear-gradient(to bottom,#154277 0,#576e71 30%,#e1c45e 70%,#b26339 100%);color:#ddd}.BIEkategori .appspage{width:100%;height:285px}.BIEkategori .appspage{background:linear-gradient(130deg,#543958 0,#a06060 25%,#bea27b 50%,#9ca898 75%,#506d8d 100%) no-repeat center center fixed;back}.BIEkategori .appgrid{padding:2px 15px;font-size:18px}.BIEkategori .app{width:55px;height:50px;display:inline-block;float:left;padding-top:10px}.BIEkategori .app a{text-decoration:none;color:transparent}.BIEkategori .appicon{width:45px;height:30px;background-color:#f66;margin:0 auto;transition:background-color .2s ease-in;text-align:center;border-radius:35%;border:solid 2px white;padding:1px}.BIEkategori .appicon:hover{background-color:white;border:solid 1px #f66;cursor:pointer}.BIEkategori .appicon .icon{color:#e6e6fa;font-size:30px}.BIEkategori .appicon .icon:hover{color:#f66}.BIEkategori .appname{font-size:14px;color:#fff;height:20px;line-height:20px;text-align:center}.BIEkategori .hometime{text-align:center;padding:60px 0;font-family:"Segoe UI Light";font-size:30px}.BIEkategori .apptitle{height:35px;text-align:center;font-size:18px;line-height:35px;margin:0;text-transform:uppercase;background-color:#f66;color:white}.BIEkategori .bottom{width:100%;height:35px;margin:5px auto}.BIEkategori .button{min-width:80px;width:60px;max-width:60px;position:relative;float:left;text-align:center;color:#333;line-height:35px;font-family:"Consolas";font-weight:bolder;font-size:25px}.BIEkategori .home{background-color:#333;margin-left:27%!important;height:30px;min-width:130px;width:130px;max-width:130px;border-radius:15px}</style>
<div class="BIEkategori">
    <div class="luhurx">
    <div class="salox"></div>
    <div class="kamerx"></div>
  </div>
    <div class="layarxa">
    <div class="katingalixa">
      <div class="utamaxa">
        <div id="appspage" class="appspage">
          <div class="apptitle">Kategori ala BIE</div>
          <div class="appgrid">
            <div class="app"><a title="Animasi" href="http://irvan-efendy.blogspot.com/search/label/Animasi">
              <div class="appicon"><i class="icon icon-spinner"></i></div></a>
              <div class="appname">Animasi</div>
            </div>
            <div class="app"><a title="Tutorial Blog" href="http://irvan-efendy.blogspot.com/search/label/Tutorial%20Blog">
              <div class="appicon">
                <i class="icon icon-briefcase"></i>
              </div></a>
              <div class="appname">Blogger</div>
            </div>
            <div class="app"><a title="CSS" href="http://irvan-efendy.blogspot.com/search/label/CSS">
              <div class="appicon">
                <i class="icon icon-css3"></i>
              </div></a>
              <div class="appname">CSS</div>
            </div>
            <div class="app"><a title="Image Efeck" href="http://irvan-efendy.blogspot.com/search/label/Efeck%20Gambar">
              <div class="appicon">
                <i class="icon icon-picture"></i>
              </div></a>
              <div class="appname">Image Efeck</div>
            </div>
            <div class="app"><a title="Facebook Trick" href="http://irvan-efendy.blogspot.com/search/label/Facebook%20Trick">
              <div class="appicon">
                <i class="icon icon-facebook"></i>
              </div></a>
              <div class="appname">FB</div>
            </div>
            <div class="app"><a title="Generator Facebook" href="http://irvan-efendy.blogspot.com/search/label/Generator%20Facebook">
              <div class="appicon">
                <i class="icon icon-star"></i>
              </div></a>
              <div class="appname">Gnerator</div>
            </div>
            <div class="app"><a title="Informasi Umum" href="http://irvan-efendy.blogspot.com/search/label/Informasi%20Umum">
              <div class="appicon">
                <i class="icon icon-info-sign"></i>
              </div></a>
              <div class="appname">Info</div>
            </div>
            <div class="app"><a title="Islamic" href="http://irvan-efendy.blogspot.com/search/label/Islamic">
              <div class="appicon">
                <i class="icon icon-info"></i>
              </div></a>
              <div class="appname">Islamic</div>
            </div>
            <div class="app"><a title="Komputer Windows" href="http://irvan-efendy.blogspot.com/search/label/Komputer%20Windows">
              <div class="appicon">
                <i class="icon icon-laptop"></i>
              </div></a>
              <div class="appname">Komputer</div>
            </div>
            <div class="app"><a title="Kumpulan KataKata" href="http://irvan-efendy.blogspot.com/search/label/Kumpulan%20Kata%20Kata">
              <div class="appicon">
                <i class="icon icon-heart"></i>
              </div></a>
              <div class="appname">Kata2</div>
            </div>
            <div class="app"><a title="Networking" href="http://irvan-efendy.blogspot.com/search/label/Networking">
              <div class="appicon">
                <i class="icon icon-signal"></i>
              </div></a>
              <div class="appname">Network</div>
            </div>
            <div class="app"><a title="Template Blog" href="http://irvan-efendy.blogspot.com/search/label/Template">
              <div class="appicon">
                <i class="icon icon-tags"></i>
              </div></a>
              <div class="appname">Tmplate</div>
            </div>
            <div class="app"><a title="Tips & Trick" href="http://irvan-efendy.blogspot.com/search/label/Tips%20dan%20Trick">
              <div class="appicon">
                <i class="icon icon-trophy"></i>
              </div></a>
              <div class="appname">Trick</div>
            </div>
            <div class="app"><a title="Tutorial Photoshop" href="http://irvan-efendy.blogspot.com/search/label/Tutorial%20Photoshop">
              <div class="appicon">
                <i class="icon icon-leaf"></i>
              </div></a>
              <div class="appname">Pshop</div>
            </div>
            <div class="app"><a title="Widget Blog" href="http://irvan-efendy.blogspot.com/search/label/Widget%20Blog">
              <div class="appicon">
                <i class="icon icon-rocket"></i>
              </div></a>
              <div class="appname">Widget</div>
            </div>
            <div class="app"><a title="Skin Winamp" href="http://irvan-efendy.blogspot.com/search/label/Winamp%20Skins">
              <div class="appicon">
                <i class="icon icon-magic"></i>
              </div></a>
              <div class="appname">Winamp</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="home"></div>
  </div>
</div>

4. Lalu klik save dan lihat hasil nya

Oke cukup sekian dulu Tutorial tentang cara Membuat label/kategori ala BIE Semoga tutorial ini bermanfaat buat sobat semua nya :) UpsS,.. jangan lupa corat coret di komentar ya agan²

Terima kasih telah membaca artikel tentang Membuat label keren ala BIE di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.