Cara Membuat Footer Menu Responsive Disertai Logo Blog

Foother Menu

Membahas tentang belajar nge blog memang gak ada habisnya ya sobat. Ada saja kreasi yang bisa di lakukan untuk kemajuan blog kita. Salah satunya mengedit tampilanya supaya blog terlihat lebih menarik walaupun blog hanya memakai layanan gratis. Tapi dengan kreatifitas yang kita miliki sekaligus konten yang bermanfaat akan membuat blog di perhitungkan search engin.



Kali ini kita akan kembali belajar mengoprek template blog. Bagi saya pribadi mengoprek template itu merupakan hobby tersendiri. Walaupun saya tidak paham betul dengan pengkodean xml dan javascript tapi sedikit banyak mengerti dan tahu dari pengalaman pribadi. Ketika berhasil menggoprek template rasanya ada kepuasan dan kebanggaan tersendiri bagi saya.

Tanpa panjang lebar lagi kita kembali ke topik pembahasan. Kali ini kita akan belajar membuat menu pada footer template. Menunya agak sedikit berbeda dari yang lain ya sobat. Karena komplit di tambahkan image logo dan kolom susbscribe untuk memudahkan pengunjung mengikuti blog kita. Penampakan bisa kamu lihat pada gambar di bawah ini.

Foother Menu

Menu pada footer blog biasanya di gunakan untuk mempermudah pengunjung dalam bernavigasi. Isi menunya biasanya di pakai untuk meletakan menu About, Disclaimer, Privacy Policy, TOS, Sitemap dan sebagainya. Intinya menu pada footer lebih bersifat tools untuk blog kita jadi link nya tidak mengarah pada artikel tapi pada konten halaman.

Apakah kamu berminat untuk menggunakanya, jika berminat silahkan ikuti langkah-langkah berikut ini. Pertama silahkan buka menu dashboard blog sobat kemudian pilih tema dan edit HTML. Copy kode CSS berikut ini dan letakan diatas kode head penutup </head>

<style type='text/css'>
/* Footer menu */
#footer_menu{font-family:Tahoma;margin:0 auto;padding:0;position:relative}
#footer_menu ul{margin:0 auto;padding:0;text-align:center;margin:0 auto}
#footer_menu ul li{display:inline-block;margin:1px;background:#;border:1px solid #;border-radius:2px}
#footer_menu ul li a{display:block;color:#fff;padding:5px 10px}
#footer_menu ul li a:hover{background:#fff;color:#222}
/* Subscribe Box */
#subscribe-css{position:center;padding:20px 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglTVJwrfjGDfypZ1566mk7eKBwROVrL4NzxPW0szDnvdbRPDT_VP3Cv6l4XNgkHOuBVIkxZWHChStOkIHLs_UhhRKyP0S0zwyoiNIw4XFj4JH6iNw0R2zlNydfjnhq0BWm0jmjFPnYY-k/s320/footersindoku.png);
 background-repeat:no-repeat;
 background-size:cover;overflow:hidden;border-top:0 solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#3A539B;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#37b185;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:&#39;&#39;;position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}
</style>

Langkah selanjutnya masih dalam tahap edit HTML template lalu cari kode footer-wrapper dan copy kode berikut ini tepat di bawahnya. Kemudian sobat ganti kata "ISI DENGAN URL IMAGE JUDUL BLOG KAMU" dengan url logo blog sobat. Setelah itu ganti yang saya beri tanda (#) dengan url halaman blog sobat. Pada bagian feedburner isi dengan ID feed sobat.

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
      <div id='subscribe-css'>
<p class='subscribe-note'><img expr:alt='data:blog.homepageUrl' expr:href='data:blog.homepageUrl' src='ISI DENGAN URL IMAGE JUDUL BLOG KAMU'/></p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=#' class='subscribe-form' method='post' onsubmit='window.open (&apos;https://feedburner.google.com/fb/a/mailverify?uri=Sindoinfo&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='#'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>
<!--Footer Naviation-->
<div id='footer_menu'>
<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='KodeEtik'>KodeEtik</a></li>
</ul>
</div>
</b:if>

Selanjutnya simpan template dan lihat hasilnya. Perlu di ingat footer menu yang kita buat ini hanya tampil jika blog di buka melalui phonsel. Dengan kata lain menu responsive yang di khususkan untuk tampilan mobile saja. Jika sobat ingin menampilkanya pada blog tampilan destop juga, sobat bisa mengganti kode tag pembungkusnya. Demikianlah sobat cara membuat footer menu dengan kolom subscribe di sertai logo blog. Semoga bisa bermanfaat, bagi yang masih bingung silahkan tanya pada kolom komentar.