Menu
 
» » Slide Out Social Boomarking Dengan jQuery

A+ A-
Social Boomarking memiliki peran penting dalam meningkatkan traffick blog or web. Mengapa sangant penting karna dengan memasang Social Boomark maka kita akan memberi kesempatan kepada para pengunjung blog kita untuk menshare atau membagikannya ke akun social mereka! Dan banyak kemungkinan bila pengunjung mensharenya ke akun social media akan banya teman-teman/pengunjung lain yang tau dan akan berkunjung ke blog sobat!
Dalam kesmpatan kali ini saya akan membahas tentang Slide Out Social Boomarking Dengan jQuery, berbeda dengan gadget lain karna gadget ini memang berbeda mungkin blog lain belum ada yang membahas atau menshare gadget ini karna gadget ini di rancang oleh Chandeep.
Gadget ini akan melayang dan berada di bagian kiri blog sobat jadi tidak akan menghabiska tempat di blog sobat, sangat cocok bagi blog yang sudah kehabisan tempat, hehehehe . . . Gadget ini juga slide out.
Untuk contohnya sobat bisa lihat gambar di samping, kalo kurang paham sobat bisa lihat lansung demonya yang sudah saya siapkan.


Okelah kalo begitu, sekarang kita bahas cara memasangnya di blogger sobat, cekidot . . .

Step-bystep cara memasang Slide Out Social Boomarking Dengan jQuery di Blogger :

1. Masuk ke akun blogger sobat.

2. Pada menu klick Rancangan ➨ Edit HTML.

3. CentangExpand Template Widget ➨ Backup dulu templatenya untuk mengantisipasi bila terjadi kesalahan.

4. Selanjutnya sobat harus bisa mencari kode HTML jika belum tau caranya coba sobat baca Cara Cepat Mencari Kode HTML.

5. Jika sudah bisa sekarang kita akan lanjut . . .

6. Sekarang blog sobat harus menginstal jQuery 1.7.2 (jika sobat sudah menginstal jQuery 1.7.2 abaikan saja lankah no.7)

7. Menginstal jQuery, letakkan kedi script jQuery berikut sebelum atau di atas kode </head>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

8. Selanjutnya menambahkan kode script Google + (Pllus)

9 Letakkan kode script berikut di atas kode <head>.

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>

10. Simpan Teplate.

11. Langkah terakhir menambahkan Gadget dengan cara:
  • Pada menu klick Rancangan ➨ Tambah Gadget di bagian mana saja (saya sarankan di bagina paling bawah dan jangan di beri judul)
  • Lalu pilih elemen HTML/Java Script.
  • Sekarang copy kode berikut dan paste atau letakkan di dalamnya:
<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/AVvXsEgc0urqZ6DKTy0KH5S2lw8458E8vOQHRpb7z3M0ZozBlmi3mYFmA08nNkdM3mWVFuUt8AbLyMZu8jJb6WfB-8w37GzObjcWfyc-1GGfElZy9FZtZGAepINNrjaOJxkFsJGdWxJ0X8EeReI/s1600/otowebsite.blogspot.com.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://otowebsite.blogspot.com/" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get buttons</span></a>
            </div>
        </div>
    </div>
</div>

12. Simpan.

Sekarang lihat sendiri hasilnya.

Saya rasa cukup!

Bagaimana apakah sobat berhasil menerapkannya ke blog sobat, silahkan tinggalakan tanggapan atau komentar sobat tentang postingan atau articles di atas!
Diposting oleh
Label:

Share to:

di 11.31

Posting Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
Konversi Kode di Sini! Daftar Member Aktif

Langganan: Posting Komentar (Atom)
 
Top