Blogger मे About us page को कैसे बनाए – 2022

[et_pb_section][et_pb_row][et_pb_column type=”4_4″][et_pb_text]

नमस्कार दोस्तों आओ हिन्दी मे सीखें वैबसाइट पर आपका स्वागत है, हम इस वैबसाइट Blogger मे एक सुंदर सा about us page कैसे बनाया जाए। तो चलिये जानते है की किस तरह से इसकी शुरुआत करते हैं

सबसे जरूरी चीज़ आपके पास ब्लॉगर पर एक ब्लॉग या फिर custom website होनी चाहिए। जिसके लिए आप about us page बनाने वाले हैं।

About us Page बनाने के लिए ये स्टेप देखें

• सबसे पहले आपको Blogger वैबसाइट पर जाना होगा
• ब्लॉगर पर जाने के बाद लॉगिन करें
• लॉगिन करने के बाद अपना ब्लॉग/वैबसाइट चुने जिस पर आप ये पेज बनाना चाहते हैं
• ब्लॉग/वैबसाइट चुनने के बाद अब आपको पेज सेक्शन मे जाकर एक नया पेज बनाना होगा या पुराने पेज को एडिट करना होगा
• एडिट या नया पेज बनाने के बाद आपको HTML view पर क्लिक करना होगा।
• अब आपका पेज HTML कोड़ के लिए तैयार है सभी को सिलैक्ट करें और नीचे दिए गए कोड़ को paste करें

