اضافة من نحن بطريقه جديده 2025

مرحبًا بكم من جديد 

إذا كنت تبحث عن صفحة أنيقة حول المؤلف للمدون، فإن هذه التدوينة مخصصة لك فقط.

اضافة من نحن بطريقه جديده 2025

صفحة  أنيقة عن المؤلف

يمكنك مشاهدة العرض التوضيحي هنا⤵

   

معاینه

الخطوة 1: قم بتسجيل الدخول إلى لوحة تحكم Blogger الخاصة بك.

الخطوة 2: إنشاء صفحة جديدة.

الخطوة 3: انقر الآن على أيقونة القلم الرصاص في الزاوية اليسرى العليا وانتقل إلى عرض HTML من عرض التأليف.

الخطوة 4: الآن قم بنسخ الأكواد التالية ولصقها.

قم بتعديل النص وإضافة وصف موقعك وعنوان

  

  <div class="Abt-pg">
        <img alt="Tecky AaryaN" class="Abt-img" src="https://blogger.googleusercontent.com/img/a/AVvXsEhsw7PUP_5frj-mDVttDrduB9YN2e3b1OtO_UswtTwFc2dURIs_nY3qlZEkXNhwguwTEiWc1Fc_MsFP0mqoKOuFfiK0WxvV8dt5cUIi4lko3m_myOE_OhwXN9q4jQhALElk5aOpDIQqmhRfYA2FzhS1Rp0JUdHrxlFpwaY-qpMIUpZyfN6vHTWzJfd-jWQ=s1453" title="Tecky AaryaN" />
      </div>

      <style>
        @import url("https://fonts.googleapis.com/css?family=Open+Sans|Rock+Salt|Shadows+Into+Light|Cedarville+Cursive");
        .Abt-pg {
          text-align: center;
        }

        .Abt-img {
          text-align: center;
          width: 180px;
          height: 180px!important;
          margin: 30px auto!important;
          animation: ripple 0.6s linear infinite;
          border-radius: 100px!important;
        }

        @keyframes ripple {
          0% {
            box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.1), 0 0 0 20px rgba(255, 0, 0, 0.1), 0 0 0 40px rgba(255, 0, 0, 0.1), 0 0 0 60px rgba(255, 0, 0, 0.1);
          }

          100% {
            box-shadow: 0 0 0 20px rgba(255, 0, 0, 0.1), 0 0 0 40px rgba(255, 0, 0, 0.1), 0 0 0 60px rgba(255, 0, 0, 0.1), 0 0 0 80px rgba(255, 0, 0, 0.1);
          }
        }

        .st-nm {
          color: #555eed;
          word-spacing: -8px;
        }

        .pTtl {
          display: none;
        }

        .pBd h1 {
          margin: 1.4em 0 20px;
        }

        .signature {
          font-family: "Cedarville Cursive", cursive;
          font-size: 1.4em;
        }

        .Abt-footer {
          margin-top: 65px!important;
          font-style: italic;
          font-family: cursive;
        }
      </style>

      <style>
        /*<![CDATA[*/
        /* About Author Page=*/
        .aAthrP {
          font-size: 0.9rem;
          color: #08102b;
        }

        .aAthrP svg {
          width: 18px;
          height: 18px;
          fill: none!important;
          stroke: #fefefe;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-width: 1.5;
          margin-right: 7px;
        }

        .webSts svg {
          stroke: #08102b;
        }

        .aAdm {
          padding: 60px 0 20px 0;
        }

        .aAdm .aAdmC {
          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;
        }

        .aAdmC img {
          position: absolute;
          top: -60px;
          background-color: #ffeaef;
          width: 120px;
          height: 120px;
          box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
          padding: 0;
          border: 7px solid #fff;
          border-radius: 50%;
          pointer-events: none;
        }

        .aAdmD {
          text-align: center;
        }

        .aAdmD p {
          margin: 0;
          line-height: 1.7em;
        }

        .aAdmB {
          text-align: center;
          position: absolute;
          bottom: 30px;
          left: 0;
          right: 0;
        }

        .aAdmB .btn {
          display: inline-flex;
          align-items: center;
          margin: 0;
          padding: 10px 15px;
          outline: 0;
          border: 0;
          border-radius: 50px;
          line-height: 20px;
          color: #fefefe;
          background-color: #ff0000;
          font-size: 13px;
          font-family: inherit;
          text-decoration: none;
          white-space: nowrap;
          overflow: hidden;
          max-width: 100%;
          cursor: pointer;
          transition: all 0.3s ease;
        }

        .aAdmB .btn:hover {
          opacity: .8;
          transform: scale(0.97);
        }

        .webStsH {
          margin: 15px auto;
          text-align: center;
          font-size: 1.7rem;
          font-weight: 700;
          font-family: inherit;
        }

        .webSts {
          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin: 12px auto;
        }

        .webStsC {
          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;
        }

        .webStsC .stats {
          height: 80px;
          width: 200px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          margin: 0 35px;
        }

        .webStsC .statsNa {
          display: inline-flex;
          align-items: center;
          font-size: 16px;
        }

        .webStsC .statsNu {
          font-family: inherit;
          font-size: 30px;
          margin-top: 6px;
          font-weight: normal;
        }

        .drkM .aAthrP {
          color: #fefefe;
        }

        .drkM .aAdmC {
          background-color: #252526;
          box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
        }

        .drkM .aAdmC img {
          background-image: linear-gradient(to top right, #363636, #717171);
          border-color: #252526;
          box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
        }

        .drkM .aAdmB .btn {
          background-color: #ff0000;
        }

        .drkM .webStsC {
          background-color: #252526;
          box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
        }

        .drkM .webSts svg {
          stroke: #fefefe;
        }

        @media screen and (min-width: 641px) {
          .aAdm .aAdmC {
            max-width: 97%;
          }

          .webSts {
            flex-direction: row;
          }

          .webStsC {
            max-width: 46%;
            margin: 12px;
          }
        }
        /*]]>*/
      </style>

      <script>
        /*<![CDATA[*/
        function webStats(json) {
          document.write(parseInt(json.feed.openSearch$totalResults.$t, 10))
        }
        /*]]>*/
      </script>

      <!--[ About Author Page ]-->
      <div class="aAthrP">
        <!--[ About Author ]-->
        <div class="aAdm">
          <div class="aAdmC">
            <!--[ Author Description ]-->
            <div class="aAdmD">
              <p>Our Website Provides You Information About Blogging, Tips &amp; Tricks, Blogger Widgets, Free Tools To Set Up Your Site And Much More..</p>
            </div>
            <!--[ Author Button ]-->
            <div class="aAdmB">
              <a class="btn" href="#">Contact Me</a>
            </div>
          </div>
        </div>
      </div>
            
      </div>
      <div class="clear"></div>
    </div>
  </div> 

 

الخطوة 5: الآن انقر فوق "حفظ" إذا كنت قد اتبعت جميع الخطوات. 

 خاتمة 

 أتمنى أن تكون قد نجحت في إضافة صفحة "حول" الخاصة بك. إذا واجهت أي مشكلة في أي قسم أو كان لديك أي سؤال، فاسألنا في مربع التعليقات.

الانتقال إلى الرابط المطلوب

معلومات الكاتب

مصمم

اديب القربعي كنز المعلومات

اضافات اكواد قوالب تحسين محركات البحث مدونات بلوجر