Cara Membuat Fixed Header Blog
Thursday, September 5, 2013
Edit
Cara Membuat Fixed Header Blog - Pada tutorial kali ini saya akan mencoba share tutorial bagaimana cara membuat fixed header blog seperti di blog saya ini. Selain logo blog yang akan kita pasang, widget ini juga terdapat kolom search untuk memudahkan pengunjung mencari artikel-artikel blog sobat. Seperti apa tutor nya, langsung saja dibawah ini :
Cara Membuat Fixed Header Blog :
1. Login ke Blogger
2. Pilih Template >> Edit HTML
3. Cari kode ]]></b:skin>, copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>
/* Floating Menu
----------------------------------------------- */
#top-menuwrapper{background-color: #fff;border-top:3px solid #F4661A;box-shadow: 0px 1px 2px rgba(0,0,0,0.3);height:76px;width:100%;position:fixed;top:0;left:0;z-index:999;overflow:hidden;border-bottom:3px solid #F4661A}
#top-menuwrap{width:1100px;margin:0 auto;}
#top-menu{width:100%}
#top-menu ul{list-style: none;margin-right:250px}
#top-menu ul li{float:right}
#top-menu ul li a{line-height:34px;padding:5px 0;margin-left:25px;color:#999;font-size:30px;text-transform:uppercase;display:block;text-decoration:none;}
#top-menu ul li a:hover{color:#555;}
.logo{float:left;background:#fff;}
.logo img{margin-top:-16px;}
/* Kotak Pencarian
----------------------------------------------- */
#search-wrapper{float:right;padding-right:210px;}
#search-form-feed {
width:210px; /* lebar kotak penelusuran */
position:fixed;
top:26px;
margin:0 0 10px;
padding:0 0;
font:normal normal 11px Arial,Sans-Serif;
color:#333;
z-index:9999;
}
#feed-q-input {
display:block;
width:70%;
height:16px;border:1px solid #ccc;
background-color:white;
padding:5px 5px;
font:normal normal 13px Tahoma,Arial,Sans-Serif;
color:#ccc;
margin:0 0;
}
#feed-q-input:focus {
border-color:#F4661A;
color:#333;
outline:none;
}
#sbutt {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCvTgy4xcjdNtLz1WcTLoOjOSKn3zIGP9unHPhGluEp2P2NjNxT1Hbw3nLy0qIYtkPAOJmp3CEMxMiluh6J12rnAuAIHcpyBm84X5gHauSxFvL46xq_x3rce1rbIpbNdecg0wUEuARop8/s1600/search.png)no-repeat;
color:none;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
padding: 1px;
margin: 0px;
border:none;
width:58px;
height:28px;
cursor: pointer;
margin-top:-28px;
float:right;
}
#search-result-container {
width:550px;
height:320px;
overflow:auto;
position:absolute;
top:100%;
right:0;
z-index:999;
background-color:#f2f2f2;
border:1px solid #ddd;
padding:10px 10px 0;
margin:10px 0 0;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
display:none;
}
#search-result-container mark {
background-color:yellow;
color:black;
}
#search-result-container a {
text-decoration:none;
color:#0D3E71;
font-weight:bold;
font-size:12px;
display:block;
}
#search-result-container a:hover {
color:#052748;
}
#search-result-container h4 {
margin:0 0 10px;
font:normal bold 12px 'Trebuchet MS',Arial,Sans-Serif;
color:#B50001;
}
#search-result-container ol {
background:transparent;
border:none;
margin:0 0 10px;
padding:0 0;
}
#search-result-container li {
margin:0 0 1px;
padding:7px 8px;
list-style:none;
border:1px solid #B7C1CE;
background-color:white;
overflow:hidden;
word-wrap:break-word;
text-align:left;
}
#search-result-container li img {
display:block;
float:left;
margin:0 10px 4px 0;
border:1px solid #B7C1CE;
background-color:#F5F5F5;
padding:2px 2px;
}
#search-result-loader {
position:absolute;
top:100%;
left:0px;
z-index:999;
background-color:#ED702B;
color:white;
padding:3px 5px;
margin:-2px 0 0;
font:normal bold 10px Arial,Sans-Serif;
-webkit-border-radius:0 0 3px 3px;
-moz-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
display:none;
}
4. Sekarang Cari Kode <body> , dan letakan kode dibawah ini tepat dibawah <body>
<div id='top-menuwrap'>
<div id='search-wrapper'>
<div id='search-form-feed'>
<form action='/search' onsubmit='return updateScript();'>
<input id='feed-q-input' name='q' onfocus='this.value='';' onkeyup='resetField();' type='text' value='Cari di sini...'/><input class='btnSearch' id='sbutt' type='submit' value=''/>
</form>
<div id='search-result-container'/>
<div id='search-result-loader'>Loading...</div>
</div>
<script type='text/javascript'>
//<![CDATA[
var searchFormConfig = {
url: "Url-Blog-Anda", // URL Blog
numPost: 9999, // Jumlah maksimal temuan
summaryPost: true, // 'true' jika ingin menampilkan deskripsi posting
summaryLength: 400, // Jumlah karakter ringkasan posting
resultTitle: "Hasil penelusuran yang di temukan", // Judul hasil pencarian
noResult: "Tidak Di Temukan!!!", // Deskripsi 'tak ditemukan'
resultThumbnail: true, // 'true' untuk menampilkan thumbnail posting
thumbSize: 40, // Ukuran & resolusi thumbnail
fallbackThumb: "http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png" // Fallback thumbnail untuk posting tak bergambar
};
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/blogger-quick-search.js' type='text/javascript'/>
</div></div>
5. Sekarang Cari Kode </head> dan letakan kode ini di bawah kode </head>
<div id='top-menuwrapper'>
<div id='top-menuwrap'>
<div id='top-menu'>
<div class='logo'>
<a href='Url-Blog-Anda' target='_blank'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9h3l0LqB8izfrwd_I4YAUZgugIPElqA0ZmDSK81a2tlPkA6f70gbN3s4ZnvgwYXCMysyqz98uzBKVy80p-BKk1_5Uf4hej57jzbwPeZwAKs25_Q6kRRmQHfZz_w4L-4X62dc90pJXp8M/s1600/henrylogov2.png' style='padding:0px;'/></a>
</div>
<ul>
</ul>
</div>
</div>
</div>
Catatan:
Ganti Kode Warna #F4661A dengan kode warna yang sobat inginkan, untuk melihat pilihan warna klik disini
Ganti Kode Url-Blog-Anda dengan Alamat Url blog sobat !
Ganti Kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9h3l0LqB8izfrwd_I4YAUZgugIPElqA0ZmDSK81a2tlPkA6f70gbN3s4ZnvgwYXCMysyqz98uzBKVy80p-BKk1_5Uf4hej57jzbwPeZwAKs25_Q6kRRmQHfZz_w4L-4X62dc90pJXp8M/s1600/henrylogov2.png dengan kode gambar logo yang sobat inginkan!
Sampai disini tutor nya sudah selesai sob, jika sobat praktekan dan ada eror berarti ada langkah-langkah yang mungkin terlewat.
Cukup sekian Tutor Cara Membuat Fixed Header Blog. Semoga Bermanfaat