Hello! Welcome to DaudBD Blog.
In this article, I will share with you the How To Create Top Category Widget in Blogger Templates
Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click layout.
Step 3: Click the arrow down icon next to 'HTML/Javascript" Gadget. button.
Step 4: Click Edit HTML, you will be redirected to editing page.
Step 5: Now add the following html css just above to gadget box tag.
Below Code Copy
Category Widget Style 1
See Demo cover Pic
<div class="tags-wrapper">
<div class="menu-cat" id="menu-cat">
<div id="header-social">
<a href="https://www.bfclive.com/search/label/Bollywood?max-results=10" rel="noopener"><span class="headbt bollywood"> Bollywood </span></a> <a href="https://www.bfclive.com/search/label/Bengali?max-results=10" target="_blank" rel="noopener"><span class="headbt desijunx"> Bengali </span></a> <a href="https://www.bfclive.com/search/label/Japanese?max-results=10"><span class="headbt buttontg"><i class="fa fa-telegram"></i> Japanese </span></a> <a href="https://t.me/CinebazOfficial"><span class="headbt howtodl"> How To Download <i class="fa fa-eye"></i> </span></a>
</div>
<ul>
<li><a href="https://tellybd.com/page-cat/42/Adult-Movies.html">Adult Movies</a></li>
<li><a href="/search/label/720p?&max-results=18">720p HEVC Movies</a></li>
<li><a href="/search/label/Dual%20Audio?&max-results=18">Dual Audio</a></li>
<li><a href="/search/label/Hindi%20Dubbed?&max-results=18">Hindi Dubbed</a></li>
<li><a href="#">Hindi Dubbed</a></li>
<li><a href="#">Hindi TV Shows</a></li>
<li><a href="#">Hollywood Movies</a></li>
<li><a href="#">Malayalam Movies</a></li>
<li><a href="#">Marathi Movies</a></li>
<li><a href="#">Mobile Movies</a></li>
<li><a href="#">Multi Audio</a></li>
<li><a href="#">Pakistani Movies</a></li>
<li><a href="#">Pc Games</a></li>
<li><a href="#">Pre Release</a></li>
<li><a href="#">Punjabi Movies</a></li>
</ul>
</div>
</div>
/* (Style 2) by DaudBD.Com */
<style>.tags-wrapper{margin:0 auto;}.tags-wrapper .widget-content{position:relative;margin:15px auto 0;}.tags-wrapper .menu-cat{text-align:center;}.tags-wrapper .menu-cat li{position:relative;display:inline-block;margin:0;}.tags-wrapper .menu-cat li a{background-color:#df133c;text-transform:uppercase;border-radius:15%;color:#fff;padding:5px 5px;text-align:center;text-decoration:none;display:inline-block;font-size:14px;margin:4px 2px;-webkit-transition-duration:0.4s;transition-duration:0.4s;cursor:pointer;min-width:70px;box-shadow:0 0 32px -10px #fe0000;}.tags-wrapper .menu-cat li a:hover{}.headbt{font-family:poppins,sans-serif;color:#fff;padding:10px 15px;text-align:center;text-decoration:none;display:inline-block;font-size:14px;margin:5px 1px;-webkit-transition-duration:0.4s;transition-duration:0.4s;cursor:pointer;box-shadow:0 0 32px -10px #fe0000;}.bollywood{background-color:#44b81a;text-transform:uppercase;border-radius:15%;font-weight:500;}.desijunx{background-color:red;text-transform:uppercase;border-radius:15%;font-weight:500;}.buttontg{background-color:#009DE1;text-transform:uppercase;border-radius:15%;}.howtodl{background-color:#DF9A17;text-transform:uppercase;border-radius:15%;}</style>
You may want to read this post :
Demo SEE
a href="#" "#"Changed Your Blog Url
Step 6: Lastly, Save the changes by clicking on this icon
That's done!
Category Widget Style 2
See Demo Pic
<div class="s2">
<div class="tags-wrapper">
<div class="menu-cat" id="menu-cat">
<ul>
<li><a href="/search/label/Adult?&max-results=18">✨ 18+ Adult Contents</a></li>
<li><a href="/search/label/720p?&max-results=18">720p HEVC Movies</a></li>
<li><a href="/search/label/Dual%20Audio?&max-results=18">Dual Audio</a></li>
<li><a href="/search/label/Hindi%20Dubbed?&max-results=18">Hindi Dubbed</a></li>
<li><a href="/search/label/Tv%20Series?&max-results=18">Hindi TV Shows</a></li>
<li><a href="/search/label/Tv%20Series?&max-results=18">WEB Series</a></li>
<li><a href="/search/label/WWE?&max-results=18">WWE</a></li>
<li><a href="/search/label/Tv%20Series?&max-results=18">WEB Series</a></li>
<li><a href="#">Hindi Dubbed</a></li>
<li><a href="#">Hindi TV Shows</a></li>
<li><a href="#">Hollywood Movies</a></li>
<li><a href="#">Malayalam Movies</a></li>
<li><a href="#">Marathi Movies</a></li>
<li><a href="#">Mobile Movies</a></li>
<li><a href="#">Multi Audio</a></li>
<li><a href="#">Pakistani Movies</a></li>
<li><a href="#">Pc Games</a></li>
<li><a href="#">Pre Release</a></li>
<li><a href="#">Punjabi Movies</a></li>
<li><a href="#">Single Video Songs</a></li>
<li><a href="#">Tamil Movies</a></li>
<li><a href="#">Telugu Movies</a></li>
<li><a href="#">Trailers</a></li>
<li><a href="#">Uncategorized</a></li>
<li><a href="#">WEB Series</a></li>
</ul>
</div>
</div>
</div>
<style>.s2 .tags-wrapper .widget>.widget-title{display:none}.s2 .tags-wrapper{margin:0 auto;}.s2 .tags-wrapper .widget-content{position:relative;margin:15px auto 0;}.s2 .tags-wrapper .menu-cat{text-align:center;}.s2 .tags-wrapper .menu-cat li{position:relative;display:inline-block;margin:0 2px 4px 0;}.s2 .tags-wrapper .menu-cat li a{display:block;height:35px;background-color:#ff8428;color:#ffffff;font-size:15px;line-height:35px;font-weight:500;padding:0 15px;border-radius:0px;transition:all .17s ease;box-shadow:0 1px 1px rgba(204,197,185,.5);}.s2 .tags-wrapper .menu-cat li a:hover{backgroulnd-color:#383838;color:#ffffff;box-shadow:5px 5px #009d51;-ms-transform:scale(1.1);-webkit-transform:scale(1.1);transform:scale(1.1);transition:all .17s ease;}</style>
/*(Style 2) by DaudBD.Com*/
Category Widget Style 3
See Demo Pic
<div class="s3">
<div class="tags-wrapper">
<div class="menu-cat" id="menu-cat">
<ul>
<li><a href="/search/label/Adult?&max-results=18">✨ 18+ Adult Contents</a></li>
<li><a href="/search/label/720p?&max-results=18">720p HEVC Movies</a></li>
<li><a href="/search/label/Dual%20Audio?&max-results=18">Dual Audio</a></li>
<li><a href="/search/label/Hindi%20Dubbed?&max-results=18">Hindi Dubbed</a></li>
<li><a href="/search/label/Tv%20Series?&max-results=18">Hindi TV Shows</a></li>
<li><a href="/search/label/Tv%20Series?&max-results=18">WEB Series</a></li>
<li><a href="/search/label/WWE?&max-results=18">WWE</a></li>
<li><a href="/search/label/Tv%20Series?&max-results=18">WEB Series</a></li>
<li><a href="#">Hindi Dubbed</a></li>
<li><a href="#">Hindi TV Shows</a></li>
<li><a href="#">Hollywood Movies</a></li>
<li><a href="#">Malayalam Movies</a></li>
<li><a href="#">Marathi Movies</a></li>
<li><a href="#">Mobile Movies</a></li>
<li><a href="#">Multi Audio</a></li>
<li><a href="#">Pakistani Movies</a></li>
<li><a href="#">Pc Games</a></li>
<li><a href="#">Pre Release</a></li>
<li><a href="#">Punjabi Movies</a></li>
<li><a href="#">Single Video Songs</a></li>
<li><a href="#">Tamil Movies</a></li>
<li><a href="#">Telugu Movies</a></li>
<li><a href="#">Trailers</a></li>
<li><a href="#">Uncategorized</a></li>
<li><a href="#">WEB Series</a></li>
</ul>
</div>
</div>
</div>
/*(Style 3) by DaudBD.Com*/
<style>.s3 .tags-wrapper .widget>.widget-title{display:none}.s3 .tags-wrapper{margin:0 auto;}.s3 .tags-wrapper .widget-content{position:relative;margin:15px auto 0;}.s3 .tags-wrapper .menu-cat{text-align:center;}.s3 .tags-wrapper .menu-cat li{position:relative;display:inline-block;margin:1px 1px;}.s3 .tags-wrapper .menu-cat li a{display:inline-block;padding:6px 18px;line-height:1;border:1px solid white;background-color:teal;color:white;font-weight:500!important;margin-bottom:3px;margin-top:3px;border-radius:5px;}.s3 .tags-wrapper .menu-cat li a:hover{transition:all .50s ease;border-radius:50px;background:none;border:1px solid red;color:red;}</style>Conclusion
This is all about adding the How To Create Top Category Widget in Blogger Templates . I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box. Thank you!
