x

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 areate a horizontal scrolling menu for blogger,blogging, blogspot, blogspot tutorials in hindi
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. 

how to areate a horizontal scrolling menu for blogger,blogging, blogspot, blogspot tutorials in hindi


Step 2 : Ab Left Side Menu me Theme par click kare.

how to areate a horizontal scrolling menu for blogger,blogging, blogspot, blogspot tutorials in hindi


Step 3 : Ab Mobile wale section me setting button par click kare.

how to areate a horizontal scrolling menu for blogger,blogging, blogspot, blogspot tutorials in hindi


Step  4 : Ab Choose Mobile Theme me No. Show desktop theme on mobile devices wale opting ko tik karke Save Button par click kare. 

how to areate a horizontal scrolling menu for blogger,blogging, blogspot, blogspot tutorials in hindi


Step 5 : Ab Live On Blog section me EDIT HTML par click kare.

how to areate a horizontal scrolling menu for blogger,blogging, blogspot, blogspot tutorials in hindi


Step 6 : Ab aapke samne template ka code editor page open hoga. jisme CTRL + F press karke </head> ko search kare.

how to areate a horizontal scrolling menu for blogger,blogging, blogspot, blogspot tutorials in hindi


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>

how to areate a horizontal scrolling menu for blogger,blogging, blogspot, blogspot tutorials in hindi


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>

how to areate a horizontal scrolling menu for blogger,blogging, blogspot, blogspot tutorials in hindi


Step 9 : Ab CTRL + F press karke </body> ko search kare.

how to areate a horizontal scrolling menu for blogger,blogging, blogspot, blogspot tutorials in hindi


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(&quot;navp2&quot;);

var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset &gt;= sticky) {
    navbar.classList.add(&quot;sticky-dev1&quot;)
  } else {
    navbar.classList.remove(&quot;sticky-dev1&quot;);
  }
}

</script>

how to areate a horizontal scrolling menu for blogger,blogging, blogspot, blogspot tutorials in hindi


Step 11 : Ab Save Theme par click karke Template ko save kar le.

how to areate a horizontal scrolling menu for blogger,blogging, blogspot, blogspot tutorials in hindi


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. 

Subscribe Now

Blogging और Seo की बेस्ट टिप्स अपने email इनबॉक्स मे पाने के लिए अपना ईमेल Adress करे Verify

About Us

Pro Blog Hindi India Blog - Blogging, Seo And Make Money Online Sikhe Hindi Me. Get Daily New Tech News, Motivation Story, Life Hackes And Best Eduction Stuf From Pro Blog Hindi. Hamare Bare Me Aur Jankari Ke Liye Click Here.

DMCA.com Protection Status

Topics