Thursday, 12 December 2019

How to Make the Latest Cloud Label

How to Make the Latest Cloud Label

How to Make the Latest Cloud Label
Thursday, 12 December 2019

How to Make the Latest Cloud Label


On this occasion I will share tutorials on how to create labels on blogs such as those on the shekhnilesh blog.

many bloggers who want to follow in the footsteps of Arlina Design in terms of the appearance of the blog to its entire contents, this is proven by many bloggers who use templates that adjust the Arlina Design blog.
Well here it is

How to Create a Cloud Label Like Arlina Design Blog

1. Please enter your respective blog, then open the HTML editor.
2. Paste the CSS code below right above the code]]> <b: skin> or </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 the template!
Info
If your template already has a CSS label, please replace it with the CSS above!
well, now go to the layout, then create a label widget, and select the list, please see the results.

Thus How To Make Cloud Labels Like Arlina Design Blog , hopefully useful.
How to Make the Latest Cloud Label
4/ 5
Oleh

Comments