Membuat Menu Info Slide

Print this page

INFO

ABOUT ME

Tampilan Infoku, Lumayan Keren....!!!!

---

Ini adalah salah satu contoh tampilan info empunya blog Amarajen, silahkan anda ganti fotonya dan pasangkan link-linknya, selamat mencoba dan berkreasi... !!!!

Kontak
Temukan saya di media sosial berikut ini :

• ➦ My Facebook
• ➦My Twitter
• ➦My G+plus
• ➦My @mail

Silahkan Pilih Kontak yang anda suka..!

Kode yang digunakan untuk membuat tampilan info seperti yang anda lihat di pojok kiri atas adalah :

<style>
#info{position:fixed;top:3%;left:-350px;width:410px;height:30px;background:#111;border-radius:5px;border:1px solid #fff;box-shadow:0 0 4px #000;font:25px Arial, San Serif;color:#fff;text-align:right;padding:5px;z-index:9999;
}
#info:hover{left:-5px;transition:all 1s;-webkit-transition:all 1s;
}
.box{position:relative;width:300px;margin:-30px 10px 10px 10px;background:#333;color:#fff;border-radius:5px;border:1px solid #ddd;padding:5px;box-shadow:0 0 4px #000;text-align:left;font-size:12px;color:#999;opacity:0.5;cursor:help;
}
.box:hover{opacity:1;transition:all 1s;-webkit-transition:all 1s;
}
.box:before{content:"";position:absolute;top:5px;left:5px;width:10px;height:10px;border-radius:100%;border:2px solid #ddd;background:#000;
}
.box:after{content:"";position:absolute;top:5px;right:5px;width:10px;height:10px;border-radius:100%;border:2px solid #ddd;background:#000;
}
.box a:link,.box a:visited{font:15px Arial, San Serif;color:#fff;text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000;
}
.box p{font-size:18px;text-align:center;border-bottom:1px solid;margin:5px;
}
.box ul,.box li{margin:5px 0 0 ;list-style:none;
}
.about{width:auto;margin:5px;padding:5px;font-style:italic;background:#999;border-radius:5px;color:#000;
}
.photo{float:left;margin:5px;width:50px;height:40px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc5k-HL1XF9C0HJ65j9SXq96iM7kEV8w1U4ox8brBLPZl8-5zlJgyOzyeUULjbWGGnqbMxcE12V0EY8KxukLMux4PeMfK2yUDZf9ne4C_Mi4ttKxI3kC2McvQ0rJvGRjvfjipUJ6AxEKMw/s60-no/enjenauthor.jpg) center;background-size:100% 100%;border-radius:40%;border:4px double #999;
}
</style>

<br />
<div id="info">
INFO
<br />
<div class="box">
ABOUT ME<br />
<div class="about">
<div class="photo">
</div>
Tampilan Infoku, Lumayan Keren....!!!!<br />
<hr />
<br />
Ini adalah salah satu contoh tampilan info empunya blog Amarajen, silahkan anda ganti fotonya dan pasangkan link-linknya, selamat mencoba dan berkreasi... !!!!
</div>
<div class="about">
Kontak<br />
Temukan saya di media sosial berikut ini :
<br />
<ul>
<li>➦ <a href="#">My Facebook</a></li>
<li>➦<a href="#">My Twitter</a></li>
<li>➦<a href="#">My G+plus</a></li>
<li>➦<a href="#">My @mail</a></li>
</ul>
Silahkan Pilih Kontak yang anda suka..!
</div>
</div>
</div>

Artikel Terkait