Thursday, July 29, 2021
HomeBlogger TemplateEmporio blogger theme customization add menu by html in Hindi

Emporio blogger theme customization add menu by html in Hindi

Emporio blogger theme customization add menu by html in Hindi

ब्लॉगिंग की दुनिया में आपका स्वागत है. आज के दिन में बहुत सारे लोग ब्लॉगिंग कर रहे हैं जो. लोग नए ब्लॉगिंग में आए हैं वह पहले blogspot.com से अपना ब्लॉगिंग करियर शुरू करते हैं.

यह आर्टिकल उन लोगों के लिए ही है, जो लोग नए-नए ब्लॉगिंग में आए हैं. और जो लोग ब्लॉग blogspot.com में अपने ब्लॉगिंग कैरियर बना रहे हैं.

जब आप ब्लॉगिंग शुरू करते हैं तब आपको एक डोमिन की जरूरत होती है. डोमिन खरीदने के बाद आपको एक होस्टिंग की जरूरत होती है. पर गूगल आपको फ्री होस्टिंग प्रोवाइड करता है जोकि blogspot.com के नाम से जाना जाता है.

पर जब आप blogspot.com पर अपना डोमिन इंटर करते हैं, तब आपको एक template की जरूरत पड़ती है. आप कोई भी रेस्पॉन्सिव टेंप्लेट अपने ब्लॉगर में लगा सकते हैं. पर गूगल ब्लॉक्स्पॉट आपको कुछ फ्री टेंप्लेट थीम प्रोवाइड करता है और वह अच्छी भी होती है.

पर उस फ्री टेंप्लेट थीम एक दिक्कत आता है, “कि आप मेनू कैसे क्रिएट करें?” क्योंकि गूगल आपको जो फ्री थीम प्रोवाइड करती है उसमें मेनू लगाने की जगह नहीं होती है. आज इस article में हम आपको उस फ्री थीम में रेस्पॉन्सिव मोबाइल फ्रेंडली मेनू सबमेनू लगा कर दिखाएंगे.

How to select free Emporio blogger theme in blogspot.com. Blogspot.com में फ्री एम्पोरियो ब्लॉगर थीम का चयन कैसे करें।

  1. पहले आप अपना ब्लॉगर डैशबोर्ड पर जाएं.
  2. उसके बाद आप थीम ऑप्शन में आए.
  3. थीम ऑप्शन में आने के बाद अपना पेज को थोड़ा सा नीचे की तरफ scroll करें.
  4. scroll करने के बाद आपको Emporio का जो पहला थीम है उसको सिलेक्ट करें.
  5. फिर आप apply to blog के ऊपर क्लिक करें.
अब आप अपनी डैशबोर्ड के लेआउट ऑप्शन में जाएं। लेआउट ऑप्शन में आपको पहले फ़ेविकॉन आइकॉन का एक ऑप्शन दिखेगा। उसके नीचे head का एक ऑप्शन मिलेगा। आपको हैडर के अंदर सिर्फ एक ही बॉक्स देखने को मिलेगा।
नीचे दिए गए फोटो में आपको दो बॉक्स देखने को मिल रहा है. पर डिफॉल्ट आपको यहां पर एक ही बॉक्स देखने को मिलेगा। जहां पर आप हैडर में आपका वेबसाइट का नाम लिख सकते हैं. और दूसरा जो है एचटीएमएल जावास्क्रिप्ट का वह लेआउट आपको थीम में जाकर edit html के जरिए करना पड़ेगा।

How to enable add gadget option | ‘add gadget option’ कैसे इनेबल करे?

  1. पहले आप ब्लॉगर के डैशबोर्ड पर आइए.
  2. अब आप थीम ऑप्शन में जाइए
  3. थीम ऑप्शन में जाने के बाद आप एडिट एचटीएमएल में जाइए।
  4. एडिट एचटीएमएल में क्लिक करने के बाद आपको एक नया विंडो मिलेगा जहां पर एचटीएमएल जावास्क्रिप्ट का कोड लिखा हुआ होगा। 
  5. अब आप Jump to Widget के ऑप्शन में आइए और उसको क्लिक करिए.
  6. आपको पहला एक ऑप्शन मिलेगा Header1. उसके ऊपर क्लिक करिए.
  7. अब आप बॉडी के पहले लाइन पर क्लिक करे. और थोड़ा सा ऊपर स्क्रॉल करे.
  8. <b:section id=’header’ name=’Header’ showaddelement=’false’>
  9. bold किआ हुआ वर्ड को false से true कीजिए। 
  10. <b:section id=’header’ name=’Header’ showaddelement=’true‘>
  11. अब आप <b:widget id=’Header1′ locked=’true‘ title=’Antihealthy (Header)’ type=’Header’ visible=’true’>
  12. अब आप bold किआ हुआ true को फालसे करे.
  13. <b:widget id=’Header1′ locked=’false‘ title=’Antihealthy (Header)’ type=’Header’ visible=’true’>
  14. अब आप Save Theme पे क्लिक करे.
  15. फिर से आप लेआउट मे आये और पेज को रिफ्रेश करे. 
  16. अब आप यह पर कोही भी लेआउट लगा सकते है. 

