Selamat Datang Tombol follow me menjadi hal yang penting bagi seorang blogger untuk dapat meningkatkan jumlah pengujung dari blognya. Semakin banyak follower/yang menyukai fan page dari blog kita menjadi salah satu hal yang diinginkan blogger pada saat ini. Hal ini karena semakin banyaknya pengguna social media dan itu dapat menjadi target pengunjung yang dari blog kita. Setelah sebelumnya saya sudah membagikan dua widget/tombol follow me yaitu Tombol Social Media dengan Efek Transisidan Tombol Social Media dengan Efek Transisi. Kali ini saya akan membagikan Tombol Follow Me dengan Transisi pada Background dan Width. Tombol ini terinspirasi dari website Modernizr. Langsung saja...
Selamat Datang
Tombol follow me menjadi hal yang penting bagi seorang blogger untuk dapat meningkatkan jumlah pengujung dari blognya. Semakin banyak follower/yang menyukai fan page dari blog kita menjadi salah satu hal yang diinginkan blogger pada saat ini. Hal ini karena semakin banyaknya pengguna social media dan itu dapat menjadi target pengunjung yang dari blog kita. Setelah sebelumnya saya sudah membagikan dua widget/tombol follow me yaitu Tombol Social Media dengan Efek Transisidan Tombol Social Media dengan Efek Transisi. Kali ini saya akan membagikan Tombol Follow Me dengan Transisi pada Background dan Width. Tombol ini terinspirasi dari website Modernizr. Langsung saja...
Cdoe CSS
#buttonbg {width: 260px;margin: 10px 20px;padding: 0;} #buttonbg li {cursor: pointer;height: 48px;position: relative;list-style-type: none; } #buttonbg .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGoS-29H5jQkasEdg-ivXTmQij4XkAZwxneO3hCablkZCj11PWWucX9eqwqJBnrXtaRZPaerB8wsNDccQoq1DOSJ6ev99jaslHF_PorPhgu_0v3mo-vDSeLgY9mAfzBhMXO1OjgOSKhe0/s1600/blsocial12.png') 0 0 no-repeat; background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block; color: #141414;float: none;height: 48px;line-height: 48px; margin: 5px 0;position: relative;text-align: left;text-indent: 90px; text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5; -webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out; -o-transition: width .25s ease-in-out, background-color .25s ease-in-out; transition: width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; -moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px; box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; text-decoration: none;} #buttonbg span:hover {visibility: hidden;} #buttonbg span {display: block;top: 15px;position: absolute;left: 90px;} #buttonbg .icon {color: #fafafa;overflow: hidden;} #buttonbg .fb {background-color: rgba(45,118,185, .42); background-position: 0 -382px;} #buttonbg .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;} #buttonbg .google {background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;} #buttonbg .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;} #buttonbg .linked {background-color: rgba(0, 87, 114, .42); background-position: 0 -574px;} #buttonbg .deviant {background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;} #buttonbg .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;} #buttonbg .rss {background-color: rgba(255,109, 0, .42); background-position: 0 -718px;} #buttonbg li:hover .icon {width: 250px; } #buttonbg li:hover .icon {background-color: #d91e76; } #buttonbg li:hover .fb {background-color: #2d76b9;background-position: 0 2px;} #buttonbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; } #buttonbg li:hover .google {background-color: #A70000;background-position: 0 -94px;} #buttonbg li:hover .pint {background-color: #C00;background-position: 0 -142px; } #buttonbg li:hover .linked {background-color: #005772;background-position: 0 -190px;} #buttonbg li:hover .deviant {background-color: #4C7A4A;background-position: 0 -238px;} #buttonbg li:hover .ytube {background-color: #A00;background-position: 0 -286px; } #buttonbg li:hover .rss {background-color: #EC5601;background-position: 0 -334px; } #buttonbg .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
Code HTML
<ul id="buttonbg">
<li ><a href="#" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span></li>
<li ><a href="#" class="icon twit" >Follow us on Twitter</a><span>Follow us on Twitter</span></li>
<li ><a href="#" class="icon google" >Follow us on Google+</a><span>Follow us on Google+</span></li>
<li ><a href="#" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span></li>
<li ><a href="#" class="icon linked" >Follow us on LinkedIn</a><span>Follow us on LinkedIn</span></li>
<li ><a href="#" class="icon deviant" >Follow us on DeviantArt</a><span>Follow us on DeviantArt</span></li>
<li ><a href="#" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span></li>
<li ><a href="#" class="icon rss" >Subscribe via RSS</a><span>Subscribe via RSS</span></li>
</ul>
Contoh peletakan Gambar
Contoh Peletakan HTML Nya .Seperti Pada Gambar Dibawah Ini |
| HTML peletakan |
Attention / Perhatian
Dalam Struktur HTML dari tombol ini. Saya membaginya dalam li untuk memudahkan dalam menambah/mengurangi tombol yang anda inginkan silahkan hapus pada bagian
"<li ><a href="#" class="icon ab">.............</a><span>.................</span></li>".
Misalnya untuk menggurangi tombol Youtube silahkan hapus
<li ><a href="#" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span></li>
dan seterus nya.
Bisa juga Dikurangin HTML nya Jika Tidak Perlu
Silahkan ganti pada bagian yang warna kuning "Link ...... Anda" dengan link FB/Twitter/Google+ atau yang anda miliki..
Nah sekian dulu..
semoga bermanfaat bagi teman-teman yang mambaca dan dapat meningkatkan follower/jumlah Like fan page FB anda..
Nah sekian dulu..
semoga bermanfaat bagi teman-teman yang mambaca dan dapat meningkatkan follower/jumlah Like fan page FB anda..
