Cara Membuat Menu Vertikal di Footer Blog

kali ini saya akan membagikan Cara Membuat Menu Vertikal di  Footer Blog.
barang kali anda berminat memasangnya di blog Anda, Silahkan Ikuti Tutorial Pembuatanya sebagai berikut ;

1  Buka Blog Anda.
2. Klik Template / Tema.
3 . Pastekan Kode Berikut ini tepat di atas ]]></b:skin>.

.menubottompic {background:#A00000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidVeOxL9oWrV9SvRzPXnJF6c56M8UaKFO4WO2DW77ccFZd__mx45UdNQuO4rsdWQqSVLCXDj1YJ5HoCeEPkRPvIFHRubc9kmHWUya4wgY-VldMZiW-ojS-HYCSmvCilMMtAmoCgFi7Md0/s1600/bg_menubottom.gif) repeat-x top left;width:100%;margin:0 auto;padding:0 auto;height:42px;}
.menubottom {width:950px;height:20px;margin:0 auto;padding:14px 0;}
.menubottom ul {margin: 0;padding-left:0px;color:#fff;text-transform:none;
list-style-type: none;font:normal 11px Arial,sans-serif;}
.menubottom li{display: inline; margin: 0;}
.menubottom li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDiWOLXzUR-mQu7ua7fG_4THkbsVwvB_qGAIdDD1A5dSXLgt9KjxfW4Hp64LDd3ZhscjdtVfXUo8icuxkrEkRRmaGGpZ27BYpw_tDBIXMD7_kKAXhZfWiWkxNgIYGAYv_DE9k-OnZ3XAw/s1600/bg_spritebottom.gif) no-repeat center right;float: left;display: block;text-decoration:none;
padding:1px 8px;color:#eee;line-height: 1.2em;}
.menubottom li a:visited{color:#eee;}
.menubottom li a:hover {color:#000;text-decoration:none;}

4. Klo sudah, silahkan Copy Code di Bawah Ini dan Pastekan di </body> atau <Footer>
<div class='menubottompic'>
<div class='menubottom'>
<ul>
<li><a href='Url Anda/'>Home</a></li>
<li><a href='Url Anda/'>About Us</a></li>
<li><a href='Url Anda/'>Contact Us</a></li>
<li><a href='Url Anda/'>Support</a></li>
<li><a href='Url Anda/'>Resource</a></li>
<li><a href='Url Anda/'>Hot Topics</a></li>
<li><a href='Url Anda/'>Popular News</a></li>
<li><a href='Url Anda/'>Social Media</a></li>
<li><a href='Url Anda/'>Technology</a></li>
<li><a href='Url Anda/'>Politics</a></li>
</ul>
</div>
<div style='clear:both;'/>
</div>
Keterangan :

ganti Tulisan Warna Merah .dengan url anda sendiri.
5.Klik Pratinjau.

6.Simpan


untuk Model Menu di Footer Blog yang ke 2 :



1  Buka Blog Anda.
2. Klik Template / Tema.
3 . Pastekan Kode Berikut ini tepat di atas ]]></b:skin>.

.ct-wrapper-footer {position: relative;margin: 0 auto;width: 100%;}
.footer-nav { position: relative;width: 100%;z-index: 1000;overflow: hidden;background:#f0f0f0;}
.footer-nav ul {margin: 0 auto;padding: 1em 0;text-align: center;width: 100%;}
.footer-nav li { list-style-type: none; display: inline-block; padding: 0; }
.footer-nav li a { color: #333; display: inline-block; font-style: normal !important; margin: 0 0 0 1em; padding: 0; text-decoration: none; }
.footer-nav li a:after { content: "2022"; display: inline-block; margin: 0 0 0 1em; color: #777; }
.footer-nav li:last-child a:after { display: none; }
.footer-nav ul li a:hover, .footer-nav ul li a:active { text-decoration: none; color: #0D78A5; }

 4. Klo sudah, silahkan Copy Code di Bawah Ini dan Pastekan di <div class='footer'>
 .... kode lain.... </div> atau <Footer>
<div class='footer-nav'>
<div class='ct-wrapper-footer'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='Url Anda'>About</a></li>
<li><a href='Url Anda'>Services</a></li>
<li><a href='Url Anda'>Contact</a></li>
<li><a href='Url Anda'>Disclaimer</a></li>
</ul>
</div>
</div>

 Keterangan :

ganti Tulisan Warna Merah .dengan url anda sendiri.

5.Klik Pratinjau.

6.Simpan


Selamat Mencoba, Semoga berhasil.

itulah tips Cara Membuat Menu Vertikal di  Footer Blog.
bila ada yang di tanyakan silahkan tulis di Komentar.

Share Share Tweet Share Share Share

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://irinmedia.blogspot.com/. Terima kasih.