Tutorial Blog | Membuat Blog| Menu Blog - Pada Kali Ini Blog Sharing Ilmu Pengetahuan Akan
Membuat Artikel Tentang Blog Lagi. Pada Tutorial ini 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 ada pada contoh gambar di samping facebook, twitter, salingsapa,dan
plurk Nah Menu itu Terletak Dibagian Kiri Blog 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 eheehheh
Oke Langsung saja 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-oktri,#twitter-oktri,#salingsapa-oktri,#plurk-oktri{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-oktri
{background:-moz-linear-gradient(top,#001C5A,#001551);background:
-webkit-gradient(linear, left top, left bottom, from(#001C5A),
to(#001551));top:350px;}#facebook-oktri:hover,#twitter-oktri:hover,#salingsapa-oktri:hover,#plurk-oktri:hover{width:150px;opacity:1.0;margin-left:0;cursor:hand}#facebook-oktri
a:hover,#facebook-oktri a:visited,#twitter-oktri a:hover,#twitter-oktri
a:visited,#salingsapa-oktri a:hover,#salingsapa-oktri
a:visited,#plurk-oktri a:visited,#plurk-oktri
a:hover{text-shadow:none;color:#ffffff}#twitter-oktri
{background:-moz-linear-gradient(top,#67C9E9,#029BC5);background:
-webkit-gradient(linear, left top, left bottom, from(#67C9E9),
to(#029BC5));top:382px;}#salingsapa-oktri{background: #51A104
-moz-linear-gradient(top,#51A104,#000);background:
-webkit-gradient(linear, left top, left bottom, from(#51A104),
to(#000));top:414px;}#plurk-oktri,#changeoktrihtc ul li{background:
-moz-linear-gradient(top, #AF0000, #6B0000);background:
-webkit-gradient(linear, left top, left bottom, from(#AF0000),
to(#6B0000));}#plurk-oktri {top:446px;}</style>
<div id='plurk-oktri'><a href='http://www.plurk.com/'target='_blank'>Plurk</a></div>
<div id='salingsapa-oktri'><a href='http://www.salingsapa.com/index.php?p=u/oktri'target='_blank'>Salingsapa</a></div>
<div id='facebook-oktri'><a href='http://id-id.facebook.com/oktridarmadi'target='_blank'>Facebook</a></div>
<div id='twitter-oktri'><a href='http://twitter.com/oktridarmadi'target='_blank'>twitter</a></div>
- Simpan Dan Lihat Hasilnya
Perhatian : Jika Menu Slide Tidak Meuncul Sobat Bisa menaruh KOdenya Dibawah Kode <body>
CATATAN : Ubah KOde Yg Berwarna merah 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
