Membuat Widget Label Dengan Efek Kertas Lipat

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.

Baca juga — Membuat Catatan Dengan Efek Kertas Lipat Di Postingan Blog.

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.

Nah, itulah postingan kali ini tentang Membuat Widget Label Dengan Efek Kertas Lipat. Semoga bermanfaat.