Konsep Kotak Pencarian Tersembunyi di dalam Header

wew Nice info

mas kenapa ide saya langsung di publish tanpa menjawab pertanyaan saya di comment????!

koneksi saya jg lemot kok :D blog sy sdh ringan kok \o/
WOW fullstylish search :Q

Oh, begitu ya. Maaf kalau mas khawatir artikel ini dikira merupakan ide Saya. Ambil saja nggak apa-apa. Karena pertanyaannya tidak sesuai topik jadi langsung Saya buatkan artikelnya supaya pertanyaan bisa dilanjut di bawah.

wew...kayaknya cocok untuk proyek template baru saya :)

wih keren, ini mirip blognya modification blog :D

Kayak punya Om Dede...siiipppp.....

maaf mas, saya cuma tanya aja... ya, saya kira untuk membuat ini menggunakan tag kondisional... makasih mas udah buatkan langsung, makasih banyak, jadi ga repot, cuma nanti lain kali tolong jawab ya mas, walaupun cuma dengan link artikelnya... :-)
sekali lagi mohon maaf dan terimakasih banyak :-)

mas mohon jelaskan kembali untuk susunan HTML-nya, karena tidak bekerja di blog saya di http://go-blogtips.blogspot.com
terimakasih sebelumnya... :-)

Kalau masih memakai widget asli, mungkin markupnya harus dimodifikasi seperti ini:

<div id='header-wrapper'>
<b:section class='header inner' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog Tester (Header)' type='Header'/>
</b:section>
<div class='inner hidden'>
...
</div>
</div>

Lalu ubah nilai selektor $header menjadi #header-wrapper:

$header = $('#header-wrapper');

masih bingung mas aku :'(,mau meletakkan kode yang html dimana
yang css dimana dan yang jquery itu dimana
maklum masih newbie, mohon bimbingannya :yaya:
tips yang bagus mas :-bd

oke mas di coba deh, makasih ya udah dibuatin :-)

mas kalo bikin profil dan kontak kaya di blog ini sama ga sih mas kaya bikin search ini??

Sama. Cuma punya Saya lebih genit.

emh terus yang perlu diganti dari CSS-nya dbagian mananya mas??
terus form searchnya bisa langsung ganti aja gitu??

mau nanya lagi mas, kalo tombolnya disatukan dengan menu gimana caranya mas?

terus saya pengen pake ini di body mas, nah apa yang harus di ubah selain slector CSS-nya kalo saya mau simpen widgetnya tersembunyi di balik body?

gimana nih mas kalo di widget header bawaan
<header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Last My Life (Header)' type='Header'/>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>

Hapus semuanya. Ganti dengan ini:

<header id='site-header'>
<div class='inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Last My Life (Header)' type='Header'/>
</b:section>
</div>
<div class='inner hidden'>
<form action='/search' method='get'>
<input type='text' name='q' placeholder='Search...'/>
</form>
</div>
</header>

gimana nih mas ko gak tampil tombol searchnya, mohon bantuannya

<style>
#site-header {
background-color:#6A2E79;
overflow:hidden;
text-shadow:0 1px 0 rgba(0,0,0,.1);
margin:0 0 20px;
position:relative;
}

#site-header .inner {padding:20px 30px}

#site-header a {
text-decoration:none;
color:white;
}

#site-header a:hover {color:#E0FFED}

#site-header h1 {
font-size:30px;
text-transform:uppercase;
}

#site-header p {margin:10px 0 0}

#site-header form input {
border:1px solid #743983;
background-color:#3B2440;
font:normal normal 12px Verdana,Arial,Sans-Serif;
color:#95799B;
padding:5px 5px;
margin:0 auto;
display:block;
width:98%;
-webkit-box-shadow:inset 0 1px 3px black;
-moz-box-shadow:inset 0 1px 3px black;
box-shadow:inset 0 1px 3px black;
}

#site-header .toggle-button {
display:block;
font-weight:bold;
padding:10px 18px;
text-align:right;
border-top:1px solid #5D216C;
}

.hidden {display:none}
</style>
<header id='site-header'>
<div class='inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Last My Life (Header)' type='Header'/>
</b:section>
</div>
<div class='inner hidden'>
<form action='/search' method='get'>
<input type='text' name='q' placeholder='Search...'/>
</form>
</div>
</header>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<script>
//<![CDATA[
$(function() {
var $header = $('#site-header'),
$panel = $header.find('.inner');
// Insert a toggle button
$header.append('<span class="toggle-button"><a href="/">Search</a></span>');
// Click the toggle button to slide the panel
$header.find('.toggle-button a').on("click", function() {
if ($(this).html() == 'Search') {
$(this).html('&times;');
} else {
$(this).html('Search');
}
$panel.slideToggle('slow');
return false;
});
});
//]]>
</script>

