Cara Membuat Menu Footer Blog

Menu Footer biasanya di Pakai Untuk About, Contac, Sitemaps, Prifacy, Disclaimer, Service dll.
Menu ini Berguna Untuk Mempermudah Pengunjung menuju Pada Sebuah Laman Tertentu yang Mengandung Unsur Keterangan Blog keseluruhan.

Bila Anda Berminat Memasng Menu ini, Silahkan Ikuti Penerapanya di Bawah ini.

1. Silahkan Buka Blog Anda.
2. Klik Template / Tema Blog.
3. Copy kode di bawah ini lalu pastekan Sebelum ]]></b:skin>. ( Utk Mempermudah Pencarian silahkan Tekan ctrl +f ).

#menu_footer { /* This will make your footer stay where it is */
     background: none repeat scroll 0 0 #1D1D1D;
     border: 1px solid rgba(0, 0, 0, 0.3);
     bottom: 0;
     font-family: Arial, Helvetica, sans-serif;
     height: 40px;
     left: 50%;
     margin: 0 auto 0 -490px;
     padding: 0 10px;
     position: fixed;
     text-shadow: 1px 1px 1px #000000;
     width: 960px;
}
/* border curves */
#menu_footer {
     -moz-border-radius: 10px 10px 0px 0px;
     -webkit-border-radius: 10px 10px 0px 0px;
     border-radius: 10px 10px 0px 0px;
}
/* hover effect */
#smenu_footer:hover {
     background: none repeat scroll 0 0 #2b2a2a;
}
/* shadow for the footer*/
#menu_footer {
     -moz-box-shadow:0px 0px 11px #191919;
     -webkit-box-shadow:0px 0px 11px #191919;
     box-shadow:0px 0px 11px #191919;
}
#footer_menu {
     margin: 0;
     padding: 0;
     width:auto;
}
#footer_menu li {
     list-style: none;
     float: left;
     font-size:12px;
     padding: 12px 14px 14px 14px;
     border-right:1px solid rgba(0, 0, 0, 0.4);
     background: rgba(0, 0, 0, 0.1);
}
#footer_menu .imgmenu {
     padding:5px 8px 3px 14px;
     float:left;
     background:url("http://4.bp.blogspot.com/-3mNzW5lhuNc/T3gGyxQm9zI/AAAAAAAAAFI/a1Mugnbpnsw/s1600/home.png") 13px 5px no-repeat;
     width:36px;
     height:30px;
     border:none;
     border-right:1px solid rgba(0, 0, 0, 0.4);
     cursor:pointer;
}
#footer_menu li:hover {
     background:#202020; /* Fallback color for old browsers */
     background: rgba(0, 0, 0, 0.3);
}
#footer_menu .imgmenu:hover {
     background:url("http://3.bp.blogspot.com/-2fJv567iCbo/T3gGz_ytb8I/AAAAAAAAAFQ/pWL3htZzogw/s1600/home_hover.png") 13px 5px no-repeat;
}
#footer_menu li a {
     display: block;
     color: #cccccc;
     text-decoration: none;
}
#footer_menu li a:hover {
     color: #ffffff;
}
#footer_menu li span {
     display:none;
}
#menu_footer #social_icons {
     float:right; /* social icons positions */
     width:auto;
     margin:5px 15px 0px;
     padding:0px;
     overflow:hidden;
}
#menu_footer #social_icons li {
     margin-right:12px; /* 12px is the space between each one of them */
     float:left;
     width:24px;
     padding:0px;
     height:32px;
     list-style:none;
     _margin-right:0px; /* this is for IE6 only */
}
#social_nav_horizontal {
     margin-left: 100px;
     font-family: Futura, Verdana, Sans-Serif;
     font-size: 18px;
     color: #8E9090;
     height: 100px;
}
#social_nav_horizontal h3 {
     display: inline;
     padding: 0 10px;
     border-bottom: dashed 1px #ccc;
}
#social_nav_horizontal ul {
     margin: 0;
     padding: 0;
     margin-top: 20px;
}
#social_nav_horizontal ul li {
     float: left;
     padding: 5px 0 0 5px;
     margin-left: 5px;
     list-style-type: none;
}
#social_nav_horizontal ul li a {
     padding: 4px 0 0 28px;
     height: 32px;
     color: #999;
     text-decoration: none;
     line-height: 1.45em;
}
#social_nav_horizontal ul li a:hover {
     color: #6DCAFF;
     text-decoration: underline;
}
.delicious {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5KLFqZYNpiKz6cMIEhOyzwp849MXAEeJJDPyu24j8dfe4j9RD4jBF-m-d1s_pSWMa0aHf1iCdbq_bQoflaFnzi-_yn2jgugpR9bub927o2Au_lmSMma7dKHixVV3gWWUwWJVH0tNPHws/s1600/delicious.png)no-repeat;
     background-position: 0 -1px;
}
.facebook {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGosC1HO7mtelmAh7pj3iUuwOy9ENWZC1JW8rmrPo8amhyH3VrClOpQji7B1u6I1su_BaXkMkKMvJBTC6ljv8sKQpNBEq1FZFea05f0vtSJWyFJGohp-T7hN61PbuY8ewGs_C0XjSQIr8/s1600/facebook.png)no-repeat;
     background-position: 0 -1px;
}
.stumbleupon {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJfW2QJaMR93ZL_Nz3t-i5fRuZF7LWjq-_Mcfg9Gja2Ujke8L3y4qoLOujvzHDfrtqnqkWZAxK2I20mMjSgqX1R-TGg_rWEqsuyg8pllIBTd9tuh4TVojiy8S_YYnOIT6pkMuG5IVycxw/s1600/stumbleupon.png)no-repeat;
     background-position: 0 -1px;
}
.twitter {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl38oQmJRuwdOpMxvtQG9rzIDxlHCs6NbF4Q9Q8XdP-MNI49e5F-WuUMnywX5DejsqDOTlmt4d26CjJZwF2mmxaMzrvFIKRaYqpSsb7fh6DvMXFkng113hExEYM_HkzAEUSb2xkVfihMI/s1600/twitter.png)no-repeat;
     background-position: 0 -1px;
}

4. Setelah itu, Copy Kode di Bawah ini, lalu pastekan sebelum Kode </body>

<div id='menu_footer'> <ul id='footer_menu'>
 <li class='imgmenu'>
<a href='#'><span>Home</span></a></li>

<li><a href='#'>About</a></li> <li>
<a href='#'>Service</a></li> <li>
<a href='#'>Prifacy</a></li> <li>
<a href='#'>Sitemaps</a></li> <li>
<a href='#'>Contac</a></li> <li>
<a href='#'>Discaimer</a></li> </ul>
</div>

5. Pratinjau.
6. Simpan .

itulah cara membuat Menu Footer Blog , Semoga Artikel ini Bermanfa'at.
Jika ada yang ingin 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.

irinmedia

Cara Membuat Menu Footer Blog

More posts

Comments