Tombol Follow Me dengan Efek Transisi Cubic Bezier CSS3 merupakan tombol social media yang menarik dengan efek memantul yang hanya menggunakan CSS3 tanpa javascript

Tombol Follow Me dengan Efek Transisi Cubic Bezier CSS3 - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Tombol Follow Me dengan Efek Transisi Cubic Bezier CSS3 merupakan tombol social media yang menarik dengan efek memantul yang hanya menggunakan CSS3 tanpa javascript

Tombol Follow Me dengan Efek Transisi Cubic Bezier CSS3

Setelah sebelumnya saya memberikan widget atau tombol social media dengan efek transisi. Seperti yang sebelumnya, kali ini widget/tombol sosial medianya juga menggunakan efek transisi tapi menggunakan cubic-bezier. Sehingga efek pada saat tombol ini disorot akan memiliki efek seperti memantul (seperti menggunakan jQuery easing). Nah langsung saja.


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('http://2.bp.blogspot.com/-JKB0aVYaIW0/UC-oBl8NXxI/AAAAAAAAEYA/IbgyikdkM5A/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:



Tata letak Blogger
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('http://2.bp.blogspot.com/-JKB0aVYaIW0/UC-oBl8NXxI/AAAAAAAAEYA/IbgyikdkM5A/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 mambaca dan dapat meningkatkan follower/jumlah Like fan page FB anda..
SatankMKR
Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

8 comments:

  1. terima kasih ilmunya, permisi saya sudah sedot untuk dipraktekkan, kunjungi balik ya Bos.... sekali lagi makasih

    BalasHapus
  2. Maaf mas . mau tanya .

    gimna mau buang garisan ini :

    http://i.imgur.com/rkg26.jpg

    tq mas

    BalasHapus
  3. maaf mas kerna comentar tadi

    rupanya i2 template sy mas... :-d

    BalasHapus
  4. ini blog memang super" cakepp,
    website apa bogger hahaha

    BalasHapus
  5. sumpah kereen gan.. tp syang layar tegak gk layar bobo..

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP