Sticky Navigation Bar Blogger Ke Liye Kaise Banaye – Techno Dhiman
Sticky Navigation Bar Blogger Ke Liye Kaise Banaye: Maine apni pichhli post me apko Install Floating Subscription Box For Your Blogger Blog ke baare me bataya tha. Aaj ke is article me main apko blog ke liye Sticky Navigation Bar ke batane ja rha hun.
Sticky navigation bar har blogger ki pahli pasand hoti hai. Ye hamesa top par stick rahti hai. Aap chahe content read karte karte kitna bhi niche pahuch jao magar ek sticky bar hamesa apki nazron ke samne rahit hai. Is se hota ye hai ki bina koi scroll kiye aap others menu par bhi easily click kar sakte hain. Sticky nav bar ka example aap meri website par dekh sakte hain.
To agar aap bhi apne blog ke liye sticky navigation bar chahte hain to is article ko carefully read karen.
Table of Contents
How to Make Sticky Navigation Bar Blogger
<!– techno dhiman navigation menu –>
<div id=”stickynavbar”>
<ul>
<li><a title=”home” href=”LINK”>Home</a></li>
<li><a title=”TITLE” href=”LINK”>PAGE TITLE</a></li>
<li><a title=”TITLE” href=”LINK”>PAGE TITLE</a></li>
<li><a title=”TITLE” href=”LINK”>PAGE TITLE</a></li>
<li><a title=”TITLE” href=”LINK”>PAGE TITLE</a></li>
</ul>
</div>
<!– techno dhiman navigation menu –>
Ab iski apko css add karni hai. Iske liye aap Theme me jakar Edit HTML par jaye. Ab aap yaha par search karen “b:skin” ya </style>
</style> se pahle apko niche diya gya code paste karna hai.
/* Spacing & Border of First Link in Navigation */ .tabs-inner .section:first-child ul { margin-top: 0px; border: 0 solid #eeeeee; } /* Background & Border of Navigation */ .tabs-inner .widget ul { background: #999999; border: 0px solid #eeeeee; text-align: center !important; } /* Font, Colour & Border of Links */ .tabs-inner .widget li a { font: normal normal 14px Arvo; color: #333333; border: 0px solid #ffffff; } /* Font & Colour of Rollover Links */ .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #eeeeee; background-color: #ffffff; text-decoration: none; } /* Centre Navigation */ .tabs .widget li, .tabs .widget li{ display: inline; float: none;} |
Sticky Navigation Bar Blogger Ke Liye
#stickynavbar { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}