Membuat fixed Header Blog Versi Saya - Selamat sore kawan, selamat baca baca blog saya ya, jangan lupa tinggalin jejak untuk searing pengetahuan biar pada pinter pinter hehe....
sudah pernah denger Fixed Header belum, saya sendiri juga baru tau apa itu fixed header setelah mencari di mbah google kemudian memasang nya di blog. itu saya kasih tau penampakannya seperti blog saya. tertarik untuk membuatnya nih saya kasih bocoran jawabannya.
Membuat fixed Header Blog Versi Saya:
1. tentu saja kamu harus login ke blogger jangan sampai login ke facebook gak bakalan nyambung nanti.
2. pilih template >> Edit HTML
3. Cari kode ]]></b:skin> silahkan copy kode yang saya tulis di bawah ini dan letakkan diatas kode ]]></b:skin>
ini kodenya :
#ss_floating_menu{background: #fff;height:29px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:2px solid #48d;}
#ss_floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#ss_floating_menu ul li{float:left}
#_floating_menu ul li a{line-height:37px;padding:0 15px;color:#f0e8e5;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #0f669f;display:block;text-decoration:none;}
.menusearch{width:190px;float:right;margin:0 auto;padding:4px 15px 0 0;}
.searchform {margin-top:0px;display: inline-block;*display: inline;padding:0;background:#fff;width:200px;height:20px; overflow:hidden;border:1px solid #ddd;}
.searchform input {font:normal 12px Arial;color: rgb(153, 153, 153);line-height:23px;height:23px;padding:0;margin:0;}
.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 160px;height:23px;border:0px;outline: none;line-height:23px;}
.searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0}
#ss_floating_menu ul{list-style: none;margin:0 auto;width:970px;}
#ss_floating_menu ul li{float:left}
#_floating_menu ul li a{line-height:37px;padding:0 15px;color:#f0e8e5;font-size:13px;font-family:Arial, sans-serif;text-shadow:0px -1px 0px #0f669f;display:block;text-decoration:none;}
.menusearch{width:190px;float:right;margin:0 auto;padding:4px 15px 0 0;}
.searchform {margin-top:0px;display: inline-block;*display: inline;padding:0;background:#fff;width:200px;height:20px; overflow:hidden;border:1px solid #ddd;}
.searchform input {font:normal 12px Arial;color: rgb(153, 153, 153);line-height:23px;height:23px;padding:0;margin:0;}
.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 160px;height:23px;border:0px;outline: none;line-height:23px;}
.searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0}
4. Cari kode kode <body> kemudian letakkan kode dibawah ini tepat di atas kode <body>
<div id='ss_floating_menu'>
<ul>
<div class='menusearch'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search here....'/>
<input class='searchbutton' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcLHdmbgE2WBVq5MpJ27lahyjXxNixR2mJifDf9pzBANeUBfHsHrPWlPviIMaYyfKQwN2judDNAZTxdd0aA9MSf3MUWE6ShySMb9tX97K7oN0x6dd1mCOwpCaz2B98lZW20tlvv85Q0vw/s24/search.png' style='cursor:pointer;vertical-align:top' type='image' value='Go'/>
</form>
</div>
<li>
<a href='URL google plus kamu' target='_blank'><img alt='Profil G+' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrwNvTiZLBV-0I5F8pnQMPKNr4pGQkJj3D8Cl2AW0qdiNmXfzgTecd3BpHbsvifx-AlSZ6zR8SnGTOwykvY_y4ouSB8-Gk8yrn2F3_EXgnuNPPOZBFv7Fs6aKaXjiWBhS-IGJGyPb_/s1600/google+.png' style='float: left;padding-top:10px'/></a></li>
<li><a href='URL facebook Kamu' target='_blank'><img alt='Profil Facebook' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlZuCuDpvaR_FcpvydytV1sODzXshD3wVj8w8ZtwJXX0LkHi6UFNNz6q36fYfydsC4J66Bm_64O1nWxKJzXJwnqDQtrc3MAazt-lfbP1vOM-5pxJX_nU-Gi4vPPn3slwtN_eNqaCJX/s1600/facebook.png' style='float: left;padding-top:10px;padding-left:2px'/></a></li>
<li><a href='URL twitter Kamu' target='_blank'><img alt='Profil twitter' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIGSMrP4wE4reNbg5fWyRGRanlHrm1LP86LwZjg1uCaNuvRUfiULsjTQR1SAk1jJgwZh72Un6obfIV3fYqW6rHhIsdq-Uy97d_RqXvUp4szLHrj5w_arSGrqZ4TE1bVe_aIBL2XUub/s1600/twitter.png' style='float: left;padding-top:10px;padding-left:2px'/></a></li>
<li><a href='URL youtube Kamu' target='_blank'><img alt='profil Youtube' height='17' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu2-AQ797Okkv96Zsj0vpFyIL9pKGftYR53g2t1i7ObADypxsbA7u724smvi-9fBZYpfoqZ9prGOgLAP8AeVvPp86Q894Hu_nvGtg_9CrYbccU0osQKho5i0Gs6EcGchgIwv398PPr/s1600/youtube1.png' style='float: left;padding-top:10px;padding-left:2px'/></a></li>
<li><a href='URL feed Kamu' target='_blank'><img alt='rss feed' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrlSdLaV7Go3rWFD5lSq2zbp8n3T2P3-FGNx_VscycPkJafZTE8O8QnM8r3MxWcFcFCtoIaB3XeeyaX0RkP_dzZv0Ud4DwbMoAwA51MLCSvFeXLRxZx_Y7P2Egc80p9zTzpkdpTAMw/s1600/rss.png' style='float: left;padding-top:10px;padding-left:2px'/></a></li>
</ul></div>
<ul>
<div class='menusearch'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search here....'/>
<input class='searchbutton' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcLHdmbgE2WBVq5MpJ27lahyjXxNixR2mJifDf9pzBANeUBfHsHrPWlPviIMaYyfKQwN2judDNAZTxdd0aA9MSf3MUWE6ShySMb9tX97K7oN0x6dd1mCOwpCaz2B98lZW20tlvv85Q0vw/s24/search.png' style='cursor:pointer;vertical-align:top' type='image' value='Go'/>
</form>
</div>
<li>
<a href='URL google plus kamu' target='_blank'><img alt='Profil G+' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrwNvTiZLBV-0I5F8pnQMPKNr4pGQkJj3D8Cl2AW0qdiNmXfzgTecd3BpHbsvifx-AlSZ6zR8SnGTOwykvY_y4ouSB8-Gk8yrn2F3_EXgnuNPPOZBFv7Fs6aKaXjiWBhS-IGJGyPb_/s1600/google+.png' style='float: left;padding-top:10px'/></a></li>
<li><a href='URL facebook Kamu' target='_blank'><img alt='Profil Facebook' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlZuCuDpvaR_FcpvydytV1sODzXshD3wVj8w8ZtwJXX0LkHi6UFNNz6q36fYfydsC4J66Bm_64O1nWxKJzXJwnqDQtrc3MAazt-lfbP1vOM-5pxJX_nU-Gi4vPPn3slwtN_eNqaCJX/s1600/facebook.png' style='float: left;padding-top:10px;padding-left:2px'/></a></li>
<li><a href='URL twitter Kamu' target='_blank'><img alt='Profil twitter' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIGSMrP4wE4reNbg5fWyRGRanlHrm1LP86LwZjg1uCaNuvRUfiULsjTQR1SAk1jJgwZh72Un6obfIV3fYqW6rHhIsdq-Uy97d_RqXvUp4szLHrj5w_arSGrqZ4TE1bVe_aIBL2XUub/s1600/twitter.png' style='float: left;padding-top:10px;padding-left:2px'/></a></li>
<li><a href='URL youtube Kamu' target='_blank'><img alt='profil Youtube' height='17' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu2-AQ797Okkv96Zsj0vpFyIL9pKGftYR53g2t1i7ObADypxsbA7u724smvi-9fBZYpfoqZ9prGOgLAP8AeVvPp86Q894Hu_nvGtg_9CrYbccU0osQKho5i0Gs6EcGchgIwv398PPr/s1600/youtube1.png' style='float: left;padding-top:10px;padding-left:2px'/></a></li>
<li><a href='URL feed Kamu' target='_blank'><img alt='rss feed' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrlSdLaV7Go3rWFD5lSq2zbp8n3T2P3-FGNx_VscycPkJafZTE8O8QnM8r3MxWcFcFCtoIaB3XeeyaX0RkP_dzZv0Ud4DwbMoAwA51MLCSvFeXLRxZx_Y7P2Egc80p9zTzpkdpTAMw/s1600/rss.png' style='float: left;padding-top:10px;padding-left:2px'/></a></li>
</ul></div>
Untuk Url yang saya tandai warna merah silahkan isi dengan url masing masing.
Note:
1. Untuk temen temen bahwa menu fixed header ini saya aplikasikan di template new jhony wuss modif dari cb blogger
buat yang mau memasang di template blog tinggal menyesuaikan saja.
2. Bagi yang mau bertanya silahkan isi komentar dibawah mari kita searing bersama sama karena saya sendiri masih belajar.
3. jika saya bisa jawab akan saya jelaskan namun jika tidak mari kita saling bagi ilmu biar sama sama menemukan solusi terbaik.
Semoga bisa membantu teman teman dalam belajar blog seperti saya ini. sekian.
0 komentar:
Post a Comment