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...
Vidio Tutorial : Click Vidio
