- تسجيل الدخول إلى لوحة تحكم Blogger
- إنشاء صفحة جديدة
- كتابة عنوان الصفحة
- ثم نشر الصفحة.
- إعداد محتوى الصفحة
- مثال على محتوى جذاب لصفحة "نبذة عنا"
- ضبط التنسيق والتصميم
- استخدام التنسيقات المناسبة
- التحقق من التوافق مع قالب Plus UI
- نشر الصفحة وإضافتها إلى المدونة
- أهمية تحسين SEO لصفحة "نبذة عنا"
- الأسئلة الشائعة
- 1. لماذا تعتبر صفحة "نبذة عنا" مهمة لأي موقع؟
- 2. كيف أكتب محتوى مميزًا لصفحة "نبذة عنا"؟
- 3. هل يمكنني إضافة صور أو فيديو إلى صفحة "نبذة عنا"؟
- 4. كيف أجعل صفحة "نبذة عنا" متوافقة مع SEO؟
- 5. هل يجب تحديث صفحة "نبذة عنا" بانتظام؟
- خاتمة
تُعد صفحة نبذة عنا أو صفحة التعريف في المدونة عنصرًا أساسيًا في أي موقع إلكتروني أو مدونة، فهي تمثل تعريفًا عن الموقع وتساعد في بناء الثقة مع الزوار. سواء كنت تدير مدونة شخصية أو موقعًا تجاريًا، فإن تقديم قصة واضحة ومقنعة عنك أو عن علامتك التجارية يعزز مصداقيتك ويجذب المزيد من المتابعين.
 |
