Create A Styles Custom Description Widget - UNPLUG.DOC

Hello friends, welcome to The Vlogger-Blogger, in today's article I'm going to show you how to create a custom style description widget on your blogger.com site, so stay tuned to this article to learn more.

Custom style description widget

In custom description widget, you can provide information about your blog to your readers who you provide, and also you can show your blog logo or any photo in this widget, it will make your blog look good. Will give beauty, and readers who are interested in you will have a good relationship with you.

Creating a custom style description widget

Friends, some time ago I installed a custom style description widget on my blog, so all my readers loved it, and some readers liked it too, and all my readers want me to teach them how to create a custom style description widget. So let's find out how you too can create a custom description widget on your blog.

Step 1. Adding CSS Codes

Add the following CSS just above the ]]> </ b: skin> tag.

CSS CODE

/*Alert Box by The Vlogger-Blogger*/
.avbox{
background-color:#e9ebee;
color: #58606B;
padding:10px;
margin:20px 0px;
border:1px solid #dddfe2;
border-radius:5px;
}
.avbox a{
  color: #1E2326;
  font-weight: bold;
}
.avbox.sucess{
color:#145724;
background-color:#d4edda;
border:1px solid #c3e6cb;
}
.avbox.sucess a{
  color: #0A2E12;
  font-weight: bold;
}
 .avbox.primary{
color:#014286;
background-color:#CBE5FE;
border:1px solid #b8daff;
}
.avbox.primary a{
    color: #0A315A;
    font-weight: bold;
}
 .avbox.danger{
color:#7A2930;
background-color:#f8d7da;
border:1px solid #f5c6cb;
}
.avbox.danger a{
  color: #491217;
  font-weight: bold;
}
 .avbox.warning{
color:#856404;
background-color:#fff3cd;
border:1px solid #ffeeba;
}
.avbox.warning a{
  color: #554104;
  font-weight: bold;
}

Go to blogger dashboard
Click for layout
Click to add a gadget
Click again HTML / JavaScript
Now you need to copy all of the below code and paste it into the content box.

HTML CODE

<div class='note'><p>&nbsp;</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR5xutvn-ucxpDqmFLN-G_VthRqsQVPKCqb_P1Gf16KjNTeG5GlF0Kgnj65-15ei-pq-gqydLTS9CRXcE02vBwOIpFArTM-i2nKifGgcDyk79Fw3jrAKpd1Ci5sBMQFjeFcMDPGlrl/w300/20211207_135522.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="130" data-original-width="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR5xutvn-ucxpDqmFLN-G_VthRqsQVPKCqb_P1Gf16KjNTeG5GlF0Kgnj65-15ei-pq-gqydLTS9CRXcE02vBwOIpFArTM-i2nKifGgcDyk79Fw3jrAKpd1Ci5sBMQFjeFcMDPGlrl/w300/20211207_135522.png" /></a></div><br /><p></p>This is one of the best Blogs for free Tips and Tricks tutorials about Blogging, YouTube, Facebook, Blogger, Life Style, Business, SEO Tips, much more. Which can be very very helpful for your daily life. this channel and stay tuned to this blog for further updates.</div>

Now you have to add the logo of your blog and about your blog at all the marked places and save it.