Cara Membuat menu slide info di blog dengan css

Hello pengunjung Oktri Blog, Pada kesempatan ini Oktri Blog akan berbagi tips Blog dengan judul Cara Membuat menu slide info di blog dengan css, Pada sebelumnya saya sudah berbagi tutorial Cara Membuat Vertical Sliding Info Panel With jQuery, dimana pada sebelumnya apabila ingin membuka info Menu slide pada blog kita harus klik terlebih dahulu ,nah pada pada tutorial ini kita tanpa harus klik dan hanya menyorot atau mendekatakan kursor kita.! Contoh Demo SIlahkan Klik Disini

Berikut Ini Langkah - Langkah Membuat nya :

1. Login Ke Akun Blog Sobat
2. Pilih Rancangan --> Kemudian Pilh EDIT HTML Dan Jangan Lupa Untuk Mencentang Kolom Expand Template Widget.
3. Copas KOde Berikut Tepat Di Bawh Kode

<style type='text/css'>#info-oktri {z-index: 1000;background:-moz-linear-gradient(top, #1F2326, #000);background: -webkit-gradient(linear, left top, left bottom, from(#1F2326), to(#000));box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-moz-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-webkit-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;width:400px;position: fixed;top:50px;left:0;margin-left:-330px;border:1px solid #444;background-position:top right no-repeat;height:35px;font:11px 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;}#info-oktri{-o-transition: all 1s ease-in;-moz-transition: all 1s ease-in;-webkit-transition: all 1s ease-in;} #info-oktri:hover{width:400px;opacity:1.0;margin-left:0;}.Oktriinbox {border:1px solid #444;width:290px; margin:0px 90px 10px 10px;background:#000;color:#ffffff; border-radius :20px; padding:5px 0;-moz-border-radius:20px; -webkit-border-radius:20px;-o-transition:all 2s ease-in;-moz-transition:all 2s ease-in;-webkit-transition:all 2s ease-in;opacity:0.2;}.Oktriinbox:hover{opacity:1.0;box-shadow:1px 1px 15px #000; -moz-box-shadow: 1px 1px 15px #000; -webkit-box-shadow: 1px 1px 15px #000;background: #000;}.Oktriinbox2 {margin:5px 10px;padding:0px 8px 10px;color:#FFFFFF;overflow:hidden;height:410px;}.oktri15 {border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;}.Oktri2 ul.bom {margin: 0; padding: 0;}.Oktriinbox2 li {margin-left:20px;}.Oktriinbox2 li a {color: #FFFFF; line-height: 4px; font-size: 11px;font-weight: bold; text-decoration:none;}.Oktriinbox2 li a:hover {color: red;text-shadow: 0 1px 1px #000;}.Oktriinbox2 h2 { font: 18px Droid Serif;font-weight:bold;padding:0 8px;color: #FF0000;text-shadow: 0px 1px 1px #ddd;border-bottom: 1px solid #FF0000;}.Oktritouch {font-size:22px;font-weight:bold;font-family:Arial Narrow;float:right;margin: 3px 10px 0 0;-o-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;text-decoration:blink;}.Oktritouch:hover{-o-transform: scale(2) rotate(720deg) translate(0px);-moz-transform: scale(2) rotate(720deg) translate(0px);-webkit-transform: scale(2) rotate(720deg) translate(0px);color: red;}</style>


<div id='info-oktri'><span class='Oktritouch'>Info</span>
<div class='Oktriinbox'><div class='Oktriinbox2 oktri15'>
<h2>SELAMAT DATANG</h2>
<p style='text-align:justify'>Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...
</p>
<h2>Sekilas Tentang OKTRI </h2>
<img height='120x' src='http://i1192.photobucket.com/albums/aa340/djok3/PhotoFunia-3f81ac.gif' width='90px'/>
<p style='text-align:justify'>Nama saya Oktri darmadi,saya seorang Mahasiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.></p>
</div>
</div></div>

4.Ubah Kata Atau Judu Yg Berwarna Merah Dengan Judul atau Kata-kata Sobat Sendiri
Dan Yg Terakhir Simpan Templatenya...

Artikel Terkait: