<style>
    /* Tabbed Social Widget By Helper Blogger - helperblogger.com */
    /* CSS Code Start */
    
    ul.tabs {
        padding: 7px 0;
        font-size: 0;
        margin: 0;
        list-style-type: none;
        text-align: left;
    }
    ul.tabs li {
        display: inline;
        margin: 0;
        margin-right: 3px;
        /*distance between tabs*/
    }
    ul.tabs li a {
        font: normal 12px Verdana;
        text-decoration: none;
        position: relative;
        padding: 25px 10px 0px 10px;
        border: 1px solid #CCC;
        border-bottom-color: #B7B7B7;
        color: #000;
        background: #F0F0F0 url(tabbg.gif) 0 0 repeat-x;
        border-radius: 3px 3px 0 0;
        outline: none;
    }
    ul.tabs li a:visited {
        color: #000;
    }
    ul.tabs li a:hover {
        border: 1px solid #B7B7B7;
        background: #F0F0F0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiqyelRUyZ5t10jKMXm8dWF-oDTP51j7BUWYeWwWlPUla-wm5G0ALDkpgFk5J3lwVgWr9plO5hCi2ziy5Z8AzgYiVv78WRk3FLAK6fU1oHkHhG-s7cy7vnFI8vjUmhx5sUINfHaG46cpE/s1600/hb-tabbg.gif) 0 -50px repeat-x;
    }
    ul.tabs li.selected a,
    ul.tabs li.selected a:hover {
        position: relative;
        top: 0px;
        font-weight: bold;
        background: white;
        border: 1px solid #B7B7B7;
        border-bottom-color: white;
    }
    ul.tabs li.selected a:hover {
        text-decoration: none;
    }
    div.tabcontents {
        border: 1px solid #B7B7B7;
        padding: 10px;
        background-color: #FFF;
        border-radius: 0 3px 3px 3px;
        margin-top: -7px;
    }
    /* Tabbed Social Widget By Helper Blogger - helperblogger.com */
    /* End Code Start */
</style>


<script src="http://helperblogger.ucoz.com/code/hb-tabbed-social-widget.js" type="text/javascript"></script>
<ul class="tabs">
    <li class="selected">
        <a href="#view1">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwRNP8trYinT9eGAO3Ep9FC0v00QARuP23q0jPIExVaHB9VchwRggLhXW4gSJ9qCaLG6zfG-aIsSF7tozgcYrlkkbEeI8FwKyd-tB1aU0nFTTZArcuOD8UNce94V_JwcQdXQGfl84LbrM/s1600/helperblogger.com-fb.png" height="32" width="32" />
        </a>
    </li>
    <li>
        <a href="#view2">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikKGrQmseqJmCLGT8esmkGC7S1NEa8Htrukw7bkOrxsBF5Vqbi5Nrp85zzXOqY8hnNsW9oS3i0uY9dd_H6kI6hGezsK6N_j1GluxaybPx7KPzigZqlG03f2oLT2SmVTznxf2HY4HTyGGc/s1600/helperblogger.com-twitter.png" height="32" width="32" />
        </a>
    </li>
    <li>
        <a href="#view3">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwx1Uv_dvdwQOiihlmCOxaGJuJDrjlaEk0wT5NJKzmRFmqNeg-gttoGpTVR0qAQHYmQI3y47KNr6kRyZlM_rtzsDQ_txNI-0k6P_yt-kM4KE2nrQZJ54tsN2TM4mfzUS3i8zcDIC-tmYE/s1600/helperblogger.com-gplus.png" height="32" width="32" />
        </a>
    </li>
    <li>
        <a href="#view4">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Gsnu1XfKVtsANzJwHWeAzcDSwOE-XyaDVJ4wZ2zFD-JVsim398wyrce6y7q3AxYYCDMg6f8ART0Jmjy4jPZSWp4xxqBQ4WZv4gtIRgK6_JspVd1aR3BiQe7uh5A9tdofGe-Zf8G-uGY/s1600/helperblogger.com-pinterest.png" height="32" width="32" />
        </a>
    </li>
</ul>
<div class="tabcontents">
    <div id="view1">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhassa.boudri.19&amp

;width=285&height=180&colorscheme=light&show_faces

=true&header=false&stream=false&show_border=

false&appId=409936535724253" scrolling="no"

 frameborder="0" style="border:none; overflow:hidden; width:285px; height:180px;" allowtransparency="true"></iframe>
    </div>
    <div id="view2">
        <div id="twitter-box"></div>
        <script>
            var tw_user = 'boudrii1';
            var tw_width = 260;
            var tw_height = 250;
            var no_face = 8;
            (function() {
                var tw_box = document.createElement('script');
                tw_box.type = 'text/javascript';
                tw_box.async = true;
                tw_box.src = '//helperblogger.ucoz.com/code/hb-twitter.js';
                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);
            })();
        </script>
    </div>
    <div id="view3">
        <script src="https://apis.google.com/js/platform.js" async defer></script>
        <div class="g-person" data-width="250" data-href="//plus.google.com/u/0/105903291004126465850" data-layout="landscape" data-rel="author"></div>
    </div>
    <div id="view4">
        <a href="http://pinterest.com/helperblogger/">
            <img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" />
        </a>
    </div>
    <div style="clear: both; text-align: right;">
        <span style="font-size: xx-small;"><a href="http://www.helperblogger.com/" rel="nofollow" target="_blank">Blogger Widgets</a></span>
    </div>
</div>