18.4.15
43
Icon Media Share With Hover Slide - Salah satu cara meningkatkan trafik blog agar banyak yang mengenal dan berkunjung ke blog Anda adalah dengan berbagi (membagikan ulang artikel blog) ke sosial media seperti facebook like, twitter dan google plus share. Namun sangat tidak mungkin blog Anda mendapat kunjungan minimal 1000 pageview/hari jika itu hanya Anda yang melakukannya, Anda harus bisa mengajak pengunjung untuk melakukan hal yang sama.

Jika berkunjung ke blog lain bisa Menumbuhkan Ide Inspirasi Menulis Melalui Blogwalking, maka dengan membuat dan memasang widget icon media share di blog juga tidak kalah penting, karena widget tombol share seperti ini akan sangat-sangat membantu untuk memperkenalkan keberadaan blog Anda ke orang banyak. Untuk membuat pengunjung tertarik membagikan ulang beberapa artikel di blog Anda, tampilan widget tombol share seperti ini banyak saya modifikasi dengan berbagai efek, beberapa diantaranya bisa Anda lihat pada TAB Artikel dibawah ini:



Membuat Tombol Share Terbaru Efek Transisi

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...
Baca Selengkapnya

tabs_shortcode2

Tombol Share Bouncing Fixed Shadow

Dengan perhitungan minimal, jika 20 orang yang berkunjung ke blog Anda melalu 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...
Baca Selengkapnya


Cara Mudah Membuat Tombol Share Di Blog

Dengan adanya Widget Tombol Share yang Menarik di blog seakan memberi pesan kepada Visitor Blog agar dengan mudah melakukan Share/Berbagi atas apa yang telah mereka baca di artikel blog anda. Namun jika anda tidak memasang tombol share...
Baca Selengkapnya




Icon media share kali ini saya bentuk dengan tampilan yang berbeda, saya hanya mengambil nilai seberapa banyak pengunjung yang sudah membagikan ulang artikel blog Anda untuk ditampilkan disana, dan untuk melihat hasilnya saya hubungkan dengan efek hover slide seperti ini:




DEMO SHOW




Semua akan saya buat mudah, pada masing-masing icon media sudah aktif saat widget ini terpasang di blog Anda, artinya pengunjung yang membagikan ulang artikel blog Anda akan ditampilkan dengan jumlah angka, tanpa Anda melakukan edit kode ID akun pada icon media target, karena pada HTML pemanggil masing-masing data icon sudah saya sertakan perintah JavaScript aktif untuk mengambil URL-data saat pengunjung melakukan share, kode lengkapnya seperti ini:



<div id="media">
   <div class="facebook share"> // Icon media Facebook
     <i class="icon"><i class="icon-facebook"></i></i><div class="slide">
         <p>facebook</p></div>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Freference%2Fplugins%2Flike&send=false&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=568581339861351" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:20px;" allowTransparency="true"></iframe>
   </div>
   <div class="twitter share"> // Icon media Twitter
     <i class="icon"><i class="icon-twitter"></i></i><div class="slide">
         <p>twitter</p></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="mariuCSS">Tweet</a>
