हेल्लो दोस्तों,आज हम अपने इस आर्टिकल में लेकर आये है Best Design Blogger Footer Menu. जिसको हम HTML एवं CSS Code के माध्यम से Create किये है इसको अपने ब्लॉग पर लगाने के बाद ब्लॉग Professional type का दिखने लगेगा इसको ब्लॉग में लगाना बहुत ही आसान है
Best Design Blogger Footer Menu Demo
नीचे दिए गए Demo में Footer Menu का Demo देख सकते है
Best Design Blogger Footer Menu CSS Code
नीचे दिया गए CSS Code में आप अपने अनुसार Footer Menu के Style को Change कर सकते है
नीचे दिए गए CSS Code में आप Footer के बैकग्राउंड Padding तथा Color को design कर सकते है
.myfooter{
background-color: #ffc107c2;
position: relative;
padding-top: 20px;
padding-bottom: 10px;
color: #fff;
z-index: 2;
}
नीचे दिए गए CSS Code में आप Footer में Add किये गए Link के Color Hover को कस्टमाइज कर सकते है
a {
color: none;
text-decoration:none;
}
a:visited {
color: none;
text-decoration:none;
}
a:hover {
color: green;
text-decoration:none;
}
a:active {
color: green;
text-decoration:none;
}
नीचे दिए गए Code से आप fa-आइकॉन को Customize कर सकते है
.fa {
padding: 5px;
font-size: 35px;
width: 40px;
text-align: center;
text-decoration: none;
margin: 15px 5px;
border-radius: 50px;
border: 1px solid red;
}
.fa:hover {
animation: shake 0.5s;
transition: all ease .5s;
}
नीचे दिए गए CSS Code आइकॉन में Rotation Effect डाले
@keyframes shake {
100% { transform: translate(-1px, -2px) rotate(-360deg); }
}
इस CSS Code के मदद से आप अपने fa आइकॉन का अलग-अलग color दे सकते है
.fa-facebook {
color: #3B5998;
}
.fa-twitter {
color: #55ACEE;
}
.fa-whatsapp {
color: green;
}
.fa-youtube {
color: #bb0000;
}
.fa-instagram {
color: #125688;
}
.fa-pinterest {
color: #cb2027;
}
उपरोक्त CSS Code से Footer Menu का Style तैयार हो गया है
Best Design Blogger Footer Menu CSS Code
अब हम HTML Code को Create करेंगे नीचे दिए गए HTML Code को Add करना है
Add Image Footer Menu
<div class="myfooter">
<div class="center">
<img src="(Image Code Paste Here)" style="width:300px;">
उपरोक्त HTML Code में आप (Image Code Paste Here) इस जगह पर अपने image का Code Paste करे तथा width:300px; इस code से आप अपने image के साइज़ को कम ज्यादा कर सकते है
Add Description Footer Menu
<p>Your Website Description</p>
</div>
उपरोक्त Text Your Website Description की जगह पर अपने वेबसाइट का Description Add करे
Add Fa आइकॉन Footer Menu
<div class="center">
<a class="fa fa-facebook" href="#"></a>
<a class="fa fa-twitter" href="#"></a>
<a class="fa fa-whatsapp" href="#"></a>
<a class="fa fa-youtube" href="#"></a>
<a class="fa fa-instagram" href="#"></a>
<a class="fa fa-pinterest" href="#"></a>
</div>
उपरोक्त Code में Social Media का आइकॉन तथा Link को Add कर सकते है
Add Page Link Footer Menu
<div class="center">
<a href="/p/about-us.html"> About US ∣</a>
<a href="/p/contact-us.html"> Contact US ∣ </a>
<a href="/p/terms-and-conditions.html"> Terms and Conditions ∣</a>
<a href="/p/privacy-policy.html"> Privacy Policy </a>
</div>
उपरोक्त HTML Code में आप अपने Page का नाम तथा पेज का लिंक Add करे
Add Copyright Text Footer Menu
<div class="center"><p> Copyright©2020 All Rights Resreved WEBSITE NAME</p>
</div>
</div>
उपरोक्त HTML Code में आप अपने वेबसाइट का TItle Add करे
इस तरह से Best Design Blogger Footer Menu का HTML एवं CSS Code तैयार हो गया है
Best Design Blogger Footer Menu Source Code
उपरोक्त सभी Code को आप नीचे दिए गए Copy Code के बटन पर click करके उपरोक्त सभी Code को कॉपी कर सकते है