<style>
/* About Author CSS */ .aboutAuthor{padding:60px 0 20px 0} .aboutAuthor .aboutCont{justify-content:center;position:relative;display:flex;max-width:95%;margin:auto;padding:80px 30px 95px 30px;background-color:#fff;box-shadow:0 10px 40px rgba(149,157,165,.2);border-radius:20px} .aboutAuthor .aboutCont img{box-shadow:0 5px 20px rgba(0,0,0,.2);padding:0;border:7px solid #fff;width:120px;height:120px;position:absolute;border-radius:50%;top:-60px;pointer-events:none} .aboutAuthor .aboutCont p{margin:0;text-align:center} .drK .aboutAuthor .aboutCont{background:#252526;box-shadow:0 10px 40px rgba(0,0,0,.2)} .drK .aboutAuthor .aboutCont img{background-image:linear-gradient(to top right,#363636,#717171);border-color:#fff;box-shadow:0 10px 40px rgba(0,0,0,.2)}.drK .aboutAuthor .aboutCont img{border-color:#252526;box-shadow:0 10px 40px rgba(0,0,0,.2)}
/* About Author Button */
.aboutAuthor .aboutCont .athrBtn{text-align:center;position:absolute;bottom:0;left:0;right:0}
.aboutAuthor .aboutCont .athrBtn .button{border-radius:50px;margin:0 0 30px}
.aboutAuthor .aboutCont .athrBtn .button svg{stroke:#fffdfc;margin-right:5px}
/* Website Stats */ .statsHeading{text-align:center} .statsWebsite{display:flex;flex-wrap:wrap;flex-direction:column;margin:12px auto} .statsCont{background-color:#fff;display:flex;justify-content:center;padding:8px;width:95%;margin:12px auto;box-shadow:0 5px 20px rgba(149,157,165,.2);border-radius:20px} .statsCont .stats{height:80px;width:200px;display:flex;align-items:center;justify-content:center; flex-direction:column; margin:0 35px} .statsCont .statsName{display:inline-flex;align-items:center;font-size:16px} .statsCont .statsName svg{margin-right:7px} .statsCont .statsNumber{font-family:'Noto Sans', sans-serif;font-size:30px;margin-top:6px;font-weight:normal} .drK .statsCont{background-color:#252526;box-shadow:0 5px 20px rgba(0,0,0,.2)}
/* To change Profile background */
/* Light Mode */
.aboutAuthor .aboutCont img{background-color:#ecede8}
/* Dark Mode */
.drK .aboutAuthor .aboutCont img{background-image:linear-gradient(to top right,#363636,#717171)}
/* To change Button background */
/* Light Mode */
.aboutAuthor .aboutCont .athrBtn .button{background-color:}
/* Dark Mode */
.drK .aboutAuthor .aboutCont .athrBtn .button{background-color:}
</style> 
<script>function websiteCounts(json) {document.write(parseInt(json.feed.openSearch$totalResults.$t,10));}</script>
<!--[ About Author ]-->
<div class="aboutAuthor">
  <div class="aboutCont">
    <!--[ Author Profile Picture, Recommended Sizes: 1280&#215;1280px, 720&#215;720px below 30KB for fast loading, use transparent picture ]-->
    <img alt="Your img Text!" src="https://blogger.googleusercontent.com/img/a/AVvXsEgRzlS7txPGASS5SaL4E1xhku3pPB-G_9CYuBrMPPJcCQ5jXdaXfqcdXtwN4ja7uq4U0KJNX_VSgmo9G5MLKxvtcH1vFteKEJuZXIER1y-f1VxsfI5414nT7tNvSynNtdcRJyEK80QQSHgkk5D-_TyMEvCVEc3zf9bYZwk3u5OOk-WP0zH5enCw7qy3=s320" />
    <!--[ Author Description ]-->
    <p>आओ हिन्दी मे सीखें!<br /> Hello Friends, I am Hari Mohan. I am blogger and wordpress website designer.&nbsp; I am trying to provide you knowledge about HTML, CSS, JS, Blogging, Blogging Tutorials, Adsense Etc.
<br />If you have any questions or comments or suggestions, please don't hesitate to <a href="/p/contact-us.html">contact me</a>.</p>
   <div class="athrBtn">
      <a class="button" href="#">
      <!--[ Button SVG ]-->
        <svg class="line" viewbox="0 0 24 24"><g transform="translate(2.850300, 2.150000)"><path d="M7.072,19.6583 C3.258,19.6583 1.15463195e-13,19.0813 1.15463195e-13,16.7713 C1.15463195e-13,14.4613 3.237,12.3603 7.072,12.3603 C10.886,12.3603 14.144,14.4413 14.144,16.7503 C14.144,19.0593 10.907,19.6583 7.072,19.6583 Z"></path><path d="M7.07200002,9.066 C9.57500002,9.066 11.605,7.036 11.605,4.533 C11.605,2.029 9.57500002,1.50990331e-14 7.07200002,1.50990331e-14 C4.56900002,1.50990331e-14 2.53897,2.029 2.53897,4.533 C2.53000002,7.027 4.54600002,9.057 7.04000002,9.066 L7.07200002,9.066 Z"></path><line x1="16.281" x2="16.281" y1="5.9791" y2="9.9891"></line><line x1="18.3273" x2="14.2373" y1="7.9839" y2="7.9839"></line></g></svg>
        <!--[ Button Text ]-->
        My Profile
      </a>
    </div>
  </div>
</div>
<h3 class="statsHeading">
  <!--[ Stats Heading ]-->
  Website Stats
</h3>
<!--[ Website Statistics ]-->
<div class="statsWebsite">
  <!--[ Posts Number ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
        <svg class="line" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(2.000000, 2.000000)"><path d="M10.0002,0.7501 C3.0632,0.7501 0.7502,3.0631 0.7502,10.0001 C0.7502,16.9371 3.0632,19.2501 10.0002,19.2501 C16.9372,19.2501 19.2502,16.9371 19.2502,10.0001"></path><path d="M17.5285,2.3038 L17.5285,2.3038 C16.5355,1.4248 15.0185,1.5168 14.1395,2.5098 C14.1395,2.5098 9.7705,7.4448 8.2555,9.1578 C6.7385,10.8698 7.8505,13.2348 7.8505,13.2348 C7.8505,13.2348 10.3545,14.0278 11.8485,12.3398 C13.3435,10.6518 17.7345,5.6928 17.7345,5.6928 C18.6135,4.6998 18.5205,3.1828 17.5285,2.3038 Z"></path><line x1="13.009" x2="16.604" y1="3.8008" y2="6.9838"></line></g></svg>
        <!--[ Stats Name ]-->
        Posts
      </div>
      <div class="statsNumber">     
<script src="/feeds/posts/default?alt=json-in-script&amp;callback=websiteCounts"></script>
      </div>
    </div>
  </div>
  
  <!--[ Comments Number ]-->
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <!--[ Change SVG Icon ]-->
        <svg class="line" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(2.000000, 2.000000)"><line x1="13.9394" x2="13.9484" y1="10.413" y2="10.413"></line><line x1="9.9304" x2="9.9394" y1="10.413" y2="10.413"></line><line x1="5.9214" x2="5.9304" y1="10.413" y2="10.413"></line><path d="M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z"></path></g></svg>
        <!--[ Stats Name ]-->
        Comments
      </div>
      <div class="statsNumber">
<script src="/feeds/comments/default?alt=json-in-script&amp;callback=websiteCounts"></script>
  </div>
    </div>
  </div>
</div>

• इस कोड़ को कॉपी करके कुछ एडिटिंग करनी होगी
• पेज की प्रोफ़ाइल को बदलने के लिए लाइन नंबर 24 पर जो कोड़ है नीचे दिया गया है (Image code) उसे अपनी किसी फोटो से बदलें

https://blogger.googleusercontent.com/img/a/AVvXsEgRzlS7txPGASS5SaL4E1xhku3pPB-G_9CYuBrMPPJcCQ5jXdaXfqcdXtwN4ja7uq4U0KJNX_VSgmo9G5MLKxvtcH1vFteKEJuZXIER1y-f1VxsfI5414nT7tNvSynNtdcRJyEK80QQSHgkk5D-_TyMEvCVEc3zf9bYZwk3u5OOk-WP0zH5enCw7qy3=s320

• अब आपको अपने ब्लॉग/वैबसाइट के बारे मे लिखना होगा जो की लाइन नंबर 26 मे है उसे हटा कर अपने ब्लॉग के बारे मे बताएं
• इस पेज मे contact us पेज का लिंक लगाना है तो अपने contact पेज का नाम “Contact us” ही रखें html कोड़ आपने आप उसे detect कर लेगा।

यूट्यूब पर डेमो देखे

नोट- ये पेज केवल Median-ui और सिमिलर theme की कोडिंग पर ही काम करेगा किसी और थीम पर सही से काम ना करे तो इसको प्रयोग करने से पहले अपने वैबसाइट के Demo पेज पे इसको बना कर देखें।

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]