Widget Social Media Efek Smooth Sliding Untuk Blogger

Dalam tutorial ini saya akan menjelaskan bagaimana menambahkan Widget Social Media Efek Smooth Sliding Untuk Blogger. dengan menggunakan widget ini Anda dapat menghubungkan profil sosial media
Facebook, Twitter dan Rss Google plus dan pinterest. Periksa demo dari link di bawah ini. Jika Anda ingin melihat pada Feed widget langganan rss lainnya, klik link di bawah.

All Widget RSS Demo

1. Pergi ke blogger dan klik Layout

2. Klik Tambah Gadget dan pilih HTML / Javascript

3. Paste kode di bawah ini.

<style>
.Tblogging-social-slidebox {
    font: 16px normal 'Denk One', sans-serif;
    display: inline-block;
    position: relative;
    width: 95%;
    max-width: 200px;
    padding: 12px;
}
.Tblogging-social-slide {
    width: 95%;
    max-width: 280px;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
}
.Tblogging-social-slide a {
    text-decoration: none !important;
   }
.Tblogging-social-slide ul {margin-top:-5px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.Tblogging-social-slide ul li {margin-bottom:15px;
    display: inline;
    margin: 0;
    padding: 0;
    text-indent: 0;
 margin-left:10px;
}
.Tblogging-social-slide ul li a.facebook {
    border-left: 65px solid rgba(59, 89, 152, 1);
    color: rgba(59, 89, 152, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.Tblogging-social-slide ul li a.facebook p {
    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.Tblogging-social-slide ul li a.facebook:hover {
    background: rgba(59, 89, 152, 1);
    border-left: 0px solid rgba(59, 89, 152, 0.1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.Tblogging-social-slide ul li a.facebook:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.Tblogging-social-slide ul li a.twitter {
    border-left: 65px solid rgba(64, 153, 255, 1);
    color: rgba(64, 153, 255, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.Tblogging-social-slide ul li a.twitter p {
    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.Tblogging-social-slide ul li a.twitter:hover {
    background: rgba(64, 153, 255, 1);
    border-left: 0px solid rgba(64, 153, 255, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.Tblogging-social-slide ul li a.twitter:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.Tblogging-social-slide ul li a.gplus {
    border-left: 65px solid rgba(219, 74, 57, 1);
    color: rgba(219, 74, 57, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.Tblogging-social-slide ul li a.gplus p {
    margin: 2px 20px 0 -50px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.Tblogging-social-slide ul li a.gplus:hover {
    background: rgba(219, 74, 57, 1);
    border-left: 0px solid rgba(219, 74, 57, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.Tblogging-social-slide ul li a.gplus:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.Tblogging-social-slide ul li a.pinterest {
    border-left: 65px solid rgba(174, 45, 39, 1);
    color: rgba(174, 45, 39, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.Tblogging-social-slide ul li a.pinterest p {
    margin: 2px 20px 0 -50px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.Tblogging-social-slide ul li a.pinterest:hover {
    background: rgba(174, 45, 39, 1);
    border-left: 0px solid rgba(174, 45, 39, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.Tblogging-social-slide ul li a.pinterest:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
.Tblogging-social-slide ul li a.rss {
    border-left: 65px solid rgba(255, 102, 0, 1);
    color: rgba(255, 102, 0, 1);
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.Tblogging-social-slide ul li a.rss p {
    margin: 2px 20px 0 -60px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.Tblogging-social-slide ul li a.rss:hover {
    background: rgba(255, 102, 0, 1);
    border-left: 0px solid rgba(255, 102, 0, 1);
    color: #fff;
    -webkit-transition: all 1000ms ease-in-out;
    -moz-transition: all 1000ms ease-in-out;
    -ms-transition: all 1000ms ease-in-out;
    -o-transition: all 1000ms ease-in-out;
    transition: all 1000ms ease-in-out;
}
.Tblogging-social-slide ul li a.rss:hover p {
    opacity: 0;
    -webkit-transition: all 1ms ease-in-out;
    -moz-transition: all 1ms ease-in-out;
    -ms-transition: all 1ms ease-in-out;
    -o-transition: all 1ms ease-in-out;
    transition: all 1ms ease-in-out;
}
</style>
<div class="Tblogging-social-slide">
    <ul>
        <li><a class="Tblogging-social-slidebox facebook" href="https://www.facebook.com/ TempatBlogging "><p>12K+</p>Facebook </a></li>
        <li><a class="Tblogging-social-slidebox twitter" href="https://twitter.com/TempatBlogging"><p>5K+</p>Twitter</a></li>
        <li><a class="Tblogging-social-slidebox gplus" href="https://plus.google.com/117086455111922412846"><p>4K+&nbsp;</p>Google+</a></li>
        <li><a class="Tblogging-social-slidebox pinterest" href="http://pinterest/TempatBlogging "><p>2K+&nbsp;</p>Pinterest</a></li>
        <li><a class="Tblogging-social-slidebox rss" href="http://feeds.feedburner.com/TempatBlogging"><p>11K+</p>RSS</a></li>
    </ul>
</div>

Perhatian: Anda harus mengubah counter manual, hanya mengubah nomor warna merah sesuai dengan profil.

Ganti TempatBlogging dengan nama pengguna Facebook Anda
Ganti TempatBlogging dengan Twitter Nama
Ganti 117086455111922412846 dengan Google Anda ditambah ID
Ganti Nama dengan Username Youtube Anda
Ganti TempatBlogging dengan Feedburner ID

5. Sekarang menyimpan HTML / Javascript '.

Nah Sekarang silakan Anda coba sendiri di Blogger Anda, Semoga berhasil dan sukses.

Share this post