Cara Membuat Tombol Follow Me dengan Transisi pada Background dan Width- Kata seorang blogger profesional tombol follow me ini dapat meningkatkan trafik yang sangat tinggi dikarenakan pada saat rekan sobat menyukai FP ( Fans Page ) sobat biasanya rekan sobat tersebut akan selalu membuka blog sobat. Dengan kegunaan diatas mungkin sobat mau memasang Tombol Follow Me tersebut langsung saja tanpa basa basi.
HTML
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 cb" ><span>.......</span></a></li>". Misalnya untuk menggurangi tombol Youtube silahkan hapus <li ><a href="Link Youtube Anda" class="icon ytube" ><span>Youtube</span></a></li> .
<div id="buttoncb">
<ul>
<li ><a href="#" class="icon fb" ><span>Facebook</span></a></li>
<li ><a href="#" class="icon twiter" ><span>Twitter</span></a></li>
<li ><a href="#" class="icon google" ><span>Google+</span></a></li>
<li ><a href="#" class="icon pint" ><span>Pinterest</span></a></li>
<li ><a href="#" class="icon linkedin" ><span>LinkedIn</span></a></li>
<li ><a href="#" class="icon devart" ><span>DeviantArt</span></a></li>
<li ><a href="#" class="icon ytube" ><span>Youtube</span></a></li>
<li ><a href="#" class="icon rss" ><span>RSS</span></a></li>
</ul>
</div>
CSS dan CSS3 Transitions
Dibawah ini merupakan kode CSS yang digunakan untuk membuat efek pada tombol ini. CSS3 yang digunakan untuk memberikan efek tersebut yaitu dengan menggunakan transisi cubic-bezier(1,2,0,0) yaitu pada semua elemen. Untuk lebih jelasnya perhatikan kode dibawah.
#buttoncb ul {margin:10px 15px;padding:0px;}
#buttoncb ul li {list-style-type: none;padding: 0;background: transparent;margin: 0;}
#buttoncb ul li a{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5UBYTe7hm96AMviyIQB3b6DYoWqwa_Ravnn-L8Rd5tI_f0o1hOZUp12Tb5tYoM-UMzHcQaJF3K2odC9gm-W-mXPrjPMYQ0CwM9c5PNRCJ_ymJ2RkUKeZnl43aH7kVt7PjiBxPHvyrLs/s1600/blsocial12.png') 0 0 no-repeat; height:48px;padding-left: 48px;cursor: pointer;text-decoration: none;border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;-o-border-radius:0.5em;display:inline-block;margin:0;width: 220px;}
#buttoncb ul li:hover span {margin-left: 10px;opacity: 1;}
#buttoncb ul li span {border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
color: white;
margin-left: 100px;
opacity: 0;
position: relative;
text-align: center;
width: auto;
padding: 5px 10px;
transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
top: 14px;}
#buttoncb span{padding:5px;background:#000;color:#fff;margin:0 5px;}
#buttoncb .fb span {background-color: #0853A3;}
#buttoncb .twiter span {background-color: #00B1F7;}
#buttoncb .google span {background-color: #9E0202;}
#buttoncb .pint span {background-color: #D00;}
#buttoncb .linkedin span {background-color: #005075;}
#buttoncb .devart span {background-color: #4C7A4A;}
#buttoncb .ytube span {background-color: #A00;}
#buttoncb .rss span {background-color: #EC5601;}
#buttoncb a.fb { background-position: 0 -384px;}
#buttoncb a.twiter { background-position: 0 -432px;}
#buttoncb a.google { background-position: 0 -480px;}
#buttoncb a.pint { background-position: 0 -528px;}
#buttoncb a.linkedin { background-position: 0 -576px;}
#buttoncb a.devart { background-position: 0 -624px;}
#buttoncb a.ytube { background-position: 0 -672px;}
#buttoncb a.rss { background-position: 0 -720px;}
#buttoncb a.fb:hover { background-position: 0 0px;color: #0374DD;}
#buttoncb a.twiter:hover { background-position: 0 -48px;color: #00A1DF;}
#buttoncb a.google:hover { background-position: 0 -96px;color: #A70000;}
#buttoncb a.pint:hover { background-position: 0 -144px;color: #C00;}
#buttoncb a.linkedin:hover { background-position: 0 -192px;color: #005772;}
#buttoncb a.devart:hover { background-position: 0 -240px;color: #4C7A4A;}
#buttoncb a.ytube:hover { background-position: 0 -288px;color: #A00;}
#buttoncb a.rss:hover { background-position: 0 -336px;color: #EC5601;}
PEMASANGAN PADA BLOGSPOT
Pertama-tama masuklah ke halaman tata letak dengan mengeklik menu Tata Letak:
Masuk ke halaman Tata Letak
Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin semua kode ini dan letakkan di dalam formulirnya:
<style type="text/css">
#buttoncb ul {margin:10px 15px;padding:0px;}
#buttoncb ul li {list-style-type: none;padding: 0;background: transparent;margin: 0;}
#buttoncb ul li a{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5UBYTe7hm96AMviyIQB3b6DYoWqwa_Ravnn-L8Rd5tI_f0o1hOZUp12Tb5tYoM-UMzHcQaJF3K2odC9gm-W-mXPrjPMYQ0CwM9c5PNRCJ_ymJ2RkUKeZnl43aH7kVt7PjiBxPHvyrLs/s1600/blsocial12.png') 0 0 no-repeat; height:48px;padding-left: 48px;cursor: pointer;text-decoration: none;border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;-o-border-radius:0.5em;display:inline-block;margin:0;width: 220px;}
#buttoncb ul li:hover span {margin-left: 10px;opacity: 1;}
#buttoncb ul li span {border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
color: white;
margin-left: 100px;
opacity: 0;
position: relative;
text-align: center;
width: auto;
padding: 5px 10px;
transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
top: 14px;}
#buttoncb span{padding:5px;background:#000;color:#fff;margin:0 5px;}
#buttoncb .fb span {background-color: #0853A3;}
#buttoncb .twiter span {background-color: #00B1F7;}
#buttoncb .google span {background-color: #9E0202;}
#buttoncb .pint span {background-color: #D00;}
#buttoncb .linkedin span {background-color: #005075;}
#buttoncb .devart span {background-color: #4C7A4A;}
#buttoncb .ytube span {background-color: #A00;}
#buttoncb .rss span {background-color: #EC5601;}
#buttoncb a.fb { background-position: 0 -384px;}
#buttoncb a.twiter { background-position: 0 -432px;}
#buttoncb a.google { background-position: 0 -480px;}
#buttoncb a.pint { background-position: 0 -528px;}
#buttoncb a.linkedin { background-position: 0 -576px;}
#buttoncb a.devart { background-position: 0 -624px;}
#buttoncb a.ytube { background-position: 0 -672px;}
#buttoncb a.rss { background-position: 0 -720px;}
#buttoncb a.fb:hover { background-position: 0 0px;color: #0374DD;}
#buttoncb a.twiter:hover { background-position: 0 -48px;color: #00A1DF;}
#buttoncb a.google:hover { background-position: 0 -96px;color: #A70000;}
#buttoncb a.pint:hover { background-position: 0 -144px;color: #C00;}
#buttoncb a.linkedin:hover { background-position: 0 -192px;color: #005772;}
#buttoncb a.devart:hover { background-position: 0 -240px;color: #4C7A4A;}
#buttoncb a.ytube:hover { background-position: 0 -288px;color: #A00;}
#buttoncb a.rss:hover { background-position: 0 -336px;color: #EC5601;}</style>
<div id="buttoncb">
<ul>
<li ><a href="Link Facebook Anda" class="icon fb" ><span>Facebook</span></a></li>
<li ><a href="Link Twitter Anda" class="icon twiter" ><span>Twitter</span></a></li>
<li ><a href="Link Google+ Anda" class="icon google" ><span>Google+</span></a></li>
<li ><a href="Link Pinterest Anda" class="icon pint" ><span>Pinterest</span></a></li>
<li ><a href="Link Linkedin Anda" class="icon linkedin" ><span>LinkedIn</span></a></li>
<li ><a href="Link Deviant Art Anda" class="icon devart" ><span>DeviantArt</span></a></li>
<li ><a href="Link Youtube Anda" class="icon ytube" ><span>Youtube</span></a></li>
<li ><a href="Link RSS Anda" class="icon rss" ><span>RSS</span></a></li>
</ul>
</div>
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 membaca dan dapat meningkatkan follower/jumlah Like fans page FB anda..
