Langsung ke konten utama

Collor Full Social Icon

Collor Full Social Icon
Setelah beberapa jam disibukan dengan pekerjaan seputar ramadhan , akhirnya ada sedikit waktu senggang untuk menulis sesuatu di blog jelek ini . Pada kesempatan yang lalu saya membuat postingan tentang Sliding Social Icon sebagai tombol share yang cukup atraktif . Kali ini pun saya akan membagikan widget share yang gak kalah kerennya , Collor Full Social Icon yang elegant dan cocok untuk semua template. Untuk lebih jelasnya silahkan sobat lihat pada demonya


Kustomisasi
  • Klik Tab " Tata Letak " 
  • Klik " Tambah gadget "
  • Cari Tab " HTML/Javascript"
  • Masukan kode dibawah ini
<style>
.socialicons_widget_sidebar li {
float: left;
width: 147px;
height: 147px;
margin: 0 0 0 0;
padding: 0 0 0 0;
border-bottom: none;
}
.socialicons_widget_sidebar li a {
line-height: 1px;
display: block;
}
.socialicons_widget_sidebar li a:hover img {
-webkit-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}
.socialicons_widget_sidebar li a span {
display: none;
}
.socialicons_widget_sidebar li.rss-icon {
margin: 0 6px 6px 0;
}
.socialicons_widget_sidebar li.facebook-icon {
margin: 0 6px 0 0;
}
</style>
<div id="socialicons_widget_sidebar-2" class="row widget socialicons_widget_sidebar">
<ul style="margin: 0 0 0 0; padding: 0 0 0 0; list-style: none;">
<li class="twitter-icon" style="margin-left: 155px;"><a target="_blank" href=" # " rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyJLFpuCDAj5fw91mEYj0ulmQMcMOL0jUXhXdRQGZ1AhD3-IGryFzo6ZcBfgaKAP6H4MusW7wwYT4IrK_PcxQNKYcaWOugSgjdmaPZpHFNAyFN_Q7W1nQpSB8TI0tqRXVauVXbgv2h80U0/s1600/twitter.png" width="147" height="147"><span>Twitter</span></a></li>
<li class="facebook-icon" style="margin-top: -146px;"><a target="_blank" href=" # " rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf1LCwpw_6qEE1q2EggZOLgb7b3ztwJQX5jve7Z2SxeCbLsZK3x7vbKfusqOcw4Q3u4P1aDP3qhAPca6PbfJr099sz0st1SGxT_X1hTqc9GuiPZjgkHJ3sUlm35JcZ2V4lBQy5ox6c53PN/s1600/facebook.png" width="147" height="147"><span>Facebook</span></a></li>
<li class="rss-icon" style="margin-top: 7px;"><a target="_blank" href=" # " rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbD5i3H09qmHfTVzBLCL4VWx9BoQqlAvcfzgKw8dRCiTZx4w-ZLnpvyDz8iRyk0O_0_MzV9YjnyJP8N0VWgFPYQUs-KIo-WRkED2ASh6eLPlZI7WbEa2PFSjgWVCPcaLKfxd1eCZ6eMDiF/s1600/rss.png" width="147" height="147"><span>Rss Feed</span></a></li>
<li class="google-icon" style="margin-left: 155px;margin-top: -153px;"><a target="_blank" href=" # "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS4fvq9LxEtHmqD0GUTABsx4KC87umw7gFalmO5d7xUoKdiIInADk53hwZlXAmnlQpJhohFrlQbEBhGW_xem4O6WJInINdmd6kzPGkp1FCwiVnM-F2z2kFCaRMciaSTKZ0e_vQh-Z-tBex/s1600/google.png" width="147" height="147"><span>Google+</span></a></li>
</ul>
</div>

  • # silahkan ganti dengan URL Facebook , Twitter , Rss Feed dan Google + sobat
  • Save dan lihat hasilnya


Selamat Berpuasa Brada !!!

Komentar

  1. social iconnya gede2 yah ....puas banget ngelihatnya.
    wah ....konsen ma design2 blog nih.....

    BalasHapus
    Balasan
    1. konsen mikirin kamu kok mbak.

      Hapus
    2. tentu saja tahu mas rul, pasti sudah dicoba tuh

      Hapus
  2. kalo sy udah final design template, html blog. capek sy ngeliat html soalnya

    BalasHapus
  3. Sosial iconnya keren-keren ya mas, bikin berat blog gak mas nantinya?

    BalasHapus
  4. cakep nih kang rul social icon bener2 collor full and sipp blog design :)
    hayoo saya pake bahasa apa coba..

    BalasHapus
  5. jadi terlihat lebih cantik icon nya ^_^

    BalasHapus
  6. mudah dipahami tutornya, mungkin ananti ane pasang makasih :)

    BalasHapus
  7. ditempatku kayaknya udah penuh :D .

    BalasHapus
    Balasan
    1. gak apa miz, saya rasa kalau dipasang tambah cantik tuh sialnya warna warnai..hihihi..

      Hapus
  8. Beneran warna warni ya mas...keren plus menarik :)

    BalasHapus
    Balasan
    1. memang keren juga mas, saya rasa kalau dipasang di blog mas budi cocok banget, bahkan bisa tambah keen blognya

      Hapus
  9. sala kenal gan,tutor nya bagus :D
    mampir ya ke blog ane : www.bmaster23.blogspot.com

    BalasHapus
  10. Oh jadi seperti inilah Collor Full Social Icon yang elegant dan cocok untuk semua template. kalau loadingnya tidak berpengaruh saya rasa cocok juga buat digunakan, oke sobat trima kasih atas tutorialnya

    BalasHapus
  11. belum apdet ni.... k rully .. hayo apdet template.

    BalasHapus
  12. babari jigana nu ieumah 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

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

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: