14.3.15
31
Tombol Share Bouncing Fixed Shadow - Cara mudah untuk mempromosikan blog agar banyak yang mengenal adalah dengan membagikan ulang artikel kebeberapa sosial media seperti Facebook, Twitter dan Google Plus. Sehingga traffik yang kita dapatkan bersumber dari berbagai ragam lalu lintas, karena tidak menutup kemungkinan mereka yang sedang online di facebook dan twitter akan membuka blog Anda jika posting di share ulang ke media tersebut.

Dengan perhitungan minimal, jika 20 orang yang berkunjung ke blog Anda melalui media Facebook, 20 orang dari Twitter dan 20 orang dari Google Plus, maka blog Anda sudah mendapat kunjungan 60 visitor dalam sehari untuk 1 posting atikel, belum lagi mereka yang rutin melakukan blogwalking ke blog Anda. Hmm...sudah pasti mereka yang belum mengenal blog Anda saat ini akan segera tahu semua informasi yang Anda tuliskan, dan itu hanya karena membuat widget tombol share di blog seperti ini:


Tombol share



Apa bedanya dengan Widget tombol Share yang digunakan pada beberapa blog yang lain..?, fungsi widget ini sama seperti Membuat Tombol Share Terbaru Efek Transisi pada artikel terdahulu, namun karena kegunaan widget ini dapat membantu menaikkan reputasi blog, efek tampil tombol saya modifikasi lagi dengan style Bouncing Fixed Shadow untuk membuat pengunjung tertarik membagikan ulang artikel Anda dengan meng-KLIK tombol share yang Anda buat seperti ini:




DEMO SHOW




Karena ini berupa tampilan widget, untuk desain tampilan saya tidak menggunakan link background gambar (Url-gambar-icon) pada masing-masing tombol agar loading blog tidak berat, cukup kita bentuk dengan Penggunaan Background Radial Gradient, selanjutnya kita gabungkan dengan font-format ('svg') untuk menampilkan icon gambar pada masing-masing tombol.


@font-face {
src:url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.eot?blijkv');
 font-family: 'icomoon';
 format('embedded-opentype'),
 format('woff'),
 format('truetype'),
 format('svg');font-weight: normal;font-style: normal
}


Untuk Efek bouncing fixed shadow kita gunakan CSS animation: shadow 2s infinite, sama seperti cara Menghilangkan | Memunculkan Obyek Dengan CSS3 Animasi, namun disini kita ambil hanya efek pantulnya (bouncing) saja, sedangkan untuk gerakan kita gunakan perintah keyframes-jumping dan keyframes-shadow seperti ini:

@-webkit-keyframes shadow {50%{-webkit-transform: scale(1.4)}}
@-moz-keyframes shadow {50%{-moz-transform: scale(1.4)}}
@keyframes shadow {50%{transform: scale(1.4)}}
@-webkit-keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@-moz-keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}



Susunan efek untuk gerakan tombol sudah selesai kita buat, selanjutnya tinggal mengatur bentuk tampilan saat tombol di HOVER. Kode lengkapnya seperti ini:


