كود إنشاء عناصر واجهة مستخدم وشعارات رائعة للمدونين

 هذه أداة مصممة لتوضع في الشريط الجانبي لمدونتك. فكر في الأمر، إذا قام شخص ما بزيارة مدونتك ورأى هذه الأداة، ألن يكون ذلك رائعًا؟ دعونا نرى كيفية القيام بذلك أدناه.

الخطوة 1: قم بتسجيل الدخول إلى المدونة وانتقل إلى قسم التخطيط

الخطوة 2: ثم الصق الكود التالي في أداة HTML/Javascript التي تريد عرضها:

<style>#h { /* color: white; */
/* font-weight: 400; */
display: block;
font-size: 30px;
/* margin: 0 0 5px; */
letter-spacing: 5px;}
.testimoni {font-family: 'Roboto', Arial, sans-serif; position: relative;float: left;overflow: hidden;margin: 10px 1%; min-width: 230px; max-width: 315px; width: 100%;color: #ffffff;text-align: left; line-height: 1.4em;background-color: #d6dbff;padding-top: 120px; border-radius: 10px;}
.testimoni * {-webkit-box-sizing: border-box; box-sizing: border-box;}
.testimoni img { max-width: 100%;vertical-align: top; opacity: 0.85;}
.testimoni .pic {width: 100%; background-color: #2961ff; padding: 25px; position: relative;}
.testimoni .pic:before {position: absolute;content: '';bottom: 100%;left: 0;width: 0;height: 0;border-style: solid;border-width: 55px 0 0 400px;border-color: transparent transparent transparent #2961ff;}
.testimoni .profile {border-radius: 50%; position: absolute;bottom: 100%;left: 25px;z-index: 1; max-width: 90px; opacity: 1;box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);}
.testimoni h3 {font-size: 1.3em;margin: 25px;font-weight: 300;position: absolute; top: 0;right: 0; text-align: right;color: black;}
.testimoni h3 span {display: block; font: 700 14px Roboto Condensed;color: black;}
.testimoni p {margin: 0 0 10px;padding: 0 0 30px;letter-spacing: 1px;font-style: italic;font-weight: 300;}
.testimoni p:after {font-family: 'FontAwesome';content: "\201C";position: absolute;font-size: 180px;line-height: 1em;color: #3a40ff;font-style: normal;content: "\201D";right: 20px;bottom: -105px;}</style>
<div class="testimoni">
    <div class="pic"><img src="https://i.imgur.com/9V3auua.jpg" alt="Profile" title="Profile" class="profile" />
        <p>ابحث دائمًا عن أفضل الأشياء في الحياة لمشاركتها معك.</p>
    </div>
    <h3>aweywashk<span>مصمم الويب</span></h3>
</div>

الخطوة 3: قم بتحرير المعلومات كما تريد ثم احفظ الأداة المساعدة وشاهد النتائج.

من السهل جدًا إنشاء عنصر واجهة مستخدم وشعار رائع للمدونين، أليس كذلك؟ حظ سعيد!