Info

SELAMAT DATANG

Selamat datang di mnc-mirror.blogspot.com .. silahkan untuk melihat-lihat.. eitss tapi jangan lupa untuk follow dan kunjungi balik yah :D hehee

Sekilas Tentang Saya

Nama saya Halim Swito Pakpahan,
saya selalu ingin tahu sesuatu yang baru karena saya sangat tertarik dengan sesuatu yang baru

Senin, 30 Januari 2012

11.43    No comments

Membuat Menu Slide melayang di bagian kiri blog dengan css

Menu Slide Yg Saya Maksud Ini Adalah Menu yg Sekarang Saya gunakan Agar Pengunjung Bisa Mengetahui facebook,twitter,salingsapa,dan plurk saya.. biar banyak yg nge add saya. wkwkwk Nah Menu itu Terletak Dibagian Kiri log saya, Menu ini Hanya Menggunakan Css, Jadi Sobat Semua Jangan Khawatir Blog Sobat Akan Lelet dalam Loadingnya, Karna Menu Ini Hanya Menggunakan Css yg Ramah loading kwwkwk (gk lucu yah) :/
Y udah Saya Akan Menjelaskan Bagaimana Langkah -Langkah Membuatnya walaupun agak galau ni :


  1.  Login Ke Akun Blogger Sobat
  2. Pada Dasbor Pilih Rancangan/Design Kemudian Pilih Tambah Gadget/Add Gadget Dan Pilih Yg HTML/JAVASCRIPT
  3. Copas Kode Berikut Didalamnya

<style>#facebook-halimpakpahan,#twitter-halimpakpahan,#salingsapa-halimpakpahan,#plurk-halimpakpahan{text-align:center;-o-transition: all 0.4s ease-in;-moz-transition: all 0.4s ease-in;-webkit-transition: all 0.4s ease-in;z-index: 1000;font-family:arial;width:150px;position: fixed;left:0;margin-left:-120px;border:1px solid #ffffff;background-position:top right no-repeat;padding:5px;font:15px Arial;color:#eee;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;}#facebook-halimpakpahan {background:-moz-linear-gradient(top,#001C5A,#001551);background: -webkit-gradient(linear, left top, left bottom, from(#001C5A), to(#001551));top:350px;}#facebook-halimpakpahan:hover,#twitter-halimpakpahan:hover,#salingsapa-halimpakpahan:hover,#plurk-halimpakpahan:hover{width:150px;opacity:1.0;margin-left:0;cursor:hand}#facebook-halimpakpahan a:hover,#facebook-halimpakpahan a:visited,#twitter-halimpakpahan a:hover,#twitter-halimpakpahan a:visited,#salingsapa-halimpakpahan a:hover,#salingsapa-halimpakpahan a:visited,#plurk-halimpakpahan a:visited,#plurk-halimpakpahan a:hover{text-shadow:none;color:#ffffff}#twitter-halimpakpahan {background:-moz-linear-gradient(top,#67C9E9,#029BC5);background: -webkit-gradient(linear, left top, left bottom, from(#67C9E9), to(#029BC5));top:382px;}#salingsapa-halimpakpahan{background: #51A104 -moz-linear-gradient(top,#51A104,#000);background: -webkit-gradient(linear, left top, left bottom, from(#51A104), to(#000));top:414px;}#plurk-halimpakpahan,#changehalimpakpahan ul li{background: -moz-linear-gradient(top,  #AF0000,  #6B0000);background: -webkit-gradient(linear, left top, left bottom, from(#AF0000), to(#6B0000));}#plurk-halimpakpahan {top:446px;}</style>
<div id='plurk-halimpakpahan'><a href='http://www.plurk.com/Halim97'target='_blank'>Plurk</a></div>
<div id='salingsapa-halimpakpahan'><a href='http://www.salingsapa.com/index.php?p=u/halimpakpahan'target='_blank'>Salingsapa</a></div>
<div id='facebook-halimpakpahan'><a href='http://id-id.facebook.com/halimpakpahan'target='_blank'>Facebook</a></div>
<div id='twitter-halimpakpahan'><a href='http://twitter.com/#!/halimpakpahan'target='_blank'>Twitter</a></div>


 4 . Simpan Dan Lihat Hasilnya

Perhatian : Jika Menu Slide Tidak Meuncul Sobat Bisa menaruh KOdenya Dibawah Kode <body>

CATATAN : Ubah KOde Yg Berwarna Orange  Dengan Url/Link Sobat inginkan
                               Dan Ubah Yg Berwarna Hjau Dengan Judul Yg sobat inginkan
                              Bila Sobat Mengerti Css Sobat Bisa mengotak-atik cssnya sesuai selera sobat


SELAMAT MENCOBAAAAAA :D
Comments
0 Comments

0 komentar:

Posting Komentar