4.4.15
34
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:



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:

Profile Box Title




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 >>
= TERIMA KASIH =

34 komentar

  1. Profile boxnya benar benar informatif dan keren, tapi yang paling cakep fotonya.. ;)

    BalasHapus
    Balasan
    1. kok cakep to...yang cakep itu kita-kita. itu juga kalau ada yang ikhlas mengakuinnya...

      Hapus
    2. harus ada mbah, takutnya kalau gak ada yang mengaku ntar diambil sama mas Aldino, hehe..!!

      Hapus
    3. masih untung kalau ada kawan yang ambil...kalau digondol kucing...kan ribet juga mbak. heee

      Hapus
  2. I just wanna say....unique

    BalasHapus
  3. tombol widget koleksi demoshow menggunakan css modal kan Vy?.. apa semua bisa disisipkan ke dalamnya ya? sempat kaget jg tadi..

    untuk profilbox..saat dites penerapannya.. semua teracak penempatannya..
    tp jujur.., paduan warnanya cool ditambah foto yg menghiasi di dalamnya, jadi menambah sempurna penampakan demoshownya.. pasti dibuat dg hati inih..

    tanda bintang empat setelah deretan angka.. peluang dari 4 bintang sampai ratusan mungkin.. 4kali10 kuadrat-kuadrat,,akar pangkat.. hehehe.. kaciyaaan .. hahaha..

    BalasHapus
    Balasan
    1. Benar sekali mas, tombol teks "widget Collection" saya menggunakan CSS modal dalam penerapannya, namun saya bentuk dengan efek fullscreen. Apa saja bisa mas sisipkan disana.

      Kalau untuk profile boxnya sebenarnya Devy bentuk dari kode widget profile sebelumnya, hanya saya modifikasi dengan menggunakan box-shadow lalu saya hubungkan dengan efek transform-rotate, dan saya tambahkan beberapa item menu pilihan.

      nah kalau teks dibawah menu, sengaja nomornya tidak ditampilkan semuanya, ntar mas Al miscall terus ke phone Devy, hehe..!! (cukup tebak angka berapa dibalik ke-4 bintang itu) hehe..!!

      Hapus
    2. yang saya masih bingung penerapan linier gradien sista....minta pencerahan ya

      Hapus
    3. cuma menambahkan nilai pada masing-masing batas warna saja kok mbah, jika posisi ditentukan dengan nila top left, maka tinggal atur nilai persentasenya jika membuat warna yang banyak,

      .span {
      background-image: linear-gradient (top,
      red, orange, yellow, green, blue, indigo, purple);}


      Sebera banyak warna yang akan kita tambahkan, selalu pisahkan dengan tanda koma ( , ).

      Lihat Disini » Mengenal Lebih Jauh Tentang CSS3 Linear Gradient

      Hapus
    4. ok makasih ya dev atas pencarahannya...udah mulai paham.

      Hapus
    5. Sebenarnya sih mbah sudah paham, hanya sengaja dibuat lupa aja,jadinya lupa beneran tuh, hehe..!!

      Hapus
  4. profil box nya maknyus banget nih (h)

    BalasHapus
  5. mas saya telah meletakkan link blonya di blog saya, (tukar link mas) bisa ya mas cek dibawah popular post http://filehipo2.blogspot.com/

    BalasHapus
    Balasan
    1. kalau saya dev maunya tukar nomor hp aja gimana min? hehehe

      Hapus
    2. Kayaknya lebih baik mbah, soalnya link SB-77 belum layak dipasarkan, jadi belum pantes untuk tukar-tukaran,mending tukerin nomor pin, ya kan mbah, hehe..!!

      Hapus
    3. saya udah kirim lewat email G+ dev. heeee

      Hapus
  6. kalo sudah mas letakkan link saya http://filehipo2.blogspot.com/ di blog nya, mas kabarin saya ya dengan berkomentar di blog saya, tks mas

    BalasHapus
    Balasan
    1. iya mas...yang punya bukan mas...tapi mbak
      yang mas tuh saya...hahahaaaa

      Hapus
    2. tuh kan mbah, padahal blog ini sudah Devy tampilkan foto profile, masih saja dipanggil mas, haddewhh...capek deh..!!

      Hapus
    3. gedubraaakkkk...jatuh kebelakang....sambil ada bintang berputar.

      Hapus
  7. Menarik tampilan profile boxnya

    BalasHapus
    Balasan
    1. jelaslah mas...orang putri coding yang buatnya. udah canti jago coding lagi gan.
      coba cek dev...bajunya membesar gak? heeee

      Hapus
    2. hehe..!! bajunya sih tidak mbah, tetapi telinganya sempat naik sedikit tadi,

      Hapus
  8. kayaknya memang elbih baik begini dev untuk profile dan info box digabung menjadi satu. artinya kita bisa menghemat tempat dan juga udah disertai item menu agar pengunjung mudah memilih link apa yang menarik buat mereka.

    selebihnya widget ini juga akan mempermudah kalau kita menautkan link kategori artikel, sehingga pengunjung tidak repot dengan pilihan yang kita suguhkan. cara pembuatannya pun cukup mudah dan saya yakin kalau dikompres kodenya tidak akan memberatkan loading. tapi dari segi tampilan blog menjadi lebih profesional....

    terima kasih dev. saya udah dapat banyak ilmu dari sini. oh ya....maaf juga jarang berkunjung ke blog ini karena banyak tugas kantor keluar kota. saya sih mintanya keluar angkasa biar bisa sekalian liburan diplanet lain gitu...heeee
    iya gak sista devy?

    untuk profile box information with menu titlenya saya hanya satu kata....#salute

    BalasHapus
    Balasan
    1. saya pelajari dulu
      langsung CTRL + D

      Hapus
    2. cuma penambahan sedikit saja kok mbah dari tampilan profile box sebelumnya, cuma membuat beberapa item menu navigasi pilihan.

      Kalau mereka yang punya akun google-code bisa dikompres menjadi link PHP, biar lebih singkat dan pendek kodenya. atau bisa mengirimkan kode diatas untuk mendaptkan link RAW ke pastebin.

      oh iya tidak apa-apa mbah, Devy juga baru bisa ngeblog lagi neh, karena beberapa hari ini lagi sibuk kuliah, jadi gak sempat juga berkunjung kerumah online mbah dinan. dan kalau mbah dinan jadi keluar angkasa, jangan lupa ajak devy ya, kali aja bisa lihat alien disana, hehe..!!

      Hapus
    3. tadi udah ketemu alien...dia bilang salam aja sama devy...sama aliennya juga lagi sibuk kerja. makanya gak bisa ngeblog dulu sementara katanya.

      Hapus
  9. .Lebih terlihat minimalis jadinya ya mbak dev, keren banget. (h)

    BalasHapus
  10. cantik profile boxnya ini belum ada di blog saya

    BalasHapus
  11. keluaran terbaru mba devy lagi nih, triknya selalu memberikan yang baru, smoga bermanfaat ya mba,kalo saya mah mungkin kurang waktu buat bikin variasi blog.hehe

    BalasHapus
  12. Ini mah keren pizan atuh mbak..jadi keliatan lebih atraktif dan keatif

    BalasHapus
    Balasan
    1. nah tuh sama tukang koding. lagi rapat ya? heeee
      saya tunggu hasil terbaru dari kolaborasinya tukang koding berdua ini.

      Hapus
  13. Keren Mbak
    Jangan Lupa Kunbal Ok :)

    BalasHapus
  14. Keren tuh Box Informationnya.. Pasti yang liat Demo Shownya ngelirik ke foto yang di sebelah kiri tuh.. Mana no nya di sensor lagi :-s

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK