How to add labels beautifully in Blogger blog


Change the shape of the cloud of labels beautifully and elegantly in the blogger blog, an addition that makes your blog with beautiful and attractive tools, as it is an addition that will dazzle your blog followers

Names in Blogger Blog play an important role in introducing visitors to the sections and categories of your blog and make visitors move easily within your blog, as it will increase your blog with an aesthetic touch

This plugin is used by most bloggers to improve their blogs, and it is used on the best and broadest blogger blogs.

How to add beautifully labels to Blogger blog

How to add the tool in Blogger blog

go to the

control Board


HTML / JavaScript HTML tool added

 <style type="text/css">.Blogger-Widget-ahtrafy-up a { display:block; background:#eee; border:1px solid #ccc; margin: 0 0 20px 0; height:65px; width:150px; overflow:hidden; text-decoration:none; font-family:inherit; font-size:16px; color:#000000; text-shadow:0 1px 2px rgba(0, 0, 0, 0.75); } .Blogger-Widget-ahtrafy-up h5 { color:#000000; margin-top:0px; height:65px; text-align:center; line-height:65px; -webkit-transition: margin-top 0.2s linear; } .Blogger-Widget-ahtrafy-up a:hover h5{ margin-top:-90px; } .Blogger-Widget-ahtrafy-up div { font-family:inherit; font-size:17px; color:#FFFFFF; text-align:center; padding:0px; opacity: 0;  -webkit-transition: all 0.3s linear; -webkit-transform: rotate(10deg); } .Blogger-Widget-ahtrafy-up a:hover div { opacity: 1; -webkit-transform: rotate(0deg); } .Blogger-Widget-ahtrafy-up a:nth-child(1) div { background: #EF7901; line-height:70px;} .Blogger-Widget-ahtrafy-up a:nth-child(2) div { background: #98bf0d; line-height:70px;} .Blogger-Widget-ahtrafy-up a:nth-child(3) div { background: #01b0ec; line-height:70px;} .Blogger-Widget-ahtrafy a{ text-decoration:none; margin:10px; font-family:inherit; font-size:8px; font-weight:bold; color:#000000; overflow:hidden;-webkit-transition: All 1s ease;-moz-transition: All 1.5s ease;-o-transition: All 1.5s ease;-ms-transition: All 1.5s ease;transition: All 1.5s ease; } .Blogger-Widget-ahtrafy a:hover{ text-decoration:none; margin:75px; font-family:inherit; font-size:13px; font-weight:bold; color:#1fd4e9;-webkit-transition: All 1s ease;-moz-transition: All 1s ease;-o-transition: All 1s ease;-ms-transition: All 1s ease;transition: All 1s ease; } </style>   <section class="Blogger-Widget-ahtrafy-up"><a href=""><h5>
</a><section class="Blogger-Widget-ahtrafy-up"><a href=""><h5>
</a><a href=""><h5>
</a><a href=""><h5>
</a></section></section></section><section class="Blogger-Widget-ahtrafy"><a href="">Blogger-Widget</a></section>

Do not forget to change the links of the sections of my blog with the links for your blog, and also do not forget to change the names of the other sections in the sections of your blog

You can control the length and the special width as well

height: 65px;

width: 150px;

Adding notes in blogger blog professionally

How to create a contact us page for blogger blogs