Add notice board with swivel effect in your Blog

Add notice board with swivel effect in your Blog

Comments: 0
data:blog.title
notice board

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(http://1.bp.blogspot.com/-JhcPtDexaTI/Ub2YVU4pdlI/AAAAAAAADjU/JJcRdaa6Sg4/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 http://1.bp.blogspot.com/-JhcPtDexaTI/Ub2YVU4pdlI/AAAAAAAADjU/JJcRdaa6Sg4/s320/BS+Notice+Board.png with your  featured images.
  • Replace this http://www.bloggerspice.com/ with your image link.

Speak Your Mind

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *