Cara membuat menu dibagian bawah blog untuk disclaimer dan privacy policy

Ada sebagian template yang kita cari di google sangat sederhana sekali hingga tidak ada menu khusus untuk disclaimer. Itu saya alami sendiri, seperti blog saya ini, template yang saya gunakan ini sangat sederhana sekali sehingga bagian menu hanya diatas atau di header saja, ya seperti itu saja, tapi saya sangat suka templatenya yang sangat sederhana sekali.

Mungkin juga ada template yang anda suka seperti template yang saya pakai ini namun tidak ada menunya untuk meletakkan disclaimer, privacy, sitemap, dll. Jika iya, semoga artikel ini bisa membantu anda untuk merombak sedikit blog anda untuk menambahkan menu dibagian bawah blog atau dibagian footer dari blog atau website anda.

Nantinya jika anda berhasil mengikuti langkahnya yang saya berikan, maka tampilannya kurang lebih akan seperti gambar dibawah ini.

1. Langsung saja kita ke tutorialnya, pertama-tama silahkan anda copy kode dibawah ini:

.menuku-wrap{background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPmkr1opCDcJyaJ5XzKiKMtgC5AeCHZuPaRMbWnSiN_LsZLU67bLW0imsTZclwwPmWOv01OQqpg2uuSoj8cacDUbSnPFq1ZURsEGtQlQoLir3aBBr9agZ5WxP8tKGF4bchTVw_qFfUCN0/s1600/seocips-menuku.png) repeat-x top;height:54px;width:100%;overflow:auto}.menuku{font:normal 12px Arial;line-height:normal;text-transform:none;color:#f1f1f1;text-decoration:none;margin:0 auto;padding:0 auto}.menuku ul{margin:0;padding:0}.menuku li{list-style:none;color:#b69786;float:left;width:20%;display:inline;position:relative;margin:0;text-align:center}.menuku li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4H5L0RNmUUhpVY9rj9PeRcQswo323mcBs5YjhheTbf_Z67CWLRxc2dGN5hVxdc5aaFdjQS8qEH0zKeponwmIUyjfAnmoBjlK9qGSfq2G03-0zHS13LgEASr5va5rRyJ01grZpeZPXQUM/s1600/seocips-mnubg.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}.menuku 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}.menuku 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)}.menuku 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)}.menuku li ul a:hover{background:#1b1b1b;color:#fff}.menuku li ul li{float:none;display:block;width:auto}.menuku li ul ul{top:0;left:100%}.menuku li a:hover,.menuku ul li a:hover{color:#fc0}@media screen and (max-width:960px) @media screen and (max-width:622px) { .menuku-wrap {display:none}}

Catatan:
Sedikit pemahaman untuk anda, kode diatas adalah kode css yang berfungsi untuk memperindah atau mempercantik dari menu yang nantinya akan kita buat.

2. Kemudian beralih ke blog anda dan buka menu tema dan pilih edit html. tidak paham bisa cek gambar dibawah ini.

3.  Nantinya tampilannya seperti gambar dibawah ini, sampai sini anda klikkan saja 1x mouse ke arah kode-kode dan setelah itu tekan ctrl+f, maka akan tampil search seperti digambar yang saya kotaki.

4. Dibagian search anda ketikkan ]]></b:skin> dan kemudian pastekan kode yang sudah anda copy dibagian tutorial no.1 dan letakkan kode tersebut tepat diatas ]]></b:skin>. Tidak paham bisa cek gambar dibawah ini.

5. Jika sudah, maka selanjutnya anda copy kode dibawah ini.
<!--Footer Navigation--> <div class='menuku-wrap'> <div class='menuku'> <ul> <ul> <li><a href='#' title='About'>About</a></li> <li><a href='#' title='Contact'>Contact</a></li> <li><a href='#' title='Privacy'>Privacy</a></li> <li><a href='#' title='Sitemap'>Sitemap</a></li> <li><a href='#' title='Disclaimer'>Disclaimer</a></li> </ul> </ul> </div></div>

6. Kemudian beralih kembali ke blog anda dan masuk ke menu edit html, nah disini harus anda perhatikan, karena setiap template blog yang kita gunakan berbeda-beda kode. kode template saya belum tentu sama dengan kode template anda. sementara tutorial ini saya buat berdasarkan template yang saya gunakan. Tapi disini saya akan coba beritahukan semua kodenya dan semoga semua kode yang saya beritahukan ini ada di template anda salah satunya.

Dibagian search silahkan anda tuliskan <div footer , bila tidak ada. Anda bisa coba <div id='footer' , bila tidak ada juga. Anda bisa coba <footer> , jika tidak ada juga. Maka yang terakhir </footer>

Catatan:
Bila dari semua kode yang saya sebutkan diatas dan ternyata yang ada di blog anda adalah yang </footer> maka letakkan kode yang sudah anda copy di tutorial no.5 tepat diatas </footer>. Tapi bila bukan </footer>, maka letakkan kodenya dibawah kode-kode yang saya sebutkan tersebut.

7. Bila anda mengikuti tutorialnya dengan benar, maka tampilannya seperti yang anda lihat dibawah ini, itu artinya anda sudah berhasil membuat menu dibagian footer atau dibagian bawah blog.

Kenapa menunya sejajar kebawah ? Karena saya merubah sedikit tampilan dari blognya, tapi bila anda praktekkan tutorialnya dengan benar, maka tampilan dari menunya sejajar kesamping.

Mungkin hanya itu saja ilmu yang bisa saya bagikan kepada anda menurut dari pengalaman pribadi, bila ada yang masih bingung dengan tutorialnya atau juga tidak paham dengan isi dari artikel ini, bisa tinggalkan di kolom komentar. semoga bermanfaat dan semoga menambah wawasan anda.

Terima kasih


#Caramembuatmenufooterdiblog
#Caramembuatmenudibawahblog
#Caramenambahkanmenufooter

Berbagi :