Salam blogger,saya akan menjelaskan cara membuat menu info dengan gaya Slide yang keren lah menurut saya.langsung saja ya kita ke langkah-langkahnya
- 1. Buka akun blog kalian
- 2. Klik Template Pilih Edit HTML lalu klik Lanjutkan,kemudian centang Expand Template Widget
- 3. Cari Kode <body> kalau kalian sudah menemukan kode <body> Copy Scrip di bawah ini dan letakkan di bawah kode <body>
<style
type='text/css'>#info-teja {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 #0000FF, 2px 2px 20px
#FF0000;-moz-box-shadow:-2px -2px 8px #0000FF, 2px 2px 20px
#0000FF;-webkit-box-shadow:-2px -2px 8px #0000FF, 2px 2px 20px
#0000FF;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-teja{-o-transition:
all 1s ease-in;-moz-transition: all 1s ease-in;-webkit-transition: all
1s ease-in;}
#info-teja:hover{width:400px;opacity:1.0;margin-left:0;}.Tejainbox
{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;}.Tejainbox: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;}.Tejainbox2 {margin:5px 10px;padding:0px
8px 10px;color:#FFFFFF;overflow:hidden;height:410px;}.teja15
{border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;}.Teja2
ul.bom {margin: 0; padding: 0;}.Tejainbox2 li
{margin-left:20px;}.Tejainbox2 li a {color: #FFFFF; line-height: 4px;
font-size: 11px;font-weight: bold; text-decoration:none;}.Tejainbox2 li
a:hover {color: red;text-shadow: 0 1px 1px #000;}.Tejainbox2 h2 { font:
18px Droid Serif;font-weight:bold;padding:0 8px;color:
#FF0000;text-shadow: 0px 1px 1px #ddd;border-bottom: 1px solid
#FF0000;}.Tejatouch {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;}.Tejatouch: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-teja'><span class='Tejatouch'>Info</span>
<div class='Tejainbox'><div class='Tejainbox2 teja15'>
<h2>SELAMAT DATANG</h2>
Selamat datang di Blogger Kediri™ - Saya akan berbagi Trik n Tips tentang Blog maupun game dll,kalian juga boleh meng copas nya tetapi tolong di kasih sumber nya.sekian info dari saya semoga Blog saya ini berguna buat kalian pengunjung blog saya.
<h2>Tentang Kediri Blogger</h2>
<img height='130x' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifQpk6aO9XWGLj6VXW_ujmEGJLSj2vVL62P-ODVZ_YD5ibGUEj2hWmSrCJBzv4UEBHvIkv_ODcpPS02yIwnbarmElBqWEN46QLpSCTc8Rdl_QFLpvYrK_xxj3_RgyFn4y50v8lDT2mQwX2/s1600/author.png' width='100px'/>
<p style='text-align:justify'>Kediri Blogger di buat pada Tgl 5 Maret 2011 yang lalu,itu persis pada saat Ulang tahun pendiri Utama Blog ini,pertama pembuatan bukan template seperti ini,masih template biasa yg di sediakan oleh Blogger,dengan berjalan nya waktu Uda Dhani sering berubah wujud,dan sekarang malah membuat Tenplate sendiri dan di bagi bagikan ke pengguna blogger.</p>
</div>
</div></div>
<div id='info-teja'><span class='Tejatouch'>Info</span>
<div class='Tejainbox'><div class='Tejainbox2 teja15'>
<h2>SELAMAT DATANG</h2>
Selamat datang di Blogger Kediri™ - Saya akan berbagi Trik n Tips tentang Blog maupun game dll,kalian juga boleh meng copas nya tetapi tolong di kasih sumber nya.sekian info dari saya semoga Blog saya ini berguna buat kalian pengunjung blog saya.
<h2>Tentang Kediri Blogger</h2>
<img height='130x' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifQpk6aO9XWGLj6VXW_ujmEGJLSj2vVL62P-ODVZ_YD5ibGUEj2hWmSrCJBzv4UEBHvIkv_ODcpPS02yIwnbarmElBqWEN46QLpSCTc8Rdl_QFLpvYrK_xxj3_RgyFn4y50v8lDT2mQwX2/s1600/author.png' width='100px'/>
<p style='text-align:justify'>Kediri Blogger di buat pada Tgl 5 Maret 2011 yang lalu,itu persis pada saat Ulang tahun pendiri Utama Blog ini,pertama pembuatan bukan template seperti ini,masih template biasa yg di sediakan oleh Blogger,dengan berjalan nya waktu Uda Dhani sering berubah wujud,dan sekarang malah membuat Tenplate sendiri dan di bagi bagikan ke pengguna blogger.</p>
</div>
</div></div>
Yang saya kasih warna merah itu bisa kalian Ubah kata kata menurut Selera kalian dan yang biru itu URL gambar kalian bisa merubah nya juga...Sebenarnya Scrip di atas bisa kalian Edit Semua dari warna maupun Panjang dan lebar,kalau kalian bisa ya di rubah saja menurut selera kalian ya.Kalau pengeditas sudah selesai Kemudian kalian SIMPAN.
Posting Komentar