Cara Membuat Label Efek Kertas Lipat Ala Arlina Desain

Assalamualaikum, pada kesempatan kali ini saya akan memberikan tutorial lagi untuk kalian semua. Jika kalian mengunjungi blog arlina tentu akan melihat label seperti efek kerta lipat kan.

Setelah saya iseng cari di google ternyata ada cara membuatnya, cukup dengan menggunakan CSS.

Bagaimana caranya!! Simak Artikel berikut ini.

Cara Membuat Label Efek Kertas Lipat Ala Arlina Desain

Langkah pertama tentu kalian buka dulu le Akun Blogger kamu.

Setelah itu pilih menu Tema kemudian klik Edit HTML, masukkan CSS di bawah ini di atas kode ]]></b:skin>

/* Label */
.Label ul{padding:0}.Label li{position:relative;overflow:hidden;display:inline-block;list-style:none;margin:0 2.5px 5px 2.5px;padding:0;font-size:14px;width:48%;float:left}.Label li a,.Label ul li span{background:#ecf0f1;color:#888;padding:8px 12px;display:block;font-size:13px;border-bottom:1px solid rgba(0,0,0,0.08);transition:initial;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.Label li a:before,.Label ul li span:before{content:'';position:absolute;top:0;right:0;border-width:0 10px 10px 0;border-style:solid;border-color:#fff #fff #dee1e2 #dee1e2;background:#dee1e2;display:block;width:0}.Label ul li span:before{border-color:#fff #fff #dee1e2 #dee1e2;background:#dee1e2}.Label li a:hover:before,.Label ul li span:hover:before{border-color:#fff #fff #57606f #57606f;background:#57606f}.Label li a:hover{background:#747d8c;color:#fff}.Label ul li span{background:#f24a4a;color:#fff}

Bila sudah ada CSS /* Label */ tinggal di ganti aja ya.

Nah itulah tutorial singkat Cara Membuat Label Efek Kertas Lipat Ala Arlina Desain, Googluck