Blogspot Ke Liye Sticky Horizontal Scrolling Menu Kaise Banaye
How To Create a Horizontal Scrolling Menu For Blogger : Agar aap ka blog blogger par hai aur aap apne blog ko professional look dena chahte hai to aapko apne blog ke template ko sahi tarike se design karna chahiye. aaj kal blog par aane wale 70% se jyada visitor mobile phone se aate hai to aapke blog ka responsive design hona jaroori hai.
is post me ham blogger blog ke mobile verson ke liye sticky scrollable horizontal menu bar kaise banate hai uske bare me janenge. is post me diye gaye codes ko apne blog par use karne se pahle uske template ka backup bana le, kyunki ye har ek template ka sath sayad match na ho paye.
Note : ye scrollable menu sirf aapke blog ke mobile version ke sath hi display hoga. isko lagane ke liye aapko html aur css ka thoda bahot gyan hona jaroori hai, agar aap html aur css me coding nahi jante to phir kisi aise vyakti ki madad le jo isme expert ho.
 |
| How To Create a Horizontal Scrolling Menu For Blogger |
Mobile Friendly Responsive Sticky Horizontal Scrolling Menu
Ye menu aapke blog par lagane ke baad kaisa dikhega, uske janne ke liye aap hamare blog probloghindi ko apne mobile device me open karke dekh sakte hai.
To chaliye ab jante hai ki apne blog par ye responsive sticky horizontal scrolling menu kaise lagete hai, uske kuch easy steps.
Step 1 : Sabse pahle apne Blogger ke Dashboard ko open kare. aur aap apne jis blog par lagana chahte hai use open kare.
Step 3 : Ab Mobile wale section me setting button par click kare.
Step 4 : Ab Choose Mobile Theme me No. Show desktop theme on mobile devices wale opting ko tik karke Save Button par click kare.
Step 6 : Ab aapke samne template ka code editor page open hoga. jisme CTRL + F press karke </head> ko search kare.
Step 7 : Ab </head> ke bilkul upar niche diya gaya css code paste kar de.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>
#navp2{float:left;display:block;background:#ffffff;width:100%;border-bottom:1px solid #f3f3f3;display:none}
#navp2 a{float:left;color:#ffffff;text-decoration:none;font-weight: bold;}
.icn-home{float:left;position: absolute;z-index: 99999;font-size:30px;padding:6px;border-right:1px solid #e8e8e8;background: #d40000;}
.scroll__nav{position: relative;z-index: 9999}
.hr-scroll{overflow-x: scroll;-webkit-overflow-scrolling: touch;overflow-y: hidden;background: #00588c;}
.hr-scroll__content{display: flex;font-size: 0;white-space: nowrap;flex-wrap: nowrap;}
.scroll__nav-li{font-size: 20px;overflow: hidden;position: relative;text-transform: capitalize;border-right:1px solid #e8e8e8}
.scroll__nav .hr-scroll__item:first-child{margin-left:50px}
.hr-scroll__item{display: inline-block;flex-shrink: 0;vertical-align: top;white-space: normal;}
.scroll__nav-link, .scroll__nav-link:hover, .scroll__nav-link:focus{color: #111;display: inline-block;padding: 10px 16px;}
.sticky-dev1 {position: fixed;top: 0;width: 100%;z-index:999}
::-webkit-scrollbar{height: 2px;width: 2px;}
::-webkit-scrollbar-button{ background:#000;width:0px}
::-webkit-scrollbar-thumb:horizontal{background: #000;}
@media screen and (max-width:750px) {
#navp2{display:block}
.scroll{right: 15px;bottom: 39px;background: rgba(201, 201, 201, 0.43);border-radius: 100px;padding: 5px;border: 1px solid #b9b9b9;}
}
@media screen and (max-width:400px) {
.icn-home{font-size: 22px;}
.scroll__nav-li{font-size: 15px;}
}
</style>
<style>
#navp2{float:left;display:block;background:#ffffff;width:100%;border-bottom:1px solid #f3f3f3;display:none}
#navp2 a{float:left;color:#ffffff;text-decoration:none;font-weight: bold;}
.icn-home{float:left;position: absolute;z-index: 99999;font-size:30px;padding:6px;border-right:1px solid #e8e8e8;background: #d40000;}
.scroll__nav{position: relative;z-index: 9999}
.hr-scroll{overflow-x: scroll;-webkit-overflow-scrolling: touch;overflow-y: hidden;background: #00588c;}
.hr-scroll__content{display: flex;font-size: 0;white-space: nowrap;flex-wrap: nowrap;}
.scroll__nav-li{font-size: 20px;overflow: hidden;position: relative;text-transform: capitalize;border-right:1px solid #e8e8e8}
.scroll__nav .hr-scroll__item:first-child{margin-left:50px}
.hr-scroll__item{display: inline-block;flex-shrink: 0;vertical-align: top;white-space: normal;}
.scroll__nav-link, .scroll__nav-link:hover, .scroll__nav-link:focus{color: #111;display: inline-block;padding: 10px 16px;}
.sticky-dev1 {position: fixed;top: 0;width: 100%;z-index:999}
::-webkit-scrollbar{height: 2px;width: 2px;}
::-webkit-scrollbar-button{ background:#000;width:0px}
::-webkit-scrollbar-thumb:horizontal{background: #000;}
@media screen and (max-width:750px) {
#navp2{display:block}
.scroll{right: 15px;bottom: 39px;background: rgba(201, 201, 201, 0.43);border-radius: 100px;padding: 5px;border: 1px solid #b9b9b9;}
}
@media screen and (max-width:400px) {
.icn-home{font-size: 22px;}
.scroll__nav-li{font-size: 15px;}
}
</style>
Step 8 : Ab aap kahan par menu lagana chahte hai, wahan par niche diya gaya HTML Code copy paste karna hoga. uske liye aapko apne blog Blog 1 widget ko find karke uske upar ye code laga sakte hai. code ko lagane ke baad first # ki jagah par menu ki link aur dusre me uska anchor text add kar de. aap list me aur menu add karna chahte hai to <li> wale element ko copy paste karke add kar sakte hai.
<nav id='navp2'>
<a class='icn-home' href='#Blog_URL'><i class='fa fa-home'>
</i></a>
<div class='scroll__nav hr-scroll'>
<ul class='scroll__nav-ul hr-scroll__content'>
<li class='scroll__nav-li hr-scroll__item'><a class='scroll__nav-link active-nav' href='#'>#</a></li>
<li class='scroll__nav-li hr-scroll__item'><a class='scroll__nav-link active-nav' href='#'>#</a></li>
<li class='scroll__nav-li hr-scroll__item'><a class='scroll__nav-link active-nav' href='#'>#</a></li>
<li class='scroll__nav-li hr-scroll__item'><a class='scroll__nav-link active-nav' href='#'>#</a></li>
<li class='scroll__nav-li hr-scroll__item'><a class='scroll__nav-link active-nav' href='#'>#</a></li>
<li class='scroll__nav-li hr-scroll__item'><a class='scroll__nav-link active-nav' href='#'>#</a></li>
<li class='scroll__nav-li hr-scroll__item'><a class='scroll__nav-link active-nav' href='#'>#</a></li>
</ul>
</div>
</nav>
<a class='icn-home' href='#Blog_URL'><i class='fa fa-home'>
</i></a>
<div class='scroll__nav hr-scroll'>
<ul class='scroll__nav-ul hr-scroll__content'>
<li class='scroll__nav-li hr-scroll__item'><a class='scroll__nav-link active-nav' href='#'>#</a></li>
<li class='scroll__nav-li hr-scroll__item'><a class='scroll__nav-link active-nav' href='#'>#</a></li>
<li class='scroll__nav-li hr-scroll__item'><a class='scroll__nav-link active-nav' href='#'>#</a></li>
<li class='scroll__nav-li hr-scroll__item'><a class='scroll__nav-link active-nav' href='#'>#</a></li>
<li class='scroll__nav-li hr-scroll__item'><a class='scroll__nav-link active-nav' href='#'>#</a></li>
<li class='scroll__nav-li hr-scroll__item'><a class='scroll__nav-link active-nav' href='#'>#</a></li>
<li class='scroll__nav-li hr-scroll__item'><a class='scroll__nav-link active-nav' href='#'>#</a></li>
</ul>
</div>
</nav>
Step 9 : Ab CTRL + F press karke </body> ko search kare.
Step 10 : Ab </body> element ke bilkul upar niche diya gaya javascript code Add kar de.
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navp2");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky-dev1")
} else {
navbar.classList.remove("sticky-dev1");
}
}
</script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navp2");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky-dev1")
} else {
navbar.classList.remove("sticky-dev1");
}
}
</script>
Step 11 : Ab Save Theme par click karke Template ko save kar le.
Bas in 11 steps ko follow karne se aapke blog me ye menu add ho jayega. jisko test karne ke liye aapko apne blog ko mobile device me open karna hoga.
Also Read This Post :
Blogspot Ke Liye Sticky Horizontal Scrolling Menu Kaise Banaye is blogger tutorial ko pura padhne ke liye aapka dhanyawad. blogging, seo aur internet se paise kamane ki adhik jankari ke liye hamare blog ko visit karte rahiye.
About Author ( मेरे बारे मे )
मेरा नाम Devisinh Sodha है. में Full Time Hindi Blogger , Seo Expert और Web Programmer हूँ.
Pro Blog Hindi Blog उन लोगो की मदद के लिए बनाया गया है जो Blogging, Search Engine Optimizetion, Make Money Online, Blogspot, Wordpress और Programming सीखना चाहते है.