Cara Membuat Footer Seperti Blognya Seocips

Siapa yang tidak kenal blognya Seocips.Blog yang nama samaran dari authornya "Brando Mewo".Blog yang cukup terkenal dengan design design blognya.kali ini saya akan membahas tutorial membuat salah satu bagian dari template yang dipakai Seocips, yaitu Footer.Saya bereksperimen dengan  mengutak atik html yang saya inspect dari google chrome.Kembali lagi ke pokok permasalahan kita yaitu tutorialnya.Langsung saja berikut langkahnya.

• Sebelumnya ini adalah buatan saya dan tidak ada kesamaan script dengan desain dari seocips.
• Pertama Copy kode berikut diatas ]]></b:skin>

.menuku-pwd { background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9SCogxWUD1kzWGy47247QrMSppL0R6qPlSEUvGyudevcDTGtHK5O-1wqxyP9IQcIhV7Ifb9NeIY8vSyrUYT-jykRz5IX8JVKxOQ5kCoMzrCCX3bHcuKP-m3ny-15I_pFkeSy9Cdh8toyG/s1600/pwd-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/AVvXsEhPDWxH8y0teYLroA0OQ2swPaaxmwefFl4qu6bec1u7B1UgRnf3_YYu9bGBNKl96fIR-9ira7Esi-_405o3YHybFotk_my8l-K95cRHjbkp8vqDbpIxyZUaMibfSdbMtj6Qb-YSv11Lmqnp/s1600/pwd-mnubg.png) repeat-x top; display:block; text-decoration:none; font-weight:700; color:#ccc; text-shadow:1px 1px 2px #111; outline:none; 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:none; 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:#ffcc00; }

• Letakan kode berikut di bagian footer template yang sobat gunakan.

<div class='menuku-pwd'>
 <div class='menuku'>
  <ul>
   <li>
    <a href='http://zkrip.blogspot.co.id/' target='_blank' title='Halaman Komentar Terbaru'><i class='fa fa-home'/>Home</a>
   </li>
   <li>
    <a href='http://zkrip.blogspot.com/p/nama-alamat-email-isi-pesan.html' target='_blank' title='Sitemap'>Contact <i class='fa fa-phone'/></a>
   </li>
   <li>
    <a href='http://zkrip.blogspot.com/p/toctable-border2px-solid-white.html' target='_blank' title='Facebook Ku'>Sitemap <i class='fa fa-sitemap'/></a>
   </li>
   <li>
    <a href='http://zkrip.blogspot.com/p/privacy-policy.html' target='_blank' title='Google Plus ku'>Privacy Policy <i class='fa fa-lock'/></a>
   </li>
   <li>
    <a href='http://zkrip.blogspot.com/p/blog-partner.html' title='Advertise'>Partner Blog <i class='fa fa-user'/></a>
   </li>
  </ul>
 </div>
</div>

• Save

Tweet

Postingan terkait:

Ditulis Tarsisius — November 05, 2016 — Add Comment — Tutorial