Advertise

Tampilkan postingan dengan label Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Hover Box Image Thumbnail Dengan CSS



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="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TQSEtDfHFCI/AAAAAAAACqA/KzhlVLlLHg8/s1600/ironman3d.jpg" alt="description" /><img src="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TQSEtDfHFCI/AAAAAAAACqA/KzhlVLlLHg8/s1600/ironman3d.jpg" alt="description" class="preview" /></a></li>
.............................
.............................
.............................
</ul>

NB : Warna merah untuk url gambar kecil (Small), warna Biru Untuk URL gambar hover Besar. Sedangkan warna hijau merupakan link yang ingin anda pasang.

Silahkan code css-y di custom sesuai selera blogger selamat mencoba.

Membuat Frame Content Pada Template Blogger

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%;}

Lalu masukan juga kode dibawah ini dibawah kode <body>

<div id='framecontent'>
<div class='innertube'>
<h1>Frame Conten</h1>

<div id='maincontent'>
<div class='innertube'>

<div id='outer-wrapper'>
......................
......................
......................

Tambahkan tag penutup </div> di atas kode </body>

Silahkan pratinjau terlebih dahulu, kalau sudah cocok silahkan di simpan.
Selamat mencoba.

NB : Teks warna merah bisa anda ganti dengan logo blog ataupun dengan navigasi silahkan di custom saja sesuai dengan selera blogger.

Horizontal Navigasi Plus Search Box Simple And Cool

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.
navigasi horizontal blue and black plus search box
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-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}

.black ul{
margin: 0; padding: 0; padding-left: 10px;
font: bold 14px Verdana;
list-style-type: none; }

.black li{
display: inline; margin: 0;}

.black li a{
float: left; text-decoration: none;
margin: 0; padding:12px; color: white;}

.black li a:visited{color: white; }
.black li a:hover, .black li.selected a{color:#ccff00;}

#searchboxo{
width:250px; float:right; padding: 4px; margin:0px; }

#searchboxo form input.searchinput{
background: #fff; padding:6px; margin:0px; width: 160px;
border: solid 1px #999; outline: none;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
-moz-box-shadow: inset 0 1px 3px #666;
-webkit-box-shadow: inset 0 1px 3px #666;
box-shadow: inset 0 1px 3px #aaa; }

#searchboxo form input.submitbutton{
cursor:pointer; width: 60px;
background: #FCFCFC;
background: -moz-linear-gradient(top, #FCFCFC 0%, #E8E8E8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFCFC), color-stop(100%,#E8E8E8));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCFCFC', endColorstr='#E8E8E8',GradientType=0 );
border:1px solid #d8d8d8;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
color:#000; padding:4px; text-shadow:1px 1px #fff;}

</style>

<div class='black'>
<ul><li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Galery</a></li>
</ul>

<div id='searchboxo'>
<form action='/search' id='searchform' method='get'> <input class='searchinput' id='searchbox' name='q' onblur='if (this.value == "") {this.value = "Insert keyword here...";}' onfocus='if (this.value == "Insert keyword here..."{this.value = "";}' type='text' value='Insert keyword here...'/><input class='submitbutton' type='submit' value='Search'/></form></div></div>

Silahkan ganti alamat url-nya dengan url atau link yang blogger inginkan.
selamat mencoba.

Horizontal Navigasi Dengan Tab Pointer No Image

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.

navigasi horizontal tab pointer
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; }
.menu a:hover { background:#fff; }
.menu a:hover span { color:#fff; background:#08c; }
.menu a:hover em {
display:block; overflow:hidden; border:6px solid #06a; border-color:#06a #fff;
border-width:6px 6px 0 6px; position:absolute; left:50%; margin-left:-6px; }

Kode HTML
<ul class="menu">
<li><a href="#"><b><span>Menu Satu</span></b><em></em></a></li>
<li><a href="#"><b><span>Menu kedua</span></b><em></em></a></li>
<li><a href="#"><b><span>Menu ketiga</span></b><em></em></a></li>
<li><a href="#"><b><span>Menu Empat</span></b><em></em></a></li>
<li><a href="#"><b><span>Menu Lima</span></b><em></em></a></li>
</ul>

Membuat Jump Link Di Dalam Posting

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 seperti ini :

<A href="#Membuat Link"> Paragrap Pertama</A>

Link ini akan meloncat pada link yang ditargetkan yaitu pada paragrap pertama "Membuat Link" . Jangan lupa menggunakan "#" di awal kalimat yang digunakan sebagai link navigasi seperti di atas.

Untuk contohnya seperti ini :Kembali ke Paragrap Pertama
Gimana cukup mudah bukan selamat mencoba.