• Open Account
  • Premium
  • Saturday 28 November 2015

    How to Add a Floating Christmas Widget on Blogger

    Christmas is around the corner and it is best that we develop a widget that will enable you to give your blog readers a warm Christmas welcome which will show how much welcomed are they in your blog. We have created this simple awesome floating Christmas widget for blogspot users and which I believe will work also on other blogging platforms as I created this widget using HTML which is acceptable in most blogging platforms and websites.

    Widget Blog Installation

    Installing this widget is very simple but to respect those that are new into blogging I will will show the steps that should be followed to successfully install this widget on their blogs.

    • Step 1 - Log into Blogger Dashboard and  select the blog you want to install the Christmas widget
    • Step 2 - Go Layout and select Add Widget on your blog layout page.
    • Step 3 - A window will pop up on your screen and in that window you will have to select JavaScript/HTML.
    • Step 4 - Upon selecting the JavaScript/html tab a window will open and you will have to paste the code below and save your widget.

    #floatingbyAjaxsurf {position:fixed;bottom:10px;right:10px;z-index:999;}
    #floatingbyAjaxsurf img {background:white;border:1px solid #ddd;padding:4px;width:100px;}
    <div id="floatingbyAjaxsurf">
    <img src="http://38.media.tumblr.com/2433f2f591186ac5aae8c891f60ba4ac/tumblr_mu04mbVocO1r9vyoko1_500.gif"/>

    Editing The Widget

    You might want to edit your widget in a way that suites your blog design then probably thats very simple as all you will have to do is to to follow the guide that is given below.

    • Widget backgroud

      You can alter the background of the widget simply by adding any colour of your choice, you don't need to hastle about which colour html code you will have to use as you will only be required to use real colour names such as blue,red, green etc.  You will only have to change the colour name.

      background:white;border:1px solid #ddd;padding:4px
    • Widget Width

      The current width used on the image is 100px which you can also alter on a way that suites you but I will recommend that you don't change it.
    • Widget Image

      I have decided to use a Christmas image with this link http://38.media.tumblr.com/2433f2f591186ac5aae8c891f60ba4ac/tumblr_mu04mbVocO1r9vyoko1_500.gif  but you can use the image of your choice depending on your choice of image or season, maybe Easter, Halloween and other holidays because this does not make this widget strictly for Christmas but you can adjust it by having your own image. 
    well that is it, wish you the best blogging experience ever and the best blogging experience. suppose you face any difficulties with installing the the widget please feel free to let me know by leaving your comments in the box below.

    Sifiso Nkwanyana

    Author & Editor

    I hope you have recieved all the information you seek and thank you once more for browsing our website we hope to hear from you soon.


    Post a Comment

    Although every comment is appreciated, due to time limitations I might not be able to respond to everyone. Keep it in mind that we respect all comments by our readers but all spam comments and spam links will be deleted. Thanks for understanding!