Add notice board with swivel effect in your Blog

Add notice board with swivel effect in your Blog

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.
Add notice board with swivel effect in your Blog
4 Stars stars - "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 feat...

Post a Comment

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *