Langsung ke konten utama

Horizontal Floating Share

Horizontal Floating Share - Postingan kali ini sebenarnya request dari sahabat [OBC] yang menanyakan tentang cara membuat tombol berbagi yang berbentuk horizontal dengan efek floating dan embel - embel tombol close ( x ) dan open ( + ) .  Tombol share dengan system floating horizontal ini akan terlihat/muncul ketika kita melakukan scroll. Trik ini memang sudah tidak asing lagi alias basi bagi kalangan blogger apalagi para master yang telah lebih dulu mengenal dan memasangnya , namun dengan perkembangan dunia bloger sekarang yang sangat pesat tentu banyak kalangan bloger-bloger newbie seperti saya belum begitu paham untuk bisa menerapkanya . Nah bagi brada yang ingin menerapkannya silahkan ikuti caranya tapi sebelumnya brada lihat dulu demonya. 


Kustomisasi

  • Cari kode </head>
  • Masukan kode dibawah ini tepat sebelum kode </head>
<script type='text/javascript'> var addthis_config = { bar_show_below : 150 } </script> <script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/>

  • Cari Kode </body>
  • Masukan kode dibawah ini tepat sebelum kode </body>  
<div class='addthis_bar addthis_bar_medium'> <label>Share This Page:</label> <div class='addthis_toolbox addthis_default_style addthis_32x32_style'> <span><a class='addthis_button_preferred_1'/></span> <span><a class='addthis_button_preferred_2'/></span> <span><a class='addthis_button_preferred_3'/></span> <span><a class='addthis_button_preferred_4'/></span> <span><a class='addthis_button_compact'/></span> <span><a class='addthis_counter addthis_bubble_style'/></span> </div> </div> 

Sekarang brada SAVE dan lihat hasilnya.
Selamat nungguin adzan maghrib ..........!!!
Label:

Komentar

  1. Kang IsmetKamis, Juli 25, 2013

    Mantep kang... keren, urang pasangkeun na template selanjutnyah ah ;)

    BalasHapus
    Balasan
    1. Sopala MultapaJumat, Juli 26, 2013

      pasti bakalan keren atuh .. pokonya di tunggu banget kang
      biasa buat nambah koleksi hehe

      Hapus
  2. UnknownJumat, Juli 26, 2013

    Keren banget sobat. Harus dicoba ni...

    BalasHapus
  3. Ello ArisJumat, Juli 26, 2013

    Wuih pengin nyoba. Kayaknya bagus kalo pake tombol tersebut.

    BalasHapus
  4. dedetea66Jumat, Juli 26, 2013

    BTW apa bisa digunakan disemua jenis Template kang bro??apa khusus untuk Template tertentu???

    BalasHapus
    Balasan
    1. Sopala MultapaJumat, Juli 26, 2013

      untuk semua template kang ...
      dari template jenis a sampe z hehe

      Hapus
    2. AnonimSabtu, Juli 27, 2013

      weiss berarti kompatible nih buat template saya. ^_^

      Hapus
    3. Sopala MultapaSabtu, Juli 27, 2013

      yoi sob ...

      Hapus

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