Mungkin ada sobat blogger yang ingin mebuat navigasi menu pada blog yang sobat miliki ingin di buat melayang. Pada artikel kali ini, akan saya share cara mudah membuat navigasi menu melayng pada blog. Keuntungan membuat navigasi menu yang melayang pada blog ini adaalah supaya para mempermudah para pengunjung untuk beralih ke menu lain tanpa harus scroll ke atas, karena menu bar yang ada di blog sobat ikut ke bawah saat pengunjung blog melakukan scroll ke bawah.
Catatan!
Ubahlah bagian kode yang saya beri warna merah dan biru sesuai dengan apa yang ingin sobat tampilkan pada navigasi menu tersebut.
6. Setelah sobat sudah meletakkan kode di atas, selanjutnya cari kode ]]><b:skin>
7. Jika kode tersebut telah sobat temukan, letakkan kode di bawah ini tepat di atas kode
]]><b:skin>
8. Setelah itu setelah sobat sudah benar meletakkan kode yang saya sebutkan, terakhir, klik Simpan Template
Itu tadi tutorial bagaimana cara mudah membuat menu navigasi menu melayang pada blog, jika ada pertanyaan tentang artikel ini, silahkan sobat tuliskan pada kolom komentar. Semoga bermanfaat dan terimakasih telah berkunjung
Jika sobat tertarik untuk membuat navigasi menu pada blog sobat melayang, berikut tutorialnya:
1. Sobat harus login terlebih daulu pada blog yang soba miliki.
2. Selanjutnya sobat klik menu Template yang ada pada dasbo blogger.
3. Kemudian seperti biasa, di dalam menu Template, sobat klik saja Edit HTML.
4. Carilah kode <body> untuk mempermudah pencarian sobat bisa menekan tombol CTRL + F
5. Setelah kode <body> ditemukan, letakkan kode dibawah ini tepat di atas kode yang saya sebutkan pada nomor 3.
<div id='top-BD'>
<ul>
<li><a href='http://dherma-technoogy.blogspot.com' target='_blank' title='Dherma'>Dherma-Technology</a></li>
<li><a href='http://dherma-technoogy.blogspot.com' target='_blank' title='Blogger'>Blogger</a></li>https://twitter.com/dherma_tech
<li><a href='http://dherma-technoogy.blogspot.com' target='_blank' title='Komputer'>Komputer</a></li>
<li><a href='http://dherma-technoogy.blogspot.com' target='_blank' title='Internet'>Internet</a></li>
<li><a href='http://dherma-technoogy.blogspot.com' target='_blank' title='Jaringan'>Jaringan</a></li></ul>
<div class='BDsosial' style='margin:-30px 50px 0 0;'>
<a class='rss' href='http://dherma-technoogy.blogspot.com' rel='external nofollow' target='_blank' title='RSS Link'>
</a>
<a class='googleplus' href='https://plus.google.com/+DhermaTechn' rel='external nofollow' target='_blank' title='googleplus'>
</a>
<a class='facebook' href='https://www.facebook.com/dhermatechnology.04' rel='external nofollow' target='_blank' title='facebook'>
</a>
<a class='twitter' href='' rel='external nofollow' target='_blank' title='twitter'>
</a>
</div>
</div>
Catatan!
Ubahlah bagian kode yang saya beri warna merah dan biru sesuai dengan apa yang ingin sobat tampilkan pada navigasi menu tersebut.
6. Setelah sobat sudah meletakkan kode di atas, selanjutnya cari kode ]]><b:skin>
7. Jika kode tersebut telah sobat temukan, letakkan kode di bawah ini tepat di atas kode
]]><b:skin>
/*Nav Menu*/
#top-BD{background:#333;box-shadow:0 1px 3px rgba(0,0,0,0.4);height:48px;width:100%;min-width:970px;position:fixed;top:0;left:0;z-index:9999;overflow:hidden;border-bottom:1px solid #000}
#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:13px;text-shadow:0 -1px 0 #000;display:block;text-decoration:none;font-weight:700;text-transform:uppercase;font-family:Geneva,Arial,Helvetica,sans-serif}
#top-BD ul li a:hover{color:#fff;border-top:3px solid #aaa}
.BDsosial a{display:block;height:50px;width:50px;padding:0 4px;float:right;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMDZt5Hn61hYspSj1TjucM7LHBca6I65H0hGoVqheragLmXGNxaXA2Lg4FxGWhuBv3lf5VRrxutQK6zuYGf9MAYkAhtlYU-kDQQbfmJ3N1Y_YnG1UwR35zJXYrGqj11euGZLV9WvH9hvE/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}
.BDsosial a.rss{background-position:0 -174px}
.BDsosial a.rss:hover{background-position:0 -116px}
8. Setelah itu setelah sobat sudah benar meletakkan kode yang saya sebutkan, terakhir, klik Simpan Template
Itu tadi tutorial bagaimana cara mudah membuat menu navigasi menu melayang pada blog, jika ada pertanyaan tentang artikel ini, silahkan sobat tuliskan pada kolom komentar. Semoga bermanfaat dan terimakasih telah berkunjung
EmoticonEmoticon