Mungkin ada sobat blogger yang ingin mebuat navigasi sajian pada blog yang sobat miliki ingin di buat melayang. Pada artikel kali ini, akan saya share Cara praktis menciptakan navigasi hidangan 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, lantaran sajian bar yang ada di blog sahabat ikut ke bawah saat pengunjung blog melakukan scroll ke bawah.
Catatan!
Ubahlah cuilan arahan yang aku beri warna merah dan biru sesuai dengan apa yang ingin teman tampilkan pada navigasi sajian tersebut.
6. setelah sobat sudah meletakkan isyarat di atas, selanjutnya cari kode ]]><b:skin>
7. jikalau aba-aba tersebut telah sahabat temukan, letakkan kode di bawah ini tepat di atas aba-aba
]]><b:skin>
8. Setelah itu sehabis teman sudah benar meletakkan arahan yang saya sebutkan, terakhir, klik Simpan Template
Itu tadi tutorial bagaimana Cara simpel menciptakan sajian navigasi sajian melayang pada blog, bila ada pertanyaan tentang artikel ini, silahkan sobat tuliskan pada kolom komentar. biar bermanfaat dan terimakasih telah berkunjung
Jika teman tertarik untuk membuat navigasi sajian pada blog teman 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. lalu seolah-olah biasa, di dalam hidangan Template, sahabat klik saja Edit HTML.
4. Carilah aba-aba <body> untuk mempermudah pencarian sahabat bisa menekan tombol CTRL + F
5. setelah isyarat <body> ditemukan, letakkan kode dibawah ini sempurna di atas isyarat yang saya sebutkan pada nomor 3.
<div id='top-BD'>
<ul>
<li><a href='http://serhamo-technoogy.blogspot.com' sasaran='_blank' title='serhamo'>serhamo-Technology</a></li>
<li><a href='http://serhamo-technoogy.blogspot.com' target='_blank' title='Blogger'>Blogger</a></li>https://twitter.com/serhamo_tech
<li><a href='http://serhamo-technoogy.blogspot.com' target='_blank' title='Komputer'>Komputer</a></li>
<li><a href='http://serhamo-technoogy.blogspot.com' target='_blank' title='Internet'>Internet</a></li>
<li><a href='http://serhamo-technoogy.blogspot.com' sasaran='_blank' title='Jaringan'>Jaringan</a></li></ul>
<div class='BDsosial' style='margin:-30px 50px 0 0;'>
<a class='rss' href='http://serhamo-technoogy.blogspot.com' rel='external nofollow' sasaran='_blank' title='RSS Link'>
</a>
<a class='googleplus' href='https://plus.google.com/+serhamoTechn' rel='external nofollow' target='_blank' title='googleplus'>
</a>
<a class='facebook' href='https://www.facebook.com/serhamotechnology.04' rel='external nofollow' sasaran='_blank' title='facebook'>
</a>
<a class='twitter' href='' rel='external nofollow' target='_blank' title='twitter'>
</a>
</div>
</div>
Catatan!
Ubahlah cuilan arahan yang aku beri warna merah dan biru sesuai dengan apa yang ingin teman tampilkan pada navigasi sajian tersebut.
6. setelah sobat sudah meletakkan isyarat di atas, selanjutnya cari kode ]]><b:skin>
7. jikalau aba-aba tersebut telah sahabat temukan, letakkan kode di bawah ini tepat di atas aba-aba
]]><b:skin>
/*Nav menu*/
#top-BDbackground:#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 ulmargin:0 auto;width:970px;list-style-type:none;height:30px
#top-BD ul lifloat:left
#top-BD ul li aposition: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:hovercolor:#fff;border-top:3px solid #aaa
.BDsosial adisplay:block;height:50px;width:50px;padding:0 4px;float:right;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVwMQ-Bi3uxY2b9fF3_4IzhfIvGsoeelJ132yoWZK_kzAVHGdMltlRiorN7dEGTRpo7AU_ORxI74y8NrEKzS2kjefw_NVKaZi2iqXaekuRShMEnG8eNYR6G1TLM41Ohd688ZGGWvATz-I/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.googleplusbackground-position:0 -58px
.BDsosial a.googleplus:hoverbackground-position:0 0
.BDsosial a.twitterbackground-position:0 -290px
.BDsosial a.twitter:hoverbackground-position:0 -232px
.BDsosial a.facebookbackground-position:0 -406px
.BDsosial a.facebook:hoverbackground-position:0 -348px
.BDsosial a.rssbackground-position:0 -174px
.BDsosial a.rss:hoverbackground-position:0 -116px
8. Setelah itu sehabis teman sudah benar meletakkan arahan yang saya sebutkan, terakhir, klik Simpan Template
Itu tadi tutorial bagaimana Cara simpel menciptakan sajian navigasi sajian melayang pada blog, bila ada pertanyaan tentang artikel ini, silahkan sobat tuliskan pada kolom komentar. biar bermanfaat dan terimakasih telah berkunjung
Post a Comment