Cara Membuat Tombol Sosial Media dengan Efek Slide

Cara Membuat Tombol Sosial Media dengan Efek Slide

Diposting pada

Cara Membuat Tombol Sosial Media dengan Efek Slide – Tutorial untuk Membuat Social Media Button dengan Efek Slide pada widget blogspot bisa anda terapkan langsung pada sidebar blog anda sebagai sarana mempercantik tampilan blog.

Manfaat penempatan Tombol Sosial Media ini adalah agar visitor atau pengunjung blog anda bisa mengakses berita dari sosial media yang mereka punya dan juga mengetahui sosial media admin blog tersebut.

Ada berbagai macam desain untuk tombol sosial media ini tapi kali ini mamang hanya akan memberikan desain sosial media dengan efek slide yang keren deh pokoknya.

Langsung saja mari kita masuk kedalam persiapan dan langkah-langkah nya sebagai berikut:

Cara Membuat Tombol Sosial Media dengan Efek Slide :

1. Masuk ke Akun blogger kalian.

2. Kemudian pilih menu Tata Letak dan Tambahkan Gadget

3. Pilih HTML/Javascript

4. Masukkan Kode dibawah ini kedalam nya.

<style>
body {background-color: #d7ccc8;margin: auto;width: 50%;padding: 20px;}
.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: #fff;
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;
margin-left:15px;}
.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 35px 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 35px 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 35px 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 35px 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.linkedin {
border-left: 65px solid rgba(0, 123, 182, 1);
color: rgba(0, 123, 182, 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.linkedin p {
margin: 2px 35px 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.linkedin:hover {
background: rgba(0, 123, 182, 1);
border-left: 0px solid rgba(0, 123, 182, 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.linkedin: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="abt-social">
<ul>
<li><a class="abt-box facebook" href="https://www.mangotep.com/" target="_blank"><p>15K+</p>Facebook </a></li>
<li><a class="abt-box twitter" href="https://www.mangotep.com/" target="_blank"><p>10K+</p>Twitter</a></li>
<li><a class="abt-box gplus" href="https://www.mangotep.com/" target="_blank"><p>5K+</p>Google+</a></li>
<li><a class="abt-box pinterest" href="https://www.mangotep.com/" target="_blank"><p>4K+</p>Pinterest</a></li>
<li><a class="abt-box linkedin" href="https://www.mangotep.com/" target="_blank"><p>10K+</p>Linkedin</a></li>
</ul>
</div>

Dengan mengikuti kode yang sudah saya sediakan diatas, hasil yang anda dapatkan adalah seperti contoh dibawah ini:

Anda bisa menyesuaikan CSS diatas dengan lebar template anda, warna template, atau juga yang lainnya.

This is box title
1. Gantilah warna background #d7ccc8 sesuai keinginan anda
2. Ganti URL mangotep dengan URL sosial media anda

Demikianlah info dari Blog Mang Otep tentang artikel Membuat Tombol Sosial Media dengan Efek Slide, semoga bermanfaat untuk anda.

Jika menyukai artikel ini anda bisa like, share, and subscribe untuk mendapatkan artikel terbaru langsung dari email anda.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *