Posting diambil dari Kota Blogger
Banyak kali ketika kita berpikir tentang membuat blog datang ke pikiran kita menempatkan banyak gadget meskipun banyak dari mereka yang tidak diperlukan, atau mungkin ya. Tapi kebenarannya adalah bahwa kadang-kadang apa yang Anda miliki adalah sedikit ruang untuk menambahkan beberapa dari mereka. Jadi pada saat itu pilihan yang baik dan cerdas adalah dengan menggunakan menu dilipat tersembunyi dan hanya muncul ketika pengguna ingin.
Awalnya alat ini disebut Sliding panel masuk adalah slide untuk pengguna untuk mendaftarkan situs tertentu, tapi seperti yang kita tahu, di Blogger tidak dapat membuat registri pengguna untuk blog, tapi itu tidak berarti kita tidak bisa mengambil keuntungan dari perangkat ini dan menggunakannya untuk menambahkan elemen lain seperti menu dan akses log untuk memberi makan.
Apa bagaimana tampilannya? Berikut adalah contoh di blog ini tes , buka saja menu di atas untuk melihatnya.
Menu ini dibuat dengan slider jQuery, maka hal pertama yang akan kita lakukan adalah menambahkan script, jadi kami lakukan setelah menyisipkan <head> berikut:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'> </ script>
text <script type = '/ javascript ">
$ (dokumen) siap (. function () { / / Perluas Collapse Panel . $ ("# close") klik (function () { $ ("div # panel") slideUp ("lambat");. }); tombol / / Beralih dari "Buka Menu" untuk " , Tutup Menu "di klik $ ("# beralih a"). klik (function () { $ ("# beralih a") beralih ();. }); }) </ script> <b: if 'Data: blog.pageType = "item"!' cond => <style> tubuh # # tata letak toppanel {display: none penting;!} </ style> </ b: if>
Sekarang tambahkan gaya CSS sebelum ]]> </ b: skin>
/ * Top Sliding menu
--------------------------------------------- - * / clearfix: setelah {isi: display: block; height: "." 0; jelas: keduanya; visibility: hidden;}. . clearfix {display: inline-block;} . * html clearfix {height: 1 %} clearfix {display:. block;} clearfix {height:. 1%;} . clearfix {display: block;} . tab { background: url (http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjUtg1alI / AAAAAAAAAr4/irK6KNxvCHg/s1600/tab_b.png) repeat-x 0 0; height: 42px; position: relative, top: 0; z-index: 999; } ul.login tab {. display: block; position: relative; float: right; jelas: right; height: 42px; width: auto; font-weight: bold; line-height: 42px; margin: 0; kanan: 150px, warna: putih, font-size: 80%; text-align : center; } . li.left tab ul.login { background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqqTADAxYwqlFoLMha-SsdAB25yxcw3n48g2s3uWb4rrpoNqvaWkUUC7bWHfcLPaBsSOoQAbKMHCTPW22vNQY0R-UgSBsOjvCz4AQpkHHGl1TagQFo0u7dBCwKnGZlgj2XKMuR3tRx2jk6/s1600/tab_l.png) tidak mengulang-kiri 0; tinggi : 42px; width: 30px; padding: 0; margin: 0; display: block; float: left; } li.right ul.login tab {. background: url (http://2.bp.blogspot.com/_dsEG33PDaHw / TUYjVrN4yNI/AAAAAAAAAsE/4YOHQURWUHM/s1600/tab_r.png) tidak mengulang-kiri 0, height: 42px; width: 30px; padding: 0; margin: 0; display: block; float: left; } ul.login tab li. { text-align: left; padding: 0 6px; display: block; float: left; height: 42px; background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij5QFnLb1pHSX0lM2bl6AJC1N6x_0Q_g4gP31ARdBSwcT5N8HJ6gq3Ghsdn7t4ueXC7oEea2O014vrjTLeVS8z6ONnWQwEN-f1glzs9fSkrUMGlRmNKSqMZ1vwJydko5ocpID3RXFL2DpF/s1600/ tab_m.png) repeat-x 0 0; } . ul.login tab li a {color: # 15ADFF;} ul.login tab li a: hover {color:. # FFFFFF;} .. tab September {color: # 414.141 } . a.open tab, a.close tab {. height: 20px; line-height: 20px penting;! padding-left: 30px penting;! kursor: pointer; display: block; width: 100px; position: relative; top : 11px; } a.open tab {background:. url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdnRJpeAdjSGxxpJME-pgGwiz3wfV4bTi63zVtw70Cdxlj4VRrTCE0lgAh2t4AX4DA5mUh6sIxnU8loe_Nmu2FoJIhNm57LhZk8XLV6tzHN5g6Ngmbj7ahyC526JTL3DSRkpMx3rAMVDMP/s1600/bt_open.png) tidak mengulang-kiri 0;} . tab untuk dekat {background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT6otFirfy0lrC4i1Xf57SHiRlDPH9ozH5yiMwyZ-78wm9Pa64PePu7wV2yozN_PE1XM13IoTp7Wp98-Kr8Jq_v1EN3lnNkPXiIi5DImoilA3Dpwg34PTh7CuOUdiOUpXR3pfaZ1dBfet-/s1600/bt_close.png) tidak mengulang-kiri 0;}. . tab di: hover.open {background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdnRJpeAdjSGxxpJME-pgGwiz3wfV4bTi63zVtw70Cdxlj4VRrTCE0lgAh2t4AX4DA5mUh6sIxnU8loe_Nmu2FoJIhNm57LhZk8XLV6tzHN5g6Ngmbj7ahyC526JTL3DSRkpMx3rAMVDMP/s1600/bt_open.png) no-repeat kiri-19px;} tab di: hover.close {background: url (http:. / / 3.bp.blogspot.com/_dsEG33PDaHw/TUYjSS2QXBI/AAAAAAAAArk/5KFg95ZWLts/s1600/bt_close.png) no-ulangi kiri-19px;} # {toppanel position: absolute; top: 0, width: 100%; z- Indeks: 999; text-align: center; margin-left: auto; margin-right: auto; } # {panel width: 100% height: 270px; / * Hentikan * geser / color: # 999999; background: # 272.727; overflow: hidden, posisi: relatif, z-index: 3; display: none; } # panel h4 { font-size: 1.6em; padding: 5px 0 10px; margin: 0; color: # FFFFFF; text-align : center; } # panel p { margin: 5px 0; padding: 0; } # panel { text-decoration: none; color: # 15ADFF; } # panel: hover { color: white; } . # panel konten { width: 960px; margin: 0 auto; padding-top: 15px; text-align: left; font-size: 0.85em; } .. # panel kiri konten { width: 280px; float: left; padding: 15px 0; perbatasan -left: 1px solid # 333; } . # panel konten yang tepat {. perbatasan-kanan: 1px solid # 333; } . # panel konten berupa { margin: 10px 0 0 0; } # {panel konten label. float: left; padding-top: 8px; jelas: keduanya; width: 280px; display: block; } . # panel input.field konten { border: 1px solid # 1A1A1A, background: # 414.141; margin-right: 5px; margin-top: 4px , width: 200px, warna: putih, tinggi: 16px; } . # panel masukan isi: focus.field { background: # 545.454; } # {panel input.bt_register konten. display: block; float: left; jelas: kiri; height: 24px; text-align: center; kursor: pointer; border: none; font-weight: bold; margin: 10px 0; } . # panel input.bt_register konten { width: 94px; warna: putih, background: url transparan (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiln35E9PkZSQIKYfz-H6vnq489WPFw93BCLXLAxeig7MLTWcE43kiO_YSar9pbNRuXr8qLoA6ZX3z7vYMNq2AKbqp6ZSL77gqGEbS12TfbErgPOXTt9ryK3t4xSLJ461t_d1llie_6H2EQ/s1600/bt_register.png) no-repeat 0 0; } # slide-menu { width: 160px; float: left; } # geser -menu2 { width: 160px; float: right; } # slide-menu ul, # slide-menu2 ul { font-family: Arial, Helvetica, sans-serif, daftar-gaya-type: none; margin: 0; padding: 0; } # menu ul li slide-a, # slide-menu2 ul li a kiri tengah ada pengulangan-; margin: 0; padding: 3px 3px 3px 18px; } # slide-menu li, # slide-menu2 li {display: inline;} # slide-menu, # slide-menu2 a { color: # FFFFFF, text-decoration: none; font-size: 13px; display: block; padding: 3px; width: 160px; } # slide-menu: link, # slide-menu: dikunjungi, # slide-menu2 a: link , # slide-menu2 a: visited { color: # 999; text-decoration: none; } # slide-menu: hover, # slide-menu2 a: hover { color: # FFFFFF; }
Dan akhirnya kita akan menempatkan struktur, sehingga tepat setelah para <body> menambahkan:
<- Halaman Utama atas Sliding Menu -!>
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'> <-! bagian Pertama -> <div class = ' 'style =' kiri lebar: 240px penting '> ! <h4> Halo, Selamat datang di blog saya </ h4> . <p> Anda dapat mengikuti kami di jaringan sosial atau berlangganan feed </ p> <div align = 'center "> <a href = 'http:// tublog . blogspot.com / atom.xml '> <img src =' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY-1VdbZl8M1Ct9kF9TkR13sABg-0sQ3pdpLGlZ3aU9T_L7knBFwiOm1Uo8mE6-sW-jpkxaWpT2dcxcSJZ8Lk48yQ9WmtZV5nZlvaMlqmu2iUzHGiHXuHprtM5E8r4Lw_FG0LVof1cA4AL/s1600/Feed_ . png 'style =' padding: 25px 5px; 'width = '60' /> </ a> <a href = "http://www.facebook.com/ Pengguna > '<img src = "http:// 3.bp.blogspot.com/_dsEG33PDaHw/TUYmrpIzmHI/AAAAAAAAAsY/sG1ZCEfxvNY/s1600/FaceBook_.png 'style =' padding: 25px 5px; 'width = '60' /> </ a> <a href = "http:/ / twitter.com / pengguna '> <img src =' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhniFhUacUK5VCBwvweUufa_iegUDU2eJpPLTkDs3Gvwll5Unw0ob4jz8PjJpNFHdraRrgeJJGjX0X6VSmEjCFKtEF6hFI04e8vrcBLx9v-oZIf4O77iuOBS5QlvtQsROmbJOZ99SdAnkaa/s1600/Twitter_.png 'style =' padding: 5px 25px; 'width = '60 '/> </ a> </ div> </ div> <-! Bagian Kedua -> <div class='left' style='width:320px !important'> <h4> Kategori </ h4 > <div id='slide-menu'> <ul> <li> <a href = ' link URL '> Menu item satu </ a> </ li> <li> <a href = ' link URL ' > Menu Item dua </ a> </ li> <li> <a href = ' URL link '> item Menu tiga </ a> </ li> <li> <a href = ' URL link '> menu empat item </ a> </ li> <li> <a href = ' URL link '> Menu Item lima </ a> </ li> <li> <a href = ' URL link '> Menu item enam </ a> </ li> <li> <a href = ' link URL '> Menu Item tujuh </ a> </ li> <li> <a href = ' URL link '> Menu Item delapan </ a> </ li> <li> <a href = ' link URL '> Menu Item sembilan </ a> </ li> <li> <a href = ' URL link > ' Menu Item sepuluh </ a> </ li> </ ul> </ div> <div id='slide-menu2'> <ul> <li> <a href = ' link URL '> Menu item satu </ a> </ li> < li> <a href = ' link URL '> Menu Item dua </ a> </ li> <li> <a href = ' URL link '> Menu item tiga </ a> </ li> <li> <a href = ' URL link '> item Menu empat </ a> </ li> <li> <a href = ' URL link '> Menu Item lima </ a> </ li> <li> <a href = ' URL link '> item Menu enam </ a> </ li> <li> <a href = ' link URL '> Menu Item tujuh </ a> </ li> <li> <a href = ' URL link '> Menu Item delapan </ a> </ li> <li> <a href = ' link URL '> Menu Item sembilan </ a> </ li> <li> <a href = ' URL Tautan '> Menu Item sepuluh </ a> </ li> </ ul> </ div> </ div> <-! bagian ketiga -> <div class='left right'> <h4> & # 161; Berlangganan ke blog kami </ h4>! <p> email Dapatkan berita terbaru dari blog. Cukup masukkan email Anda untuk berlangganan </ P>. <bentuk tindakan = 'http://feedburner.google.com/fb/a/mailverify?uri = Feed-Nama 'metode =' post 'target =' _blank ' > <input name='email' class='field' type='text/' value=''/> <masukan nama = 'uri' type = 'tersembunyi' value = ' Feed-Nama '/> <input name = 'loc' type = 'tersembunyi' value = 'en_US' /> <input type='submit' class='bt_register' value='Suscribir'/> </ form> </ div> </ div> </ div> <div class='tab'> <ul class='login'> <li class='left'/> <li> Welcome Guest </ li>! <li class='sep'> | </ li> <li id='toggle'> <a class='open' href='#' id='open'> Buka Menu </ a> <a class = 'dekat' href = '#' id = 'dekat' gaya = 'display: none; "> menu Tutup </ a> </ li> <li class='right'/> </ ul> </ div> </ div> ! <- End geser menu atas ->
Jika Anda menggunakan template yang dibuat melalui Designer Template Blogger maka Anda harus paste kode di atas setelah:
<body expr:class='"loading" + data:blog.mobileClass'>
Sekarang ini bagian terakhir bahwa kami telah menambahkan adalah apa yang mengandung segala sesuatu yang tersembunyi dan ditampilkan. Aku dimasukkan ke dalam green nama-nama setiap bagian untuk mengenali mereka lebih mudah.
Pada bagian pertama Anda dapat mengubah pesan selamat datang, diikuti oleh dia adalah ikon jejaring sosial, hanya mengubah apa yang ada dalam oranye dengan username Anda baik Facebook, Twitter dan nama blog Anda.
Bagian kedua adalah menu kategori yang kami telah menambahkan, hanya menempatkan URL link dan nama link yang kita ditambahkan ke menu.
Dan di bagian ketiga adalah langganan email, ingat untuk memiliki pilihan diaktifkan pada Feedburner. Dan hanya menempatkan diaktifkan mana ditunjukkan dalam biru nama pakan yang kita miliki.
Dan siap. Pada dasarnya ini adalah bidang utama yang kita dapat menyesuaikan, meski tentu saja kita dapat menghapus beberapa hal untuk menyisipkan sesuatu yang lain.
Di atas semua wadah berubah di mana dikatakan / * Berhenti slide * / , ini hanya jika Anda ingin mengatur lain . mengukur
Dan pasti banyak orang akan ingin mengubah warna setelah saya menjelaskan bahwa ada banyak gambar untuk melakukannya harus mengedit setiap gambar untuk melihat gaya dan kemudian mengubah warna latar belakang: # 272.727;
Di atas semua wadah berubah di mana dikatakan / * Berhenti slide * / , ini hanya jika Anda ingin mengatur lain . mengukur
Dan pasti banyak orang akan ingin mengubah warna setelah saya menjelaskan bahwa ada banyak gambar untuk melakukannya harus mengedit setiap gambar untuk melihat gaya dan kemudian mengubah warna latar belakang: # 272.727;
Last but not least, ingat bahwa menu ini menggunakan jQuery jadi jika template Anda Anda menggunakan Scriptaculous, Prototype atau Mootools maka tidak bekerja. Sekarang, untuk menikmati menu ini elegan dengan efek geser, yang tentunya terlihat lebih baik jika kita menyembunyikan navbar . penulis Situs | Web-Kreation
Sumber:http://generacionopin.blogspot.com/2011/03/menu-deslizable-en-parte-superior-del.html
Posting Komentar