begini caranya Membuat Label Dengan Efek Kertas Lipat
Sunday, June 23, 2019
Cara Mudah Membuat Widget Label Dengan
Efek Kertas Lipat, Membuat Label Efek Kertas Lipat ala Arlina Design, Membuat
Widget Label keren dan menarik.
Membuat Widget Label Dengan
Efek Kertas Lipat - Mungkin sobat sudah pernah
melihat efek kertas lipat di blog, salah satunya efek lipat pada widget label.
Efek kertas lipat pada widget ini adalah seperti pada widget label blog Arlina
Design. Pasti sobat sudah pernah dengar atau berkunjung di blog Arlina Design,
karena blog tersebut sudah cukup terkenal di kalangan blogger, kususnya blogger
tutorial.
Sebelumnya Saya sudah mebagikan template Viral Go, dan untuk kali ini Saya
akan coba membuat posting dengan judul Membuat Widget Label Dengan Efek
Kertas Lipat.
Membuat widget label dengan efek kertas ini akan menambah blog
Anda semakin terlihat lebih keren. Dan efek kertas lipat ini hanya menggunakan
CSS, jadi tidak perlu khawatir akan membuat loading blog Anda menjadi berat.
Jika Anda ingin coba membuat widget label dengan efek
kertas lipat, pada blog blog Anda, silahkan ikuti caranya
berikut ini.
Membuat Widget Label Dengan Efek Kertas
Lipat.
Masuk akun blogger, pilih menu Tema >> EDIT
HTML.
Kemudian simpan CSS di bawah ini diatas kode
]]></b:skin>
atau </style>
/* 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}
Simpan Tema
Jika sebelumnya pada template Anda sudah tersimpan CSS untuk
widget label, silahkan hapus CSS lama agar CSS tidak bentrok.