.tombol-share {
  background:radial-gradient(circle farthest-side at 30% 15%, white, #B2B2B2);
  width:100px;height:100px;border-radius:50%;display:inline-block;
  font-size:75px;line-height:100px;margin:25px;position:relative;text-align:center;
  -webkit-animation:jump 2s infinite;
  -moz-animation:jump 2s infinite;
  animation:jump 2s infinite}

.wrapper {width:100px;height:100px;display:inline-block;position:relative;margin:20px}
.tombol-share span {
  display: block;width: 0;height: 0;border-radius: 0;position: absolute;
  left: 50%;top: 50%;margin: 0;-webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;transition: all 0.3s}

.tombol-share:hover span {width:100px;height:100px;border-radius:100%;margin:-50px}
.facebook span {background: radial-gradient(circle farthest-side at 30% 15%, #FFF, #ADB9D4 25%,  #3B5998 80%);}
.twitter span {background: radial-gradient(circle farthest-side at 30% 15%, #FFF, #C6E0FF 25%, #4099FF 80%);}
.googlePlus span {background: radial-gradient(circle farthest-side at 30% 15%, #FFF, #F4CEC4 25%, #DB5A3C 80%);}

.tombol-share i {
  background: none;width: 100px;height: 100px;position: absolute;
  left: 0;top: 0;line-height: 90px;font-size: 50px;z-index: 10}

.tombol-googlePlus:before {content: "\e600"}
.tombol-facebook:before {content: "\e601"}
.tombol-twitter:before {content: "\e602"}
.tombol-share .tombol-facebook {color: #3B5998;}
.tombol-share .tombol-twitter {color: #4099FF;}
.tombol-share .tombol-googlePlus {color: #DB5A3C;}
.tombol-share:hover i{color: white;}
.shadow {
  width: 46px;height: 10px;background: rgba(0,0,0,0.2);position: absolute;
  left: 50%;margin-top: -10px;border-radius: 50%;
  -webkit-animation: shadow 2s infinite;
  -moz-animation: shadow 2s infinite;
  animation: shadow 2s infinite}

@-webkit-keyframes shadow {50%{-webkit-transform: scale(1.4)}}
@-moz-keyframes shadow {50%{-moz-transform: scale(1.4)}}
@keyframes shadow {50%{transform: scale(1.4)}}
@-webkit-keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@-moz-keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@keyframes jump {0%{bottom: 20px}50%{bottom: 0;}100%{bottom: 20px}}
@font-face {
 font-family: 'icomoon';
 src:url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.eot?blijkv');
 src:url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.eot?#iefixblijkv') format('embedded-opentype'),
  url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.woff?blijkv') format('woff'),
  url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.ttf?blijkv') format('truetype'),
  url('http://i.icomoon.io/public/132e75ef6a/UntitledProject/icomoon.svg?blijkv#icomoon') format('svg');font-weight: normal;font-style: normal}

[class^="tombol-"], [class*=" tombol-"] {
 font-family: 'icomoon';speak: none;font-style: normal;font-weight: normal;
 font-variant: normal;text-transform: none;line-height: 1;
 -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}


Saya hanya menampilkan 3 buah tombol saja pada widget ini, karena seperti facebook, twitter dan Google+ yang secara umum sering digunakan untuk berbagi informasi. HTML pemanggilnya seperti ini:


<div class="wrapper">
  <a class="tombol-share facebook" href="/">
     <i class="tombol-facebook"></i>
        <span></span>
  </a>
        <div class="shadow"></div>
</div>

<div class="wrapper">
   <a class="tombol-share twitter" href="/">
      <i class="tombol-twitter"></i>
         <span></span>
    </a>
         <div class="shadow"></div>
</div>

<div class="wrapper">
   <a class="tombol-share googlePlus" href="/">
      <i class="tombol-googlePlus"></i>
         <span></span>
   </a>
         <div class="shadow"></div>
</div>



Bagaimana pekerjaan yang cukup mudah bukan? hehe..!!! semoga dengan beberapa pilihan tombol share seperti diatas, sahabat semua pecinta SAHABAT BLOGGER 77 sudi kiranya membagikan ulang posting kali ini dengan ihklas. Terimakasih.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Tombol Share Bouncing Fixed Shadow
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

31 komentar

  1. tombol share yg ini juga gak kalah keren lg ,,,bisa kek terlihat meleyang diudara gtu ,,,,hehee
    devy emg sesuatu banget deh ... idenya cakep2 ,,,, :)

    BalasHapus
    Balasan
    1. kan mas Fiu yang ajarain, hehe..!!

      Hapus
    2. kn sy maw minta diajarin devy ,,, sy yg ajarin devy sih diajarin apa coba ? hehehe

      Hapus
    3. devy ..... help me ,,,, ...
      kok tombol shre nya nongol diatas artikel yah ,,,hehe

      trs gimana untk mengcilkn lingkaraanny, soalnya diliat2 trllu besar ,,,hehe

      Hapus
    4. kan mas Fiu yang letakkan kodenya diatas artikel, ya nongolnya pasti diatas artikel attuh..kalau ingin dibawah artikel letakkan kode HTML dibawah <data:post.body/> yang terakhir. mungkin ada 2 sampai 3 kode yang sama, cari kode yang terakhir.

      untuk mengubah dimensi ukuran circle. lihat pada kode ini:

      ...{
      width:100px;
      height:100px;
      line-height:100px;
      font-size:75px;
      }


      semua dimensi tombol saya atur dengan nilai lebar:100px dan tinggi 100px, mungkin ada beberapa kode dengan nilai seperti itu, ubah semua nilainya menjadi 30px atau lebih kecil lagi. menjadi seperti ini:

      ...{
      width:30px;
      height:30px;
      line-height:30px;
      font-size:25px;
      }


      Hapus
    5. ok sy cubi dulu yah ...
      devy jgn kmn2 dulu loh ya ... kali aja mw tnya lg ,,hehehe

      Hapus
  2. Wow keren tapi scriptnya lumayan banyak ya... :)

    BalasHapus
    Balasan
    1. icon sharenya di buat 1 tombol saja mas, biar kodenya tidak banyak, mudah kok, hehe..!!

      Hapus
  3. okelah, ishmah izin save! :)

    BalasHapus
  4. Ini nanti munculnya dimana yah.
    Di bawah postingan?

    Haha demonya lucu,
    bouncing2 kaya goyang drible.. #ehh

    BalasHapus
    Balasan
    1. secara umum saja mas, biasanya widget tombol share ditampilkan setelah posting (dibawah posting)

      Hapus
  5. Ini nanti munculnya dimana yah.
    Di bawah postingan?

    Haha demonya lucu,
    bouncing2 kaya goyang drible.. #ehh

    BalasHapus
  6. kira" bikin berat loading blog gak mba

    BalasHapus
    Balasan
    1. di nilai sendiri saja mas, apakah setelah membuka tombol DEMO SHOW diatas berat gak loadingnya.?

      soalnya pada tombol tidak menggunakan link gambar, jadi tidak berat, tuh si tombol masih bisa mentul-mantul kan.? hehe..!!

      Hapus
    2. iya mba hehe keren eh mba mantul" kayak bola basket

      Hapus
    3. tuh kan benar, coba saja itu tombol berat, so pasti tidak bakalan bisa mantul kan, hehe..!!

      Hapus
    4. iya mba untuk hatiku tidak ikut terpantul" :-)

      Hapus
  7. Artikel bha devi keren2, tapi saya belum bisa menerapkannya dalam blog saya,maklum masih belajar dan baru, nah saya mau minta tolong bha devi sudikah kiranya mempercantik blog saya dengan widget2 yg seperti bha devi tulis, blog saya http://team2air.Blogspot.com dan pingin tau gimana mekanisme nya

    BalasHapus
    Balasan
    1. dengan senang hati mas, apa yang bisa Devy bantu.?

      Hapus
    2. Pingin tampilan blog saya lebih bagus gitu lho, untuk meningkatkan trafik pengunjung pada blog saya dan supaya mereka tertarik melihat blog saya,,kalau boleh saya minta alamat emailnya bha devi? Dan alamat email saya team2air@gmail.com

      Hapus
  8. keren banget, cuman bingung taruh dimana saya save dulu ya


    mantab info nya

    BalasHapus
    Balasan
    1. kenapa harus bingung mas, secara umum letak tombol share ditampilkan setelah postingan atau dibawah postingan. temukan kode:

      <data:post.body/>

      lalu letakkan kode HTML diatas dibawah kode tadi.untuk CSS letakkan diatas kode ]]></b:skin>

      Hapus
  9. Tombol share sosmed di blog aku malah cuma pake bawaannya aja. Cuma aktifkan plugin gitu doank. Pernah coba pasang pake kode script, tapi entah salah letaknya. Tombolnya gak mau muncul, malah templatenya berantakan.

    BalasHapus
  10. tombolnya pake efek dimensi 3, simpan dulu ya Mbak Dev (p) idenya keren :))

    BalasHapus
    Balasan
    1. 2 tutorial dari SB-77 kemarin sudah disimpan, dan ini tutorial yang ke-3 mau disimpan juga, takutnya gak muat pak tempat untuk menyimpannya kalau terlalu banyak, hehe..!!

      Hapus
  11. Keren-keren ....boleh nich kapan2 di coba.... :) :) :)


    BTW BLOGNYA UDAH SAYA FOLLOW MBAK...JANGAN LUPA FOLBACKNYA YA....TANGKIU

    BalasHapus
  12. blog ane sudah ada tombol share nya gan bawaan dari template nya. Ane pengen nyobain tutorial sobat sebenarnya :)

    BalasHapus
  13. .Artikel mbak devy Beda dari yang lain. "SELALU" .
    .Unik-unik , keren-keren, Menggugah selera serta pandangan mata blogger lainnya.
    .Terima kasih mbak devy. .Sarapan yuk. =p~

    BalasHapus
  14. Selamat sore mbak Devy. Mantap sekali artikel-artikelnya. Saya malah belum PD kalo nulis tentang web design.

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK