Membuat Widget Smooth Sliding Social Media di Blog

Membuat Widget Smooth Sliding Social Media di Blog - Social media memang merupakan sebuah rumah yang nyaman bagi para Blogger "beruntung", jutaan traffik di dunia setiap harinya didapatkan oleh para blogger-blogger hanya dengan memanfaatkan layanan interaksi dunia maya ini. Selain menawarkan kemudahan dalam bersosialisasi, jejaring sosial juga sangat berpotensial untuk menjadi sumber utama traffik blog dan website suatu saat nanti, karena saya kira hampir semua pengguna internet merasa tertarik dan ingin memiliki akun social medianya masing-masing, tentu untuk berhubungan dan berkomunikasi dengan orang-orang ataupun organisasi yang mereka minati, maka dengan ini kita dapat menghubungkan blog kita dengan orang-orang di dunia maya yang "haus akan informasi".

Berdasarkan ulasan singkat diatas, dapat saya simpulkan bahwasanya mulai dari sekarang ini kita harus lebih pintar-pintar mencari peluang yang terbuka dan berprofit tinggi, jadi kita tidak hanya bergantung pada traffik dari search engine saja, namun kita harus mencari gagasan dan terobosan-terobosan lain yang sekiranya layak untuk dijadikan sumber kunjungan jika suatu saat nanti search engine sudah tidak lagi menjaminnya.

Pengoptimalan ini dapat kita wujudkan dengan langkah awal yaitu membangun akun-akun di social media, dan tentunya mengatasnamakan blog-blog dan website kita, tinggal selanjutnya kita lakukan pemasaran terhadap akun kita dengan mempromosikanya di forum-forum, dll, dan tentunya memasang widget social media di blog kita sendiri. Baik, sesuai dengan topik dan judul diatas, pada kesempatan kali ini saya akan membagikan tutorial untuk membuat widget smooth sliding social media di blog, silahkan disimak yang berikut ini!

Cara Membuat Widget Smooth Sliding Social Media

1. Login ke Blogger.

2. Pilih Tata Letak.

3. Klik Add gadget.

4. Pilih HTML/JavaScript.

5. Letakkan kode berikut ini kedalamnya.

<style>
.tuliskancom-social-slidebox {
    font: 16px normal 'Denk One', sans-serif;
    display: inline-block;
    position: relative;
    width: 95%;
    max-width: 200px;
 
 
    padding: 12px;
 
}
.tuliskancom-social-slide {
    width: 95%;
    max-width: 280px;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
}
.tuliskancom-social-slide a {
    text-decoration: none !important;
   }
.tuliskancom-social-slide ul {margin-top:-5px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tuliskancom-social-slide ul li {margin-bottom:15px;
    display: inline;
    margin: 0;
    padding: 0;
    text-indent: 0;
 margin-left:10px;
}
.tuliskancom-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;
}
.tuliskancom-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;
}
.tuliskancom-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;
}
.tuliskancom-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;
}
.tuliskancom-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;
}
.tuliskancom-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;
}
.tuliskancom-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;
}
.tuliskancom-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;
}
.tuliskancom-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;
}
.tuliskancom-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;
}
.tuliskancom-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;
}
.tuliskancom-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;
}
.tuliskancom-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;
}
.tuliskancom-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;
}
.tuliskancom-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;
}
.tuliskancom-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;
}
.tuliskancom-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;
}
.tuliskancom-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;
}
.tuliskancom-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;
}
.tuliskancom-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="tuliskancom-social-slide">
    <ul>
        <li><a class="tuliskancom-social-slidebox facebook" href="https://www.facebook.com/tuliskancom"><p>12K+</p>Facebook </a></li>
        <li><a class="tuliskancom-social-slidebox twitter" href="https://twitter.com/tuliskancom"><p>5K+</p>Twitter</a></li>
        <li><a class="tuliskancom-social-slidebox gplus" href="https://plus.google.com/107955298793879607964"><p>4K+&nbsp;</p>Google+</a></li>
        <li><a class="tuliskancom-social-slidebox pinterest" href="http://pinterest/tuliskancom"><p>2K+&nbsp;</p>Pinterest</a></li>
        <li><a class="tuliskancom-social-slidebox rss" href="http://feeds.feedburner.com/tuliskancom"><p>11K+</p>RSS</a></li>
    </ul>
</div>

Keterangan:

• tuliskancom = Ganti dengan ID / Nama Fan Page Facebook anda.
• tuliskancom = Ganti dengan username Twitter anda.
• 107955298793879607964 = Ganti dengan ID Google Plus anda.
• tuliskancom = Ganti dengan username Pinterest anda.
• tuliskancom = Ganti dengan ID Feedburner blog anda.

6. Klik "save/simpan", dan selesai.

Untuk Live Demo-nya anda bisa lihat disini. Demikian informasi terbaru tentang cara membuat widget smooth sliding social media di blog, baca juga artikel menarik lainya seputar tutorial blog tentang cara membuat share button melayang/popup di sisi blog, semoga bermanfaat, dan selamat mencoba.

Artikel Referensi : Bloggertrix