Add notice board with swivel effect in your Blog
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.
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/AVvXsEiJMxoKkqedtSsR9jRcZhb_5KLhD37b4L_b17htYwfIgN_Wurto321ugcjW7Lj_Fn6Jzn7nPACdO0iecanZGgCypdyMsfcQTUFDjRdd-mCCy3ehwNKqhntO0_GQAymMCv9hiOUgMg6aUN2T/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/AVvXsEiJMxoKkqedtSsR9jRcZhb_5KLhD37b4L_b17htYwfIgN_Wurto321ugcjW7Lj_Fn6Jzn7nPACdO0iecanZGgCypdyMsfcQTUFDjRdd-mCCy3ehwNKqhntO0_GQAymMCv9hiOUgMg6aUN2T/s320/BS+Notice+Board.png with your featured images.
- Replace this http://www.bloggerspice.com/ with your image link.
Post a Comment