Gadget Widget Social Media Dengan JQuery

Wednesday, October 10, 2012

<span class="" id="result_box" lang="id">Pada postingan kali ini s<span class="hps">aya akan</span> <span class="hps">membagi</span> <span class="hps">tutorial</span> <span class="hps">ini dalam</span> <span class="hps">3</span> <span class="hps">langkah sederhana</span>, <span class="hps">hanya mengikutinya</span> <span class="hps">dengan hati-hati</span> <span class="hps">maka Anda</span> <span class="hps">akan menambahkan</span> <span class="hps">gadget</span> <span class="hps">ini</span> <span class="hps">sangat mudah</span> <span class="hps">ke blog Anda</span>.</span><br />
<span class="" id="result_box" lang="id">Berikut widget yang akan anda tambahkan kedalam blog anda :</span><br />
<span class="" id="result_box" lang="id"><br /><span style="color: red;"><b><span class="hps">Langkah</span> <span class="hps">1</span>: <span class="hps">Menambahkan</span> <span class="hps">Plugin</span> <span class="hps">jQuery</span><br /><span class="hps">Langkah</span> <span class="hps">2</span>: <span class="hps">Menambahkan</span> <span class="hps">Tombol Google</span> <span class="hps">+1</span> <br /><span class="hps">Langkah</span> <span class="hps">3</span>: <span class="hps">Menambahkan</span> <span class="hps">Gadget</span></b></span></span><br />
<br />
<span class="" id="result_box" lang="id"><span class="hps"><span class="" id="result_box" lang="id"><span style="color: red;"><b><span class="hps">Langkah</span> <span class="hps">1</span>: <span class="hps">Menambahkan</span> <span class="hps">Plugin</span> <span class="hps">jQuery</span></b></span><br /><span class="hps">&nbsp;</span></span></span></span><br />
<span class="" id="result_box" lang="id"><span class="hps"><span class="" id="result_box" lang="id"><span class="hps">Note : Abaikan</span> <span class="hps">langkah ini</span>, <span class="hps">jika Anda telah</span> <span class="hps">menambahkan</span> <span class="hps">plugin jQuery</span> <span class="hps">ke blog Anda</span>.<br /><br />&nbsp;&nbsp;&nbsp;&nbsp; Masuk ke blog Anda &gt;<span class="hps"></span> <span class="hps">Dashboard</span>&gt; <span class="hps">Template</span><br />&nbsp;&nbsp;&nbsp;&nbsp; <span class="hps">Klik</span> <span class="hps">Edit HTML</span><br />&nbsp;&nbsp;&nbsp;&nbsp; Klik <span class="hps">Lanjutkan</span><br />&nbsp;&nbsp;&nbsp;&nbsp; <span class="hps">Sekarang</span> <span class="hps">cari kode di bawah</span> <span class="hps">ini dalam</span> <span class="hps">template Anda</span></span></span></span><br />
<br />
<textarea cols="50" rows="1"> </head> </textarea>
<br />
<br />
<b><span style="color: red;">Tambahkan kode berikut ini tepat di atasnya</span></b><br />
<br />
<textarea cols="50" rows="3"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script></textarea><br />
<br />
<span class="" id="result_box" lang="id"><span style="color: red;"><b><span class="hps">Langkah</span> <span class="hps">2</span>: <span class="hps">Menambahkan</span> <span class="hps">Tombol Google</span> <span class="hps">+1</span></b></span></span><br />
<span class="" id="result_box" lang="id"><span style="color: red;"><b></b></span></span><span class="" id="result_box" lang="id"><span class="" id="result_box" lang="id"><span class="hps"><span class="" id="result_box" lang="id"><span class="hps">Sekarang</span> <span class="hps">cari kode di bawah</span> <span class="hps">ini dalam</span> <span class="hps">template Anda</span></span></span></span></span><br />
<br />
<textarea cols="50" rows="1"> <head> </textarea><br />
<br />
&nbsp;<b><span style="color: red;">Tambahkan kode berikut ini tepat di atas atau di bawahnya</span></b><br />
<br />
<textarea cols="50" rows="rows"><script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script></textarea><br />
<br />
&nbsp;<span class="" id="result_box" lang="id"><span style="color: red;"><b><span class="hps">Langkah</span> <span class="hps">3</span>: <span class="hps">Menambahkan</span> <span class="hps">Gadget</span></b></span></span><br />
<br />
<span class="" id="result_box" lang="id"><span style="color: red;"><span style="color: black;"><span class="hps"><span class="" id="result_box" lang="id">Sekarang pergi ke Page Layout<br />Klik Tambah Gadget<br />Pilih HTML / JavaScript</span></span></span></span></span><br />
<span class="" id="result_box" lang="id"><span style="color: red;"><span style="color: black;"><span class="hps"><span class="" id="result_box" lang="id">Kosongkan Pada Judul</span></span></span></span></span><br />
<span class="" id="result_box" lang="id"><span style="color: red;"><span style="color: black;"><span class="hps"><span class="" id="result_box" lang="id">Paste kode di bawah ini dan simpan</span></span></span></span></span><br />
<br />
<textarea cols="100" rows="110"><script type="text/javascript">
    /*<![CDATA[*/
    jQuery(document).ready(function () {
        jQuery(".hbslidebox").hover(function () {
            jQuery(this).stop().animate({
                left: "0"
            }, "medium");
        }, function () {
            jQuery(this).stop().animate({
                left: "-70"
            }, "medium");
        }, 500);
    });
    /*]]>*/
