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:
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:
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:
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..!!
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 :
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 >>
Profile boxnya benar benar informatif dan keren, tapi yang paling cakep fotonya.. ;)
BalasHapuskok cakep to...yang cakep itu kita-kita. itu juga kalau ada yang ikhlas mengakuinnya...
Hapusharus ada mbah, takutnya kalau gak ada yang mengaku ntar diambil sama mas Aldino, hehe..!!
Hapusmasih untung kalau ada kawan yang ambil...kalau digondol kucing...kan ribet juga mbak. heee
HapusI just wanna say....unique
BalasHapustombol widget koleksi demoshow menggunakan css modal kan Vy?.. apa semua bisa disisipkan ke dalamnya ya? sempat kaget jg tadi..
BalasHapusuntuk 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..
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.
HapusKalau 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..!!
yang saya masih bingung penerapan linier gradien sista....minta pencerahan ya
Hapuscuma 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,
Hapus.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
ok makasih ya dev atas pencarahannya...udah mulai paham.
HapusSebenarnya sih mbah sudah paham, hanya sengaja dibuat lupa aja,jadinya lupa beneran tuh, hehe..!!
Hapusprofil box nya maknyus banget nih (h)
BalasHapusMenarik tampilan profile boxnya
BalasHapusjelaslah mas...orang putri coding yang buatnya. udah canti jago coding lagi gan.
Hapuscoba cek dev...bajunya membesar gak? heeee
hehe..!! bajunya sih tidak mbah, tetapi telinganya sempat naik sedikit tadi,
Hapuskayaknya 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.
BalasHapusselebihnya 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
saya pelajari dulu
Hapuslangsung CTRL + D
cuma penambahan sedikit saja kok mbah dari tampilan profile box sebelumnya, cuma membuat beberapa item menu navigasi pilihan.
HapusKalau 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..!!
tadi udah ketemu alien...dia bilang salam aja sama devy...sama aliennya juga lagi sibuk kerja. makanya gak bisa ngeblog dulu sementara katanya.
Hapusiya mas...yang punya bukan mas...tapi mbak
BalasHapusyang mas tuh saya...hahahaaaa
kalau saya dev maunya tukar nomor hp aja gimana min? hehehe
BalasHapus.Lebih terlihat minimalis jadinya ya mbak dev, keren banget. (h)
BalasHapusKayaknya lebih baik mbah, soalnya link SB-77 belum layak dipasarkan, jadi belum pantes untuk tukar-tukaran,mending tukerin nomor pin, ya kan mbah, hehe..!!
BalasHapustuh kan mbah, padahal blog ini sudah Devy tampilkan foto profile, masih saja dipanggil mas, haddewhh...capek deh..!!
BalasHapuscantik profile boxnya ini belum ada di blog saya
BalasHapuskeluaran 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
BalasHapusIni mah keren pizan atuh mbak..jadi keliatan lebih atraktif dan keatif
BalasHapusnah tuh sama tukang koding. lagi rapat ya? heeee
Hapussaya tunggu hasil terbaru dari kolaborasinya tukang koding berdua ini.
saya udah kirim lewat email G+ dev. heeee
BalasHapusgedubraaakkkk...jatuh kebelakang....sambil ada bintang berputar.
BalasHapusKeren Mbak
BalasHapusJangan Lupa Kunbal Ok :)
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