Widget Media Sosial Sliding Halus Untuk Blogger

Untuk meningkatkan visibilitas mesin pencari adalah wajib untuk menggunakan widget media sosial untuk blogger, jadi di sini kita memiliki widget efek jendela untuk menambahkannya ke blogger. Widget media sosial memainkan peran penting dalam meningkatkan tampilan halaman untuk posting Anda dan juga meningkatkan pengikut Anda jika seseorang menyukai posting Anda dan menjadi anggota blog Anda. Widget blogger semacam itu memberi kesempatan kepada pengguna untuk membagikan posting Anda di platform media sosial. Di bawah ini adalah metode langkah demi langkah untuk menambahkan widget ini ke blogger dengan demo. bloggertrix

Bagaimana cara menambahkan efek jendela widget media sosial ke blogger.

Masuk ke Blogger → Dashborad

Klik pada Drop Down Menu dan pilih Layout

Tambahkan Gadget HTML / JavaScript

Rekatkan kode di bawah ini di dalamnya.

<style> 
.btrix-social-slidebox { 
    font: 16px normal 'Denk One', sans-serif; 
    display: inline-block; 
    posisi: relatif; 
    lebar: 95%; 
    max-width: 200px; 
    padding: 12px; 
} 
.btrix-social-slide { 
    width: 95%; 
    lebar maks: 280px; 
    padding-top: 8px; 
    padding-left: 8px; 
    padding-right: 8px; 
} 
.btrix-social-slide a { 
    text-decoration: none! important; 
   } 
