Hallo,.. agan
2 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,..
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 agan
2