</script>
<style type="text/css">
    .hbslidebox {
        background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLlDpDBugou20RGNO0eJqpLD1fPTDMJwrCHlEO3UsMJ_d3RW5K0PLE8zOHiCUkJUMPO0RJq-CUnFzOD5hDRRyepop2m4yCffH1oqhWfItQfq9Ds4BZDwg7byNybuA2EUZ2GoOuYwSf3qM/s1600/helperblogger.com-tab_left_vertical.png") no-repeat scroll right top transparent !important;
        display: block;
        float: left;
        height: auto;
        padding: 0 45px 0 0px;
        width: 65px;
        z-index: 99999;
        position:fixed;
        left:-70px;
        top:20%;
    }
    .hbslidebox div {
        border:none;
        position:relative;
        display:block;
    }
    #floatingbuttons {
        background: #fff;
        border-radius: 5px 5px 5px 5px;
        border: 1px solid #CCCCCC;
        float:left;
        padding:0 0 3px 0;
        bottom:15%;
        z-index:399;
    }
    #floatingbuttons .floatbutton {
        float:left;
        clear:both;
        margin:5px 4px 0 4px;
    }
    .addbuttons {
        clear:both;
        text-align:center;
        padding-top:5px;
    }
    .addbuttons a span.getfloat, .addbuttons a span.sharebuttons {
        color:#000;
        background:none;
        font-family:arial, sans-serif;
        display:block;
        font-size:9px;
        font-weight:bold;
        text-decoration:none;
        line-height:11px;
    }
    .addbuttons a:hover span {
        color:#fff;
        background:none;
        text-decoration:underline;
    }
</style>
<div class="hbslidebox" style="">
    <div>
        <div id='floatingbuttons' title="Share this post!">
            <script src="http://connect.facebook.net/en_US/all.js#xfbml=1">
               
            </script>
            <script type="text/javascript">
                (function () {
                    var s = document.createElement('SCRIPT'),
                        s1 = document.getElementsByTagName('SCRIPT')[0];
                    s.type = 'text/javascript';
                    s.async = true;
                    s.src = 'http://widgets.digg.com/buttons.js';
                    s1.parentNode.insertBefore(s, s1);
                })();
            </script>
            <!-- Medium Button -->
            <script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
            <div class='floatbutton' id='facebook'>
                <fb:like layout="box_count" show_faces="false" font=""></fb:like>
            </div>
<div class='floatbutton' id='google+1'>
                <g:plusone size="tall"></g:plusone>
            </div>
<div class='floatbutton' id='stumbleupon'>
                <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
            </div>
<div class='floatbutton' id='digg'>
                <a class="DiggThisButton DiggMedium"></a>
            </div>
<div class='floatbutton' id='twitter'>
                <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
            </div>
<div class="addbuttons">
                <a href="http://www.helperblogger.com/" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a>
            </div>
</div>
</div>
</div>
</textarea>
<br />
<br />
<span class="" id="result_box" lang="id"><span style="color: red;"><span style="color: black;"><span class="hps"><span class="" id="result_box" lang="id">Tarik widget ke bawah halaman Anda dan simpan template Anda...</span></span></span></span></span><br />
<span class="" id="result_box" lang="id"><span style="color: red;"><span style="color: black;"><span class="hps"><span class="" id="result_box" lang="id">Semoga Berguna....&nbsp;</span></span></span></span></span><span class="" id="result_box" lang="id"><span style="color: red;"><span style="color: black;"><span class="hps"><span class="" id="result_box" lang="id"> </span></span></span></span></span>

0 comments

Post a Comment