Icon Social Share dengan Tooltip

Di hari ini taukahbahwa.blogspot.com akan menyajikan posting tentang Icon Social Share dengan Tooltip. Semoga dengan artikel Icon Social Share dengan Tooltip akan menambah pengetahuan bagi anda pembaca setia taukahbahwa.blogspot.com

Sliding Social Buttons Widget | Hai, Pada artikel yang akan saya bagikan kali ini adalah sebuah tutorial sosial media dengan efek Slider, widget ini memiliki Efek hover pada setiap sosial medianya dan dengan angka pada setiap sosial medianya tergantung pengikut di setiap sosial media.

Widget ini memiliki warna yang cerah dan sangat elegan, Kalau memang sobat ingin mempraktekkan widget ini tutorialnya seperti ini

Sliding Social Buttons Widget

• Login ke blogger
• Pergi ke ''Tata letak''
• Klik ''Tambah Gadget''
• Pilih '''HTML/JavaScript''
• Masukan kode dibawah ini, didalam gadget tersebut

css

/* Sliding Social Buttons Widget - the-anarchyta.blogspot.com */
 
.abt-box {
    font: 25px/24px normal 'Denk One', sans-serif;
    display: inline-block;
    position: relative;
    width: 95%;
    max-width: 280px;
    margin: 0 auto 15px auto;
    padding: 16px;
    background-color: rgba(238, 238, 238, 0.1);
    box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.1);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
 
.abt-social {
    width: 95%;
    max-width: 280px;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
}
 
.abt-social a {
    text-decoration: none !important;
}
 
.abt-social ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
 
.abt-social ul li {
    display: inline;
    margin: 0;
    padding: 0;
    text-indent: 0
}
 
.abt-social ul li a.facebook {
    border-left: 65px solid rgba(59, 89, 152, 1);
    color: rgba(59, 89, 152, 1);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
 
.abt-social ul li a.facebook p {
    margin: 2px 20px 0 -70px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
 
.abt-social 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 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
 
.abt-social 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;
}
 
.abt-social ul li a.twitter {
    border-left: 65px solid rgba(64, 153, 255, 1);
    color: rgba(64, 153, 255, 1);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
 
.abt-social ul li a.twitter p {
    margin: 2px 20px 0 -70px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
 
.abt-social 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 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
 
.abt-social 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;
}
 
.abt-social ul li a.gplus {
    border-left: 65px solid rgba(219, 74, 57, 1);
    color: rgba(219, 74, 57, 1);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
 
.abt-social ul li a.gplus p {
    margin: 2px 20px 0 -70px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
 
.abt-social 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 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
 
.abt-social 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;
}
 
.abt-social ul li a.pinterest {
    border-left: 65px solid rgba(174, 45, 39, 1);
    color: rgba(174, 45, 39, 1);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
 
.abt-social ul li a.pinterest p {
    margin: 2px 20px 0 -70px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
 
.abt-social 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 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
 
.abt-social 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;
}
 
.abt-social ul li a.rss {
    border-left: 65px solid rgba(255, 102, 0, 1);
    color: rgba(255, 102, 0, 1);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
 
.abt-social ul li a.rss p {
    margin: 2px 20px 0 -70px;
    display: inline-block;
    color: #fff;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
 
.abt-social 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 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
 
.abt-social 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;}

html 

<div class="abt-social">
    <ul>
        <li><a class="abt-box facebook" href="#"><p>+15K</p>Facebook </a></li>
        <li><a class="abt-box twitter" href="#"><p>+15K</p>Twitter</a></li>
        <li><a class="abt-box gplus" href="#"><p>+15K&nbsp;</p>Google+</a></li>
        <li><a class="abt-box pinterest" href="#"><p>+15&nbsp;</p>Pinterest</a></li>
        <li><a class="abt-box rss" href="#"><p>+15K</p>RSS</a></li>
    </ul>
</div>

Note: Ganti tanda  # dengan url sosial media anda, ganti juga angka +15K dengan jumlah yang anda inginkan.

Demikianlah artikel ini semoga artikel ini bermanfaaat dan mudah untuk di terapkan sama sobat, Silakan kasih pendapat tentang artikel ini di kolom komentar di bawah ini, Terima Kasih...

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com