Cara Menciptakan Tombol Sosial Media Dengan Pengaruh Slide

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

Manfaat penempatan Tombol Sosial Media ini ialah semoga visitor atau pengunjung blog anda dapat mengakses isu dari sosial media yang mereka punya dan juga mengetahui sosial media admin blog tersebut.

Ada banyak sekali macam desain untuk tombol sosial media ini tapi kali ini mamang hanya akan memperlihatkan desain sosial media dengan dampak 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 hidangan Tata Letak dan Tambahkan Gadget
3. Pilih HTML/Javascript
4. Masukkan Kode dibawah ini kedalam nya.

HTML <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://quoranote.blogspot.com" target="_blank"><p>15K+</p>Facebook </a></li> <li><a class="abt-box twitter" href="https://quoranote.blogspot.com" target="_blank"><p>10K+</p>Twitter</a></li> <li><a class="abt-box gplus" href="https://quoranote.blogspot.com" target="_blank"><p>5K+</p>Google+</a></li> <li><a class="abt-box pinterest" href="https://quoranote.blogspot.com" target="_blank"><p>4K+</p>Pinterest</a></li> <li><a class="abt-box linkedin" href="https://quoranote.blogspot.com" target="_blank"><p>10K+</p>Linkedin</a></li> </ul> </div> 

• LIVE DEMO

• Gantilah warna background #d7ccc8 sesuai cita-cita anda.
• Ganti URL mangotep dengan URL sosial media anda

Demikianlah info dari perihal artikel Cara Membuat Tombol Sosial Media dengan Efek Slide, semoga bermanfaat untuk anda. Jika menyukai artikel ini anda dapat like, share, and subscribe untuk mendapat artikel terbaru pribadi dari email anda.
Sumber https://www.mangotep.com/