Membuat Menu Navigasi Di Footer Blog Keren

Membuat Menu Navigasi Di Footer Blog Keren | Hallo shobat kali ini saya akan coba membagikan sidikit tutorial tentang Membuat Menu Navigasi Di Footer Blog Keren. Navigasi ini memiliki tampilan yang cukup bisa membuat tampilan blog kamu jadi lebih keren, sehingga dapat memanjakan mata pengunjung blog kamu.

yang di tunjukan oleh tanda panah d atas adalah gambar dari navigasi yang akan di buat, bagai mana keren bukan, navigasi ini juga saya gunakan pada blog saya yang sekarang ini. Tertarik untuk membuatnya???, jika tertarik silahkan ikuti tutorialnya di bawah ini.

Membuat Menu Navigasi Di Footer Blog Keren

Menu ini menggunakan Font Awesome pastikan blog kamu sudah terpasang script dari awesome

1. Silahkan kamu masuk ke Blogger (Log In)>Template>Edit Html, pastekan code berikut tepat sebelum kode ]]></b:skinatau</style>Untuk mempercepat pencarian silahkan kamu klik tombol

CTRL

+

F

pada keyboard kamu.

.menuku-wrap{background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrzRJpUMgVWVwI23cmGrVHeh_Fvequd_hFjZd6otFQFgFoeyZTKWDNPb0U0o_xS4y5ufZ2VuCCpFxD6pM1zRn4frtxQRZj6pjEVROLMqQIbMJzyX8DWrDP4MMwRs6DcQLoR05aVAlIWlU/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/AVvXsEhRU03eJWivf2qSrGh7VoTKUUcOriGQXFJr24AvDZkB2Idgg482GRi7Fzpb2zfQcmMG9TTJG6YNHGTC9aIoGmVg303oyptF0BGTsAC7rD3ZAz-C6OYYuTPWIoqanHCeQ3LZAYWocoaPWQQ/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}}

Jika sudah selanjutnya kamu paste kode di bawah ini bebas di area <Footer

<div class='menuku-wrap'>
<div class='menuku'>
<ul>
<ul>
<li><a href='#' target='_blank' title='Halaman Komentar Terbaru'><i class='fa fa-star fa-spin'></i> Komentar disini</a></li>
<li><a href='#' target='_blank' title='Sitemap'><i class='fa fa-sitemap'></i> Sitemap</a></li>
<li><a href='#' target='_blank' title='Contact'><i class='fa fa-phone'></i> Contact</a></li>
<li><a href='#' target='_blank' title='Google+ Ku'><i class='fa fa-google-plus'></i> Google+</a></li>
<li><a href='#' target='_blank' title='Facebook Ku'><i class='fa fa-facebook'></i> Facebook</a></li>
</ul>
</ul>
</div></div>

Silahkan kamu ganti tanda # dengan link kamu, dan jangan lupa sebelum memasang tutor di atas bacup terlebih dahulu template untuk mengartifikasi kesalahan

Terakhir silahkan kamu save template/pertinjau, oky mungkin sampai di sini dulu tutornya kali ini, sampe ketemu di frequensi yang sama.

Artikel Terkait