Membuat Media Sosial Widget Dengan Mouse Hover Effect

Selamat datang kawan. Hari ini saya akan berbagi mengagumkan Media widget Sosialuntuk platform blogspot. Pada hari ini popularitas sosial sangat dan paling penting untuk blog karena popularitas media sosial membawa ton pandangan lalu lintas dan halaman ke blog. Widget ini memiliki seperangkat lima media sosial properti yaitu Facebook, Twitter, RSS, Google plus dan Pinterest. Widget ini bekerja pada beberapa sangat sederhana namun efektif CSS dan java-script coding. Widget telah meluncur efek setiap kali pengunjung akan berkisar pada profil sosial, akan muncul dengan efek slide profil tersebut.

Dimana Widget Ini Akan Muncul: -

Sebelumnya, kami naik ke Tutorial kami mari kita belajar di mana widget ini akan muncul di sebuah website.Karena, ini adalah Widget Sleek. Oleh karena itu, sangat kecil dalam ukuran sehingga tidak akan mengambil ruang yang besar pada sebuah situs web. Kami telah terintegrasi Slide out Fungsi yang akan menghasilkan bunga api di mata pengunjung. Ini akan muncul di sisi atas-kiri layar.

Cara Menambahkan Widget Ini Ke Blog Blogger Anda: -

Langkah-langkah yang disebutkan di bawah sangat sederhana. Kami telah mencoba yang terbaik untuk meminimalkan langkah-langkah.

Jadi, mari kita mulai dengan tutorial kami. Simak langkah-langkah berikut.

1. Pergi ke Layout >> Add A Gadget , kemudian pilih HTML/JavaScript
2. Paste kode ini di dalamnya.
   Jika blog Anda telah memiliki Plugin jQuery kemudian menghapus kode disorot.
   ( <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> )

     <style type="text/css">
    ul {# sosial
        position: fixed;
        margin: 0px;
        padding: 0px;
        top: 10px;
        kiri: 0px;
        list-style: none;
        z-index: 9999;
    }
    ul # sosial li {
        width: 100px;
    }
    ul # sosial li a {
        display: block;
        margin-left:-2px;
        width: 100px;
        height: 70px;    
        background-color: # fff;
        background-repeat: no-repeat;
        background-position: center center;
        border: 1px solid # AFAFAF;
        -Moz-border-radius: 0px 10px 10px 0px;
        -Webkit-border-bottom-kanan radius: 10px;
        -Webkit-border-top-right-radius: 10px;
        -KHTML-border-bottom-kanan radius: 10px;
        -KHTML-border-top-right-radius: 10px;
        -Moz-box-shadow: 0px 4px 3px # 000;
        -Webkit-box-shadow: 0px 4px 3px # 000;
    }
    ul # sosial. twitter {
         background: # 0F96C6
    background-position: center center;
    }
    ul # sosial. GooglePlus a {
        background: # D73D27
    background-position: center center;
    }
    ul # sosial. facebook a {
        background: # 1A4B97
    background-position: center center;
    }
    ul # sosial. rss a {
        background: # FAAE17
    background-position: center center;
    }
   
    ul pinterest # sosial. a {
        background: # 963336
    background-position: center center;
    }
    </ Style>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type='text/javascript'>
    $ (Function () {
        $ ('# Sosial'). Stop (). Bernyawa ({
            'MarginLeft': '-85px'
        }, 1000);
   
        $ ('# Sosial> li'). Melayang-layang (
            function () {
                $ ('A', $ (ini)). Stop (). Bernyawa ({
                    'MarginLeft': '-2px'
                }, 200);
            },
            function () {
                $ ('A', $ (ini)). Stop (). Bernyawa ({
                    'MarginLeft': '-85px'
                }, 200);
            }
        );
    });
    </ Script>
    <ul id='social'>
     <li class='twitter'> <a href=' # 'title='Twitter'> </ a> </ li>
     <li class='googleplus'> <a href=' # 'title='Google Plus'> </ a> </ li>
     <li class='facebook'> <a href=' # 'title='Facebook'> </ a> </ li>
     <li class='rss'> <a href=' # 'title='Rss'> </ a> </ li>
     <li class='pinterest'> <a href=' # 'title='Pinterest'> </ a> </ li>
    </ Ul>
   

• Setelah Menambahkan kode diatas Ganti # dengan link Profil Anda
3. Sekarang simpan widget dan Lihat blog Anda.