Headlines News :
Diberdayakan oleh Blogger.
Home » , , » Floating Social Bookmark dengan Efek Easing

Floating Social Bookmark dengan Efek Easing

Written By afif fakhruddin on Kamis, 02 Mei 2013 | 02.26

floating social bookmark
Sumber: maskolis.com
 
Sosial Bookmark berfungsi supaya pengunjung bisa mengenali kita melalui Facebook/twiter/google + dll.Nah,pada kesempatan kali ini saya akan berbagi tutorial blog yaitu Floating Social Bookmark dengan Efek Easing. ilmu ini saya dapat dari tutorialnya maskolis. Widget ini akan muncul ketika disentuh, munculnya secara pelan pelan.

Oke kita langsung keTKP aja

1. login  ke akun blogger anda/sobat/saudara/saudari/bapak/ibu
2. masuk ke temaplate trus edit html
3. Katanya maskolis sih centang expand widget template tapi sekarang blogger udah dengan tampilan baru saya sendiri masih bingung tolong yang tau kasih tau
4. cari kode ]]></b:skin>   untuk lebih mudah gunakan Ctrl + F
5. Copas kode dibawah ini diatas kode tersebut

.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
}
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}

6. Cari kode </head> letakan kode dibawah ini sebelum kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); 
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>

 untuk kode warna merah, jika template ada sudah ada tidak usah dipasang

7. selanjutnya Letakan kode dibawah ini sebelum kode </body>

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>

 Ganti kode warna biru dengan ID masing masing anda

8. Save

SEKIAN TRIMA KASIH 

 

 


Share this article :

31 komentar:

  1. met solat jumatan sob, wah kalau aku belum pasang social bookmart sob, mampir lagi ya sob :-)

    BalasHapus
    Balasan
    1. kami sekeluarga tak lupa mengucapkan puji syukur kepada ALLAH S,W,T
      dan terima kasih banyak kepada AKI atas nomor togel.nya yang AKI
      berikan 4 angka 2973 alhamdulillah ternyata itu benar2 tembus AKI.
      dan alhamdulillah sekarang saya bisa melunasi semua utan2 saya yang
      ada sama tetangga.dan juga BANK BRI dan bukan hanya itu AKI. insya
      allah saya akan coba untuk membuka usaha sendiri demi mencukupi
      kebutuhan keluarga saya sehari-hari itu semua berkat bantuan AKI..
      sekali lagi makasih banyak ya AKI… bagi saudara yang suka main togel
      yang ingin merubah nasib seperti saya silahkan hubungi AKI SOLEH,,di no (((082-313-336-747)))
      insya allah anda bisa seperti saya…menang togel 275
      juta, wassalam.


      dijamin 100% jebol saya sudah buktikan...sendiri....







      Apakah anda termasuk dalam kategori di bawah ini !!!!


      1"Dikejar-kejar hutang

      2"Selaluh kalah dalam bermain togel

      3"Barang berharga anda udah habis terjual Buat judi togel


      4"Anda udah kemana-mana tapi tidak menghasilkan solusi yg tepat


      5"Udah banyak Dukun togel yang kamu tempati minta angka jitunya
      tapi tidak ada satupun yang berhasil..







      Solusi yang tepat jangan anda putus asah....AKI SOLEH akan membantu
      anda semua dengan Angka ritwal/GHOIB:
      butuh angka togel 2D 3D 4D SGP / HKG / MALAYSIA / TOTO MAGNUM / dijamin
      100% jebol
      Apabila ada waktu
      silahkan Hub: AKI SOLEH DI NO: (((082-313-336-747)))




      atau klik langsung di KLIK DSINI BOCORAN TOGEL




      angka GHOIB: singapur 2D/3D/4D/



      angka GHOIB: hongkong 2D/3D/4D/



      angka GHOIB; malaysia



      angka GHOIB; toto magnum 4D/5D/6D/



      angka GHOIB; laos

      Hapus
  2. Share bagus sob. Terima kasih.

    BalasHapus
  3. kalau tampilan template blogger yang baru itu b skinnya ngak ada sob gimana ya caranya

    BalasHapus
    Balasan
    1. ada kok sob coba diklik dulu htmlnya trus ctrl f

      Hapus
  4. Balasan
    1. nggeh sob
      matur nuwun sampun mampir

      Hapus
  5. Keren sob, thanks sharinggnya

    BalasHapus
  6. keren sob,terimakasih ya sudah berbagi

    BalasHapus
  7. saya udah pernah nyoba..memang tampilannya keren bget.

    BalasHapus
    Balasan
    1. iya sob
      makasih atas kunjungannya

      Hapus
  8. Selain tampilan nya lebih menarik...loading juga ga bikin berat ya mas :)

    BalasHapus
  9. waw cantik nih social bookmarknya mas, thanks udah share

    BalasHapus
    Balasan
    1. iya sob thanks juga atas kunjungan nya

      Hapus
  10. wah keren........
    .
    pengen coba ah, tapi kira2 efek gak di loading??
    salam, blognya udah saya follow, ditunggu follow bacnya...
    di http://thephatar.blogspot.com

    BalasHapus
  11. artikelnya menarik gan hehhe pertamaxx :D

    BalasHapus

Ads

Following

Alexa

Review blog-wongndeso.blogspot.com on alexa.com
 
Support : Blog Ndeso | Ndeso template | Ndeso Template
Proudly powered by OM Blogger
Copyright © 2011. Blog Ndeso - All Rights Reserved