1.11.14
46
Tombol Share Terbaru Ala Sahabat Blogger 77
Desain Icon Media Share Dengan Efek Transisi - Cara terbaik membantu reputasi blog agar dikenal banyak orang adalah dengan membagikan ulang artikel blog ke situs-situs media sosial seperti google plus, facebook dan twitter. Karena mustahil Anda bisa mendapatkan trafik sebesar 500 pageview/hari (minimal) jika itu hanya Anda yang malakukannya, blog butuh trafik agar bisa naik 1 tingkat dari level sebelumnya, yang sudah pasti blog butuh pengunjung.


KESIMPULAN
Semakin banyak terjadi lalu lintas dalam blog, maka besar kemungkinan blog akan cepat terkenal seiring bertambahnya jumlah artikel pada blog.

Dengan menambahkan widget tombol share di blog merupakan salah satu cara termudah untuk mempromosikan blog Anda kepada banyak orang, karena nyatanya kita tidak bisa memaksakan seseorang untuk melakukan hal yang sama saat kita melakukan blogwalking (hanya bisa berharap, agar blog yang kita kunjungi melakukan hal yang sama dengan berkunjung juga ke blog kita). Pertemuan kali ini, saya sudah mendesain widget tombol share terbaru ala SAHABAT BLOGGER 77 buat sahabat semua dengan menggunakan efek transisi seperti tampilan screenshort dibawah ini:

icon media share picture


Baca juga - Daftar Isi Responsive Model Tema Facebook


Bentuk tampilan menu yang hanya menampilkan sebuah tombol knock ON/OFF, sedangkan untuk icon media, saya hanya menambahkan 3 icon saja yang secara umum banyak digunakan seperti google plus, facebook dan twitter dengan efek transisi.
Kode lengkapnya seperti ini:



<style type='text/css'>
/*icon media share transition design
css type:id element input[sb77]
released on November 01, 2014
visit: http://sahabatblogger77.blogspot.com
modified: Devy Indriyani*/
#share {
  width: 550px;
  display: block;
  position: relative;
  margin:0px auto;}

.open-menu /*!id='sb77'*/ {display: none;}
.open-menu:checked ~ .g-plus {top: 80px;}
.open-menu:checked ~ .fb {left: 310px;top:145px;}
.open-menu:checked ~ .twitter {left: 115px;top:145px;}

.show-menu {
  font: bold italic large Georgia;
  background: #DC143C;
  width: 105px;height: 105px;
  display: block;cursor: pointer;
  border-radius: 50%;
  position: absolute;
  color:#fff;text-align:center;
  line-height:105px;z-index: 10;
  top:200px;left:200px;
  box-shadow:inset 0px 0px 2px 10px #F0F8FF;
  text-shadow: 1px 2px 2px #111}

.text /*!id='sb77'*/ {
  width: 80px;height: 80px;
  display: block;
  border-radius: 50%;
  position: absolute;
  top: 215px;left: 215px;
  background: #ecf0f1;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;}

.g-plus {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyQM9Ucc77iIiPqbmEl8Zy58KaYDjSzooeBfiNzNbEJPlgIun0bCxWw6t1yCvdN2Vel4nNz8vBWK6BSC9q8pLp9BKapgvK23PSZbxGmH9Nz-symjjNT-SZ5hzYJ6Ap-uTR33fDq4wlPt8/s80/sb77-googleplus.png) no-repeat center center;}

.fb {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPvliC6wLRf_XSo-4tKY9jqRg75CdrZmT1PhF454Vj3fCk3Ofb4UZPHP07NcrTL891XLe_JxErzWl4dSno_UBE8rZzyzEHUwa_tv4oIdw_xgLxP5IX0BAE1BTPDI1msMayxdEiBY0K5U4/s80/sb77-facebook.png) no-repeat center center;}

