Asssalamualaikum Wr.Wb ... Pada Kali Ini Blog Sharing Ilmu Pengetahuan Akan Membuat Artikel Tentang Blog Lagi. Oh ya Kemarin Blog Sharing Ilmu Pengetahuan Sudah Membahas Tentang Bagaimana Cara Baru Membuat Slide Profil Di Blog Dengan Css . Dan Pada Tutorial yg Sama Juga Yaitu Tutorial Blog, Blog Sharing ilmu Pengetahuan akan Menjelaskan Pada Sobat Semua Tentang Bagaimana Membuat Menu Slide melayang di bagian kiri blog dengan css , Menu Slide Yg Saya Maksud Ini Adalah Menu yg Sekarang Saya gunakan Agar Pengunnjung Bisa Mengetahui facebook,twitter,salingsapa,dan plurk saya.. biar banyak yg nge add saya.. hehehhe.. 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 Lingkungan.. wkwkwkw.. Kaya Motor Berbahan Gas aja.. Rmah Lingkungan ckckkckckkckc :)
Y udah Saya Akan Menjelaskan Bagaimana Langkah -Langkah Membuatnya :
- Login Ke Akun Blogger Sobat
- Pada Dasbor Pilih Rancangan/Design Kemudian Pilih Tambah Gadget/Add Gadget Dan Pilih Yg HTML/JAVASCRIPT
- Copas Kode Berikut Didalamnya
<style>#facebook-teja,#twitter-teja,#salingsapa-teja,#plurk-teja{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-teja {background:-moz-linear-gradient(top,#001C5A,#001551);background: -webkit-gradient(linear, left top, left bottom, from(#001C5A), to(#001551));top:350px;}#facebook-teja:hover,#twitter-teja:hover,#salingsapa-teja:hover,#plurk-teja:hover{width:150px;opacity:1.0;margin-left:0;cursor:hand}#facebook-teja a:hover,#facebook-teja a:visited,#twitter-teja a:hover,#twitter-teja a:visited,#salingsapa-teja a:hover,#salingsapa-teja a:visited,#plurk-teja a:visited,#plurk-teja a:hover{text-shadow:none;color:#ffffff}#twitter-teja {background:-moz-linear-gradient(top,#67C9E9,#029BC5);background: -webkit-gradient(linear, left top, left bottom, from(#67C9E9), to(#029BC5));top:382px;}#salingsapa-teja{background: #51A104 -moz-linear-gradient(top,#51A104,#000);background: -webkit-gradient(linear, left top, left bottom, from(#51A104), to(#000));top:414px;}#plurk-teja,#changetejahtc ul li{background: -moz-linear-gradient(top, #AF0000, #6B0000);background: -webkit-gradient(linear, left top, left bottom, from(#AF0000), to(#6B0000));}#plurk-teja {top:446px;}</style>
<div id='plurk-teja'><a href='http://www.plurk.com/TEJA81'target='_blank'>Plurk</a></div>
<div id='salingsapa-teja'><a href='http://www.salingsapa.com/index.php?p=u/muhammadsuteja'target='_blank'>Salingsapa</a></div>
<div id='facebook-teja'><a href='http://id-id.facebook.com/tejahtc'target='_blank'>Facebook</a></div>
<div id='twitter-teja'><a href='http://twitter.com/#!/muhammadsuteja'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 MENCOBA DAN SEMOGA BERHASIL~
Membuat Menu Slide melayang di bagian kiri blog dengan css
Langganan:
Posting Komentar (Atom)
0 komentar:
+ Add Comment