Yeni nesil CSS top menu (Search Box Destekli)
Artık her sitenin, her blog'un vazgeçilmezi olan top menüler bir hayli yaygın. Bir çok site'de css destekli menüler bulabilmek mümkün. Ancak bu menüde search box(arama kutucuğu) desteği mevcut.
Blogunuza/Sitenize top menu bar eklemenizi sağlar.
1. Blogger kontrol panelinizdeyken sırasıyla " Şablon » HTMLyi düzenle " tıklayın. CTRL ve F kombinasyonu'nu kullanarak sayfada " ]]></b:skin> " aratın ve bu kodun üstüne aşağıda verilen kodu ekleyin.;
* {
margin: 0px auto;
padding: 0;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.nav {
background: #000;
height: 60px;
display: inline-block;
margin-left: 350px;
position: fixed;
z-index: 9999;
}
.nav li {
float: left;
list-style-type: none;
position: relative;
}
.nav li a {
font-size: 16px;
background: #000;
color: white;
display: block;
line-height: 60px;
padding: 0 26px;
text-decoration: none;
border-left: 0px solid #2e2e2e;
font-family: Montserrat, sans-serif;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.nav li a:hover {
color: white;
background-color: #323131;
}
#settings a {
padding: 18px;
height: 24px;
font-size: 10px;
line-height: 24px;
}
#search {
width: 357px;
margin: 4px;
}
#search_text{
width: 297px;
padding: 15px 0 15px 20px;
font-size: 16px;
font-family: Montserrat, sans-serif;
border: 1px solid: #fff;
height: 52px;
margin-right: 0;
color: black;
outline: none;
background: #000;
float: left;
box-sizing: border-box;
transition: all 0.15s;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: white;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: white;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: white;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: white;
}
#search_text:focus {
background: #DEDEDE;
}
#search_button {
border: 0 none;
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1T4oXoWz9cPhytmXOpcLOzkS90Z9nFjkQ2FBT40cEoA8m-FjN_SjOOzBTShQkI6PxVVMJ1STT2ZytcZ_T1tRPxMUQIllzGwgZ08R6ORXoLapKq0BDhrhYs9ZytPQfGV0OVLndu0x1-5Wt/h120/search.png) center no-repeat;
width: 60px;
float: left;
padding: 0;
text-align: center;
height: 52px;
cursor: pointer;
}
#options a{
border-left: 0 none;
}
#options>a {
background-image: url(triangle.png);
background-position: 85% center;
background-repeat: no-repeat;
padding-right: 42px;
}
.subnav {
visibility: hidden;
position: absolute;
top: 110%;
right: 0;
width: 200px;
height: auto;
opacity: 0;
transition: all 0.1s;
background: transparent;
}
.subnav li {
float: none;
}
.subnav li a {
border-bottom: 0px solid #DEDEDE;
}
#options:hover .subnav {
visibility: visible;
top: 100%;
opacity: 1;
}
margin: 0px auto;
padding: 0;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.nav {
background: #000;
height: 60px;
display: inline-block;
margin-left: 350px;
position: fixed;
z-index: 9999;
}
.nav li {
float: left;
list-style-type: none;
position: relative;
}
.nav li a {
font-size: 16px;
background: #000;
color: white;
display: block;
line-height: 60px;
padding: 0 26px;
text-decoration: none;
border-left: 0px solid #2e2e2e;
font-family: Montserrat, sans-serif;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.nav li a:hover {
color: white;
background-color: #323131;
}
#settings a {
padding: 18px;
height: 24px;
font-size: 10px;
line-height: 24px;
}
#search {
width: 357px;
margin: 4px;
}
#search_text{
width: 297px;
padding: 15px 0 15px 20px;
font-size: 16px;
font-family: Montserrat, sans-serif;
border: 1px solid: #fff;
height: 52px;
margin-right: 0;
color: black;
outline: none;
background: #000;
float: left;
box-sizing: border-box;
transition: all 0.15s;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: white;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: white;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: white;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: white;
}
#search_text:focus {
background: #DEDEDE;
}
#search_button {
border: 0 none;
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1T4oXoWz9cPhytmXOpcLOzkS90Z9nFjkQ2FBT40cEoA8m-FjN_SjOOzBTShQkI6PxVVMJ1STT2ZytcZ_T1tRPxMUQIllzGwgZ08R6ORXoLapKq0BDhrhYs9ZytPQfGV0OVLndu0x1-5Wt/h120/search.png) center no-repeat;
width: 60px;
float: left;
padding: 0;
text-align: center;
height: 52px;
cursor: pointer;
}
#options a{
border-left: 0 none;
}
#options>a {
background-image: url(triangle.png);
background-position: 85% center;
background-repeat: no-repeat;
padding-right: 42px;
}
.subnav {
visibility: hidden;
position: absolute;
top: 110%;
right: 0;
width: 200px;
height: auto;
opacity: 0;
transition: all 0.1s;
background: transparent;
}
.subnav li {
float: none;
}
.subnav li a {
border-bottom: 0px solid #DEDEDE;
}
#options:hover .subnav {
visibility: visible;
top: 100%;
opacity: 1;
}
2. Yine CTRL ve F kombinasyonu'nu kullanarak sayfada " <div id='content-wrapper'> " aratın ve bu kodun üstüne aşağıda verilen kodu ekleyin.;
<ul class='nav'>
<li id='settings'>
<a href='/'><img src='https://lh3.googleusercontent.com/-libiDemH_bw/Vmm-Q_3Y3KI/AAAAAAAAS8Q/gE-E-Y18fCQ/h120/logo.png'/></a>
</li>
<li>
<a href='/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVrZWTbJyizC15byibgO1xW9NkRztnFccD5sm0Sr8D0H3ljcWp6fJhtF0JNu3NBiNd_ZjuObpqogY1Vmiddu46CE-HDMVNsIVHQkoFet08S83_D4PCE59Z-9s6SWfFSnYd-Y5BKg1WSgFr/h120/anasayfa.png'/> Anasayfa</a>
</li>
<li id='search'>
<form action='/search/label' method='get'>
<input id='search_text' name='search_text' placeholder='Ne arıyorsun ?' type='text'/>
<input id='search_button' name='search_button' type='button'/>
</form>
</li>
<li id='options'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ8TBGUbIb_VTqOt_ep423k7zIpCjOah26H27T8RmzGB_E5nU6xCsA92aGyzHmGOD45rVNFHzltKnIK0GVeeG_U0VtEv33_cHI9vmXZm5Ec4SxMFf7YPI83ZxzAGREcjFsASgbvnoleJFq/h120/icerik.png'/> Blogger</a>
<ul class='subnav'>
<li><a href='http://metamorpheuss.blogspot.com/search/label/blogger'><img src='https://lh3.googleusercontent.com/-_gP2Be7ZYI8/VNev3wqcH2I/AAAAAAAAP7g/XVUZyKERpg8/h120/blogger.png'/> Blogger</a></li>
<li><a href='http://metamorpheuss.blogspot.com/search/label/tema'><img src='https://lh4.googleusercontent.com/-kd7_u5ekjPA/VNev3hvyCZI/AAAAAAAAP7c/s5RnQ83jyVQ/h120/blogger-temalari.png'/> Şablonlar</a></li>
<li><a href='http://metamorpheuss.blogspot.com/search/label/eklenti'><img src='https://lh5.googleusercontent.com/-rTaGj7iQv20/VNev3PhF0pI/AAAAAAAAP70/U7PVHldJ0wc/h120/blogger-eklentileri.png'/> Eklenti/Widget</a></li>
<li><a href='http://metamorpheuss.blogspot.com/search/label/ders'><img src='https://lh3.googleusercontent.com/-HEvsw4-tfng/VNev3LcblaI/AAAAAAAAP7U/SYSxVd0jDeA/h120/blogger-dersleri.png'/> Anlatımlar</a></li>
<li><a href='http://metamorpheuss.blogspot.com/search/label/seo'><img src='https://lh3.googleusercontent.com/-XBwaJucDc9Y/VckrCnnavII/AAAAAAAASMM/asEQYA9RP50/h120/seo.png'/> SEO</a></li>
<li><a href='http://metamorpheuss.blogspot.com/search/label/menuler'><img src='https://lh3.googleusercontent.com/-RdSqypKi8yE/VckrbghWzxI/AAAAAAAASMU/kI2-NWd32x0/h120/menu.png'/> Menüler</a></li>
</ul>
</li>
<li id='options'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ8TBGUbIb_VTqOt_ep423k7zIpCjOah26H27T8RmzGB_E5nU6xCsA92aGyzHmGOD45rVNFHzltKnIK0GVeeG_U0VtEv33_cHI9vmXZm5Ec4SxMFf7YPI83ZxzAGREcjFsASgbvnoleJFq/h120/icerik.png'/> Webmaster</a>
<ul class='subnav'>
<li><a href='/search?q=web'><img src='https://lh3.googleusercontent.com/-TE70w0nwTJY/VXr05HciFOI/AAAAAAAAQ5U/L2q7HFev030/h120/d%25C3%25BCnya.png'/> WEB</a></li>
<li><a href='/search?q=htmlkodları'><img src='https://lh3.googleusercontent.com/-e7ZNutGq8x0/Vck84hYR1CI/AAAAAAAASMw/YHly7SIRa6g/h120/html.png'/> HTML</a></li>
<li><a href='/search?q=csskodlari'><img src='https://lh3.googleusercontent.com/-NoClNWDIFAc/Vck9NxJoLaI/AAAAAAAASM4/WMjytbjMV94/h120/css.png'/> CSS</a></li>
<li><a href='/search?q=fontlar'><img src='https://lh3.googleusercontent.com/-nevONAlubcA/Vck9ma2u8zI/AAAAAAAASNA/KsOJXTirALE/h120/font.png'/> Yazı Fontları</a></li>
</ul>
</li>
<li id='options'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ8TBGUbIb_VTqOt_ep423k7zIpCjOah26H27T8RmzGB_E5nU6xCsA92aGyzHmGOD45rVNFHzltKnIK0GVeeG_U0VtEv33_cHI9vmXZm5Ec4SxMFf7YPI83ZxzAGREcjFsASgbvnoleJFq/h120/icerik.png'/> Uygulama</a>
<ul class='subnav'>
<li>
<a href='/search?q=program'>
<img src='https://lh3.googleusercontent.com/-TF91W1357Zc/VXr48GBCvhI/AAAAAAAAQ6M/Uq_jvmM24rc/h120/programs.png'/> PROGRAM
</a>
</li>
<li>
<a href='/search?q=crack'>
<img src='https://lh3.googleusercontent.com/-fD3ewmd5Swg/VXr48Kdo40I/AAAAAAAAQ6Y/ypTUc-ffV6w/h120/crack.png'/> CRACK/PATCH
</a>
</li>
<li>
<a href='/search?q=oyun'>
<img src='https://lh3.googleusercontent.com/-dH6UywbvhXU/VXr6gnCAHlI/AAAAAAAAQ6o/VteJVagsluw/h120/oyun-indir.png'/> OYUN iNDiR
</a>
</li>
</ul>
</li>
<li id='options'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ8TBGUbIb_VTqOt_ep423k7zIpCjOah26H27T8RmzGB_E5nU6xCsA92aGyzHmGOD45rVNFHzltKnIK0GVeeG_U0VtEv33_cHI9vmXZm5Ec4SxMFf7YPI83ZxzAGREcjFsASgbvnoleJFq/h120/icerik.png'/> Kategoriler</a>
<ul class='subnav'>
<li>
<a href='/search?q=caps'>
<img src='https://lh3.googleusercontent.com/-LV09xc-ie3s/VXr7sLYwsPI/AAAAAAAAQ7I/4ZBvDJuEfJY/h120/komik.png'/> CAPS
</a>
</li>
<li>
<a href='/search?q=video'>
<img src='https://lh3.googleusercontent.com/-LV09xc-ie3s/VXr7sLYwsPI/AAAAAAAAQ7I/4ZBvDJuEfJY/h120/komik.png'/> ViDEO
</a>
</li>
<li>
<a href='/search?q=karikatür'>
<img src='https://lh3.googleusercontent.com/-R_fgXTyVd0I/VXr7rccuzNI/AAAAAAAAQ7A/wZd-W3qYEek/h120/karikatur.png'/> KARiKATüR
</a>
</li>
<li>
<a href='/search?q=full-album'>
<img src='https://lh3.googleusercontent.com/-4DWG-l9DR7Q/VXr7rUbsGlI/AAAAAAAAQ68/hJoAhhUw0bU/h120/full-album.png'/> FULL ALBUM
</a>
</li>
<li>
<a href='/search?q=mp3'>
<img src='https://lh3.googleusercontent.com/-zpX25VOm35U/VXr8_qmd2CI/AAAAAAAAQ8A/VmrlaMYLpDE/h120/mp3.png'/> MP3 İNDİR
</a>
</li>
<li>
<a href='/search?q=videoklip'>
<img src='https://lh3.googleusercontent.com/-Wx7KDz94cFk/VXr7stbooqI/AAAAAAAAQ7Q/NLniGwnE_q4/h120/video.png'/> VİDEOKLİP İZLE
</a>
</li>
<li><a href='/search?q=web'><img src='https://lh3.googleusercontent.com/-TE70w0nwTJY/VXr05HciFOI/AAAAAAAAQ5U/L2q7HFev030/h120/d%25C3%25BCnya.png'/> WEB</a></li>
<li><a href='/search?q=galeri'><img src='https://lh3.googleusercontent.com/-pLWgSsWlrto/VXr1emQVOtI/AAAAAAAAQ5c/F2annDrXb44/h120/galeri.png'/> GALERİ</a></li>
</ul>
</li>
</ul>
<script src='prefixfree-1.0.7.js' type='text/javascript'/>
<li id='settings'>
<a href='/'><img src='https://lh3.googleusercontent.com/-libiDemH_bw/Vmm-Q_3Y3KI/AAAAAAAAS8Q/gE-E-Y18fCQ/h120/logo.png'/></a>
</li>
<li>
<a href='/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVrZWTbJyizC15byibgO1xW9NkRztnFccD5sm0Sr8D0H3ljcWp6fJhtF0JNu3NBiNd_ZjuObpqogY1Vmiddu46CE-HDMVNsIVHQkoFet08S83_D4PCE59Z-9s6SWfFSnYd-Y5BKg1WSgFr/h120/anasayfa.png'/> Anasayfa</a>
</li>
<li id='search'>
<form action='/search/label' method='get'>
<input id='search_text' name='search_text' placeholder='Ne arıyorsun ?' type='text'/>
<input id='search_button' name='search_button' type='button'/>
</form>
</li>
<li id='options'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ8TBGUbIb_VTqOt_ep423k7zIpCjOah26H27T8RmzGB_E5nU6xCsA92aGyzHmGOD45rVNFHzltKnIK0GVeeG_U0VtEv33_cHI9vmXZm5Ec4SxMFf7YPI83ZxzAGREcjFsASgbvnoleJFq/h120/icerik.png'/> Blogger</a>
<ul class='subnav'>
<li><a href='http://metamorpheuss.blogspot.com/search/label/blogger'><img src='https://lh3.googleusercontent.com/-_gP2Be7ZYI8/VNev3wqcH2I/AAAAAAAAP7g/XVUZyKERpg8/h120/blogger.png'/> Blogger</a></li>
<li><a href='http://metamorpheuss.blogspot.com/search/label/tema'><img src='https://lh4.googleusercontent.com/-kd7_u5ekjPA/VNev3hvyCZI/AAAAAAAAP7c/s5RnQ83jyVQ/h120/blogger-temalari.png'/> Şablonlar</a></li>
<li><a href='http://metamorpheuss.blogspot.com/search/label/eklenti'><img src='https://lh5.googleusercontent.com/-rTaGj7iQv20/VNev3PhF0pI/AAAAAAAAP70/U7PVHldJ0wc/h120/blogger-eklentileri.png'/> Eklenti/Widget</a></li>
<li><a href='http://metamorpheuss.blogspot.com/search/label/ders'><img src='https://lh3.googleusercontent.com/-HEvsw4-tfng/VNev3LcblaI/AAAAAAAAP7U/SYSxVd0jDeA/h120/blogger-dersleri.png'/> Anlatımlar</a></li>
<li><a href='http://metamorpheuss.blogspot.com/search/label/seo'><img src='https://lh3.googleusercontent.com/-XBwaJucDc9Y/VckrCnnavII/AAAAAAAASMM/asEQYA9RP50/h120/seo.png'/> SEO</a></li>
<li><a href='http://metamorpheuss.blogspot.com/search/label/menuler'><img src='https://lh3.googleusercontent.com/-RdSqypKi8yE/VckrbghWzxI/AAAAAAAASMU/kI2-NWd32x0/h120/menu.png'/> Menüler</a></li>
</ul>
</li>
<li id='options'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ8TBGUbIb_VTqOt_ep423k7zIpCjOah26H27T8RmzGB_E5nU6xCsA92aGyzHmGOD45rVNFHzltKnIK0GVeeG_U0VtEv33_cHI9vmXZm5Ec4SxMFf7YPI83ZxzAGREcjFsASgbvnoleJFq/h120/icerik.png'/> Webmaster</a>
<ul class='subnav'>
<li><a href='/search?q=web'><img src='https://lh3.googleusercontent.com/-TE70w0nwTJY/VXr05HciFOI/AAAAAAAAQ5U/L2q7HFev030/h120/d%25C3%25BCnya.png'/> WEB</a></li>
<li><a href='/search?q=htmlkodları'><img src='https://lh3.googleusercontent.com/-e7ZNutGq8x0/Vck84hYR1CI/AAAAAAAASMw/YHly7SIRa6g/h120/html.png'/> HTML</a></li>
<li><a href='/search?q=csskodlari'><img src='https://lh3.googleusercontent.com/-NoClNWDIFAc/Vck9NxJoLaI/AAAAAAAASM4/WMjytbjMV94/h120/css.png'/> CSS</a></li>
<li><a href='/search?q=fontlar'><img src='https://lh3.googleusercontent.com/-nevONAlubcA/Vck9ma2u8zI/AAAAAAAASNA/KsOJXTirALE/h120/font.png'/> Yazı Fontları</a></li>
</ul>
</li>
<li id='options'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ8TBGUbIb_VTqOt_ep423k7zIpCjOah26H27T8RmzGB_E5nU6xCsA92aGyzHmGOD45rVNFHzltKnIK0GVeeG_U0VtEv33_cHI9vmXZm5Ec4SxMFf7YPI83ZxzAGREcjFsASgbvnoleJFq/h120/icerik.png'/> Uygulama</a>
<ul class='subnav'>
<li>
<a href='/search?q=program'>
<img src='https://lh3.googleusercontent.com/-TF91W1357Zc/VXr48GBCvhI/AAAAAAAAQ6M/Uq_jvmM24rc/h120/programs.png'/> PROGRAM
</a>
</li>
<li>
<a href='/search?q=crack'>
<img src='https://lh3.googleusercontent.com/-fD3ewmd5Swg/VXr48Kdo40I/AAAAAAAAQ6Y/ypTUc-ffV6w/h120/crack.png'/> CRACK/PATCH
</a>
</li>
<li>
<a href='/search?q=oyun'>
<img src='https://lh3.googleusercontent.com/-dH6UywbvhXU/VXr6gnCAHlI/AAAAAAAAQ6o/VteJVagsluw/h120/oyun-indir.png'/> OYUN iNDiR
</a>
</li>
</ul>
</li>
<li id='options'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ8TBGUbIb_VTqOt_ep423k7zIpCjOah26H27T8RmzGB_E5nU6xCsA92aGyzHmGOD45rVNFHzltKnIK0GVeeG_U0VtEv33_cHI9vmXZm5Ec4SxMFf7YPI83ZxzAGREcjFsASgbvnoleJFq/h120/icerik.png'/> Kategoriler</a>
<ul class='subnav'>
<li>
<a href='/search?q=caps'>
<img src='https://lh3.googleusercontent.com/-LV09xc-ie3s/VXr7sLYwsPI/AAAAAAAAQ7I/4ZBvDJuEfJY/h120/komik.png'/> CAPS
</a>
</li>
<li>
<a href='/search?q=video'>
<img src='https://lh3.googleusercontent.com/-LV09xc-ie3s/VXr7sLYwsPI/AAAAAAAAQ7I/4ZBvDJuEfJY/h120/komik.png'/> ViDEO
</a>
</li>
<li>
<a href='/search?q=karikatür'>
<img src='https://lh3.googleusercontent.com/-R_fgXTyVd0I/VXr7rccuzNI/AAAAAAAAQ7A/wZd-W3qYEek/h120/karikatur.png'/> KARiKATüR
</a>
</li>
<li>
<a href='/search?q=full-album'>
<img src='https://lh3.googleusercontent.com/-4DWG-l9DR7Q/VXr7rUbsGlI/AAAAAAAAQ68/hJoAhhUw0bU/h120/full-album.png'/> FULL ALBUM
</a>
</li>
<li>
<a href='/search?q=mp3'>
<img src='https://lh3.googleusercontent.com/-zpX25VOm35U/VXr8_qmd2CI/AAAAAAAAQ8A/VmrlaMYLpDE/h120/mp3.png'/> MP3 İNDİR
</a>
</li>
<li>
<a href='/search?q=videoklip'>
<img src='https://lh3.googleusercontent.com/-Wx7KDz94cFk/VXr7stbooqI/AAAAAAAAQ7Q/NLniGwnE_q4/h120/video.png'/> VİDEOKLİP İZLE
</a>
</li>
<li><a href='/search?q=web'><img src='https://lh3.googleusercontent.com/-TE70w0nwTJY/VXr05HciFOI/AAAAAAAAQ5U/L2q7HFev030/h120/d%25C3%25BCnya.png'/> WEB</a></li>
<li><a href='/search?q=galeri'><img src='https://lh3.googleusercontent.com/-pLWgSsWlrto/VXr1emQVOtI/AAAAAAAAQ5c/F2annDrXb44/h120/galeri.png'/> GALERİ</a></li>
</ul>
</li>
</ul>
<script src='prefixfree-1.0.7.js' type='text/javascript'/>