Sample JQuery based HTML widget, which uses 3rd party jquery plugins . For styling it is easy to maintain with SCSS, as we need the nested style so that the widget style don't hamper the site style.

Jquery HTML Widget

/*
 * Reference: http://alexmarandon.com/articles/web_widget_jquery/
 * Slider used: http://bxslider.com/examples
 * Shadow effects: http://www.paulund.co.uk/creating-different-css3-box-shadows-effects
 * Blogspot JSON feed: http://beautifulbeta.wikidot.com/json-feeds
 *
 * Usage:
 * Add the following code in the html
 *
 * ------------------------------------------------------------------------------------------------
 * <script src="http://jquery-widget.herokuapp.com/assets/blogger-widget.js" type="text/javascript"></script>
 * <div data-blog-name="jitu-blog" data-no-css="false" class="blogger-jquery-widget effect6"></div>
 * ------------------------------------------------------------------------------------------------
 *
 * */
(function() {
// Localize jQuery variable
    var jQuery;

    /******** Load jQuery if not present *********/
    if (window.jQuery === undefined) {
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type","text/javascript");
        script_tag.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js");
        if (script_tag.readyState) {
            script_tag.onreadystatechange = function () { // For old versions of IE
                if (this.readyState == 'complete' || this.readyState == 'loaded') {
                    scriptLoadHandler();
                }
            };
        } else {
            script_tag.onload = scriptLoadHandler;
        }
        // Try to find the head, otherwise default to the documentElement
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    } else {
        // The jQuery version on the window is the one we want to use
        jQuery = window.jQuery;
        main();
    }

    /******** Called once jQuery has loaded ******/
    function scriptLoadHandler() {
        // Restore $ and window.jQuery to their previous values and store the
        // new jQuery in our local jQuery variable
        jQuery = window.jQuery.noConflict();
        // Call our main function
        main();
    }

    /******** Our main function ********/
    function main() {
        // Load image slider library
        jQuery.getScript("http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.min.js");
        //write the code in the following way if your widget is dependent on jquery libraries
        jQuery.getScript("http://bxslider.com/sites/default/files/jquery.bxSlider.min.js", function() {
            jQuery(document).ready(function($) {
                $(".blogger-jquery-widget").each(function(index) {
                    var isWidget = $(this).data("widget");
                    if(!isWidget) {
                        $(this).data("widget", true);
                        make_widget($, $(this));
                    }
                });
            });
        });
    }

    function make_widget($, widget) {
        var blogName = widget.data('blog-name');
        /******* Load CSS *******/
        // if data-no-css is set to false then do not load css, so that the user can customize the style him self
        if(widget.data('no-css') != true)
            addCss("http://jquery-widget.herokuapp.com/assets/application.css");

        var jsonp_url = "http://" + blogName + ".blogspot.com/feeds/posts/default?alt=json-in-script&callback=?";
        $.getJSON(jsonp_url, function(data) {
            var root = $('<ul/>');
            $.each(data.feed.entry, function(i, item){
                var tags = "";
                if(item.category) {
                    $.each(item.category, function(i, tag){
                        tags += "<li>" + tag.term + "</li>";
                    });
                }

                var published_date = format_date(new Date(item.published.$t));
                var item_str = '<li>' +
                    '<h1>' + item.title.$t + '</h1>' +
                    '<span class="posted_on">Posted on ' + published_date + '</span>' +
                    '<ul class="categories">' + tags + '</ul>' +
                    '</li>';
                $(item_str).appendTo(root);
            });
            root.appendTo(widget);
            root.bxSlider({
                auto: true,
                easing: 'easeInQuint',
                speed: 1000
            });

            adjustArrowTop($, widget);
        });
    }

    function addCss(url) {
        var css_link = jQuery("<link>", {
            rel: "stylesheet",
            type: "text/css",
            href: url
        });
        css_link.appendTo('head');
    }
    
    function adjustArrowTop($, widget) {
        var top = widget.height() / 2;
        widget.find(".bx-prev").css("top", top);
        widget.find(".bx-next").css("top", top);
    }

    function trimText(text, length) {
        text = text || "";
        length = parseInt(length);
        return text.length > length ? (text.substring(0,length) + "...") : text;
    }

    function format_date(date) {
        var d = date.getDate();
        var month = date.getMonth();
        var year = date.getFullYear();
        return d + "/" + month + "/" + year;
    }
})(); // We call our anonymous function immediately

Widget styling

.blogger-jquery-widget {

  div, li, ul, ol {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }

  span.posted_on {
    font-size: 80% !important;
  }

  .categories li {
    font-size: 70% !important;
    margin: 0px 7px 0px 0px !important;
    border: 1px;
    float: left;
    display: block;
    border-radius: 5px;
    border: 1px;
    border-color: #000000 !important;
    background-color: #dedede !important;
    padding: 1px 5px 1px 5px;
  }

  .bx-wrapper {
    margin: 0 auto;
    padding: 0px;
    overflow: hidden;
  }

  .bx-window {
    margin: 10px 30px 10px 30px;
    overflow: hidden;
  }

  .bx-prev, .bx-next {
    position: absolute;
    left: 8px;
    background: transparent url(http://tympanus.net/Tutorials/ResponsiveImageGallery/images/nav_thumbs.png) no-repeat top left;
    width: 14px;
    height: 26px;
    margin-top: -13px;
    text-indent: -9000px;
    cursor: pointer;
    opacity: 0.8;
  }

  .bx-prev {
    /*right: 8px;
    left: auto;
    background-position: top right;*/
  }

  .bx-next {
    right:8px;
    left:auto;
    background-position:top right;
  }

  .bx-next:hover,
  .bx-prev:hover {
    /*background-position: 0 0;*/
    opacity:1.0;
  }

  /*start / stop*/
  .bx-auto {
    text-align: center;
  }

  .bx-start {
    color: #f1eee7;
    font-size: 14px;
    background: #838383;
    padding: 4px 7px;
    border-radius: 3px;
    text-transform: capitalize;
  }

  .bx-start:hover {
    background: #525044;
    text-decoration: none;
  }

  /*pager*/
  .bx-pager {
    text-align: center;
  }

  .bx-pager a {
    font-size: 16px;
    color: #838383;
    padding: 0 10px;
  }

  .bx-pager .pager-active,
  .bx-pager a:hover {
    color: #de312a;
    text-decoration: none;
  }

  /* shadow effect */

  & {
    background: #FFF;
  }

  /*==================================================
   * Effect 6
   * ===============================================*/
  &.effect6 {
    position: relative;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  }

  &.effect6:before, &.effect6:after {
    content: "";
    position: absolute;
    z-index: -1;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    top: 50%;
    bottom: 0;
    left: 10px;
    right: 10px;
    -moz-border-radius: 100px / 10px;
    border-radius: 100px / 10px;
  }

  &.effect6:after {
    right: 10px;
    left: auto;
    -webkit-transform: skew(8deg) rotate(3deg);
    -moz-transform: skew(8deg) rotate(3deg);
    -ms-transform: skew(8deg) rotate(3deg);
    -o-transform: skew(8deg) rotate(3deg);
    transform: skew(8deg) rotate(3deg);
  }
}

Webtuts online web tutorial