Tutorial Blog kali ini membahas 'bagaimana caranya membuat menu melayang diatas header'. Dalam case ini saya menggunakannya untuk melengkapi halaman Pages. Sebenarnya ada cara lain membuat halaman Pages. Cara lain tersebut lebih mudah karena pembuatannya secara otomatis langsung dari widget yang sudah disediakan.
Cara membuat Laman Pages untuk Blog:
- Masuk ke dalam Dasboard Blog kalian (penjelasan mengenai apa itu dasboard: http://www.hanapert.com/2014/11/dasboard-blog.html)
- Klik dan pilih pilihan tata letak
- Pilih dan klik "Tambahkan Gadget"
- Kemudian pilih dan klik Laman
- Setelah widget Laman ditambah, kalian tinggal merubah pengaturan Laman nya dengan mengklik pilihan edit pada widget lamannya. Seberapa banyak tampilan laman yang muncul tergantung dari kalian menyajikannya.
Cara membuat Menu Melayang diatas Header dengan mudah:
ini adalah cara lain yang saya gunakan.
- sama seperti point nomor 1 diatas, kalian masuk keddalam dasboard kalian
- kalau dicara pertama kalian memilih dan klik menu tata letak, disini kalian pilih dan klik menu template, kemudian pilih dan klik edit html:
- Selanjutnya kalian copy paste kode berikut ini <div id='top-BD'><ul><li><a href='http://www.hanapert.com/p/tentang-e-mines.html' target='_blank' title='Biodata Pemilik'>Hanapert</a></li><li><a href='http://www.hanapert.com/p/blog-page.html' target='_blank' title='Sitemap'>Sitemap</a></li><li><a href='http://www.hanapert.com/p/kebijakan-privasi.html' target='_blank' title='Privacy Policy'>Privacy Policy</a></li><li><a href='http://www.hanapert.com/p/disclaimer.html' target='_blank' title='Disclaimer'>Disclaimer</a></li><li><a href='http://www.hanapert.com/p/nama-hana-pertiwi-lahir-di-cilacap.html' target='_blank' title='Contact'>Contact</a></li></ul><div class='BDsosial' style='margin:-30px 50px 0 0;'><a class='googleplus' href='https://plus.google.com/u/0/100510205352140315338/posts' rel='external nofollow' target='_blank' title='googleplus'></a><a class='facebook' href='https://www.facebook.com/tiwi.petra' rel='external nofollow' target='_blank' title='facebook'></a><a class='twitter' href='https://twitter.com/TwittyeNa' rel='external nofollow' target='_blank' title='twitter'></a></div> </div>
- kalian taruh dalam html kalian. Letakkan diatas kode <body>
- diatas kode ]]></b:skin> kalian copas code berikut /*Nav Menu*/#top-BD{background:#FFE4C4;box-shadow:0 1px 3px rgba(0,0,0,0.4);height:36px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #f90}#top-BD ul{margin:0 auto;width:970px;list-style-type:none;height:30px}#top-BD ul li{float:left}#top-BD ul li a{position:relative;line-height:28px;border:1px solid;padding:10px 5px;color:#aaa;font-size:12px;text-shadow:0 -1px 0 #000;display:block;text-decoration:none;font-weight:500;text-transform:uppercase;font-family:Georgia,Arial,Helvetica,sans-serif}#top-BD ul li a:hover{color:#A52A2A;border-top:3px solid #aaa}.BDsosial a{display:block;height:50px;width:50px;padding:0 3px;float:right;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-A81rx83nC-jkqOjCKcvp48X_D7GRcPAFxe2wOyImLhGCW5pcifuxZQqE04RL2lPpALF9xgXnbltB-c6HGA-BfzqyKr1J3oADRyeo98tdV-dX_CYcBahdIYJ_vHDmFxtrSGLG6KSaets/s1600/Sharing+buttons.png) no-repeat transparent;-webkit-transition:ease-in 0.2s all;-moz-transition:ease-in 0.2s all;transition:all 0.2s ease-in;cursor:pointer}.BDsosial a.googleplus{background-position:0 -58px}.BDsosial a.googleplus:hover{background-position:0 0}.BDsosial a.twitter{background-position:0 -290px}.BDsosial a.twitter:hover{background-position:0 -232px}.BDsosial a.facebook{background-position:0 -406px}.BDsosial a.facebook:hover{background-position:0 -348px}
0 komentar:
Posting Komentar