Add notice board with swivel effect in your Blog

Sometime we use notice board in our blog for announcing something or we can display some featured post or Author through notice board. I have designed this widget to display something featured from your blog into your sidebar. I got some blog who highlight featured or top author or commentator at the top right sidebar of the blog to give some credit to contributor. So by using this widget you can easily highlight anything easily. I have added swivel effect on this widget. If you mouse over notice board then it will revolve or swivel constantly. And you can change the color and images according to your desire.  Hope this widget will help you to solve your problem. This Demo is looking little bit different from actual widget..However you would get the original widget like this Post image.

Live Demo

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
.Bloggerspice{animation:WAKloading 4s;-webkit-animation:WAKloading 4s;-o-animation:WAKloading 4s-moz-animation:WAKloading 4s;-ms-animation:WAKloading 4s;animation:WAKloading 4s;float:left;margin-left:5px;margin-top:5px;width:272px;height:179px;border: 10px solid #111111; border-radius:10px; padding:10px;-webkit-transition:all 4s ease-in-out;-moz-transition:all 4s ease-in-out;-o-transition:all 4s ease-in-out;transition:all 4s ease-in-out;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;background:#660099 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ4McAr841LhX4tmjODl-VlRgUjSb6AvLAXeGxSaTWVvPtyGy2_133ei9XkbLgVgXOwg9x7uJgoi7DcmjTng8gnSf7Aq2KspT5SOFeJRffCZHO9N7OIxMr8rLmiAQ7v4wbFeOaE50VnWEh/s320/BS+Notice+Board.png)no-repeat center;background-size:250px;}
.Bloggerspice:hover{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);
border-radius: 10px;
border: 10px solid #111111;
}/*widget by  www.bloggerspice.com  */
</style>
<div>
<a class="Bloggerspice" href="http://www.bloggerspice.com/"></a>
</div>
</div>

Customization 

• Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ4McAr841LhX4tmjODl-VlRgUjSb6AvLAXeGxSaTWVvPtyGy2_133ei9XkbLgVgXOwg9x7uJgoi7DcmjTng8gnSf7Aq2KspT5SOFeJRffCZHO9N7OIxMr8rLmiAQ7v4wbFeOaE50VnWEh/s320/BS+Notice+Board.png with your  featured images.
• Replace this http://www.bloggerspice.com/ with your image link.