Add beautiful board to the blog
Add this beautiful board to show some important notices,announcements etc. Follow the steps given below
Step 1 => Go to Layout
Step 2 => Click on Add a Gadget
step 3 => Select HTML/Javascript
Step 4 => Copy the code below and paste it
.lesson {
background: #41423F;
border: 1px solid #41423F;
box-shadow: inset 0 1px 1px #777;
color: #fff;
margin-top:30px;
padding: 0 30px;
position: relative;
width: 707px;
border-radius: 4px 4px 0 0;
}
.lesson h4 {
background: #fbdc60;
background: -moz-linear-gradient(top, #fbdc60 0%, #fad857 50%, #f6cd41 51%, #f2be2d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbdc60), color-stop(50%,#fad857), color-stop(51%,#f6cd41), color-stop(100%,#f2be2d));
background: -webkit-linear-gradient(top, #fbdc60 0%,#fad857 50%,#f6cd41 51%,#f2be2d 100%);
background: -o-linear-gradient(top, #fbdc60 0%,#fad857 50%,#f6cd41 51%,#f2be2d 100%);
background: -ms-linear-gradient(top, #fbdc60 0%,#fad857 50%,#f6cd41 51%,#f2be2d 100%);
background: linear-gradient(to bottom, #fbdc60 0%,#fad857 50%,#f6cd41 51%,#f2be2d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbdc60', endColorstr='#f2be2d',GradientType=0 );
border: 1px solid #F2BE2D;
color: #AC5C23;
font-size: 22px;
font-weight: normal;
margin: -1em auto 1em;
padding: 10px 0;
text-shadow: 0 1px 1px #fff;
text-transform: uppercase;
text-align: center;
width: 600px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px #fff;
box-shadow: inset 0 0 1px #fff;
}
.lesson:after {
background: url('http://imageshack.us/a/img440/4608/5hql.png');
bottom: -40px;
content: "";
height: 40px;
left: -3px;
position: absolute;
width: 773px;
}
</style>
<div class="lesson">
<h4>Title Of Content</h4>
<p>This gadget is provided by blogger gadgets.
For more gadgets for your blog and visit on this site http://thebloggergadget.blogspot.in/.
If you have any suggestions or doubts please comment on our site.
Hope you like this gadget and visit again.</p>
</div>
Step 5 => Save it and you are done.