Cara Buat Menu Navigasi Diatas Footer

Holla SEO - Setelah kita sebelumnya membahas Cara Ajaib Meningkatkan Trafik Blog / Website kali ini saya akan membahas bagaimana cara memasang menu navigasi seperti dibawah header. tetapi menu navigasi kali ini juga bisa dipasang diatas footer loh.
mungkin bila anda memiliki template blog yang minimalis / standar dan tidak ada menu navigasi seperti disclaimer, privacy, about, dan lainnya. bisa menerapkan cara ini di template blog anda.

Cara Buat Menu Navigasi Diatas Footer

1. Langsung saja menuju blog sobat => Template => Edit HTML
2. Copy dan Paste kode dibawah ini tepat diatas ]]></b:skin> atau </style>
/* Css Navigasi Menu Diatas Footer  */.ferstyle-wrap { background:transparent; height:54px; width:98%; text-align:center; overflow:auto; margin-top:-10px; margin-bottom:-10px; margin-left:10px; }.ferstyle { font:normal 12px Arial; line-height:normal; text-transform:none; color:#f1f1f1; text-decoration:none; margin:0 auto; padding:0 auto; }.ferstyle ul { margin:0; padding:0; }.ferstyle li { list-style:none; color:#2c97de; float:left; width:20%; display:inline; position:relative; margin:0; text-align:center; }.ferstyle li a { background:url(http://2.bp.blogspot.com/-7vv1abYPRkg/VoA6u4znH0I/AAAAAAAACn4/pMUFtHc-Pyo/s1600/ferstyle.png) repeat-x top; display:block; text-decoration:none; font-weight:700; color:#ccc; text-shadow:1px 1px 2px #111; outline:0; margin:10px 4px 8px; padding:8px 16px; border:1px solid #111; }.ferstyle li a:hover { background:#333; -moz-box-shadow:inset 2px 2px 2px #151515; -webkit-box-shadow:inset 2px 2px 2px #151515; box-shadow:inset 2px 2px 2px #151515; }.ferstyle li ul { position:absolute; z-index:10; left:0; top:100%; height:30px; width:170px; display:none; margin:0; padding:0; -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6); }.ferstyle li ul a { margin:0; font:12px Arial; background:#2c2c2c; border-left:none; border:0; display:block; padding:7px 10px; -moz-box-shadow:0 2px 2px rgba(0,0,0,0.6); }.ferstyle li ul a:hover { background:#1b1b1b; color:#fff; }.ferstyle li ul li { float:none; display:block; width:auto; }.ferstyle li ul ul { top:0; left:100%; }.ferstyle li a:hover,.ferstyle ul li a:hover { color:#fc0; }
3. Untuk menerapkan menu diatas footer silahkan cari kode <footer> atau <footer id='footer-wrapper'>, untuk lebih mudahnya tekan CTRL + F. Dan masukkan kode dibawah ini tepat dibawah kode diatas !
<div class='ferstyle-wrap'><div class='ferstyle'><ul><li><a href='http://www.hollaseo.blogspot.com' target='_blank' title='Home'>Home <i class='fa fa-home'/></a></li><li><a href='/p/privacy-policy.html' target='_blank' title='Privacy Policy'>Privacy <i class='fa fa-balance-scale'/></a></li><li><a href='/p/blog-page.html' target='_blank' title='About US'>About US <i class='fa fa-user'/></a></li><li><a href='/p/disclaimer.html' title='Disclaimer'>Disclaimer <i class='fa fa-bank'/></a></li><li><a href='/p/terms-of-servie.html' target='_blank' title='Terms Of Servie'>TOS <i class='fa fa-credit-card-alt'/></a></li></ul></div></div>
4. Jika Sudah, Simpan Template dan coba lihat hasilnya !!!

Jika ada kesulitan untuk tutorial Cara Buat Menu Navigasi Diatas Footer, bisa berkomentar dibawah. saya usahakan jawab secepatnya.

Post a Comment