Profile Box Information Title With Menu Item

Profile Box Information Title With Menu Item - Tampilan widget profile box kali ini, tidak berbeda dengan widget-widget information title yang sudah terdahulu saya bahas dalam artikel sebelumnya, beberapa diantaranya banyak yang sudah menampilkan widget seperti ini untuk membuat tampilan blog Anda terlihat lebih menarik dan bergaya. Pilihannya lihat pada TAB profile box dibawah ini:

Widget Collection

✖

Widget Menu For Profile Box Information

1. About Profile With Hover Effect
2. Membuat Profil Author Box Dengan CSS Kode
3. Membuat Widget Author Box Dengan Blockquote
4. Widget Profil Penulis Dengan Background Blur Efek
5. Membuat Profil Google Plus Di Sidebar Blog

Untuk menerangkan atau menjelaskan kepada pengunjung blog bahwa site yang Anda kelola adalah membahas seputar banyak informasi, widget ini bisa Anda letakkan posisinya dibawah posting blog untuk menggantikan permalink atau about profile. Agar tampilannya lebih interaktif, widget ini saya desain dengan 2 halaman yang bertumpuk, dan pada bilah sisi kiri dan kanan saya membuka sedikit ruang untuk menyisipkan lembaran pita, sehingga halaman pertama terkesan melengkung dengan hiasan pita pada sisi left dan right. Bahkan bukan hanya itu saja, dalam profile box ini saya sudah menambahkan beberapa item menu sebagai navigasi pilihan untuk memanjakan pengunjung blog Anda seperti tampilan gambar berikut:

BACA JUGA

Kenapa Alexa Rank Tak Kunjung Mengecil?



Untuk mempersingkat waktu, disini sudah saya siapkan semua kode-kodenya yang nantinya bisa Anda repair sendiri untuk mengganti semua informasi dalam widget profile box buat keindahan blog Anda, kode lengkapnya seperti ini:

<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>

Hasilnya :




DEMO SHOW



Bagaimana.? terlihat lebih interaktif dan keren bukan.!!. Pekerjaan untuk membuat bentuk tampilan sudah selalasi sampai pada tahap ini, selanjutnya tinggal memanggil semua perintah element CSS diatas dengan penulisan HTML sebagai berikut:

<div id="profileBox"></div>
   <div id="profile">
       <img src="http://URL-Gambar Anda.png">
          <h2>SAHABAT BLOGGER 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 823 1022 ****</span>
       <span class="right bottom">adress: Bandung, Indonesia</span>
   </div><!..ending profile tag..>

Semua information title pada profile box diatas untuk menerangkan bahasan pada blog ini ya, khusus untuk SAHABAT BLOGGER 77, Agar informasinya sesuai dengan nice blog Anda cukup ganti teks yang saya beri warna-warna berbeda. mudah bukan.!! hehe..
Tugas Devy untuk berbagi buat sahabat semua sudah selesai, bila mana ada beberapa kode yang kurang Anda pahami, silahkan sampaikan pada kolom komentar, insyaAllah Devy akan selalu memberikan yang terbaik buat sahabat semua. Sampai ketemu..!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Profile Box Information Title With Menu Item
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>

https://sahabatblogger77.blogspot.com/2015/04/profile-box-information-title-with-menu-item.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77