Cara Membuat Box Like Facebook, Recomended Google dan Twiiter

Lagi ngatuk nih tapi masih nyempatin buat postingan, lansung aja yah hasilnya sih seperti di bawah :

Jika berminat silahkan copy script di bawah dan simpan di widget HTML/Javascript

<div class="widget-content">
<style>
    /* Social Widget */
    #ABT-mashable-bar {
        border: 0; background:#333333; border:1px solid #333;
        margin-bottom: 10px; padding:8px;
        margin: 0 auto;
            width:270px;
    }
    .fb-likebox {
        background: #151515;
        padding: 10px 10px 0 10px;
       margin-top: -2px;
            height:30px;
    }
    .googleplus {
        background: #151515;
        border-top: 1px solid #333;
        border-bottom: 1px solid #333;
        border-image: initial;
        font-size: .90em;
        font-family: "Arial","Helvetica",sans-serif;
        color: #d3d3d3;
        padding: 9px 11px;
        line-height: 1px;}
    .googleplus span {
        color: #d3d3d3;
        font-size: 11px;
        position: absolute;
        display:inline-block;
        margin: 9px 70px;}
    .g-plusone {    float: left;}
    .twitter {
        background: #151515;
        padding: 10px;
        border: 1px solid #333;
        border-top: 0;}
    #mashable {
        background: #EBEBEB;
        border: 1px solid #CCC;
        border-top: 1px solid white;
        padding: 2px 8px 2px 3px;
        text-align: right;
        border-image: initial;}
    #mashable .author-credit {}
    #mashable .author-credit a {
        font-size: 10px;
        font-weight: bold;
        text-shadow: 1px 1px white;
        color: #1E598E;
        text-decoration:none;}
 
    </style>

   
    <!--begin of social widget by ptik-unm.blogspot.com--> <div style="margin-bottom:10px;"> <div id="ABT-mashable-bar"> <!-- Begin Widget --> <div class="fb-likebox"> <!-- Facebook --><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fptik-unm.blogspot.com&amp;send=false&amp;layout=standard&amp;width=250&amp;show_faces=false&amp;action=like&amp;colorscheme=dark&amp;font&amp;height=35&amp;appId=357231537664631" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:35px;" allowtransparency="true"></iframe></div> <div class="googleplus"> <!-- Google --> <span>Recommend us on Google!</span><div style="height: 20px; width: 90px; text-indent: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; background-position: initial initial; background-repeat: initial initial; " id="___plusone_0"><iframe allowtransparency="true" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; position: static; left: 0px; top: 0px; visibility: visible; width: 90px; height: 20px; " tabindex="0" vspace="0" width="100%" id="I0_1348161522111" name="I0_1348161522111" src="https://plusone.google.com/_/+1/fastbutton?bsv=pr&amp;url=http%3A%2F%2Fptik-unm.blogspot.com%2F&amp;size=medium&amp;count=true&amp;origin=http%3A%2F%2Fptik-unm.blogspot.com&amp;hl=en-US&amp;ic=1&amp;jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fgapi%2F__features__%2Frt%3Dj%2Fver%3DoSew68OZVx0.en.%2Fsv%3D1%2Fam%3D!qJoTPiXYHR-YY0x1eg%2Fd%3D1%2Frs%3DAItRSTOy8Bj3Rv76Kozo9jlSX6TbSolzbQ#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Conload&amp;id=I0_1348161522111&amp;parent=http%3A%2F%2Fptik-unm.blogspot.com" title="+1"></iframe></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script> </div> <div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;
    align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;
    lang=en&amp;link_color=&amp;screen_name=ptikUNM&amp;show_count=&amp;
    show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>

 <!--end of social widget--></div></div>
</div> 

Ubah semua yang berwarna merah jadi ID Anda, lalu Simpan