Kamis, Maret 29, 2012
M. Irvan Firdaus
Menu slide info adalah menu yang memberikan keunikan tersendiri yang bisa dibuat di blog anda.
Mungkin sebagian blogger ingin menambahkan
variasi-variasi menu slide yang unik,
dan juga untuk meringkas sidebar blognya.
O.K,langsung kita praktekan,berikut caranya.
1. Login Ke Blogger
2. Pilih Rancangan --> Kemudian Pilh EDIT HTML.
3. Centang pada Expand Template.Widget
4. Tekan Ctrl + f dan ketik kata <body> di kotak "Find"
5. Copy Kode Berikut di bawah kata <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 #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-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 Blog for Vanz yang sederhana akan tetapi memiliki postingan yang cukup berkualitas. Mudah-mudahan postingan yang ane buat dapat bermanfaat bagi Anda yang membacanya
<h2>Sekilas Tentang Pembuat (admin)</h2>
<img height='130x' src='http://4.bp.blogspot.com/_O84nraTVNhw/TUfLXgf3WnI/AAAAAAAAANg/ZE2p_DQATGY/s1600/author.png' width='100px'/>
<p style='text-align:justify'>Assalamualaikum Wr. Wb. Nama ane Muhamad Irvan Firdaus, tapi temen-temen kampus ane sering manggil "PANDA" (mentang-mentang badan ane guede). Ane masih berstatus sebagai Mahasiswa di salah satu universitas swasta di kota Bogor. Dalam membuat BLOG, ane masih awam..jadi mohon maaf kalo rancu. Sekian tentang ane, mudah-mudahan apa yang ane bagikan bisa bermanfaat anta. Terima Kasih</p>
</div>
</div></div>6. Ganti kata yang bewarna BIRU dengan kata-kata kamu, dan yang bewarna UNGU dengan gambar pilihan kamu.7. Simpan dan liat hasilnya.sumber : http://b26s-amoenthnia.blogspot.com/2011/09/cara-membuat-menu-slide-info-di-blog.htmlSemoga bermanfaat. Jangan lupa coment nya ya ^.^Posted in: Trick dan Tips