Cara Membuat Label Seperti Blog Arlina Design

Pekanan.com | Cara membuat Label keren seperti alina design.

pada kesempatan kali ini saya akan berbagi tutorial cara untuk membuat label pada blog seperi yang ada di blog arlina design.

seperti yang sobat ketahui, baru-baru ini arlina design merombak tampilan blognya, yang pasti tampilan barunya terlihat lebih menarik dan cantik.


banyak para blogger yang ingin mengikuti jejak arlina design dari segi tampilan blog sampai seluruh isinya, ini terbukti banyak blogger yang menggunakan template yang menyesuaikan blog arlina design.

nah, pada kali ini saya akan memberikan salah satu fitur yang ada pada template arlina design, yaitu tampilan label yang pada saat ini terpasang pada blog arlina design.

lalu bagaimana cara untuk membuat label seperti alina design, yuk ikuti tutorialnya dibawah ini:

Cara Membuat Label Cloud Seperti Blog Arlina Design


1. silahkan masuk ke blog sobat masing-masing, lalu buka HTML editor.
2. paste kan kode CSS dibawah ini tepat 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}
3. save template!

Info
Jika pada template sobat sudah ada CSS label, silahkan ganti dengan CSS yang diatas!

nah, sekarang masuk ke tata letak, lalu buat widget label, dan pilih yang list, silahkan lihat hasilnya.

Demikian cara Cara Membuat Label Cloud Seperti Blog Arlina Design, semoga bermanfaat.