Langsung ke konten utama

Sliding Social Icon Cool

Sliding Social Icon Cool
Sliding Social Icon Cool - Lama sudah saya tidak membuat artikel tentang sebuah widget untuk blogger. Sekarang disela-sela nungguin adzan magrib yang lumayan masih lama , saya  akan  berbagi sebuah widget yang cukup atraktif sebagai tombol sosial berbagi dengan efeck slider yang sangat cantik dan dinamis. 


Nah bagi sobat yang sudah melihat demonya dan tertarik untuk memasangnya silahkan
  • Masuk pada Tataletak 
  • Add Gadget / HTML Javascript 
  • Masukan kode dibawah ini 
<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="#" target="_blank">Facebook</a></li>
<li><a class="twitter" href="#" target="_blank">Twitter</a></li>
<li><a class="google-p" href="#" target="_blank">Google plus</a></li>
<li><a class="rss" href="#" target="_blank">Rss</a></li>
</ul>
</div>
<style>
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjav_IIOfFh6ALRvIbOBrhZ4kwSb0SBNkNDx3fV4BhACAcl2tL8VNKAIx_SyBfc41_XMsG3loOgmEu0EvuMlVKXLy98-7u_uoFXq8_HUK21X6z81-LIHKqmy6yHsFfvPKliiMeZoYmcew/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjav_IIOfFh6ALRvIbOBrhZ4kwSb0SBNkNDx3fV4BhACAcl2tL8VNKAIx_SyBfc41_XMsG3loOgmEu0EvuMlVKXLy98-7u_uoFXq8_HUK21X6z81-LIHKqmy6yHsFfvPKliiMeZoYmcew/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCzhGYtFgnYQaEdkfR5ZHLbBApCr6y9FD13i2-HSBBzfzUwCriwMQlJdLDmpKttGuKQhmajeS1BhCF8Nq04adsI-N1q4tP7A9UG562JE62O_PaTa2f9pkxyLwhktq1aGyGZaTO28-w6w/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCzhGYtFgnYQaEdkfR5ZHLbBApCr6y9FD13i2-HSBBzfzUwCriwMQlJdLDmpKttGuKQhmajeS1BhCF8Nq04adsI-N1q4tP7A9UG562JE62O_PaTa2f9pkxyLwhktq1aGyGZaTO28-w6w/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW4ab9S0_8hwc6Y9pHZUbLiNn8e7gF4yFHgNN8KcnkpkYcLXX4G4HehcqPvoNO6v3sh0kwLFcCkJsjAIcZrt4OT-s77nYVWMDia6arHHYitRLp4AHXANzFlxjwQNN2Nxz6sxzlXBmNqQ/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW4ab9S0_8hwc6Y9pHZUbLiNn8e7gF4yFHgNN8KcnkpkYcLXX4G4HehcqPvoNO6v3sh0kwLFcCkJsjAIcZrt4OT-s77nYVWMDia6arHHYitRLp4AHXANzFlxjwQNN2Nxz6sxzlXBmNqQ/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWN88HeqPBRDDoOox2Nx3FvT7269CFYnttjTFCDM-2BAPe6iI4lMqHwDsRklFhB7twxZXcf_geNNcrXUgBWvEqcYM3H6SkWjQ0e9XZNYvhM3nA3HYjXwvguf5nXNxy6_UD6OVieSvNnQ/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWN88HeqPBRDDoOox2Nx3FvT7269CFYnttjTFCDM-2BAPe6iI4lMqHwDsRklFhB7twxZXcf_geNNcrXUgBWvEqcYM3H6SkWjQ0e9XZNYvhM3nA3HYjXwvguf5nXNxy6_UD6OVieSvNnQ/s1600/twitter.png) no-repeat 0 0}
</style>

Ganti # dengan URL sobat 
Save dan lihat hasilnya.


Label:

Komentar

  1. Staff AdministratorKamis, Juli 11, 2013

    bawa baskom kemari :)

    BalasHapus
  2. UnknownKamis, Juli 11, 2013

    blogwalking malam :)

    BalasHapus
  3. Staff AdministratorKamis, Juli 11, 2013

    widget ini cocok da nambah keren kalo di letakinnya di mana ya kang :)

    BalasHapus
    Balasan
    1. Sopala MultapaJumat, Juli 12, 2013

      di sidebar paling atas mas .. tapi jangan dikasih judul widget
      pasti keren kayak kulkas dua pintu hehe

      Hapus
  4. HendrikJumat, Juli 12, 2013

    Tertarik Bang. Tapi loading gambarnya berat gak ya ? :D

    BalasHapus
    Balasan
    1. Sopala MultapaJumat, Juli 12, 2013

      tidak sedang-sedang saja hehe
      masih bisa di tolelir ko ...

      Hapus
  5. Wisata BelanjaJumat, Juli 12, 2013

    saya baru tahu, kayaknya menarik untuk di terpakan di template saya mas :)

    BalasHapus
    Balasan
    1. Sopala MultapaJumat, Juli 12, 2013

      so pasti karena ini cocok deh untuk semua template ...

      Hapus
  6. Bima A.Selasa, Juli 16, 2013

    ini yg saya cari2 ,thank gan :D

    BalasHapus
  7. Kang RianSabtu, Juli 27, 2013

    Bikin jantung deg-deg.an GAN! WOW banget ... thanks for sharing yee sebelumnya ! :) salam blogging kang ..

    BalasHapus
  8. AkmalSenin, Januari 13, 2014

    mantap bro.. izin mke ye

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none
58 komentar
Baca selengkapnya

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b
62 komentar
Baca selengkapnya

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition:  
45 komentar
Baca selengkapnya