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
<style type="text/css">
.abt-box {
display: inline-block;
position: relative;
width: 100%;
max-width: 300px;
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);
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 {
font-family: Arial, San-Serif;
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);
transition: all 300ms ease-in-out;
}
.abt-social ul li a.facebook p {
margin: 2px 25px 0 -70px;
display: inline-block;
color: #fff;
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;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.facebook:hover p {
opacity: 0;
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);
transition: all 300ms ease-in-out;
}
.abt-social ul li a.twitter p {
margin: 2px 25px 0 -70px;
display: inline-block;
color: #fff;
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;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.twitter:hover p {
opacity: 0;
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);
transition: all 300ms ease-in-out;
}
.abt-social ul li a.gplus p {
margin: 2px 25px 0 -70px;
display: inline-block;
color: #fff;
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;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.gplus:hover p {
opacity: 0;
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);
transition: all 300ms ease-in-out;
}
.abt-social ul li a.pinterest p {
margin: 2px 25px 0 -70px;
display: inline-block;
color: #fff;
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;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.pinterest:hover p {
opacity: 0;
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);
transition: all 300ms ease-in-out;
}
.abt-social ul li a.rss p {
margin: 2px 25px 0 -70px;
display: inline-block;
color: #fff;
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;
transition: all 300ms ease-in-out;
}
.abt-social ul li a.rss:hover p {
opacity: 0;
transition: all 1ms ease-in-out;
}
</style>
<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 </p>Google+</a></li>
<li><a class="abt-box pinterest" href="#"><p>+15 </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...