ChugyGogog

Untuk postingan kali ini saya akan membuat galery imege dengan hover thumbnail hanya menggunakan CSS, Hover box image thumbnail ini sangat cocok buat blogger yang blognya mengkoleksi banyak gambar atau image. Lihat Demo Untuk kodenya bisa lihat di bawah ini : CSS Code .hoverbox{ cursor: default;list-style: none;} .hoverbox a{ cursor: default;} .hoverbox a .preview{ display: none;} .hoverbox a:hover .preview{ display: block;position: absolute;top: -33px;left: -45px;z-index: 1;} .hoverbox img{ background: #fff; border:1px solid #ccc; color: inherit; padding: 2px;vertical-align: top;width: 100px;height: 75px;} .hoverbox li{ background: #eee; border:1px solid #ddd; color: inherit; display: inline;float: left;margin: 3px;padding: 5px;position: relative;} .hoverbox .preview{ border-color: #000;width: 200px;height: 150px;} HTML Code <ul class="hoverbox"> <li><a href=" LinkAnda "><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVv

Sebelumnya saya mengucapkan SELAMAT TAHUN BARU 2011 buat blogger semua, semoga di awal tehun ini kita bisa menjadi lebih baik dari tahun kemarin. Mengawali posting di awal tahun ini saya akan membahas cara pembuatan frame Content pada area template blogger. Frame Content ini bisa diterapkan pada bagian atas (top), bawah (Bottom) atau sidebar kiri dan kanan template bloger, dan untuk kali ini saya akan membuat frame content pada bagian atas template blogger. Lihat Demo Langsung pada cara pembuatan frame content : Pertama masukan kode dibawah ini diatas kode ]]></b:skin> #framecontent{ position: absolute; top: 0; left: 0; width: 100%; height: 90px; overflow: hidden; background: #6db3f2; } #maincontent{ position: fixed; top: 92px; left: 0; right: 0; bottom: 0; overflow: auto; background: #fff; } .innertube{ margin: 15px; } * html body{ /*IE6 hack*/ padding: 90px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/} * html #maincontent{ /*IE6 hack*/ height: 100%; width: 100%;} La

Melanjutkan dan menambahkan postingan yang lalu mengenai pembuatan menu navigasi horizontal dengan tab pointer no image , kali ini saya coba membuat menu navigasi horizontal dengan tambahan search box atau kotak pencari. menu navigasi horizontal ini masih cukup simple hanya menggunakan sedikit gradasi dan juga box shadow css3 pada background. Lihat Demo Untuk pemasangannya saya coba memasang pada area widget template supaya lebih cepat. Tambah widget pada bagian bawah header template blogger > Pilih HTML/JavaScript lalu masukan kode dibawah ini : <style type="text/css"> .black{ float:left; margin-bottom:10px; padding:0px; width: 100%; overflow: hidden; background: #499bea; background: -moz-linear-gradient(top, #999 0%, #000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#000)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#000',GradientType=0 ); -moz

Untuk kali ini saya coba melengkapi atau menambahkan sedikit koleksi menu navigasi horizontal untuk blogger, yang mungkin ingin merubah tampilan menu navigasi di blognya. Untuk demonya bisa lihat gambar dibawah atau klik link demo yang ada di bawah. Demo Navigasi Untuk pemasangannya navigasi horizontal saya rasa blogger sudah paham jadi silahkan lihat kodenya di bawah ini. Kode CSS (Cascading Style Sheet) .menu { padding:0; margin:0; list-style-type:none; white-space:nowrap; } .menu li { float:left; min-width:100px; } .menu a { position:relative; display:block; text-decoration:none; min-width:100px; float:left; } * html .menu a { width:100px; } .menu a span { display:block; color:#fff; background:#7cbc0a; border:1px solid #fff; border-width:2px 1px; text-align:center; padding:4px 16px; cursor:pointer; } * html .menu a span { width:100px; cursor:hand; w\idth:66px; } .menu a b { display:block; border-bottom:2px solid #06a; } .menu a em { display:none; } .

Membuat Link yang meloncat pada link target atau jump link istilah populernya, sangat berguna ketika kita menulis postingan yang panjang dengan beberapa sub bab dengan memasang jump link bisa memudahkan pembaca yang ingin melihat bagian mana yang ingin di baca. Pada prinsipnya jump link hampir sama dengan back to top walaupun kode yang di gunakan berbeda, tentunya ini bukan hal baru untuk blogger. Jump link ini bisa di gunakan sebagai navigasi di awal postingan yang menuju pada target tulisan atau paragrap yang di inginkan ataupun sebaliknya. Cara pembuatan jump link ini cukup mudah kita hanya memberikan link yang akan di jadikan target misalnya seperti ini : Target untuk jump link yaitu paragrap pertama " Membuat Link " Tulis linknya seperti dibawah ini pada kata "Membuat Link" paragrap pertama. <A NAME=" Membuat Link "> Membuat Link </A> Pasang pada kalimat yang di targetkan, Selanjutnya kita memasang navigasi untuk jump link kodenya s