Langsung ke konten utama

Blogger Sliding Social Widget

Blogger Sliding Social Widget - Pasca melepas beban dosa dihari yang fitri saatnya [OBC] kembali pada kebiasaan lamanya yaitu memberikan tutorial blog yang sederhana . Tutorial yang kan dishare kali ini tentang memasang widget social share dengan efect sliding yang cukup menarik untuk di pasang pada sidebar blog brada . Untuk lebih jelasnya silahkan lihat demo dibawah ini.


Kalau brada tertarik untuk memasangnya
  • Masuk pada Tataletak  
  • Add Gadget / HTML Javascript 
  • Masukan kode dibawah ini 
 <!--Blogger Sliding Social Widget at [OBC]-->
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B66hLK2d2x4VWUFGYW5oZk5UOTg"/>
<div class="bd-social">
    <ul>
        <li><a class="bd-box facebook" href="http://www.facebook.com/RulyNakula"><p>10K+</p>Facebook </a></li>
        <li><a class="bd-box twitter" href="http://twitter.com/RulyNakula1212"><p>14K+</p>Twitter</a></li>
        <li><a class="bd-box gplus" href="https://plus.google.com/7356384499229656872"><p>7K+&nbsp;</p>Google+</a></li>
        <li><a class="bd-box pinterest" href="http://pinterest.com/RulyNakula"><p>9K+&nbsp;</p>Pinterest</a></li>
        <li><a class="bd-box rss" href="http://feeds2.feedburner.com/RulyNakula"><p>13K+</p>RSS</a></li>
    </ul>
</div>
<!--Blogger Sliding Social Widget at [OBC]-->

Save dan lihat hasilnya. 
Label:

Komentar

  1. UnknownSabtu, Agustus 10, 2013

    Keren mas, ndak makan tempat byk widgetnya

    BalasHapus
  2. Eka IkhsanudinSabtu, Agustus 10, 2013

    mantep kang tombol slidenya...
    kapan2 mau aku praktekin ah.... :)

    BalasHapus
    Balasan
    1. Staff AdministratorSabtu, Agustus 10, 2013

      Mending sekarang aja atuh kang :)
      mumpung masih fresh....hehe

      Hapus
    2. Sopala MultapaSabtu, Agustus 10, 2013

      iya bner tuh mas bud .. sebelum basi hehe

      Hapus
  3. abang ichalSabtu, Agustus 10, 2013

    10K+ 7K+ dll cuman tulisan ya.. kirain penghitung otomatis

    BalasHapus
  4. Staff AdministratorSabtu, Agustus 10, 2013

    Makin byk kreasi ya kang Rul..
    Untuk widget yg satu ini
    Secara keseluruhan tampilannya nambah ok :)

    BalasHapus
    Balasan
    1. Sopala MultapaSabtu, Agustus 10, 2013

      ya sekali lagi mas bud daripada bengong ngitung meteran kwh hehe

      Hapus
  5. AnonimSabtu, Agustus 10, 2013

    keren kang Rully tutorial Blogger Sliding Social Widgetnya, tampilannya lebih simple namun tetep menarik, makasih yah udah share :)

    BalasHapus
  6. abitalitaMinggu, Agustus 11, 2013

    keren kang efek slidenya..trims sudah berbagi..

    BalasHapus
  7. AnonimMinggu, Agustus 11, 2013

    wah mantab nih mau saya pasang ah.... lebih simpel dan singset

    BalasHapus
  8. AnonimMinggu, Agustus 11, 2013

    waduh saya jadi pengen masang nih, tapi gak cocok sama tampilanya blog saya. ^_^
    Bermanfaat sob thx.

    BalasHapus
  9. dedetea66Minggu, Agustus 11, 2013

    Lebaran sudah selesai namun masih membekas semua keharuan dalam hati ini,,,,hehe
    BTW mau mencoba ach tutor yang satu ini kang bro

    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