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..!!
No comments:
Post a Comment