<script>
  !function(d,s,id){
    var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
    if(!d.getElementById(id)){
      js=d.createElement(s);
      js.id=id;
      js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
   </div>
   <div class="google share"> // Icon media Google+
     <i class="icon"><i class="icon-google-plus"></i></i><div class="slide">
         <p>google+</p></div>
            <div class="g-plusone" data-size="medium"></div>
<script type="text/javascript">
    (function() {
      var po = document.createElement('script');
      po.type = 'text/javascript';
      po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(po, s);
    }
    )();
  </script>
   </div>
   <div class="linkedin share"> // Icon media Linkedin
     <i class="icon"><i class="icon-linkedin"></i></i><div class="slide">
         <p>linkedin</p></div>
<script type="IN/Share" data-counter="right"></script>
<script src="//platform.linkedin.com/in.js" type="text/javascript">
    lang: en_US
  </script>
   </div>
</div> <!..ending id tag 'media'..!>



Pekerjaan sudah selesai, tinggal membuat bentuk rangka tampilan pada masing-masing icon media. Konsepnya kita bentuk dengan susunan CSS element, akan tetapi jika Anda kurang menyukai bentuk tampilan widget seperti diatas, Anda bisa merubah tampilannya sesuai keinginan dan warna di blog Anda, silahkan Anda edit beberapa kode CSS berikut untuk membuat tampilan tombol share lebih keren lagi dari ini, CSS lengkapnya sebagai berikut:


#media {
  border-radius: 5px;
  padding: 14px 7px;
  background: white;
  width: 660px;
  overflow: hidden;
  margin: 50px auto 0;
  box-shadow:0 2px 3px rgba(71, 71, 71, 0.31)}

.share {
  background: #DCE0E0;
  position: relative;
  display: block;
  float: left;
  height: 40px;
  margin: 0 7px;
  overflow: hidden;
  width: 150px;
  border-radius: 3px}

.icon {
  display: block;
  float: left;
  position: relative;
  z-index: 3;
  height: 100%;
  vertical-align: top;
  width: 38px;
  border-radius: 3px 0px 0px 3px;
  text-align: center}

.slide {
  z-index: 2;
  display: block;
  margin: 0;
  height: 100%;
  left: 38px;
  position: absolute;
  width: 112px;
  border-radius: 0px 3px 3px 0px}

.slide p {
  font:400 16px Open Sans;
  border-left: 1px solid #fff;
  border-left: 1px solid rgba(255,255,255,0.35);
  left: 0;
  margin: 0;
  color: #fff;
  position: absolute;
  text-align: center;
  top: 10px;
  width: 100%}

.share .slide {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out}

.icon i {color:#fff;line-height:42px;text-shadow:1px 2px 1px #111}
.facebook iframe,.twitter iframe,.google #___plusone_0,
.linkedin .IN-widget {display:block;position:absolute;top:10px;z-index:1}
.linkedin .IN-widget {right:22px}
.facebook iframe {right:16px}
.twitter iframe {width:90px !important;right:5px}
.google #___plusone_0 {width:70px !important;right:15px}
.facebook:hover .slide,.twitter:hover .slide {left:150px}
.google:hover .slide,.linkedin:hover .slide {left:-150px}
.facebook .icon,.facebook .slide {background:#305c99}
.twitter .icon,.twitter .slide {background:#00cdff}
.google .icon,.google .slide {background:#d24228}
.linkedin .icon,.linkedin .slide {background:#007bb6}


Jika kode CSS diatas terlalu panjang, sangat banyak sehingga takut akan loading blog menjadi berat, bisa Anda ringkas dengan Cara Memperkecil Ukuran File CSS. Sampai disini dulu ya cerita dari Devy, next time saya akan memberikan widget yang lebih menarik lagi dari ini, semoga Icon Media Share With Hover Slide kali ini dapat bermanfaat buat sahabat semua pecinta SAHABAT BLOGGER 77 yang selalu setia berkunjung disini. Dan pastinya dapat membuat blog Anda lebih terkenal lagi dan sukses selalu. Amin..!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Icon Media Share With Hover Slide
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 =

43 komentar

  1. keren banget ya icon nya, pengen sih, tapi bingung mau taruh dimana 8:)

    BalasHapus
    Balasan
    1. aduh salah ketik icon ya, gini harusnya 8-)

      Hapus
    2. letak kode CSS pada Template selalu diapit oleh tag <b:skin>, jadi semua bentuk susunan pola blog diatur dalam area tersebut, begitupun jika kita ingin menambahkan beberapa widget seperti tombol share.

      kode CSS letakkan dalam wilayah tag tersebut, tinggal meletakkan kode HTML pemanggilnya saja yang kudu diperhatikan, karena widget seperti ini ada juga yang ditampilkan dalam sidebar page, namun secara umum selalu ditampilkan setelah posting.Cari kode terakhir

      <data:post.body/>

      selanjutnya letakkan kode HTML tersebut tepat dibawah kode itu, mungkin ada beberapa kode yang sama, namun letakkan pada tag kode yang paling akhir.

      Hapus
  2. Rupanya mbk ni paham betul code2 Html , css, Javascript !

    BalasHapus
    Balasan
    1. hmmm...paham sih enggak cuma mengerti doang kok, hehe..!!

      Hapus
    2. mbak gimana di blog saya komentar terbarunya tidak bisa tampil ni.. ;((

      Hapus
    3. maksudnya komentar terbaru dari mana gitu mbak,, recent atau form comment.?

      Hapus
  3. Caranya memunculkan komentar2 terbaru di blog di recent mbk...

    BalasHapus
    Balasan
    1. sebenarnya sih sudah banyak para webmaster share tentang widget seperti recent comment seperti yang mbak tanyakan, tetapi karena mbak Nikmah ingin membuat dan menampilkan recent comment seperti itu. kode lengkapnya seperti ini:

      Letakkan script ini diatas tag </head>

      <script type='text/javascript'>
      var numComments = 5;//untuk menampilkan jumlah komentar
      var characters = 60;//untuk ringkasan pesan komentar
      </script>
      <script type='text/javascript'>
      //<![CDATA[
      var numComments=numComments||5,characters=characters||40;function recent_comments(tb){var commentsHtml;commentsHtml='<ul id="recent_comments">';for(var i=0;i<numComments;i++){var commentlink,authorName;if(i==tb.feed.entry.length)break;commentsHtml+="<li>";var entry=tb.feed.entry[i];for(var l=0;l<entry.link.length;l++){if(entry.link[l].rel=='alternate'){commentlink=entry.link[l].href}}for(var a=0;a<entry.author.length;a++){authorName=entry.author[a].name.$t}commentsHtml+="<strong><a href=\""+commentlink+"\" title=\""+authorName+"\">"+authorName+"</a></strong>";var commHTML=entry.content.$t;var commBody=commHTML.replace(/(<([^>]+)>)/ig,"");if(commBody!=""&&commBody.length>characters){commBody=commBody.substring(0,characters);commBody+=" &hellip;"}else{commBody=commBody}commentsHtml+=" - ";commentsHtml+="<span>"+commBody+"</span>";commentsHtml+="</li>"}commentsHtml+='</ul>';document.write(commentsHtml)}
      //]]>
      </script>


      Selanjutnya, ke tata letak untuk menambahkan widget tampilan.
      Letakkan script ini pada halaman kosong add-gadget:

      <script>
      document.write("<script src=\"/feeds/comments/default?alt=json&callback=recent_comments\"><\/script>");
      </script>

      Hapus
    2. ooo yang bagusnya kaya gini yah. hehehehe

      Hapus
  4. .Mbak devi dari kapan mahir seputar css gini mbak? :-?

    .Tombol/iconnya menarik mbak, jumlah sharenya juga kelihatan, hehe.
    .Mau masang ini , tapi bingung. soalnya di blog udah ada tombol share juga.
    .Nah kalau dipasang yang ini takutnya jadi double. ;(

    BalasHapus
    Balasan
    1. Kalau mahir sih belum mas, ini hanya menuliskan kembali apa yang devy pelajari saat kuliah, karena devy kuliah banyak belajar tentang kode script, CSS dan HTML seperti ini mas,

      biasanya template sudah menyediakan icon-icon widget tombol share seperti ini mas, tetapi selagi konsepnya kita alihkan secara personal, maka tidak masalah sekalipun blog itu memiliki widget 2 atau 3 sekalipun. karena seperti yang saya jelaskan diatas, masing-masing icon saya atur dengan konsep personal pada perintah javascriptnya, dan hanya untuk mengambil jumlah angka saja.

      Hapus
    2. makanya apa.? hayoo..!!

      Hapus
    3. .Hmm. .Kuliahnya yang dibahas tentang script mulu toh, wajar sih kalau sudah hebat mbaknya. hehe.

      .Berarti blog tetap aman kan mbak kalau terdapat double widget 'share button' ini? salahnya ane gak berani mau otak-atik template biarpun dibackup dari awal sih, tapi setiap kali nemuin pesan error pasti langsung piknik *Panik* ;-(

      Hapus
    4. Klau aman dan tidaknya sih, itu tergantung penilaian si google mas, saya tidak bisa memastikan karena saya juga sebagai pengguna, tetapi kalau masalah error bisa saya pastikan tidak akan. hehe..!!

      oh ya..beberapa kali berkunjung ke akun google+ mas Dandy, saya selalu bingung mas, banyak banget situs blog yang dipublis disana, kalau boleh tahu blog mas yang mana satu ya, soalnya mau berkomentar bingung ke blog yang mana,.?

      Hapus
    5. kayak ayam jago dong, kukurutukkkkk...eheheh..!!!

      Hapus
    6. ah bisa ajah teh devy nih

      Hapus
    7. .Berarti sudah 100% Fix dong mbak? .Simpan dulu aja deh codenya. :d

      .Blognya yang ini mbak : softdrizk.co.vu :)

      Hapus
  5. serasa lagi buka jendela.....keren

    BalasHapus
    Balasan
    1. biarkanlah sinar matahari masuk ke ruang kamar, jadi buka jendela kamarnya mas wahap, hehe...
      yang penting kalau malam jangan coba-coba buka jendela tetangga, ntar dikira mau maling lagi

      Hapus
  6. Aku comot ya mbak, buat dipasang di situsku... :d

    BalasHapus
  7. Model hovernya bagus, Kalau template saya tombol sharenya di ganti ini bisa gak ya.. Takutnya malah tombolnya Dobel :-?

    BalasHapus
  8. wah model baru lagi nih mas, patut di coba nih icon sharenya

    BalasHapus
    Balasan
    1. benar mbak PUR, sebenarnya sih modelnya sih sama seperti tampilan-tampilan sebelumnya, hanya saya tambahkan efek hover slide saja kok.

      Hapus
  9. jadi bisa buka tutup, bagus banget hasilnya mba..
    kreasinya selalu terbaru dan menarik

    BalasHapus
  10. ih ... ckep lgi nih model brunya ,,
    hai devy ,... lama tak jumpa ...hehe

    BalasHapus
    Balasan
    1. iya..kemana aja neh mas, sudah lama banget rasanya, kangen banget gak saling sapa lagi sama mas fiu, kirain sudah ditelan bumi,
      komntar gak dibalas, posting blog gak diupdate,hmmm..jadi Devy pasrah aja dech, ehh..taunya nongol dimari..

      selamat datang kembali ya mas.

      Hapus
    2. hehehe .... lg nyri2 devy loh sebenarnya ,,,, :)
      eh ... kok devy pasrah gtu aja, emg knp ? kn sy dah datang dimari ....hehe :)

      Hapus
  11. Saya suka yang nomor 2 keren banget :))

    BalasHapus
    Balasan
    1. bouncing fixed effect yang saya padukan menggunakan efek gerak media keyframes animation...

      Hapus
  12. pengen coba tapi takut malah ancur :D

    BalasHapus
    Balasan
    1. kalau begitu jangan dicoba-coba mas, soalnya kan kalau segala sesuatunya itu kalau sudah takut terlebih dahulu yang ada pasti bingung, terus ancur dah...hehe..!!

      Hapus
  13. cantik sekali mbak sayang saya nggak berani naruhnya karena sudah media share di blog saya takutnya salah taruh

    BalasHapus
  14. kalau pengen Twitter, Facebook dan Google+ aja tanpa Linkedil gimana ya mba ;-)

    BalasHapus
    Balasan
    1. Tinggal dihapus saja kode HTML untuk pemanggil sosial Linkedin
      Hapus kode ini:

      <div class="linkedin share"> // Icon media Linkedin
      <i class="icon"><i class="icon-linkedin"></i></i><div class="slide">
      <p>linkedin</p></div>
      <script type="IN/Share" data-counter="right"></script>
      <script src="//platform.linkedin.com/in.js" type="text/javascript">
      lang: en_US
      </script>
      </div>


      Selanjutnya ubah kode CSS diatas untuk tampilan sosial widget tombol seperti ini:

      .icon i {color:#fff;line-height:42px;text-shadow:1px 2px 1px #111}
      .facebook iframe,.twitter iframe,.google #___plusone_0,
      .facebook iframe {right:16px}
      .twitter iframe {width:90px !important;right:5px}
      .google #___plusone_0 {width:70px !important;right:15px}
      .facebook:hover .slide,.twitter:hover .slide {left:150px}
      .google:hover .slide {left:-150px}
      .facebook .icon,.facebook .slide {background:#305c99}
      .twitter .icon,.twitter .slide {background:#00cdff}
      .google .icon,.google .slide {background:#d24228}

      Hapus
  15. jempol buat kemampuan dan kreatifitas anda... saya salut sama orang yang paham bahasa CSS wa ala alihi wa sohbihi... karena saya pernah belajar sedikit bahasa itu, dan njelimet kayak belajar bahasa planet lain... sementara untuk mengginakan icon , insyaAllah kapan2 ya... :)

    BalasHapus
  16. Belum pernah coba ngotak atik code beginian. Gaptek abiiis diriku ini Dev.
    Makanya blogku sederhana banget :d

    BalasHapus
  17. kok ngak bisa mbak gini nih error nya
    Kesalahan saat mengurai XML, baris 4659, kolom 132: The reference to entity "send" must end with the ';' delimiter

    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