.twitter {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCPFE90Zc-o_8ryO_fpZydQNpetTNYfPAHQCgdnQerQpq3DZsfFMhv_P0wCRni22za-xRei8OQrgM2lVyF2FRtiuIfljCwUx3UddEvtgkcRJcE-0-dOwhN5EUgc6QkaETkZSs_bjI8ll0/s80/sb77-twitter.png) no-repeat center center;}
</style>

Hasilnya:



DEMO SHOW




Untuk HTML berikut saya menggunakan kode fungsi input-checkbox untuk menghilangkan perintah link URL pada tombol, lengkapnya seperti ini:


<div id="share">
<input type="checkbox" id="sb77_id" class="open-menu">
<label for="sb77_id" class="show-menu">SHARE</label>
<a href="#" class="g-plus text"></a>
<a href="#" class="fb text"></a>
<a href="#" class="twitter text"></a>
</input>
</div>


Mungkin saat ini mereka sedang aktif dalam media facebook, ajak mereka untuk berkunjung ke blog Anda dengan membuat sebuah status pada facebook sebagai link tautan, saya yakin beberapa diantara mereka pasti akan KLIK tautan yang Anda kirimkan pada status kronologi di facebook Anda. Hal yang menguntungkan bukan.? hehe..!! *SALAM MANIS*

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Tombol Share Terbaru Efek Transisi
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 =