Emporio blogger theme customization add menu by html Full video Tutorial

Emporio blogger theme customization add menu by html | 

  1. अब आप लेआउट ऑप्शन में आइए.
  2. लेआउट पेज को रिफ्रेश कीजिए।
  3. अब आपको हैडर के अंदर add gadgets का ऑप्शन देखने को मिलेगा।
  4. ऐड गैजेट्स add गैजेट्स के ऊपर क्लिक कीजिए।
  5. आप गैजेट्स के अंदर आपको HTML/JavaScript का ऑप्शन मिलेगा।
  6. HTML/JavaScript के पास एक + icon मिलेगा, इसके ऊपर क्लिक करे. आपका  HTML/JavaScript ऐड हो जायेगा।
  7. अब आपको हैडर के अंदर दो गैजेट्स देखने को मिलेंगे। एक हैडर का और एक एचटीएमएल/जावास्क्रिप्ट HTML/Javascreipt का.
  8. बॉक्स के डायनी तरफ एक पेंसिल का ऑप्शन है. उसके ऊपर क्लिक करते ही आपके सामने एक नया पॉपअप बॉक्स ओपन हो जाएगा।
  9. जहां पर कॉन्टेंट का एक बॉक्स है उसके अंदर आपको नीचे दिए गए पूरे जावास्क्रिप्ट एचटीएमएल कोड को वहां पर सेव करना पड़ेगा।
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css” />
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
.topnav {
  overflow: hidden;
  background-color: red;
}
.topnav a {
  float: left;
  display: block;
  color: yellow;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px
  position: fixed;
}
.topnav a:hover {
  background-color: blue;
  color: red;
}
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}
.topnav .icon {
  display: none;
}
.dropdown {
  float: left;
  overflow: hidden;
}
.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: blue;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #DDD000;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  float: none;
  color: red;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #20F7D0;
  color: 1F3430;
}
.dropdown:hover .dropdown-content {
  display: block;
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
</style>
<div class=”topnav” id=”myTopnav”>
  <a href=”https://www.techforftcp.com/” class=”active”>Home</a>
  <div class=”dropdown”>
  <a href=”https://www.techforftcp.com/search/label/Tech%20news”>TECH NEWS</a>
  <div class=”dropdown-content”>
      <a href=”#”>Link 1</a>
      <a href=”#”>Link 2</a>
      <a href=”#”>Link 3</a></div></div>
      <div class=”dropdown”>
  <a href=”https://www.techforftcp.com/search/label/Earning%20ways”>EARNING WAYS</a>
  <div class=”dropdown-content”>
      <a href=”#”>Link 1</a>
      <a href=”#”>Link 2</a>
      <a href=”#”>Link 3</a></div></div>
<div class=”dropdown”>
<a  href=”https://www.techforftcp.com/search/label/Mobile%20Phones”>Mobile</a>
<div class=”dropdown-content”>
      <a href=”#”>Link 1</a>
      <a href=”#”>Link 2</a>
      <a href=”#”>Link 3</a></div></div>
  <a href=”https://www.techforftcp.com/search/label/Computer”>COMPUTER TECHNOLOGY</a>
  <a href=”https://www.techforftcp.com/search/label/E-commerce”>DIGITAL MARKETING</a>
<a href=”https://www.techforftcp.com/search/label/E-commerce”>BENGALI BLOG</a>
<a href=”https://www.techforftcp.com/search/label/E-commerce”>HINDI BLOG</a>
<a href=”https://www.techforftcp.com/search/label/E-commerce”> subscribe us</a>
  <a href=”javascript:void(0);” class=”icon” onclick=”myFunction()”>
    <i class=”fa fa-bars”></i>
  </a>
</div>
<script>
function myFunction() {
  var x = document.getElementById(“myTopnav”);
  if (x.className === “topnav”) {
    x.className += ” responsive”;
  } else {
    x.className = “topnav”;
  }
}
</script>
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

Recent Comments

bernaldinobest https://wikipedia.org 157943 on Create Device Mockups in Browser with DeviceMock
x