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

Planning

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="https://www.queen-news.com/search/label/SEO"><h5>
seo</h5>
<div>
Articles</div>
</a><section class="Blogger-Widget-ahtrafy-up"><a href="https://www.queen-news.com/search/label/Articles"><h5>
Articles</h5>
<div>
Politics</div>
</a><a href="https://www.queen-news.com/search/label/Politics"><h5>
Politics</h5>
<div>
Politics</div>
</a><a href="https://www.queen-news.com/search/label/Blogger"><h5>
Blogger</h5>
<div>
Blogger</div>
</a></section></section></section><section class="Blogger-Widget-ahtrafy"><a href="https://www.queen-news.com">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