46 komentar

  1. selamat pagi mbak devy :p
    saya mau asyik-asyik joss dulu sambil 8-) juga (c)

    BalasHapus
    Balasan
    1. alhamdulillah awal bulan bisa asyik-asyik joss (pertamax) uey
      :p

      Hapus
    2. pagi juga kang, jangan banyak ngopi kang, ntar menimbulkan banyak menghayal, heh..
      oh iya, gimana dengan blognya kang jum, sudah kelar belum perbaikannya di bengkel.?

      Hapus
    3. udah saya hapus mbak blognya :p
      sekarang mau aktif di wordpress aja dch siapa tahu bisa seperti mbak Ririn. secara, mbak Ririn kan juga pakai platform wordpress
      :p :p
      hehe

      Hapus
    4. bisa kang, yang terpenting sabar dan telaten dalam mengola sebuah blog, Devy doakan semoga sukses blognya ya kang,

      Hapus
    5. untuk kodenya sendiri penempatannya dimana mbak?
      diatas genteng atau dimana gitu?

      Hapus
    6. sebenernya kepala saya suka nyut-nyutan kalau liat kode-kode begituan mbak
      :p
      riweuh pisan.

      Hapus
    7. biasanya widget seperti ini, umumnya tampil pada halaman terluar formulir posting, jadi letakkan kodenya dibawah kode:
      [pre]<data:post.body/>[/pre]

      atau bisa menempatkannya secara langsung dibawah postingan, temukan kode kurang lebih seperti ini:
      [pre]<b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>… </b:section>
      </b:section>
      <!-- Letakkan Kode Di Sini -->[/pre]

      Hapus
    8. aku doakan smoga kang jum juga bisa kayak mbak ririn...jos...khususan kepada mbak devy yang canntik semoga blognya semkin indah dan hebt...aamiin ...salam hangat dari west progh

      Hapus
  2. bgus nih .... pas di klik eh keluar anaknya 3 ekor ,,,,heheh

    BalasHapus
    Balasan
    1. tadinya mau buat kembar 4, tetapi mikir lagi kebanyakan, takut susah urusinnya,,hehe..

      Hapus
    2. hehehe,,, 3 anak aja tu dah rame kok ...hehe klo empat bisa makin rame lgi ,,,, :)

      Hapus
    3. cukup 2 aja mas, kalau 3 berati gak menerapkan anjuran pemerintah aatuh untuk KB, hehe..

      tetapi banyak juga lebih asyik ya mas, jadi ramai,. (banyak anak banyak rezeki)

      Hapus
    4. hehehe,,, 2 boleh ... banyak juga lebh baik ,,, wah ,,, brrti devy suka punya anak banyak donk ? :)

      Hapus
    5. kalau yang kuasa meberikan banyak, masa kita menolak, kan masih banyak yang ingin punya anak malah ga punya,
      hhmmmmm.. kok jadi bahas anak sih, pacar aja belum punya, sudah membahas hal yang sangat jauh, hehe..

      Hapus
    6. xixixixixixix ,,,,,, iya kok jauh2 amat yah bhasnya ,,,, :-)

      eh ,,,sama donk, sy juga blm punya pacar ,,, huhuhuuhuh :)

      Hapus
    7. concer dimana-mana,banyak yang nge-fans masa gak punya pacar..

      Hapus
    8. hahahahahaha,,, ah fans kn cuma sekdr fans bukan pacar .... :p

      Hapus
    9. kenapa tuh mas aldino ??? :-?

      Hapus
    10. makanya mandi mas Al, biar nyamuk gak mau deket, hehe

      Hapus
    11. ketauan mas aldino jarang mandi ,,,, :p

      Hapus
    12. itu masih nyamuk yang dekat, coba kalau lalat, hehe..

      Hapus
    13. ;((.. ampun Diiiijeeeeeeeeeeee...!,.

      Hapus
    14. iya bener devy ,,, coba klo lalat, bisa kaya ...... hahahahahaha

      Hapus
  3. keren ya jadi bisa hemat tempat juga :D

    BalasHapus
  4. kalau pakai hover mungkin lebih baik lagi mbak.. hanya masukan aja mbak.. tapikan bisa di modifikasi lagi yang ingin pakai...

    keren... (h)

    BalasHapus
    Balasan
    1. hanya menambahkan perintahnya saja mas pada CSS.

      Hapus
    2. apakah tombol share ini bisa juga di tambahi dengan yang lain mbak...

      Hapus
    3. perkecil ukuran dimensinya terlebih dahulu, lihat pada kode ini:

      [pre].text /*!id='sb77'*/ {
      width: 80px;height: 80px;
      display: block;
      border-radius: 50%;
      position: absolute;
      top: 215px;left: 215px;
      background: #ecf0f1;
      -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
      -o-transition: all 0.4s ease;
      transition: all 0.4s ease;}[/pre]

      saya menggunakan lebar pada menu sebesar 80px persegi yang sudah dibentuk menjadi lingkaran pada perintah border-radius:50%. jika ingin menambahkan menu lagi ubah ukurannya menjadi 60px misalnya. lalu atur letak layout posisi pada kode open menu sesuai jarak tampil

      Hapus
    4. sipp dah mbak... si mbak oke banget dah soal CSS gini... mantap dah...

      #Segelas Kopi (c)

      Hapus
  5. sambil makan siang enaknya nongkrong di blog mbak devy nih, biar fress sama kode kodean ^_^

    BalasHapus
    Balasan
    1. awas ntar nasinya gak ketelen loh, karena seperti kang jum yang katanya puyeng jika dihadapkan dengan kode-kode seperti ini, hehe..

      Hapus
  6. cakep hasilnya ni mba,, sangat membantu tutorialnya ,,,
    terima kasih sudah berkunjung salam sukses :)

    BalasHapus
  7. keren-kereen...coba dulu ah...biar keliatan mantab blog saya :D

    salam hangat mbak :)

    BalasHapus
  8. wahhh blogg saya bisa makin keren nih jika pasang tombol share yang terbaru ini :)

    BalasHapus
  9. Keren bingit mbak. Izin save dulu :D

    BalasHapus
  10. Wah Tombol share terbaru ya, saya nak coba boleh? Pasti gagah ni di pake di blog saya.

    BalasHapus
  11. kepengen nambahin wideget tapi kapok banyak kode html aku yng eror :-?

    BalasHapus
  12. sep seeeep... salam kenal

    BalasHapus
  13. betul semakin banyak lalu lintas share semakin ok blognya.. mksh tlh berbagi teh devy

    BalasHapus
  14. Jadi lebh bervariasi mbak

    BalasHapus
  15. Tadinya mau saya pasang mbak, tapi napa yah gag muncul . :-?

    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