Postingan Populer

Membuat Menu Slide Info Di Blog Dengan CSS

Jumat, 27 Juli 2012



demonya bisa di lihat pada blog saya :D

copy kode berikut dan letakan di bawah kode <body>
atau bisa juga di letakan di ADD gatget >> HTML/JavaScript


 <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 #306fc7;-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: #306fc7;text-shadow: 0px 1px 1px #ddd;border-bottom: 1px solid #306fc7;}.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">
<div style="text-align: center;">
<span style="font-size: x-large;">Provil Gue</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvL9eTdug63eQyQ9NDR7srlEERJJxEzqYUfYHbC7APzSrXrh0xnZtdp4DFS_vh3iT4gtCDWaqRvDbRsNeNUMcrqk3K5v2RhGnL5AWdzU31ijxdEahfh9MasBg9j7q7GJrEt-88ndUvQw8/s1600/397049_352400238118990_1938052625_n%5B1%5D.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvL9eTdug63eQyQ9NDR7srlEERJJxEzqYUfYHbC7APzSrXrh0xnZtdp4DFS_vh3iT4gtCDWaqRvDbRsNeNUMcrqk3K5v2RhGnL5AWdzU31ijxdEahfh9MasBg9j7q7GJrEt-88ndUvQw8/s320/397049_352400238118990_1938052625_n%5B1%5D.jpg" width="320" /></a></div>
<div style="text-align: center;">
<a href="http://www.facebook.com/yumellodichpunkhead" target="_blank">У҅О҅Ц҅Я-И҆А҆М҆Е.Сһапԍе.Яеԛцеѕт  Наѕ҅Вееп.Я҅Е҅Ј҅Е҅С҅Т҅Еԁ Ву҅Оцг.А҅Ц҅Т҅О҅М҅А҅Т҅Еԁ  А҆Р҆Р҆Я҆О҆Ѵ҆Аӏ-Ѕ҆У҆Ѕ҆Т҆Е҆М</a></div>
</div>
</div>
</div>

ganti kode yang berwarna biru dengan isi text atau widget kalian