Bang Tau kuk ane selalu bingung yah ama artikel abang yang isinya sperti artikle ini
ini diletakkannya di html blog aku dimana yah setelah kode head kode body atau kodek b:skin
Mohon petunjuknya Bang

Artikel-artikel Code Snippet sebenarnya diperuntukkan untuk kalangan level menengah/menengah ke atas, yang sudah tidak perlu lagi diberitahu secara mendetail mengenai di sebelah mana kode-kode tersebut harus diletakkan dan bagaimana caranya masuk ke halaman editor HTML. Artikel kode snippet murni untuk pengembangan web secara global, bukan cuma untuk blogspot.

Mas Taufik, kalau ingin membuat header-logo seperti punya sampeyan, caranya bagaimana? kok hanya dengan kode CSS bisa jadi tulisan DTE :] ? Trims.

Itu cuma memakai border dan pseudo elemen. Kadang-kadang Saya suka menggambar menggunakan CSS. Ada di label Eksperimen

Makasih ya mas tutorialnya... Nyenengin banget. Oh ya, saya mau tanya lagi mas. Kalau membuat suatu element bergerak (memainkan margin) saat kita mengklik elemen lain bagaimana mas jquery-nya? Contohnya yang pas saya input di kotak search, kotak ribbon sampeyan bergerak ke kanan. Makasih mas.

Tidak ada kodenya. Tapi itu cuma memakai event .focus() dan .blur():

$('input').focus(function() { // Saat focus-in pada elemen input...
$('div').animate({marginLeft:20}, "slow");
}).blur(function() { // Saat focus-out dari elemen input...
$('div').animate({marginLeft:0}, "slow");
});

Mas Taufik, buatkan saya kode css logo header untuk huruf Z saja mas. saya kurang mengerti dengan pseudo element. Saya belum paham. Susah sekali buat huruf Z mas. Atau, mungkin mas taufik punya koleksi CSS huruf yyang bermain pseudo element seperti itu?

UWA!!! Akhirnya saya dapatkan kodenya!!! Terima kasih!! :D

tolong bantuanya :'(
saya ingin menyimpan tombol search nya di dalam kode ini

<nav class='clearfix'>
<ul class='clearfix'>
<li><a href='/'>Home</a></li>
<li><a href='/'>About</a></li>
<li><a href='/'>Archive</a></li>
<li><a href='/'>Comments</a></li>
<!-- inginnya tombol search disini -->
</ul>
<a href='#' id='pull'>Menu</a>
</nav>

dan HTML headernya seperti ini :

<header id='header-wrapper'>
<div class='inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tutorial Plus (Header)' type='Header'>...
</b:section>
</div>
<div class='inner hidden'>
<form action='/search' method='get'>
<input name='q' placeholder='Search...' type='text'/>
</form>
</div>
</header>

saya sudah ubah js nya menjadi :

$(function() {
var $header = $('#site-header'),
$nav = $('nav ul'),
$panel = $header.find('.inner');
// Insert a toggle button
$nav.append('<li class="toggle-button"><a href="/">Search</a></li>');
// Click the toggle button to slide the panel
$nav.find('.toggle-button a').on("click", function() {
if ($(this).html() == 'Search') {
$(this).html('&times;');
} else {
$(this).html('Search');
}
$panel.slideToggle('slow');
return false;
});
});

naum tidak work :'(, bagaimana caranya ?
bisa di cek ke plustutorial[dot]blogspot.com
terimakasih...

Komentar ini telah dihapus oleh pengarang.

Sudah solved hehe...,
ternyata js nya seharusnya begini..
$(function() {
var $header = $('#header-wrapper'),
$nav = $('nav ul'),
$panel = $header.find('.inner');
// Insert a toggle button
$nav.append('<li class="toggle-button"><a href="/">Search</a></li>');
// Click the toggle button to slide the panel
$nav.find('.toggle-button a').on("click", function() {
if ( $(this).html() == 'Search') {
$(this).html('&times;');
} else {
$(this).html('Search');
}
$panel.slideToggle('slow');
return false;
});
});

gan kalo postingannya ikut hide ga? jadi cuma muncul search doang.. please yah min salam http://nandarious.blogspot.com/

g lah

tolong mas saya mau menghilangkan box kotak kosong sebelah kanan header bagai mana caranya, ini blog saya, cimall.blogspot.com

ass... pak itu klo mau nambahin timing saat di klik.. nambahin script apalagi..?? trs $panel.slideToggle('slow'); timming slow ganti dengan value gmn aturannya ??

wass…

Diganti pakai angka saja. Ratusan atau ribuan. Coba cek sendiri hasilnya.

NB: ass itu artinya pantat :p

assalamualaikum mas, kalo mau menambahkan tittle bagaimana ?