Cara Memasang Widget Like Facebook, Google Plus, dan Twitter di Blog

Cara Memasang Widget Like Facebook, Google Plus, dan Twitter di Blog - Halo sobat Finest Info setelah kurang lebih 10 hari tidak memposting artikel di karenakan kesibukan di dunia nyata dan Alkhamdulillah pas tanggal 1 Juni saya menerima Nilai Ujian Nasional yang cukup memuaskan dan saya sangat ber terimakasih pada sobat Finest Info yang sudah mendo'akan saya tanpa do'a  itu mungkin saya tidak akan mendapat Nilai seperti ini. Cukup sudah basa-basinya sekarang kita lanjut ke postingan, disini kita akan membuat Widget Like Facebook, Google Plus, dan Twitter di Blog sebelum kita membuat widget ini anda harus tau dulu apa sih Widget Sharing Mix Box itu ? Widget Sharing Mix Box adalah nama sebuah Widget Sharing yang simple dan keren. Fitur yang ada dalam Widget ini yaitu :

•     Membuat Lingkaran Google plus

•     Tombol G+

•     Like Fanspage Facebook

•     Tombol Follow Twitter

 Hasil jadinya seperti gambar di bawah ini :

Berikut tutorial cara membuat widget Box G+, Like Facebook dan Twitter:
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<style>
        /* Social Widget */
        #MBT-mashable-bar {
            border: 0;
            margin-bottom: 10px;
            margin: 0 auto;
                width:250;
        }
        .fb-likebox {
            background: #fff;
            padding: 10px 13px 0 10px;
            border-right: 1px solid #D8E6EB;
           border-left: 1px solid #D8E6EB;
           border-bottom: 1px solid #D8E6EB;
            margin:0px;
                height:45px;
        }
        .googleplus {
            background: #F5FCFE;
            border-top: 1px solid #FFF;
            border-bottom: 1px solid #ebebeb;
            border-right: 1px solid #D8E6EB;
            border-left: 1px solid #D8E6EB;
            border-image: initial;
            font-size: .90em;
            font-family: "Arial","Helvetica",sans-serif;
            color: #000;
            padding: 9px 11px;
            line-height: 1px;}
        .googleplus span {
            color: #000;
            font-size: 11px;
            position: absolute;
            display:inline-block;
            margin: 9px 70px;}
        .g-plusone {    float: left;}
    .gplus {
            background: #fff;
            padding: 0px;
            border: 0px solid #C7DBE2;
            margin-bottom:-13px;}

        .twitter {
            background: #EEF9FD;
            padding: 10px;
            border: 1px solid #C7DBE2;
            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;}
        #email-news-subscribe .email-box{
            background: #EEF9FD;
            padding: 5px 10px;
            font-family: "Arial","Helvetica",sans-serif;
            border-top: 0;
            border-right: 1px solid #C7DBE2;
            border-left: 1px solid #C7DBE2;
            border-image: initial;
           height:35px;}
        #email-news-subscribe .email-box input.email{
            background:#FFFFFF;
            border: 1px solid #dedede;
            color: #999;
            padding: 7px 10px 8px 10px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            -o-border-radius: 3px;
            -ms-border-radius: 3px;
            -khtml-border-radius: 3px;
            border-radius: 3px;
            border-image: initial;
            font-family: "Arial","Helvetica",sans-serif;}
        #email-news-subscribe .email-box input.email:focus{color:#333}
        #email-news-subscribe .email-box input.subscribe{
            background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
            background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
            background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
            -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
            font-family: "Arial","Helvetica",sans-serif;
            border-radius:3px;
            -moz-border-radius:3px;
            -webkit-border-radius:3px;
            border:1px solid #cc7c00;
            color:white;
            text-shadow:#d08d00 1px 1px 0;
            padding:7px 14px;
            margin-left:3px;
            font-weight:bold;
            font-size:12px;
            cursor:pointer;
            border-image: initial;}
        #email-news-subscribe .email-box input.subscribe:hover{
            background: #ff9b00;
            background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
            background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
            filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
            outline:0;-moz-box-shadow:0 0 3px #999;
            -webkit-box-shadow:0 0 3px #999;
            box-shadow:0 0 3px #999
            background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
            background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
            -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
            border-radius:3px;
            -moz-border-radius:3px;
            -webkit-border-radius:3px;
            border:1px solid #cc7c00;
            color:#FFFFFF;
            text-shadow:#d08d00 1px 1px 0}
        #other-social-bar {
            background-color: #D8E6EB;
            box-shadow: 0 1px 1px #FFFFFF inset;
            padding: 0px;
            font-family: "Arial","Helvetica",sans-serif;
            font-weight:bold;
            overflow: hidden;
            border: 1px solid #B6D0DA;
               height:37px;
        }
        #other-social-bar ul {list-style: none outside none; padding-left: 4px;}
        #other-social-bar .other-follow {
            float: left;
            color:#1E598E;
            overflow: hidden;
            height:20px;
            padding:5px;
            width: 270px;}
        #other-social-bar .other-follow ul {
            list-style: none outside none;
            padding-left: 4px;}
        #other-social-bar .other-follow ul li {
            font-size: 12px;
            font-weight: bold;
            display:inline;
            border:0;
            text-shadow: 1px 1px white;}
        #other-social-bar .other-follow ul li a {
            font-size: 12px;
            color:#1E598E;
            font-weight: bold;
            display:inline;
            text-shadow: 1px 1px white;}
        #other-social-bar .other-follow li {
            font-size: 12px;
            font-weight: bold;
            display:inline;
            border:0;
            text-shadow: 1px 1px white;}
        #other-social-bar .other-follow li a {
            font-size: 12px;
            color:#1E598E;
            font-weight: bold;
            display:inline;
            text-shadow: 1px 1px white;}
        #other-social-bar .other-follow li.my-rss {
            background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5FFhL2Zu8HwTNNsFrnTwjlI6luIQZzZYlgJaZPVom-hJOODVV6SiKx3liigTBinwNGg-7kEEmmMqLJrwxIwXdrt6WPKTXzmWcNJTHPgLSIHQygw9Y6kikVsrneeUyp_JhmST6uJhsiZ4/s400/rss-16x16.png') no-repeat transparent;
            line-height: 1;
            padding: 0px 3px 1px 20px;
            width: 60px;
            margin-bottom:0px;
                margin-left:5px;}
        #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
        text-decoration:none;
        }
        #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
        text-decoration:underline;
        }
        #other-social-bar .other-follow li.my-twitter {
            background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR8h-vLj1rDMA96RRIQVqnkttvooD7nrWhupgoAnfOlhrYgimaIdoy2-aEduDgqimPL-jOR0sD9qZfCtLgNzBz0xcI1ErXhEHHqoGc_Yf8W7TxfgF_q6iXdTZjCv4ZzWt0HpgQWY-qNHI/s400/twitter%2527.png') no-repeat transparent;
            line-height: 1;
            padding: 0px 3px 1px 20px;
            width: 60px;
            margin-bottom:0px;}
        #other-social-bar .other-follow li.my-gplus {
            background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN1q8F7U7ezY0yUbhvwnMkuCCPrpABAcGvO4C19IOQiOBEF7ONVl8p8BX7TPI5E7Yy_hgobMKW_gkKCIoh5yOSnB9NOxLptYTS4Sq4kZZT9_5Lh7fgUdoQ2wOQgQFPEYmv9RDKDASR79I/s400/gplus-16x16.png) no-repeat transparent;
            line-height: 1;
            width: 60px;
            padding: 0px 3px 1px 20px;
            margin-bottom:0px;}

        </style>

        <!--[if IE]>
        <style>
        #email-news-subscribe .email-box input.subscribe{
            background: #FFCA00;
            }
        </style>
        <![endif]-->
    <!--begin of social widget--> <div style="margin-bottom:10px;"> <div id="MBT-mashable-bar" >

    <!-- Google Plus-->
    <div class="gplus"> <link href="http://plus.google.com/104032842913195810572" rel="publisher" />
    <script type="text/javascript"> window.___gcfg = {lang: 'en'}; undefinedfunctionundefined) {var po = document.createElementundefined"script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagNameundefined"script")[0]; s.parentNode.insertBeforeundefinedpo, s); })undefined);</script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.pushundefined['_setAccount', 'UA-29131740-1']); _gaq.pushundefined['_trackPageview']); undefinedfunctionundefined) { var ga = document.createElementundefined'script'); ga.type = 'text/javascript'; ga.async = true; ga.src = undefined'https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagNameundefined'script')[0]; s.parentNode.insertBeforeundefinedga, s); })undefined); </script>
    <!-- Place this tag where you want the badge to render --> <g:plus href="http://plus.google.com/104032842913195810572" width="250" height="69" margin="0px" theme="light"></g:plus> </div>
    <div class="fb-likebox">

    <!-- Facebook -->
    <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com/511276158904757&amp;send=false&amp;layout=standard&amp;width=230&amp;show_faces=false&amp;font=arial&amp;colorscheme=light&amp;action=like&amp;height=80&amp;appId=142184962628769" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:230px; height:80px;" allowtransparency="true"></iframe> </div>
    <div class="googleplus">

    <!-- Google --> <div class="g-plusone" data-size="medium" data-annotation="inline" data-width="230"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>
    <div class="twitter">

    <!-- Twitter --> <iframe title="" style="width: 250px; 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=ID&amp;link_color=&amp;screen_name=firmantgb&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>

    <div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"></span></div></div></div>

5. Ganti kode yang berwarna Merah dengan  Alamat Fanspage FB ada
    Ganti kode yang berwarna Biru dengan ID Google Plus anda
    Ganti kode yang berwarna Hijau dengan ID Twitter anda

6. Simpan dan lihat hasilnya

Regards,
Facebook

Twitter