0 Cara Membuat Menu Slide Info Di Blog Dengan css

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 Bawah Kode </body>

<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 2px #FF0000, 2px 2px 5px #FF0000;-moz-box-shadow:-2px -2px 8px #00FF00, 2px 2px 2px #00FF00;-webkit-box-shadow:-2px -2px 8px #00FF00, 2px 2px 2px #00FF00;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: #00FF00;text-shadow: 0px 1px 1px #ddd;border-bottom: 1px solid #00FF00;}.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>&#8594; Welcome To My Blog &#8592;</h2>
<p style='text-align:justify'>Selamat Datang Di Blog Cikarang Cheater, Semoga Saja Kalian Bisa Mendapatkan Apa Yang Kalian Butuhkan Di Blog Cikarang Cheater ini. Terima kasih Telah Berkunjung Di Blog Cikarang Cheater, Apabila Berkenan Silahkan Berkomentar Dan Follow Blog Cikarang Cheater, Mari Kita Saling Berbagi Ilmu Tentang Tips And Triks Blogger
</p>
<h2/>
<div class='separator' style='clear: both; text-align: center;'>
<a href='http://i634.photobucket.com/albums/uu66/oktri_2009/L8e18979.gif' imageanchor='1' style='margin-left: 1em; margin-right: 1em;'><img border='0' src='http://i634.photobucket.com/albums/uu66/oktri_2009/L8e18979.gif'/></a></div>
<p style='text-align:justify'/>Name    : M U F I D
<br/>School  : SMPN 2 Cikarang Utara<br/>
Class   : VII-3
<br/>Address : Cikarang Utara
</div>
</div></div>


4.Ubah Kata Atau Judul Yg Berwarna Merah Dengan Judul atau Kata-kata Sobat Sendiri
   Untuk Yang Berwarna Hijau Ganti Dengan URL Gambar Sobat Sendiri

5. Jika Sudah Simpan Template

Artikel Terkait :