Content Box With Menu Flip Out Title - Tanpa saya jelaskan secara rinci, pastinya sahabat semua pecinta SAHABAT BLOGGER 77 sudah mengenal apa itu content box dan fungsinya. Pekerjaannya sama seperti » Membuat Format Tulisan Dengan Text Area. Box bisa kita fungsikan sebagai kotak persegi atau sebagai wadah untuk kita menuliskan beberapa content informasi. Tujuannya untuk memberikan keterangan bahwa isi content dalam box tersebut PENTING untuk diketahui, atau bisa juga kita gunakan untuk memberikan tanda pada beberapa tulisan, sehingga bentuk dan tampilannya banyak saya desain dengan berbagai model pilihan seperti ini:


Dan masih banyak lagi yang selengkapnya bisa Anda cari dalam » Daftar Menu Blog. Untuk tampilan content box kali ini saya buat dengan gaya terbaru. Content Box With Menu Flip Out Title, dimana konsepnya saya desain menyerupai widget RELATED Post dengan thumbanail seperti gambar berikut:


Content Box Widget




Apa jadinya jika dalam content box kita sisipkan beberapa menu LABEL seperti itu, menarik bukan.? konsepnya mudah, disini saya menyiapkan 4 gambar dengan link menu yang nantinya akan kita letakkan disebelah kiri box content, jika ingin menambahkan menu lagi nanti bisa Anda modifikasi sendiri, kodenya seperti ini:


