📌 يُعتبر صندوق الكاتب أو ما يُعرف بـ [Author Box] من أهم الإضافات في المدونات الحديثة، لأنه يعطي للزائر فكرة واضحة عن صاحب الموقع أو الكاتب، ويُضفي طابعًا احترافيًا على المدونة ويزيد من الثقة و المصداقية.

بدل أن يظهر المحتوى بدون هوية، يقوم هذا الصندوق بعرض معلومات الكاتب مثل: الاسم، الصورة، الروابط الاجتماعية، الموقع، البريد الإلكتروني، وغيرها بشكل منظم وجذاب.

⭐ أهمية صندوق الكاتب في المدونة:

إضافة هذا الصندوق ليست مجرد شكل جمالي فقط، بل له فوائد مهمة:

- تعزيز ثقة الزائر في محتوى المدونة

- إبراز هوية صاحب الموقع بشكل احترافي

- زيادة التفاعل عبر الروابط الإجتماعية

- تحسين شكل المقالات و تجربة المستخدم

- دعم السيو (SEO) عبر تحسين E-E-A-T (الخبرة والموثوقية)

⚙️ طريقة إضافة صندوق الكاتب في بلوجر خطوة بخطوة:

اتبع هذه الخطوات بدقة:

- أولا: الدخول إلى لوحة تحكم بلوجر

- تانيا: التوجه إلى قسم التخطيط (Layout)

- ثالتا: إختيار المكان المناسب لظهور الأداة

- رابعاً: الضغط على إضافة أداة (Gadget)

- خامسا: اختيار HTML/JavaScript

- سادسا: لصق الكود داخل الأداة

- سابعا: الضغط على حفظ

💻 الكود المخصص و الكامل لصندوق الكاتب جاهز للنسخ:

ضع هذا الكود داخل أداة HTML/JavaScript:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
<style>
/*-------------------- font --------------------*/
@font-face {
font-family: "Ta3alamFont";
font-weight: normal;
font-style: normal;
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot);
src: url(https://dl.dropboxusercontent.com/s/l0mqm6g2vwflxp2/Ta3alamFont.eot?#iefix) format('embedded-opentype'),
url(https://dl.dropboxusercontent.com/s/gjkkuvnfze5ii1l/Ta3alamFont.woff) format('woff'),
url(https://dl.dropboxusercontent.com/s/mjj8mvkq7jgihhn/Ta3alamFont.ttf) format('truetype');
}
/*-------------------- #font# --------------------*/

.admin{
width:300px;
height:480px;
background:#343434;
border:1px solid #131313;
margin:-1px;
border-radius:4px;
}

.cover{
height:120px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8L1aYBlWKcLbaNVQXUI-85tVFpqyoQopvxcGbnrRv7_VB57tljufkojVnGWvk5azmqM2JNOlBIfc91qRf-0SF9sT8M5R3Mx-qiBk4awnc8JkIPjUpklWcoRV3AeTmgoyr7YaxSYwmERwt/s1600-r/Space-Desktop.jpg) no-repeat;
border-bottom:1px solid #868282;
background-size:300px;
box-shadow:0px -140px 310px -100px #000 inset;
}

.profile{
width:120px;
height:120px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJc8wvkGCHgOYR7P8Tg3pKcY1-ONRblAwhUKjj59OJZVorQbb9b6VY-_9ZlyLJM8tRA8SMGoBBeLMDOFjzEBoJhRn_SICXgve9wOJTAEA0ZVm64rvkRNprwvtoXecghR465ogVmOPNIw/s640/7eef4a89e2bd1+%25283%2529.jpg) no-repeat;
border:4px solid #fff;
margin:-100px auto 0px;
border-radius:10px;
box-shadow:0px 0px 15px -5px #000,0px 0px 60px -10px #000 inset;
background-size:120px;
}

.form-info{
border-bottom:1px solid #494949;
border-top:1px solid #494949;
margin-top:10px;
background:#2A2A2A;
}

.form-info ul{margin:0;padding:0px;}
.form-info ul li{
display:block;
padding:0px 25px;
margin:2px 0px;
border-bottom:1px solid #343434;
height:30px;
}

.form-info ul li img{
display:block;
float:right;
padding:5px;
height:18px;
width:18px;
}

.form-info ul li a{
display:block;
float:right;
height:20px;
padding:5px;
color:#9E9E9E;
font-family:Ta3alamFont;
}

