Advertisement

Home / CSS / Tutorial Blog / Membuat label keren ala BIE

Thursday, July 10, 2014

Membuat label keren ala BIE

By Unknown
On
ads

Hallo,.. agan2 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
FB
Gnerator
Info
Islamic
Komputer
Motivasi
Network
PS
Theme
Trick
Widget
Winamp

Gimana sobb,..?? keren kan,..???
Jika sobat minat/tertarik untuk membuat label keren ini silahkan sobat ikuti step by step

Simak langkah2 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 agan2

Membuat label keren ala BIE Rating: 4.5 Diposkan Oleh: Unknown
ads

Subscribe to: Post Comments (Atom)

Advertisement

 

Top