nav .home a {background:#e84c3d url(URL-Gambar) no-repeat center center}
nav .home a:hover:after {border-left:2px solid #d82a1a}
nav .home a:after {background:#e84c3d;content:"HOME"}

nav .bT a {background:#1dd1ae url(URL-Gambar) no-repeat center center}
nav .bT a:hover:after {border-left:2px solid #17a489}
nav .bT a:after {background:#1dd1ae;content:"BLOGGING TIPS"}

nav .mN a {background:#3598db url(URL-Gambar) no-repeat center center}
nav .mN a:hover:after {border-left:2px solid #217dbc}
nav .mN a:after {background:#3598db;content:"MENU NAVIGASI"}

nav .sT a {background:#f5c700 url(URL-Gambar) no-repeat center center}
nav .sT a:hover:after {border-left:2px solid #c29e00}
nav .sT a:after {background:#f5c700;content:"SEO TRICK"}


Yang perlu Anda lakukan untuk menyusun dan menempatkan menu itu agar sejajar dengan BOX adalah nilai posisi pada elemen display:flex-box (atur dan sesuaikan), lalu kita beri sedikit sentuhan hover pada menu dengan flip out effect, sedangkan untuk menampilkan title menu kita atur dengan CSS transform:rotateY(180deg) translateX(80px) dengan nilai content:"nama menu". Dan hasilnya :




DEMO SHOW



Sangat mudah bukan.!, bagaimana sahabat mau mencoba box informasi seperti tampilan diatas, cukup salin kode dibawah ini, lalu letakkan diarea postingan Anda, selengkapnya seperti ini:

<style type="text/css">
.text {
  padding:10px 5px 5px 100px;border:2px solid #666;
  border-left:0;margin-top:-18px;width:75%;height:313px;overflow:auto}
nav {position:absolute;top:60px;left:-40px}
nav ul {margin:0;padding:0;list-style:none}
nav li {margin:0;padding:0;height:80px;width:80px}
nav a {
  position:relative;z-index:100;color:#fff;font-size:20px;width:100%;
  height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;
  display:flex;-webkit-box-pack:center;-webkit-justify-content:center;
  -ms-flex-pack:center;justify-content:center;-webkit-box-align:center;
  -webkit-align-items:center;-ms-flex-align:center;align-items:center;
  -webkit-perspective:1000px;perspective:1000px;
  -webkit-perspective-origin:center top;perspective-origin:center top}

nav a:after {
  content:"";font-size:13px;display:-webkit-box;display:-webkit-flex;
  display:-ms-flexbox;display:flex;-webkit-box-pack:center;
  -webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;
  -webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;
  align-items:center;position:absolute;z-index:-1;left:0;text-align:center;
  top:0;height:100%;width:100%;
  -webkit-transform:rotateY(180deg) translateX(80px);
  transform:rotateY(180deg) translateX(80px);
  -webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;
  transform-origin:100% 50%;-webkit-transition:-webkit-transform .5s ease-out;
  transition:transform .5s ease-out;-webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;-webkit-backface-visibility:hidden;
  backface-visibility:hidden}

nav a:hover:after {transform:rotateY(0) translateX(80px);text-shadow:1px 2px 3px #111}
nav .home a {background:#e84c3d url(http://4.bp.blogspot.com/-XbBoiDaP1V4/VXsGxD_-FHI/AAAAAAAABUY/uw7TEE9Mheo/s80/sb77-image2.png) no-repeat center center}
nav .home a:hover:after {border-left:2px solid #d82a1a}
nav .home a:after {background:#e84c3d;content:"HOME"}

nav .bT a {background:#1dd1ae url(http://2.bp.blogspot.com/-0xH3bM9b0YM/VXsGxIpsihI/AAAAAAAABUc/USaJIZqmYjc/s80/sb77-image3.png) no-repeat center center}
nav .bT a:hover:after {border-left:2px solid #17a489}
nav .bT a:after {background:#1dd1ae;content:"BLOGGING TIPS"}

nav .mN a {background:#3598db url(http://4.bp.blogspot.com/-DbF_aQlAg4M/VXsG07AQ4nI/AAAAAAAABUo/htnpg5MuM1w/s80/sb77-image7.png) no-repeat center center}
nav .mN a:hover:after {border-left:2px solid #217dbc}
nav .mN a:after {background:#3598db;content:"MENU NAVIGASI"}

nav .sT a {background:#f5c700 url(http://4.bp.blogspot.com/-9vw6lbqa5XI/VXsG00C4AVI/AAAAAAAABUs/sWXfWkqX_PY/s80/sb77-image8.jpg) no-repeat center center}
nav .sT a:hover:after {border-left:2px solid #c29e00}
nav .sT a:after {background:#f5c700;content:"SEO TRICK"}
</style>
<div class="text">
....
Tulis CONTENT Anda Disini
....
  <nav>
    <ul>
       <li class='home'><a href='#'></a></li>
       <li class='bT'><a href='#'></a></li>
       <li class='mN'><a href='#'></a></li>
       <li class='sT'><a href='#'></a></li>
    </ul>
  </nav>
</div>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Content Box With Menu Flip Out Title
Ditulis oleh= Devy Indriyani
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 =
Artikel Selanjutnya
Silahkan Tunggu..!!
Posting Lama

33 komentar

  1. saya kurang berminat untuk hal ini
    oh ya mbak, itu cara buat kutipan setelah membuat artikel yang ada photonya seperti di blog ini bagaimana ? apa caranya sudah di share

    BalasHapus
    Balasan
    1. sudah mas, selengkapnya lihat dalam tutorial ini:

      >> Widget Author Box Dengan Blockquote

      atau model permalink blogspot seperti ini:

      Cara Mengganti Judul Artikel Dengan Permanen Link

      Hapus
    2. terimakasih mbak devy. berkat mbak saya bisa memasang author box :p

      Hapus
  2. hadeuh...c Ratu kode mulai beraksi lagi setelah rada lama sibuk dengan dunia permodelingannya.
    kali ni suguhannya soal content box dengan menu flip yang super keren dan bakalan bikin blog kita makin keren...asik deh ih

    BalasHapus
    Balasan
    1. iya neh mang, beberapa minggu lalu Devy lagi sibuk, jadi jangankan singgak ke blog mang lembu, buka blog aja gak sempat, hddewh,,kangen rasanya.
      makanya langsung buat yang unik-unik lagi seperti content box diatas.

      Hapus
  3. wow... keren.. bakalan tambah keren kalo blog di pasang ini..

    BalasHapus
    Balasan
    1. makanya segera dipasang atuh kang biar makin keren blognya :-)

      Hapus
  4. Wush keren ya bisa melipat 3D gitu (h) , kode nya juga gak rumit..
    asik asik asik...

    BalasHapus
    Balasan
    1. ya jelas bisa atuh kang.
      apa sich yang ga bisa buat mbak devy :-)

      Hapus
  5. Blognya keren n simpel nie, oya saya coba dulu di blog ane yg lain nie context box tutorialnya.. Beruntung bisa singgah disini

    BalasHapus
  6. Saya malah tertarik dengan yang namanya "Open Box Here" itu cara membuat nya gimana ya mba??

    BalasHapus
    Balasan
    1. tehnik CSS modal concept, tutorial yang sama pernah ditanya oleh sahabat lain disini:

      >> Profile Box Information Title With Menu Item

      Anda bisa pelajari konsepnya disini:

      » Cara Membuat Floating Button Dengan CSS Modal

      » Membuat Pesan Teks Melayang Saat Halaman Terbuka

      Hapus
    2. Bukan yang itu mba, tapi yang warna pink itu backgroundnya.. "Content Blog Collection"

      Hapus
    3. iya itu mas konsepnya sama saja, hanya untuk tombol disini saya desain menggunakan CSS target dengan transition, mengubah tombol default menjadi membesar (scale) untuk menampilkan info yang tersembunyi didalamnya.

      Hapus
  7. Menarik nih tipsnya,, bisa buat nambah ilmu

    BalasHapus
  8. menarik dan memang bagus ada efek buka tutupnya ketika di sentuh kursor pada gambar. salut deh sama si putri coding....

    oh ya maaf udah lama gak kesini...kemarin yang update teman saya, sementara saya kelarkan kerjaan lainnya. mumpung udah dekat lebaran dev. mat idul fitri ya...mohon maaf lahir batin dan salam hangat sampai kebatin...heeee

    BalasHapus
  9. Keren mbak, oya sekailan mau ucapin ni

    Ruas jari sembiru belikar
    Terikat janji seribu intan
    Saya yakin ada kata-kata yang kasar
    Mohon kiranya pintu kemaafan

    Sambut Kemenangan & Mohon Maaf atas Segala Kesalahan
    Saya dan segenap Keluarga mengucapkan " Minal ‘aidin walfaizin, Mohon Maaf Lahir dan Bathin").

    BalasHapus
  10. maaf oot ya sista

    تَقَبَّلَ اللّهُ مِنَّا وَ مِنْكُمْ صِيَمَنَا وَ صِيَمَكُمْ وَجْعَلْنَا مِنَ الْعَائِدِين وَالْفَائِزِين

    Beningkan hati dengan zikir
    cerahkan jiwa dengan cinta
    lalui hari dengan senyum
    tetapkan langkap dengan syukur
    sucikan hati dengan permohonan maaf
    kami sekeluarga mengucapkan selamat idul fitri...mohon maaf lahir dan batin. semoga kita mendapat berkah dan rahmat Allah selamanya, amin....

    BalasHapus
  11. bagus dan menarik ya mbak

    BalasHapus
  12. ini ilmu tingkat tinggi nih kayaknya. backroundnya jurusan IT ya mbak :)

    BalasHapus
  13. deeeevvvvyyyyyy....kemana aja sekarang
    kayaknya yang udah berdua lupa sama dunia blogging
    ingat dev...kita-kita juga sahabat kamu lho....
    semoga bahagia yaaaa.....
    jangan lupa makan-makannya.

    BalasHapus
  14. Seperti biasa keren mbak...

    BalasHapus
  15. Mantap dah mbak, pokoke t o p dah content boxnya. Salam

    BalasHapus
  16. bagus sekali mba.
    mantap sekali

    BalasHapus
  17. keren banget warna pink nya ganti biru atau ungu bisa ya mba

    BalasHapus
  18. Saya lihat aja deh, keren box nya

    BalasHapus
  19. kalau saya urusan kayak beginian ga bisa, belum sampai ilmunya. paling pake template biasa tambah-tambah widget. makasih mbak jadi menambah ilmu (h)

    BalasHapus
  20. Kunjungan perdana kesini ... Artikelnya mengenai utak atik template menarik sekali.. Kayaknya bisa buat referensi buat blog baru nie content box with menu flip out. Makasih byk ...

    BalasHapus
  21. wah kayanya cukup mengetahui aja, takutnya berati diblog saya hehe

    BalasHapus
  22. halo mbk Devy, ijin berkunjung lagi ya stelah sekian lama saya jarang update.

    BalasHapus
  23. wah bagus nih.. mau nyoba nerapin ah.. :D kira2 cssnya udah valid html5 belum yah ni

    BalasHapus
  24. saya ngiri yang begini,soalnya saya gak bisa nich bikin yang beginian,jadi cuma bisa nyimak aja..

    BalasHapus
  25. Mba mau nanya gimana caranya :
    contohnya salah satu posting di klik langsung ke TAB BARU.
    tau caranya Mba ?

    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