Subscribe:

Minggu, 10 Juli 2011

Membuat Sticky Social Pada Blogspot

Tahu kan sticky social? Saya sendiri tidak tahu "makhluk" apa pula itu. "Makhluk" ini biasanya gentayangan di dunia joomla. Mungkin karena bentuknya seperti tongkat maka disebut stick. Atau mungkin juga karena keadaannya yang melekat maka dinamakan sticky. Entahlah. Yang jelas saya hanya mencoba membuat "makhluk" itu bisa gentayangan di dunia blogger. Kalaupun hasilnya tidak mirip dengan yang di joomla, itu bukan salah saya, tapi salah blogger, hehehe... 

Jika sobat ingin melihat sticky social pada blogger, silahkan lihat icon-icon social network pada blog ini atau blog ini. Gimana, tertarik?

Bagi kamu yang tertarik, caranya cukup mudah kok, ikuti saja langkah-langkah berikut:

  • Dari dasbor, pilih Rancangan - Edit HTML. 
  • Lakukan duplikasi template untuk jaga-jaga jika bermasalah.
  • Copy-lah script berikut lalu letakkan (paste) di bawah kode <body>:
    <!--stickysocial_dock-->
    <style type='text/css'>
    .stickysocial {
    background: transparent;
    position: fixed;
    top: 35%;
    left: 0.25%;
    z-index: 100;
    vertical-align: bottom;
    width: 40px;
    text-align: center;
    }
    .stickysocial a:hover {
    opacity: .73;
    -moz-opacity: .73;
    filter: alpha(opacity=73);
    }
    </style>

    <div class='stickysocial' id='stickysocial_dock'>
    <a href='http://twitter.com/USERNAME' target='_blank' title='Follow us on Twitter'><img alt='Twitter' height='37' src='http://i563.photobucket.com/albums/ss76/peace_enes/twitter-icon.png' style='position:relative' width='37'/></a>
    <a href='http://www.facebook.com/USERNAME' target='_blank' title='Be our fan on Facebook'><img alt='Facebook' height='37' src='http://i563.photobucket.com/albums/ss76/peace_enes/facebook-icon.png' style='position:relative' width='37'/></a>
    <a href='http://www.myspace.com/USERNAME' target='_blank' title='Follow us on MySpace'><img alt='MySpace' height='37' src='http://i563.photobucket.com/albums/ss76/peace_enes/myspace-icon.png' style='position:relative' width='37'/></a>
    <a href='http://www.youtube.com/USERNAME' target='_blank' title='Subcribe us on YouTube'><img alt='YouTube' height='37' src='http://i563.photobucket.com/albums/ss76/peace_enes/youtube-icon.png' style='position:relative' width='37'/></a>
    <a href='/feeds/posts/default' target='_blank' title='RSS Feed'><img alt='RSS Feed' height='37' src='http://i563.photobucket.com/albums/ss76/peace_enes/rss-icon.png' style='position:relative' width='37'/></a>
    </div>


  • Ubahlah ukuran top dan left-nya sesuai keinginan.
  • Jika ingin menempatkannya di sebelah kanan, ubah left menjadi right. 
  • Ganti USERNAME sesuai User Name kamu pada akun twitter, facebook, dan youtube.
  • Jika sudah selesai, simpanlah dan ucapkan alhamdulillah...

Jika kamu menginginkan, kamu juga bisa menambah atau mengurangi icon-icon social network lainnya. Atau bisa juga mengubah sumber gambar sesuai gambar yang kamu inginkan.

Ok, segitu aja sob. Semoga bermanfaat .....
Diposting oleh Dinar Pragustian
Label:

0 komentar:

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Mohon Berkomentarlah dengan Baik dan Sopan
Maaf, jika ingin menyertakan url mohon di LINK saja ya (NO http://) atau komentar hanya sekedar promosi akan di hapus. Thank's ^_^

Posting Komentar

Langganan: Posting Komentar (Atom)