.btrix-social-slide ul {margin-top: -5px; 
    margin: 0; 
    bantalan: 0; 
    daftar-gaya: tidak ada; 
} 
.btrix-social-slide ul li {margin-bottom: 15px;
    display: inline; 
    margin: 0; 
    bantalan: 0; 
    indentasi teks: 0; 
 margin-kiri: 10px; 
} 
.btrix-social-slide ul a.facebook { 
    border-left: 65px solid rgba (59, 89, 152, 1); 
    warna: rgba (59, 89, 152, 1); 
    -webkit-transisi: semua kemudahan 1000ms-in-out; 
    -moz-transisi: semua 1000 ms mudah masuk; 
    -ms-transisi: semua 1000 ms mudah masuk; 
    -o-transisi: semua 1000 ms kemudahan masuk; 
    transisi: semua kemudahan 1000ms; 
} 
.btrix-social-slide ul a.facebook p { 
    margin: 2px 20px 0 -60px; 
    display: inline-block; 
    warna: #fff; 
    -webkit-transisi: semua kemudahan 1000ms-in-out;
    -moz-transisi: semua 1000 ms mudah masuk; 
    -ms-transisi: semua 1000 ms mudah masuk; 
    -o-transisi: semua 1000 ms kemudahan masuk; 
    transisi: semua kemudahan 1000ms; 
} 
.btrix-social-slide ul a.facebook: hover { 
    background: rgba (59, 89, 152, 1); 
    border-left: 0px solid rgba (59, 89, 152, 0.1); 
    warna: #fff; 
    -webkit-transisi: semua kemudahan 1000ms-in-out; 
    -moz-transisi: semua 1000 ms mudah masuk; 
    -ms-transisi: semua 1000 ms mudah masuk; 
    -o-transisi: semua 1000 ms kemudahan masuk; 
    transisi: semua kemudahan 1000ms; 
} 
.btrix-social-slide ul a.facebook: hover p { 
    opacity: 0;
    -webkit-transisi: semua kemudahan 1ms; 
    -moz-transisi: semua kemudahan 1 ms; 
    -ms-transisi: semua kemudahan 1ms; 
    -o-transisi: semua kemudahan 1ms; 
    transisi: semua kemudahan 1ms; 
} 
.btrix-social-slide ul a.twitter { 
    border-left: 65px solid rgba (64, 153, 255, 1); 
    warna: rgba (64, 153, 255, 1); 
    -webkit-transisi: semua kemudahan 1000ms-in-out; 
    -moz-transisi: semua 1000 ms mudah masuk; 
    -ms-transisi: semua 1000 ms mudah masuk; 
    -o-transisi: semua 1000 ms kemudahan masuk; 
    transisi: semua kemudahan 1000ms; 
} 
.btrix-social-slide dan li a.twitter p { 
    margin: 2px 20px 0 -60px;
    display: inline-block; 
    warna: #fff; 
    -webkit-transisi: semua kemudahan 1000ms-in-out; 
    -moz-transisi: semua 1000 ms mudah masuk; 
    -ms-transisi: semua 1000 ms mudah masuk; 
    -o-transisi: semua 1000 ms kemudahan masuk; 
    transisi: semua kemudahan 1000ms; 
} 
.btrix-social-slide ul a.twitter: hover { 
    background: rgba (64, 153, 255, 1); 
    border-left: 0px solid rgba (64, 153, 255, 1); 
    warna: #fff; 
    -webkit-transisi: semua kemudahan 1000ms-in-out; 
    -moz-transisi: semua 1000 ms mudah masuk; 
    -ms-transisi: semua 1000 ms mudah masuk; 
    -o-transisi: semua 1000 ms kemudahan masuk; 
    transisi: semua kemudahan 1000ms;
} 
.btrix-social-slide ul a.twitter: hover p { 
    opacity: 0; 
    -webkit-transisi: semua kemudahan 1ms; 
    -moz-transisi: semua kemudahan 1 ms; 
    -ms-transisi: semua kemudahan 1ms; 
    -o-transisi: semua kemudahan 1ms; 
    transisi: semua kemudahan 1ms; 
} 
.btrix-social-slide ul li a.gplus { 
    border-left: 65px solid rgba (219, 74, 57, 1); 
    warna: rgba (219, 74, 57, 1); 
    -webkit-transisi: semua kemudahan 1000ms-in-out; 
    -moz-transisi: semua 1000 ms mudah masuk; 
    -ms-transisi: semua 1000 ms mudah masuk; 
    -o-transisi: semua 1000 ms kemudahan masuk; 
    transisi: semua kemudahan 1000ms; 
}
.btrix-social-slide ul li a.gplus p { 
    margin: 2px 20px 0 -50px; 
    display: inline-block; 
    warna: #fff; 
    -webkit-transisi: semua kemudahan 1000ms-in-out; 
    -moz-transisi: semua 1000 ms mudah masuk; 
    -ms-transisi: semua 1000 ms mudah masuk; 
    -o-transisi: semua 1000 ms kemudahan masuk; 
    transisi: semua kemudahan 1000ms; 
} 
.btrix-social-slide ul li a.gplus: hover { 
    background: rgba (219, 74, 57, 1); 
    border-left: 0px solid rgba (219, 74, 57, 1); 
    warna: #fff; 
    -webkit-transisi: semua kemudahan 1000ms-in-out; 
    -moz-transisi: semua 1000 ms mudah masuk; 
    -ms-transisi: semua 1000 ms mudah masuk;
    -o-transisi: semua 1000 ms kemudahan masuk; 
    transisi: semua kemudahan 1000ms; 
} 
.btrix-social-slide ul li a.gplus: hover p { 
    opacity: 0; 
    -webkit-transisi: semua kemudahan 1ms; 
    -moz-transisi: semua kemudahan 1 ms; 
    -ms-transisi: semua kemudahan 1ms; 
    -o-transisi: semua kemudahan 1ms; 
    transisi: semua kemudahan 1ms; 
} 
.btrix-social-slide ul li a.pinterest { 
    border-left: 65px solid rgba (174, 45, 39, 1); 
    warna: rgba (174, 45, 39, 1); 
    -webkit-transisi: semua kemudahan 1000ms-in-out; 
    -moz-transisi: semua 1000 ms mudah masuk; 
    -ms-transisi: semua 1000 ms mudah masuk;
    -o-transisi: semua 1000 ms kemudahan masuk; 
    transisi: semua kemudahan 1000ms; 
} 
.btrix-social-slide dan li.pinterest p { 
    margin: 2px 20px 0 -50px; 
    display: inline-block; 
    warna: #fff; 
    -webkit-transisi: semua kemudahan 1000ms-in-out; 
    -moz-transisi: semua 1000 ms mudah masuk; 
    -ms-transisi: semua 1000 ms mudah masuk; 
    -o-transisi: semua 1000 ms kemudahan masuk; 
    transisi: semua kemudahan 1000ms; 
} 
.btrix-social-slide ul li a.pinterest: hover { 
    background: rgba (174, 45, 39, 1); 
    border-left: 0px solid rgba (174, 45, 39, 1); 
    warna: #fff; 
    -webkit-transisi: semua kemudahan 1000ms-in-out;
    -moz-transisi: semua 1000 ms mudah masuk; 
    -ms-transisi: semua 1000 ms mudah masuk; 
    -o-transisi: semua 1000 ms kemudahan masuk; 
    transisi: semua kemudahan 1000ms; 
} 
.btrix-social-slide dan li.pinterest: hover p { 
    opacity: 0; 
    -webkit-transisi: semua kemudahan 1ms; 
    -moz-transisi: semua kemudahan 1 ms; 
    -ms-transisi: semua kemudahan 1ms; 
    -o-transisi: semua kemudahan 1ms; 
    transisi: semua kemudahan 1ms; 
} 
.btrix-social-slide ul li a.rss { 
    border-left: 65px solid rgba (255, 102, 0, 1); 
    warna: rgba (255, 102, 0, 1); 
    -webkit-transisi: semua kemudahan 1000ms-in-out;
    -moz-transisi: semua 1000 ms mudah masuk; 
    -ms-transisi: semua 1000 ms mudah masuk; 
    -o-transisi: semua 1000 ms kemudahan masuk; 
    transisi: semua kemudahan 1000ms; 
} 
.btrix-social-slide ul a.rss p { 
    margin: 2px 20px 0 -60px; 
    display: inline-block; 
    warna: #fff; 
    -webkit-transisi: semua kemudahan 1000ms-in-out; 
    -moz-transisi: semua 1000 ms mudah masuk; 
    -ms-transisi: semua 1000 ms mudah masuk; 
    -o-transisi: semua 1000 ms kemudahan masuk; 
    transisi: semua kemudahan 1000ms; 
} 
.btrix-social-slide ul a.rss: hover { 
    background: rgba (255, 102, 0, 1);
    border-left: 0px solid rgba (255, 102, 0, 1); 
    warna: #fff; 
    -webkit-transisi: semua kemudahan 1000ms-in-out; 
    -moz-transisi: semua 1000 ms mudah masuk; 
    -ms-transisi: semua 1000 ms mudah masuk; 
    -o-transisi: semua 1000 ms kemudahan masuk; 
    transisi: semua kemudahan 1000ms; 
} 
.btrix-social-slide ul a.rss: hover p { 
    opacity: 0; 
    -webkit-transisi: semua kemudahan 1ms; 
    -moz-transisi: semua kemudahan 1 ms; 
    -ms-transisi: semua kemudahan 1ms; 
    -o-transisi: semua kemudahan 1ms; 
    transisi: semua kemudahan 1ms; 
} 
</style> 
<div class = "btrix-social-slide"> 
    <ul>
        <li> <a class="btrix-social-slidebox facebook" href="https://www.facebook.com/freebloggerthemes"> <p> 12K + </p> Facebook </a> </li> 
        <li > <a class="btrix-social-slidebox twitter" href="https://twitter.com/ClassyBloger"> <p> 5K + </p> Twitter </a> </li>
        <li> <a class = "btrix-social-slidebox gplus" href = "https://plus.google.com/u/4/+AnaLeighReal"> <p> 4K + & nbsp; </p> Google+ </a> </li> 
        <li> <a class="btrix-social-slidebox pinterest" href="https://www.pinterest.com/Micy3/"> <p> 2K + & nbsp; </p> Pinterest </a> </ li> 
        <li> <a class = "btrix-social-slidebox rss "href ="http://feeds.feedburner.com/blogspot/CINHv "> <p> 11K + </p> RSS </a> </li> 
    </ul> 
</div>

Ketikkan nama halaman penggemar Facebook Anda sebagai ganti YOURFANPAGE. 
Ketikkan ID Twitter Anda sebagai ganti YOURID. 
Ketikkan ID alamat umpan Anda untuk menggantikan YOURFEED. 
Ketikkan ID Google Plus 
Anda di tempat 10.0000000000001. Ketikkan ID alamat Pinterest Anda di tempat YOURURL.

Ini dia. Sekarang ketika Anda memiliki kode lengkap, salin saja di dalam gadget dan simpan. Kamu selesai. Jika Anda menyukai Widget Media Sosial Sliding Halus Ini untuk Blogger, silakan bagikan dan tulis komentar sebagai tanggapan Anda.