Pilih Warna Baground Yang Anda Suka
Latest

Cara Membuat Menu Slide Melayang Di Bagian Kiri Blog

kevinservis 13 Mar 2013



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.,
Oke Langsung saja Bagaimana Langkah -Langkah Membuatnya :
  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-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.facebook.com/pages/Service-center/511635435549312?ref=hl'target='_blank'>suka</a></div>
<div id='salingsapa-oktri'><a href='http://sumaterabaratholiday.blogspot.com'target='_blank'>holiday</a></div>
<div id='facebook-oktri'><a href='http://id-id.facebook.com/isbernendi'target='_blank'>Facebook</a></div>
<div id='twitter-oktri'><a href='http://twitter.com/isbernendi'target='_blank'>twitter</a></div>
  1. 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
Share this article :

Ditulis Oleh : kevinservis ~ http://kevinservis.blogspot.com/

Artikel Cara Membuat Menu Slide Melayang Di Bagian Kiri Blog ini diposting oleh kevinservis pada hari 13 Mar 2013. Terimakasih atas kunjungan Sobat serta kesediaan Sobat membaca artikel ini, Kritik dan saran dapat Sobat sampaikan melalui kotak komentar , Mohon jangan pasang Link hidup di komentar contoh Link hidup google , yahoo , bing , alexa yang diperbolehkan di kotak komentar contoh Link http://blogspot.com Terimakasih



Artikel terkait:

 

1 komentar:

 
Copyright © 2013. Cikevin - All Rights Reserved
Powered By Blogger