Cara Menciptakan Fixed Header Blog
Thursday, September 5, 2013
Add Comment
Cara Membuat Fixed Header Blog - Pada tutorial kali ini aku akan mencoba share tutorial bagaimana cara menciptakan fixed header blog ibarat di blog aku 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, eksklusif saja dibawah ini :
Cara Membuat Fixed Header Blog :
1. Login ke Blogger
2. Pilih Template >> Edit HTML
3. Cari instruksi ]]></b:skin>, copy instruksi dibawah ini dan letakkan sempurna diatas instruksi ]]></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/AVvXsEgteKJbEXwzpqMz7hgByP6iw1STLP53IZYjx75LB9bYsE0otOZrJcEm85kXrmVPLOfpCDRJjJ11IrKj7Tph1DbWVxw3N9Y_e1Ab6o_V20JqHzN4X-nk35AbhNMmMaxp8RxlFn_abMwLRmc/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 instruksi dibawah ini sempurna 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' kalau ingin menampilkan deskripsi posting
summaryLength: 400, // Jumlah huruf 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 instruksi ini di bawah instruksi </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/AVvXsEgQlcKm5MGMHv_q2dIaUvUEezBiqm9bmn7Cqhdd9_zNpCg-zWUB2liCJmaDljVqa5YQsQqHY54eqwQzMdjyvNd7Dl1Ru79uGsEdW5vql1ri-wudsZHt4I_DaWPFY-Q6j80EJFMUitPD51Q/s1600/henrylogov2.png' style='padding:0px;'/></a>
</div>
<ul>
</ul>
</div>
</div>
</div>
Catatan:
Ganti Kode Warna #F4661A dengan instruksi warna yang sahabat inginkan, untuk melihat pilihan warna klik disini
Ganti Kode Url-Blog-Anda dengan Alamat Url blog sahabat !
Ganti Kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQlcKm5MGMHv_q2dIaUvUEezBiqm9bmn7Cqhdd9_zNpCg-zWUB2liCJmaDljVqa5YQsQqHY54eqwQzMdjyvNd7Dl1Ru79uGsEdW5vql1ri-wudsZHt4I_DaWPFY-Q6j80EJFMUitPD51Q/s1600/henrylogov2.png dengan instruksi gambar logo yang sahabat inginkan!
Sampai disini tutor nya sudah final sob, kalau sahabat praktekan dan ada eror berarti ada langkah-langkah yang mungkin terlewat.
Cukup sekian Tutor Cara Membuat Fixed Header Blog. Semoga Bermanfaat
0 Response to "Cara Menciptakan Fixed Header Blog"
Post a Comment
Blog ini merupakan Blog Dofollow, karena beberapa alasan tertentu, sobat bisa mencari backlink di blog ini dengan syarat :
1. Tidak mengandung SARA
2. Komentar SPAM dan JUNK akan dihapus
3. Tidak diperbolehkan menyertakan link aktif
4. Berkomentar dengan format (Name/URL)
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
Klik subscribe by email agar Anda segera tahu balasan komentar Anda