iOS - A Footer Design CSS Menu With Hover Effects

Recently, We shared an article on getting quality backlinks from trusted authority websites and we also shared an article on finding the accurate bounce rate of a blog. So, today we are publishing a widget named iOS . Its a CSS Menu with awesome hover effects inspired from My Blogger Lab. Footer is one of the main factors of designing a blog . Some people choose 3 column footers while some choose 4 column . These add more beauty to your blog and an attractive footer design is a sign of professionalism . But, here we chose a footer with no columns. Because we think its a sign of professionalism too. A live demo of this widget is seen at the footer of our blog ! This widget is inspired from the footer of MyBloggerLab by +Syed Faizan Ali . It also has a beautiful shrinking hover effect. Moreover, there is a motive or proverb that can be edited and also an image can be added. This widget is made entirely with CSS and HTML . You can also freely customize this widget .This footer menu is totally customizable and moreover, as we are giving for free, please do not share this without a link back to us . Feel free to share this widget with a link back to us . This can also be termed as MyBloggerLab like Footer Design Menu with a cool hover effect and motive.

STEPS to Add It In Blogger

+  Go To Blogger - Layout - Add A Gadget

+  If you want, you can also add it directly in the template

+  Add An HTML/Javascript Gadget in Footer
+  Copy the code below and paste it there  !

+  Done ! Now You have successfully Added It !

+ Note This. A really important quote - If any alignment problem persists. PLease add this code given below     after the starting code named <style> - View The Codes

Source Code

<style>
div.ioskid{text-align:center;overflow:hidden;background:#292929;position:relative;z-index:10000; border-bottom: 1px solid #231d19;}.iosios { background-color: #2094DC; height: 70px; }.iosioscover { width: 980px; margin: 0px auto 0px; } .iosside { float: right; }
.proverbmotto { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhldDYIFJEgouHvIM__yU1GAfBJmeICNfXE0nOqEw6-JIT-9xBZqxWH1ljzmr6niwom4tix58GP0YI71HervMRquoutSZbh9smswNswko9rAGClbWFWHOo8rcXrN7l3HMCzLGadiTGllBY/s1600/BLOgTM.png); height: 43px; padding-left: 60px; background-repeat: no-repeat; margin-top: 15px; }
.proverbmotto { width: 255px; float: right; padding-right: 10px; padding-left: 60px;}
.proverbmotto p { font-family: lora,sans-serif; text-transform: capitalize; font-weight: 400; font-size: 14px; font-style: italic; margin-top: 7px; padding-right: 10px; color: #fff; line-height: 15px; text-align: left;; }
.nftsideios { float: left; font-family: lora,sans-serif; font-weight: 700; font-style: italic; padding-top: 20px; font-size: 16px; }ul.othersideios li { display: block; float: left; position: relative; z-index: 5; background-color: #292929; padding-left: 15px; padding-right: 15px; padding-top: 7px; padding-bottom: 7px; margin-left: 10px; }
.othersideios a { color: #fff; text-decoration: none; }ul.othersideios li:hover {
box-shadow:inset 0 0 10px rgba(0,0,0,0.5);
background-color:#F87503;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
-webkit-transition:All .4s ease;
-moz-transition:All .4s ease;
-o-transition:All .4s ease;
box-shadow: 0px 0px 7px rgb(171, 171, 171);
}</style>
<div class='ioskid'>
<div class='iosios'>
<div class='iosioscover'>
<div class='nftsideios'>
<ul class='othersideios'>
<li><a href='http://bloggerkid.in/p/about-us.html'>About</a></li>
<li><a href='http://www.bloggerkid.in/p/advertise-300x250.html'>Advertise Here</a></li>
<li><a href='http://www.bloggerkid.in/p/blog-page.html'>Contact us</a></li>
<li><a href='http://www.bloggerkid.in/p/our-privacy-policy-was-last-updated-and.html'>Privacy</a></li>
</ul></div>
<div class='iosside'>
<div class='proverbmotto'><p>Blogger Kid &#8482; - The Ultimate Blogging Portal Since 2013.</p></div>
</div></div>
</div></div>

Final Words

If any problem persists , you can ask the query through the comments. Fortunately, Our dedicated customer support will reply to you within minutes. I Hope you like this widget and please share it with your friends if you liked it ! Happy Blogging !