.form-info ul li a:hover{color:#fff;}

.form-contact{
border-bottom:1px solid #494949;
border-top:1px solid #494949;
margin-top:10px;
background:#2A2A2A;
}

.form-contact ul{margin:0;padding:0px;}

.form-contact ul li{
display:block;
padding:0px 25px;
margin:2px 0px;
border-bottom:1px solid #343434;
height:30px;
}

.form-contact ul li img{
display:block;
float:left;
padding:5px;
height:18px;
width:18px;
}

.form-contact ul li a{
display:block;
float:left;
height:20px;
padding:5px;
color:#9E9E9E;
font-family:Ta3alamFont;
}

.form-contact ul li a:hover{color:#fff;}

.form-socail{text-align:center;}

.form-socail i{
color:#9E9E9E;
font-size:32px;
padding:5px;
}

.form-socail i:hover{color:#fff;}
</style>

<div class="admin">
<div class="cover"></div>
<div class="profile"></div>

<div class="form-info">
<ul>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivQg95dE8BH5POhoNfs3_wv_T8vXQYd2GICPlSPRNDrv_N8xM83QkdBN8WQ8VGpxkf289naVUZWTdEVx_2J05JwJxRTgfyA9G2ICwfOW4l-CZa_-8gtVkGORLRazPn50-ygbgv3w8jrojk/s1600-r/users81.png"/><a href="https://www.facebook.com/AbDoUrAbIh.TN1">عبد ربه تحتح</a></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf7eITEBd4ZO1aafSCYDxf5EX0Up_gOMnTsvSNHo52jps4XHoCKtAPBRAjx00gX4nvSoXjHOP7xuilWZWVOuoQwYMQ4MXONxL_CbrQa7mVQZXz1Nlah0AD1BnZfV2Hiy2HnFThFCOZkvnD/s1600-r/suitcase57.png"/><a href="https://abdourabih.blogspot.com/">مدونة تكنو اون لاين</a></li>

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ucDe1N8ZJeyJK5_usNgvzFUdvrAD25LbYQVyBlssrdb8GqlNa5sXlSrfNzJZ3pOtKQ-QOeXVsCH9CX0jkzMxpRwix5HdCywJdLaaLGGJi38fx_lzWvAArMF_Sca6VpjtikklGFb9-9xQ/s1600-r/pin71.png"/><a href="https://www.google.com/maps/place/...">الدارالبيضاء - المغرب</a></li>
</ul>
</div>

</div>

✏️ الآن طريقة تعديل الأداة حسب رغبتك:

بعد إضافة الكود، ننتقل إلى طريقة تعديل الأداة وتغيير الروابط أو المحتوى الخاص بها عبر الضغط على خيار تحرير.

قم باستبدال الرابط التالي برابط الصورة أو الخلفية التي تريد استخدامها.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8L1aYBlWKcLbaNVQXUI-85tVFpqyoQopvxcGbnrRv7_VB57tljufkojVnGWvk5azmqM2JNOlBIfc91qRf-0SF9sT8M5R3Mx-qiBk4awnc8JkIPjUpklWcoRV3AeTmgoyr7YaxSYwmERwt/s1600-r/Space-Desktop.jpg

ملاحظه:
هذه الخطوة اختيارية، لكنها تمنح الأداة لمسة خاصة بك. الرابط الموجود داخل cover: مخصص لصورة الخلفية فقط، اعني لك الاختيار باستبدالها

و الآن الرابط التاني: استبدل الرابط أدناه و هو رابط صورة الكاتب داخل profile الى رابط صورتك الشخصية التي تريدها :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJc8wvkGCHgOYR7P8Tg3pKcY1-ONRblAwhUKjj59OJZVorQbb9b6VY-_9ZlyLJM8tRA8SMGoBBeLMDOFjzEBoJhRn_SICXgve9wOJTAEA0ZVm64rvkRNprwvtoXecghR465ogVmOPNIw/s640/7eef4a89e2bd1+%25283%2529.jpg

- ثم عدّل إسم الكاتب وإسم المدونة داخل الروابط.

- و كذلك قم بتغيير روابط وسائل التواصل الإجتماعي.

- و أضف بريدك الإلكتروني و موقعك و عنوانك و تاريخ ميلادك الحقيقي.

ملاحظه: في الايقونات الخاصة بالشبكات الإجتماعية أسفل الإضافة غير الروابط فقط.

خلاصة:

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

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

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

بقلم عبد ربه تحتح

عبد ربه تحتح، مغربيّ الهوية، شغوف بالمعرفة والتطور، يجمع بين التعلّم المستمر والانفتاح على مجالات التقنية الحديثة. متخصص في علوم المعلوميات، يحمل تكوينًا تقنيًا متخصصا في التنمية المعلوماتية، إلى جانب دبلوم في التدبير والتسيير، ما منحه قاعدة صلبة تجمع بين الجانب التقني والإداري. يمتد اهتمامه لعوالم البرمجة، التصميم الجرافيكي، تطوير المواقع، والتسويق الرقمي، مع حضور طويل في مجال التدوين الإلكتروني يقارب 15 سنة من التجربة والممارسة. نشط على منصات التواصل الاجتماعي مثل فيسبوك وتويتر، ويواكب باستمرار جديد التكنولوجيا والتحولات الرقمية. يؤمن بأن المعرفة ليست مجرد اكتساب مهارات، بل أسلوب حياة ورؤية نحو المستقبل، وأن التغيير الحقيقي يبدأ من الإرادة ثم العمل المستمر. يشتغل كمصمم ومطوّر ومسوق إلكتروني، ويجمع بين الإبداع التقني والفهم الاستراتيجي لبناء حضور رقمي فعّال ومؤثر. بأسلوبه الخاص، يدمج بين الخبرة والتجربة والشغف، ليصنع لنفسه مسارًا متوازنًا في عالم رقمي سريع التطور، حيث لا مكان للثبات، بل للتجدد والتعلّم المستمر وصناعة الفرص.