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:
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:
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:
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:
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"}
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 :
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgphAhcaCW-l7X_9FjczUZKI_jQv82hU7PL389ttn7Q-dOlq_lPO0sygOl5aSz2kcpko-vUN8uibcF4ExdDMr9m_XxthDMFV6RN-T4DvIVo6hQuia0xA-v5dvU4bLs9VAjJOPos3dAA-FA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7P867t8zXRJoXHEHA6v1qmHXJRZBG6Gv3t09Wy7YmtohiC4hVyTL6Fo44AOqKXFV0OKmhCKTMBte0L6NZ2V6axKPokfg8W_OtYZwI-ykR5IkK_SkSbCupM8Iv3fW5JmesFvhgeIzjSVU/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV3ci1FY7rZEsV_MCITAfnrTnVspFvKjRpSYLqyLJb6NsRxodSAAlk_IB8Hu11uXRGUP_qtdpTJMNRIKBvJEbksUCXl4MXV_NoDa9ltdIcMqr6IUTdaKQJknuC-E_HgwZBWLVoj_dQpIE/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimYpOh6JcjGBTU5Te5rkaPH9MX4fZ12AsVpknvN9dgx_8gI9omPjLDC9Zp3UShJ-mfqaCOzshxO3bhRjopqlcziDnXMWqYhdUFcFTWlzB68BmjvO-NChV77_AOP-sr5dWHTdLOB_Rjdms/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>
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgphAhcaCW-l7X_9FjczUZKI_jQv82hU7PL389ttn7Q-dOlq_lPO0sygOl5aSz2kcpko-vUN8uibcF4ExdDMr9m_XxthDMFV6RN-T4DvIVo6hQuia0xA-v5dvU4bLs9VAjJOPos3dAA-FA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7P867t8zXRJoXHEHA6v1qmHXJRZBG6Gv3t09Wy7YmtohiC4hVyTL6Fo44AOqKXFV0OKmhCKTMBte0L6NZ2V6axKPokfg8W_OtYZwI-ykR5IkK_SkSbCupM8Iv3fW5JmesFvhgeIzjSVU/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV3ci1FY7rZEsV_MCITAfnrTnVspFvKjRpSYLqyLJb6NsRxodSAAlk_IB8Hu11uXRGUP_qtdpTJMNRIKBvJEbksUCXl4MXV_NoDa9ltdIcMqr6IUTdaKQJknuC-E_HgwZBWLVoj_dQpIE/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimYpOh6JcjGBTU5Te5rkaPH9MX4fZ12AsVpknvN9dgx_8gI9omPjLDC9Zp3UShJ-mfqaCOzshxO3bhRjopqlcziDnXMWqYhdUFcFTWlzB68BmjvO-NChV77_AOP-sr5dWHTdLOB_Rjdms/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
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 >>
sudah mas, selengkapnya lihat dalam tutorial ini:
BalasHapus>> Widget Author Box Dengan Blockquote
atau model permalink blogspot seperti ini:
Cara Mengganti Judul Artikel Dengan Permanen Link
hadeuh...c Ratu kode mulai beraksi lagi setelah rada lama sibuk dengan dunia permodelingannya.
BalasHapuskali ni suguhannya soal content box dengan menu flip yang super keren dan bakalan bikin blog kita makin keren...asik deh ih
iya neh mang, beberapa minggu lalu Devy lagi sibuk, jadi jangankan singgak ke blog mang lembu, buka blog aja gak sempat, hddewh,,kangen rasanya.
Hapusmakanya langsung buat yang unik-unik lagi seperti content box diatas.
wow... keren.. bakalan tambah keren kalo blog di pasang ini..
BalasHapusmakanya segera dipasang atuh kang biar makin keren blognya :-)
HapusWush keren ya bisa melipat 3D gitu (h) , kode nya juga gak rumit..
BalasHapusasik asik asik...
ya jelas bisa atuh kang.
Hapusapa sich yang ga bisa buat mbak devy :-)
Blognya keren n simpel nie, oya saya coba dulu di blog ane yg lain nie context box tutorialnya.. Beruntung bisa singgah disini
BalasHapusSaya malah tertarik dengan yang namanya "Open Box Here" itu cara membuat nya gimana ya mba??
BalasHapustehnik CSS modal concept, tutorial yang sama pernah ditanya oleh sahabat lain disini:
Hapus>> 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
Bukan yang itu mba, tapi yang warna pink itu backgroundnya.. "Content Blog Collection"
Hapusiya 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.
HapusMenarik nih tipsnya,, bisa buat nambah ilmu
BalasHapusmenarik dan memang bagus ada efek buka tutupnya ketika di sentuh kursor pada gambar. salut deh sama si putri coding....
BalasHapusoh 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
Keren mbak, oya sekailan mau ucapin ni
BalasHapusRuas 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").
maaf oot ya sista
BalasHapusتَقَبَّلَ اللّهُ مِنَّا وَ مِنْكُمْ صِيَمَنَا وَ صِيَمَكُمْ وَجْعَلْنَا مِنَ الْعَائِدِين وَالْفَائِزِين
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....
bagus dan menarik ya mbak
BalasHapusini ilmu tingkat tinggi nih kayaknya. backroundnya jurusan IT ya mbak :)
BalasHapusdeeeevvvvyyyyyy....kemana aja sekarang
BalasHapuskayaknya yang udah berdua lupa sama dunia blogging
ingat dev...kita-kita juga sahabat kamu lho....
semoga bahagia yaaaa.....
jangan lupa makan-makannya.
Seperti biasa keren mbak...
BalasHapusMantap dah mbak, pokoke t o p dah content boxnya. Salam
BalasHapusbagus sekali mba.
BalasHapusmantap sekali
keren banget warna pink nya ganti biru atau ungu bisa ya mba
BalasHapusSaya lihat aja deh, keren box nya
BalasHapuskalau saya urusan kayak beginian ga bisa, belum sampai ilmunya. paling pake template biasa tambah-tambah widget. makasih mbak jadi menambah ilmu (h)
BalasHapusKunjungan 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 ...
BalasHapuswah kayanya cukup mengetahui aja, takutnya berati diblog saya hehe
BalasHapushalo mbk Devy, ijin berkunjung lagi ya stelah sekian lama saya jarang update.
BalasHapuswah bagus nih.. mau nyoba nerapin ah.. :D kira2 cssnya udah valid html5 belum yah ni
BalasHapussaya ngiri yang begini,soalnya saya gak bisa nich bikin yang beginian,jadi cuma bisa nyimak aja..
BalasHapusMba mau nanya gimana caranya :
BalasHapuscontohnya salah satu posting di klik langsung ke TAB BARU.
tau caranya Mba ?