Tutorial Blog | Tips dan Trik Blog | Belajar Blog - Pada kesempatan ini Tutorial Belajar Blog akan berbagi tips Blog dengan judul
Cara Membuat menu slide info di blog. 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 |
| Contoh Slide Info Blog |
Berikut Ini Langkah - Langkah Membuat nya :
- Login Ke Akun Blog Sobat
- Pilih Rancangan --> Kemudian Pilh EDIT HTML Dan Jangan Lupa Untuk Mencentang Kolom Expand Template Widget.
- Copas KOde Berikut Tepat Di Bawh 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 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 Tutorial Belajar Blog, saya harap anda senang berada diblog sederhana ini. Blog ini saya tulis dengan komputer yang sederhana dan koneksi internet yang juga sederhana. Saya berharap Anda sering datang kembali. Silahkan anda mencari hal-hal yang baru di blog saya ini</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'>
Photo di Diatas bukan saya dan juga bukan saya memake topeng, pokoknya bukan siapa-siap saya. Nama saya Oktri saya seorang yang ingin belajar blogger. Saya mulai belajar blogger sejak bulan Oktober 2010, dan blog ini saya buat pada bulan January 2012.></p>
</div>
</div></div>
4.Ubah Kata Atau Judu Yg Berwarna Merah Dengan Judul atau Kata-kata Sobat Sendiri
Dan Yg Terakhir Simpan Templatenya...
Belum ada tanggapan untuk "Cara Membuat menu Slide Info di Blog"
Posting Komentar