| دليل شامل لإنشاء صفحة نبذة عنا احترافية في قالب Plus UI Blogger |
في هذا الدليل، سنرشدك خطوة بخطوة لإنشاء صفحة نبذة عنا احترافية تتوافق بسلاسة مع قالب Plus UI Blogger، مما يضمن مظهرًا أنيقًا وأداءً متكاملاً مع تصميم مدونتك.
تسجيل الدخول إلى لوحة تحكم Blogger
لبدء إنشاء صفحة نبذة عنا، قم بتسجيل الدخول إلى حسابك في Blogger وانتقل إلى لوحة التحكم الخاصة بمدونتك. من هناك، يمكنك إدارة المحتوى، إنشاء صفحات جديدة، وإجراء التعديلات التي تعزز من تجربة المستخدم.
إنشاء صفحة جديدة
بعد دخولك إلى لوحة التحكم، اتبع الخطوات التالية لإنشاء صفحة نبذة عنا في Blogger أو صفحة من نحن Blogger، والتي ستساعدك في تقديم تعريف واضح عن الموقع.
- من القائمة الجانبية، انقر على "الصفحات".
- اضغط على زر "صفحة جديدة" لإضافة صفحة جديدة إلى مدونتك.
- سيتم توجيهك إلى محرر الصفحات حيث يمكنك البدء في إعداد صفحتك الخاصة.
كتابة عنوان الصفحة
في الجزء العلوي من المحرر، ستجد حقل "العنوان"، وهنا يمكنك إدخال عنوان مناسب مثل:
- "نبذة عنا"
- "من نحن"
- "تعرف علينا"
اختيار عنوان واضح يساعد الزوار في التعرف بسرعة على محتوى الصفحة ويجعلها أكثر وضوحًا في محركات البحث.
توجة إلى تحرير html وضع الاكواد البرمجية التالية بل ترتيب.
<!--[ About Author ]-->
<div class="aboutAuthor">
<div class="aboutCont">
<!--[ Author Profile Picture, Recommended Sizes: 1280px x 1280px, 720px x 720px below 30KB for fast loading, use transparent picture ]-->
<img
alt="alt_here"
src="YOUR IMAGE URL"
/>
<!--[ Author Description ]-->
<p>
WRITE AUTHOR DESCRIPTION HERE
</p>
<div class="athrBtn">
<a
class="button"
href="WRITE YOUR SOCIAL MEDIA PROFILE LINK"
target="_blank"
>
<!--[ Button SVG ]-->
<svg class="line" viewBox="0 0 24 24">
<g transform="translate(5.000000, 2.400000)">
<path
d="M6.84454545,19.261909 C3.15272727,19.261909 -8.52651283e-14,18.6874153 -8.52651283e-14,16.3866334 C-8.52651283e-14,14.0858516 3.13272727,11.961909 6.84454545,11.961909 C10.5363636,11.961909 13.6890909,14.0652671 13.6890909,16.366049 C13.6890909,18.6658952 10.5563636,19.261909 6.84454545,19.261909 Z"
/>
<path
d="M6.83729838,8.77363636 C9.26002565,8.77363636 11.223662,6.81 11.223662,4.38727273 C11.223662,1.96454545 9.26002565,-1.0658141e-14 6.83729838,-1.0658141e-14 C4.41457111,-1.0658141e-14 2.45,1.96454545 2.45,4.38727273 C2.44184383,6.80181818 4.39184383,8.76545455 6.80638929,8.77363636 C6.81729838,8.77363636 6.82729838,8.77363636 6.83729838,8.77363636 Z"
/>
</g>
</svg>
<!--[ Button Text ]-->
Author Profile
</a>
</div>
</div>
</div>
<h3 class="statsHeading">
<!--[ Stats Heading ]-->
Blog Stats
</h3>
<!--[ Website Statistics ]-->
<div class="statsWebsite">
<!--[ Page Views Count ]-->
<div class="statsCont">
<div class="stats">
<div class="statsName">
<!--[ Change SVG Icon ]-->
<svg class="line" viewBox="0 0 24 24">
<g transform="translate(2.000000, 4.000000)">
<path
d="M13.1643,8.0521 C13.1643,9.7981 11.7483,11.2141 10.0023,11.2141 C8.2563,11.2141 6.8403,9.7981 6.8403,8.0521 C6.8403,6.3051 8.2563,4.8901 10.0023,4.8901 C11.7483,4.8901 13.1643,6.3051 13.1643,8.0521 Z"
></path>
<path
d="M0.7503,8.0521 C0.7503,11.3321 4.8923,15.3541 10.0023,15.3541 C15.1113,15.3541 19.2543,11.3351 19.2543,8.0521 C19.2543,4.7691 15.1113,0.7501 10.0023,0.7501 C4.8923,0.7501 0.7503,4.7721 0.7503,8.0521 Z"
></path>
</g>
</svg>
<!--[ Stats Name ]-->
Total Visits
</div>
<div class="statsNumber v">
<!--[ Posts Number (automatically updates) ]-->
<span class="pu-views" data-id="WebsiteStats" data-text="0"></span>
</div>
</div>
</div>
<!--[ Posts Number ]-->
<div class="statsCont">
<div class="stats">
<div class="statsName">
<!--[ Change SVG Icon ]-->
<svg class="line" viewBox="0 0 24 24">
<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
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"
/>
<line x1="13.009" y1="3.8008" x2="16.604" y2="6.9838" />
</g>
</svg>
<!--[ Stats Name ]-->
Posts
</div>
<div class="statsNumber p">0</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">
<g transform="translate(2.000000, 2.000000)">
<line x1="13.9394" y1="10.413" x2="13.9484" y2="10.413"></line>
<line x1="9.9304" y1="10.413" x2="9.9394" y2="10.413"></line>
<line x1="5.9214" y1="10.413" x2="5.9304" y2="10.413" />
<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"
/>
</g>
</svg>
<!--[ Stats Name ]-->
Comments
</div>
<div class="statsNumber c">0</div>
</div>
</div>
</div><style>
/* To change Header Subtitle */
.headH .headSub{
max-width:none
}
.headH .headSub::before{
content:"About"
}
/* 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;
font-family:var(--fontBa)
}
.drK .aboutAuthor .aboutCont{
background:var(--darkBs);
box-shadow:0 10px 40px rgba(0,0,0,.2)
}
.drkM .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:var(--darkBs);
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:var(--darkT);
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;
font-family:var(--fontBa)
}
.statsCont .statsName svg{
margin-right:7px
}
.statsCont .statsNumber{
font-family:var(--fontB);
font-size:30px;
margin-top:6px;
font-weight:normal
}
.statsNumber.v >span::before{
content:attr(data-text)
}
.drK .statsCont{
background-color:var(--darkBs);
box-shadow:0 5px 20px rgba(0,0,0,.2)
}
@media screen and (min-width:641px){
.aboutAuthor .aboutCont{
max-width:97%
}
.statsWebsite{
flex-direction:row
}
.statsCont{
max-width:46%;
margin:12px
}
}
/* To change Profile background */
/* Light Mode */
.aboutAuthor .aboutCont img{
background-color:#ffeaef
}
/* Dark Mode */
.drK .aboutAuthor .aboutCont img{
background-image:linear-gradient(to top right,#363636,#717171)
}
/*]]>*/
</style><script>
function statsPst(json){var el = qSel('.statsNumber.p');el.innerHTML = '' + parseInt(json.feed.openSearch$totalResults.$t,10) + ''};
function statsCmt(json){var el = qSel('.statsNumber.c');el.innerHTML = '' + parseInt(json.feed.openSearch$totalResults.$t,10) + ''};
if(isPrivateBlog!='true'){
Defer.js(blogUrl+'feeds/posts/default?alt=json-in-script&callback=statsPst', 'sts-pst');
Defer.js(blogUrl+'feeds/comments/default?alt=json-in-script&callback=statsCmt', 'sts-cmt');
};
</script>ثم نشر الصفحة.
بعد الانتهاء من المحتوى، انقر على زر "نشر" لإظهار صفحة "من نحن" على مدونتك. تهانينا! لقد أنشأت صفحتك بنجاح.
إعداد محتوى الصفحة
الآن، حان وقت كتابة المحتوى الفعلي لصفحة نبذة عنا أو صفحة التعريف في المدونة. يجب أن يكون المحتوى واضحًا ويعكس طبيعة عملك أو رسالتك. يجب أن يتضمن هذا القسم العناصر التالية:
- تعريف موجز: قدم نفسك أو شركتك بكلمات بسيطة ومباشرة.
- القصة والرؤية: كيف بدأت رحلتك؟ وما الذي يميزك عن الآخرين؟
- القيم والمبادئ: ما المبادئ التي تستند إليها علامتك التجارية أو مدونتك؟
- دعوة للتفاعل: حفّز الزائرين على التواصل معك من خلال روابط حسابات التواصل الاجتماعي أو البريد الإلكتروني.
مثال على محتوى جذاب لصفحة "نبذة عنا"
"مرحبًا بك في [اسم مدونتك]! نحن فريق شغوف بمشاركة المعرفة والخبرات في مجال [مجالك]. تأسست هذه المدونة برؤية واضحة: تقديم محتوى قيم يساعدك في [هدف المدونة]. نحن نؤمن بأن [قيمتك الأساسية] هي مفتاح النجاح، ونسعى دائمًا لتقديم محتوى مميز يجمع بين الفائدة والمتعة. تابعنا في رحلتنا وكن جزءًا من مجتمعنا!"
ضبط التنسيق والتصميم
استخدام التنسيقات المناسبة
لجعل الصفحة أكثر جاذبية وسهولة في القراءة، تأكد من استخدام:
- العناوين الفرعية (H2 و H3) لتقسيم المحتوى بوضوح.
- القوائم النقطية والمرقمة لعرض المعلومات بأسلوب منظم.
- الصور الجذابة لإضفاء طابع بصري مميز على الصفحة.
التحقق من التوافق مع قالب Plus UI
يتميز قالب Plus UI Blogger بتصميم عصري، لذا تأكد من تنسيق الصفحة بحيث تتناسب مع الخطوط والألوان المستخدمة في القالب للحصول على مظهر متناسق واحترافي.
نشر الصفحة وإضافتها إلى المدونة
بعد الانتهاء من إعداد محتوى الصفحة، قم بمراجعته جيدًا، ثم:
- اضغط على زر "نشر" في الزاوية العلوية اليمنى من المحرر.
- انتقل إلى "التخطيط" في لوحة التحكم.
- أضف رابط صفحة "نبذة عنا" إلى القائمة الرئيسية أو التذييل لضمان سهولة وصول الزوار إليها.
أهمية تحسين SEO لصفحة "نبذة عنا"
لجعل صفحة نبذة عنا أو تعريف عن الموقع أكثر ظهورًا في محركات البحث، اتبع هذه النصائح المهمة لتحسين SEO لصفحة من نحن Blogger:
- استخدم الكلمات المفتاحية ذات الصلة مثل: "صفحة نبذة عنا"، "قالب Plus UI"، "إنشاء صفحة من نحن"، "بناء الثقة مع الجمهور".
- تأكد من أن العنوان والوصف يتضمنان كلمات مفتاحية طبيعية لجذب الزيارات من Google.
- أضف روابط داخلية إلى صفحات أخرى في مدونتك لتحسين التنقل داخل الموقع.
الأسئلة الشائعة
1. لماذا تعتبر صفحة "نبذة عنا" مهمة لأي موقع؟
لأنها توفر للزائرين معلومات عن هوية المدونة أو الشركة، مما يعزز المصداقية ويبني الثقة.
2. كيف أكتب محتوى مميزًا لصفحة "نبذة عنا"؟
لإنشاء صفحة تعريف عن الموقع مميزة أو صفحة من نحن Blogger احترافية، تأكد من أن المحتوى يعكس هوية الموقع، ويحتوي على قصة جذابة، ويستخدم الكلمات المفتاحية المناسبة لتحسين ظهوره في محركات البحث.
3. هل يمكنني إضافة صور أو فيديو إلى صفحة "نبذة عنا"؟
نعم، يفضل استخدام الصور والفيديوهات لإضفاء لمسة احترافية وإبراز هوية العلامة التجارية.
4. كيف أجعل صفحة "نبذة عنا" متوافقة مع SEO؟
باستخدام الكلمات المفتاحية المناسبة، العناوين الواضحة، والروابط الداخلية لتعزيز تجربة المستخدم وتحسين الظهور في نتائج البحث.
5. هل يجب تحديث صفحة "نبذة عنا" بانتظام؟
نعم، يُفضل تحديثها كل فترة لإضافة معلومات جديدة أو تحسين الأسلوب بما يتماشى مع تطور المحتوى الخاص بك.
خاتمة
إن إنشاء صفحة "نبذة عنا" احترافية ليس مجرد إضافة شكلية، بل هو عنصر أساسي يعكس هوية موقعك ويبني جسور التواصل مع زوارك. من خلال اتباع هذا الدليل، ستتمكن من تصميم صفحة مميزة تعبر عنك بوضوح وتعزز ثقة جمهورك في علامتك التجارية. لا تتردد في تحسين الصفحة باستمرار وإضافة أي تحديثات تعكس تطور مدونتك أو نشاطك.
الآن، حان دورك! قم بإنشاء صفحة "نبذة عنا" مميزة، وشارك قصتك مع جمهورك، ودع مدونتك تتألق!
via IFTTT
