Insert Animated (close-able) Notice Box in Blogger Widget

Posted by Faheem Mustafa

Hello Readers:
Have you ever wanted to greet your visitor with something important message? or want to have your visitor a look at the most important content of your website. 
Than an Animated Notice Box (close-able)  blogger widget is the solution for your problem. 

Adding   Animated (close-able) Notice Blogger Widget
To Show The Notice Box Above/Below Blogger Post
1:  Log-in to your Blogger Account
2:  Go to Design > dit HTML
3:  Check the check-box "Expand Widget Templates"
4:  Press CTRL + F to find <p><data:post.body/></p>
5:  Copy the following Code and paste above/below the code to show the notice box above/below the post (Step 4)

        border: 1px solid;
        margin: 10px 0px;
        padding:15px 10px 15px 50px;
        background-repeat: no-repeat;
        background-position: 10px center;
        color: 00529B;
        background-color: BDE5F8;
        background-image: url(&39;');
</style><script src="" type="text/javascript">

<script type="text/javascript">
        $("#info").animate({left:" =10px"}).animate({left:"-5000px"});
<div id="info">
<a class="close" href="#close" style="float: right;"><img border="0" src="" /></a>
This Is Your Message .You can change it to Your need.

6:  Change the Red color Text with your desired Message you want to show your viewers
If you want to show this Animated (close-able) Notice Box in Blogger Widgets 

1:  Go to Design >Page Elements 
2:  Click on Add a Gadget and Select HTML?Java Script gadget.
3:  Copy the code shown in Scroll box and paste in HTML?Java Script Gadget and ENJOY!

blog comments powered by Disqus
Related Posts with Thumbnails