Berikut ini akan diuraikan langkah-langkah cara membuat ( Profile Box Information Title With Menu Item ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : ( Profile Box Information Title With Menu Item ) sebagai berikut :
DAFTAR ISI CODE
[Tampilkan][Sembunyikan]
CSS Kode
<style>
.left {left: 25px}
.right {right: 25px}
.bottom {position: absolute;bottom: 15px}
#profileBox {
background: #999955;
background-image: linear-gradient(#DAB046 20%, #D73B25 20%, #D73B25 40%, #C71B25 40%, #C71B25 60%, #961A39 60%, #961A39 80%, #601035 80%);
margin-top: 100px;height: 150px}
#profileBox:after {
content: "";position: absolute;background: #E9E2D0;margin: -67.5px 0 0 40px;
border-radius: 10px;width: 90%;height: 275px;z-index: -1}
#profile {
position: absolute;width:75%;color:blue;height: 225px;padding: 25px;
padding-top: 0;padding-bottom: 0;top: 170px;left:73px;background: #E9E2D0;
box-shadow: -20px 0 35px -25px black, 20px 0 35px -25px black;z-index: 5}
#profile img {
width: 120px;float: left;border-radius: 5px;margin-right: 20px;
box-shadow: 0 15px 10px -10px #666, 0 1px 4px #999, 0 0 40px #ccc inset}
#profile p {font-family: Verdana;color: #555;font-size: 13px}
#profile span {font-family:courier;color:purple}
.pagination {list-style:none;display:inline-block;padding:0}
.pagination li {display:inline;text-align: center}
.pagination a {
float: left;display: block;font-size: 14px;padding: 5px 12px;
color: #fff;margin-left: -1px;line-height: 1.5}
.pagination a.active {cursor: default}
.pagination a:active {outline:none}
.menu {position: relative}
.menu:after {
content: '';position: absolute;width: 100%;height: 35px;left: 0;bottom: 0;
z-index: -1;background:#666}
.menu a {color:yellow;padding:13px 5px 5px;margin:0 10px;position:relative}
.menu a:hover {color: #fff}
.menu a:hover:after {
content: '';position: absolute;width: 24px;height: 24px;background: red;
border-radius: 100%;z-index: -1;left: -3px;bottom: 4px}
.menu a.active {background: #1E7EE2;color: #fff;font:bold 14px/22px Verdana}
.menu a.active:hover:after {display: none}
.menu a.active:before {
content: '';position: absolute;top: -11px;left: -10px;width: 18px;
border: 10px solid transparent;border-bottom: 7px solid #104477;z-index: -1}
</style>
HTML Kode
<div id="profileBox"></div>
<div id="profile">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW6nEUq7I0MZb4zXABFB-SVqoWR96taaE7ghYZb2XbeUmTOxta2hACqaqHmf_LaLG6AeNcLPGreEw6GHpgdQpbN09-EFZ40PZAmgTmchjMQeBZj-ARMbJnt_TN4EspDvKLBOf_QD-rQAU/s1600/Monitoring.png">
<h2>SAHABAT BISNIS 77</h2>
<p>...Tulis sebuah informasi disini....</p>
<ul class="pagination menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#" class="active">My Profile</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
</ul>
<span class="left bottom">phone: +62 857 8383 ****</span>
<span class="right bottom">adress: Jambi, Indonesia</span>
</div><!..ending profile tag..>
Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah Simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror, dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.
Demikian Cara membuat ( Profile Box Information Title With Menu Item ) semoga bermanfaat terima kasih.
CONTOHNYA :
SAHABAT BISNIS 77
...Tulis sebuah informasi disini....
phone: +62 857 8383 ****
adress: Jambi, Indonesia
SILAHKAN DISESUAIKAN
Tidak ada komentar
Posting Komentar