Bikin Widget Social Slide Down di Sidebar

Ayo kita bikin widget social media Facebook dan Google+ yang bisa slide down. Facebook like atau Google+ follower terlihat setelah di klik. Jadi widget-nya akan nampak satu saja setelah klik sedangkan yang lainnya tersembunyi. Agar lebih jelas lihat screenshot di bawah ini.

Bagaimana cara membuatnya?

Kita butuh HTML, JavaScript, dan CSS berikut.

HTML

<div id='socialdown'>
    <ul>
        <li class='has-sub'><a href='#' title='We Are On Facebook'><span>We Are On Facebook</span></a>

            <ul>
                <li>
<span class="fb-like-box" data-href="https://www.facebook.com/laluabdrahman" data-width="300" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></span>
                </li>
            </ul>
        </li>
        <li class='has-sub'><a href='#' title='Google+ Followers'><span>Google+ Followers</span></a>

            <ul>
                <li style="padding-top:10px;padding-left:22px"><span class="g-plus" data-action="followers" data-height="200" data-href="https://plus.google.com/+laluabdrahman" data-source="blogger:blog:followers" data-width="300">  </span>

                </li>
            </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Subscribe This Blog</span></a>

            <ul>
                <li style="padding:15px;font-size:11px;text-align:left;line-height:1.4em;"><span>Enter your email address to get the latest update from Jelasinblog on box below</span>

                    <form style="padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=JelasInBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
                        <input class="enteryouremail" name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email....&quot;;}' onfocus='if (this.value == &quot;Enter your email....&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....' />
                        <input type="hidden" value="JelasInBlog" name="uri" />
                        <input type="hidden" name="loc" value="en_US" />
                        <input class="submitbutton" type="submit" value="Subscribe" />
                    </form>
                </li>
            </ul>
        </li>
    </ul>
</div>

JavaScript

$('#socialdown > ul > li > a').click(function () {
    $('#socialdown li').removeClass('active');
    $(this).closest('li').addClass('active');
    var checkElement = $(this).next();
    if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideUp('normal');
    }
    if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#socialdown ul ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
    }
    if ($(this).closest('li').find('ul').children().length == 0) {
        return true;
    } else {
        return false;
    }
});

(function () {
    window.___gcfg = {
        'lang': 'en'
    };
    var po = document.createElement('script');
    po.type = 'text/javascript';
    po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
})();

(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

CSS

#socialdown, #socialdown ul, #socialdown li, #socialdown a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    font-weight: normal;
    text-decoration: none;
    font-family:'Lato', sans-serif;
    font-size: 14px;
    position: relative;
}
#socialdown a {
    line-height: 1.7;
    padding: 6px 15px;
}
#socialdown {
    width: 300px;
}
#socialdown > ul > li > a {
    font-size: 18px;
    display: block;
    color: #ffffff;
    text-shadow: 0 1px 1px #000;
    background: #499bea;
    background: linear-gradient(to bottom, #499bea 0%, #207ce5 100%);
}
#socialdown > ul > li > a:hover {
    text-decoration: none;
}
#socialdown > ul > li.active {
    border-bottom: none;
}
#socialdown > ul > li.active > a {
    background: #b3dced;
    background:linear-gradient(to bottom, #b3dced 0%, #2fc4fa 100%);
    color: #555;
    text-shadow: 0 1px 1px #b3dced;
}
#socialdown > ul > li.has-sub > a:after {
    content:'';
    position: absolute;
    top: 15px;
    right: 10px;
    border: 5px solid transparent;
    border-left: 5px solid #ffffff;
}
#socialdown > ul > li.has-sub.active > a:after {
    right: 14px;
    top: 17px;
    border: 5px solid transparent;
    border-top: 5px solid #555;
}
#socialdown ul ul {
    padding: 0;
    display: none;
}
#socialdown ul ul a {
    background: #efefef;
    display: block;
    color: #797979;
    font-size: 13px;
}
#socialdown ul ul li {
    background: #efefef;
    border-bottom: 1px solid #c9c9c9;
}
#socialdown ul ul li:last-child {
    border: none;
}
.submitbutton {
    background: #FF8000;
    border: 1px solid #F66303;
    font: bold 12px Arial, sans-serif;
    color: #fff;
    height: 25px;
    padding: 0 8px;
    margin: 0 0 0 5px;
    cursor: pointer;
}
.enteryouremail {
    background: #fff !important;
    border: 1px solid #d2d2d2;
    padding: 0px 8px 0px 8px;
    color: #a19999;
    font-size: 12px;
    height: 25px;
    width: 162px;
    margin: 0px;
}
.enteryouremail:focus {
    outline:none
}

Lebih jelas klik tombol lihat demo.

Lihat Demo

Selamat mencoba :)