√ اضافة تعريف الكاتب بشكل احترافي لمدونات بلوجر

اضافة تعريف الكاتب بشكل احترافي لمدونات بلوجر

ابراهيم زكاغ

6/16/2014

اضافة تعريف الكاتب لمدونات بلوجر أو نبذة حول كاتب التدوينة أو الموضوع هي أداة تساعد زوار المدونة على التعرف على المدون، مما يزيد من ثقتهم فيما يقرؤونه.

توفر مدونتك على هذه الاداة ستساعدك في الحصول على المزيد من المتابعين على الشبكات الاجتماعية. هذا الموضوع يقدم طريقة اضافة هذه الاداة بتصاميم مميزة واحترافية يمكنك الاختيار من بينها.

يمكن إدراج الأداة في:

بداية المواضيع

نهاية المشاركات

أو في القسم الجانبي للمدونة.

اضافة تعريف كاتب التدوينة لمدونات بلوجر

التصميم الأول:

الاضافة تتكون من أربعة عناصر:

1 - إسم الكاتب أو المدون

2 - صورة المدون

3 - نبذة حول المدون

4 - روابط ملفات المدون على الشبكات الاجتماعية

تعريف الكاتب او المدون اسفل المواضيع لمدونات بلوجر

لاضافة هذه الاداة على مدونتك، قم باتباع الخطوات التالية:

1 - من واجهة التحكم في المدونة قم بالنقر على قالب ثم تحرير html

2 - قم بالنقر وسط كود القالب في اي مكان ثم Ctrl+F من لوحة المفاتيح للبحث عن <data:post.body/> :

ملاحظة: إذا كان هذا الكود موجود أكثر من مرة واحدة جرب الثاني أو جربها كلها حتى تجد الكود المقصود.

تحت هذا الكود اضف الكود التالي:

<style type='text/css'>
.btnt-about-author-containter{ background: #eee; border-radius: 10px 10px 10px 10px; margin-bottom: 24px; padding: 6px; font-family: Georgia,"Times New Roman",Times,serif; font-size: 18px; font-style: italic; line-height: 26px; text-align: center; display: inline-block; }
.btnt-about-author-containter p{ margin:0; padding:5px;text-align: right; font-size: 14px;}
.btnt-about-author-containter .btnt-heading { margin:0; padding:0; font-size:23px; }
.btnt-about-author-text ul li {
float: right;
list-style: none;
}
.btnt-about-author-text ul li a {
margin-left: 5px;
padding: 8px;
margin: 0;
font-size: 14px;
}
.btnt-about-author-text h4 {
font-family: Droid Arabic Kufi;
color: #820707;
}
.btnt-about-author-text {
float: left;
width: 430px;
text-align: right;
padding-right: 10px;
}
.btnt-about-author-pic{background: #eee;
background: #eee;
height: 100px;
width: 100px;
padding: 18px 0 0 0;
float: right;}
.btnt-about-author-text h5 {
padding: 0;
margin: 0;
font-family: Droid Arabic Kufi;
}
btnt-about-author-text ul li a {
font-size: 14px;
}
.btnt-about-author-pic img{ border-radius: 50%!important;
height: 100px;
width: 100px;
float: right; }
content-inner div.at-h6 {
text-align: right;
margin: 0;
padding: 0 0 3px;
font-size: 19px;
color: #666;
cursor: default;
font-family: Droid Arabic Kufi;
}
.container h4 {
font-size: 16px;
font-family: Droid Arabic Kufi;
}
.container{
width: 100%;
margin-top: 30px;
}
</style>

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == "إسم المدون"'>
<div class='btnt-about-author-containter'>
<div class='btnt-about-author-pic'>
<img alt='' class='avatar avatar-100 photo' height='100' src='رابط الصورة' width='100'/>
</div>
<div class='btnt-about-author-text'>
<h4>إسم المدون</h4>
<p>تقديم حول المدون</p>
<h5>لمتابعتي أو التواصل معي:</h5>
<ul>
<li><a href='https://twitter.com/bzouggagh' target='_blank'>تويتر</a></li>
<li><a href='https://www.facebook.com/brahim.zouggagh' target='_blank'>فيس بوك</a></li>
<li><a href='https://plus.google.com/u/0/+BrahimZouggagh' target='_blank'>جوجل+</a></li>
<li><a href='https://www.linkedin.com/in/brahimzouggagh' target='_blank'>لينكد ان</a></li>
</ul>
</div></div>
</b:if></b:if>

إعدادات الاضافة

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


<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == "إسم المدون"'>
<div class='btnt-about-author-containter'>
<div class='btnt-about-author-pic'>
<img alt='' class='avatar avatar-100 photo' height='100' src='رابط الصورة' width='100'/>
</div>
<div class='btnt-about-author-text'>
<h4>إسم المدون</h4>
<p>تقديم حول المدون</p>
<h5>لمتابعتي أو التواصل معي:</h5>
<ul>
<li><a href='https://twitter.com/bzouggagh' target='_blank'>تويتر</a></li>
<li><a href='https://www.facebook.com/brahim.zouggagh' target='_blank'>فيس بوك</a></li>
<li><a href='https://plus.google.com/u/0/+BrahimZouggagh' target='_blank'>جوجل+</a></li>
<li><a href='https://www.linkedin.com/in/brahimzouggagh' target='_blank'>لينكد ان</a></li>
</ul>
</div></div>
</b:if></b:if>

التصميم الثاني

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

لكن بمجرد مرور سهم فأرة الحاسوب من فوق الصورة أو الإسم يبدأ الجانب السحري للأداة بالظهور ليصبح:

إضافة لمحة عن الكاتب لمدونات بلوجر

مشاهدة مثال

لإضافة أداة حول الكاتب لمدونتكم اتبعوا الخطوات التالية:

1- بعد الدخول لبلوجر من منصة مدونتكم أنقروا على القالب ثم تحرير HTML

2- Ctrl+F من لوحة المفاتيح للبحث عن الكود التالي:

]]></b:skin>

3- وفوقه مباشرة أضيفو الكود التالي:

/* profile start by FOLFOLY.com / #container { margin: 3px auto 3px; width: 200px; text-align: right; float: right; } #container .user { text-align: right; } #user { position: relative; height: 32px; padding: 8px 12px 8px 8px; display: inline-block; vertical-align: baseline; zoom: 1; display: inline; vertical-align: auto; } #user img { float: right; width: 50px; height: 50px; margin-right: 8px; margin-bottom: 5px; } #user h5 { float: right; line-height: 16px; font-size: 12px; font-weight: bold; color: black; text-shadow: 0 1px rgba(0, 0, 0, 0.4); } #user h5 small { display: block; font-size: 9px; font-weight: bold; text-transform: uppercase; color: black; color: rgba(0, 0, 0, 0.6); text-shadow: 0 1px rgba(255, 255, 255, 0.3); } #user:hover ul { padding: 4px 0 6px; visibility: visible; opacity: 1; } #user ul { list-style-type: none; visibility: hidden; opacity: 0; position: absolute; bottom: 100%; right: 0; right: 0; background: #d9e3fa; border: 1px solid; border-color: #777 #6c6c6c #666; border-radius: 5px; -webkit-transition: 0.2s ease-out; -moz-transition: 0.2s ease-out; -o-transition: 0.2s ease-out; transition: 0.2s ease-out; -webkit-transition-property: opacity, padding, visibility; -moz-transition-property: opacity, padding, visibility; -o-transition-property: opacity, padding, visibility; transition-property: opacity, padding, visibility; background-image: -webkit-linear-gradient(top, #eef3fe, #d9e3fa); background-image: -moz-linear-gradient(top, #eef3fe, #d9e3fa); background-image: -o-linear-gradient(top, #eef3fe, #d9e3fa); background-image: linear-gradient(to bottom, #eef3fe, #d9e3fa); -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.1); } #user ul:before, .user ul:after, .user li:first-child:after { content: ''; display: block; position: absolute; right: 15px; width: 0; height: 0; border: 7px outset transparent; } #user ul:before { bottom: -14px; border-top: 7px solid #555; } #user li:first-child:after { bottom: -13px; border-top: 7px solid white; } #user ul:after { bottom: -12px; border-top: 7px solid #d9e3fa; } #user li { padding: 0 12px; font-size: 11px; color: #838ca2; text-shadow: 0 1px white; } #user li.sep { margin-top: 4px; padding-top: 4px; border-top: 1px solid #b4bbce; -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px rgba(255, 255, 255, 0.6); } #user li a { display: block; position: relative; margin: 0 -13px; padding: 0 20px 0 12px; color: #313a4f; text-decoration: none; border: 1px solid transparent; } #user li a:hover { color: white; text-shadow: 0 1px rgba(0, 0, 0, 0.3); background: #5a70b0; border-color: #5a70b0 #495d98 #42558a; background-image: -webkit-linear-gradient(top, #7688bd, #4e64a3); background-image: -moz-linear-gradient(top, #7688bd, #4e64a3); background-image: -o-linear-gradient(top, #7688bd, #4e64a3); background-image: linear-gradient(to bottom, #7688bd, #4e64a3); } #user li a:hover:after { display: block; } #user li a:after { content: ''; display: none; position: absolute; top: 50%; right: 5px; margin-top: -4px; width: 0; height: 0; border: 4px solid transparent; border-right-color: #9facd1; border-right-color: rgba(255, 255, 255, 0.4); } / profile end by Folfoly.COM /

4- Ctrl+F من جديد وهذه المرة للبحث عن:

<data:post.body/>

5- وفوقه نضيف الكود التالي:

<section id='container'>
<div id='user'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYZWGoDq0XTnbdGygxjCL9miEvs_flRUTELDSPGEqa9XAqomPO7rWT-AZ86gYb8PVTq-qq6BhyB2fwCLOJ-lDRAdjyfD3GwNC7sBwot81X0TfYD6g0alsdOEj3pRrDOUvyP3plP-QpJcBP/h120/avatar.png'/>
<h5>إسمكم هنا<small>تقديم صغير</small></h5>
<ul>
<li><a href='G+ Url'>جوجل بلوس</a></li>
<li><a href='Facebook Url'>فيس بوك</a></li>
<li><a href='Twitter Url'> تويتر</a></li>
<li id='sep'>لنكن أصدقاء</li>
</ul>
</div>
</section>

6- التغييرات التي تستوجبها الاداة:

قوموا بتعويض رابط الصورة بالأحمر برابط صورتكم الخاصة.

* عوضوا كلمات G+ Url Facebook Url Twitter Url بالأزرق بروابط ملفاتكم الشخصية الخاصة بهذه الشبكات الإجتماعية.
رابط ملفي مثلا على فيس بوك هو:
https://www.facebook.com/brahim.zouggagh

7- يكفي الآن حفظ التغييرات وقد تم الأمر بفضل من الله.

التصميم الثالث:

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

شكل عن الكاتب الإحترافية الخاصة

كما تشاهدون فهناك خمسة عناصر مكونة للإضافة:

- العنوان وهو عن المدون

- الصورة الخاصة بالكاتب

- غسم المدون

- تعريف أو نبذق قصيرة عن صاحب المدونة

- رابط المزيد يقود لصفحة تحتوي المزيد من المعلومات.

يمكنك اضافة هذه الاداة باتباع الخطوات التالية:

1- قم بفتح أداة تغيير القالب على مدونتك

2- Ctrl+F من لوحة المفاتيح للبحث عن :

]]></b:skin>

3 - وفوقه مباشرة أضيفوا الكود التالي:

/* author profile by Folfoly.com /

.full-article-footer {
border-top: 1px solid #E0DFDB;
margin-top: 10px;
}

.article-footer {
padding: 20px 10px 10px 10px;
min-height: 115px;
display:table;
font-family: Tahoma;
}

.full-article-footer h6 {
font-family: 'Droid Arabic Kufi', serif, 'PT Sans', Arial, sans-serif;
font-size: 15px;
margin: 0px;
text-align: center;
}

.avatar-module {
display: table-cell;
vertical-align: middle;
float: right;
}

.avatar-module img {
border-radius: 50%!important;
height: 100px;
width: 100px;
float: right;
margin:0px 20px 0px 20px;
}

.article-footer p {
line-height:1.5em;
margin-right:80px;
}

a.author-link {
font-size:25px;
line-height:2em;
color:#617a3a;
text-decoration:none;
font-family: 'Droid Arabic Kufi', serif, 'PT Sans', Arial, sans-serif;
}

a.author-link:hover {
color:#000000;
text-decoration:none;
}

@media (max-width:750px) {
.article-footer {
display:inherit;
margin:0px;
}

.avatar-module {
display:inherit;
vertical-align: none;
}

.about-author p {

background-color: beige;
padding: 5px;
border-radius: 5px;
}

.avatar-module img {
margin-left: auto;
margin-right: auto;
display: block;
float:none;
margin-top:0px;
}

.article-footer p {
text-align:center;
padding-left:0px;
}
}
/ author profile by Folfoly.com */

سنمر الآن لإضافة كود الإضافة أسفل موضوع المشاركات.

هذه الخطوة تتطلب بعض الإنتباه لإيجاد المكان المناسب لإظهار الأداة وهو في نهاية المقالات أو المواضيع.

4 - Ctrl+F للبحث من جديد عن الكود التالي:

<data:post.body/>

ملاحظة:إدا كانت مدونتكم تتوفر على أكثر من كود واحد من هدا النوع إعملوا على الثاني وإلا جربوها كلها حتى تظهر الإضافة

5 - بعد إيجادكم للكود اضيفوا تحته مباشرة الكود التالي:

<div class='full-article-footer'>
<div class='article-footer'>
<div class='avatar-module'>
<img class='avatar' height='100px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxknu0onP9X1pvh5wj9LaP0gMF1pe12jA0nYHh-E19FykGIk6anb0cUFWjmwMpYM_NHlYPPW8-f6RmtKd0Uewc83NfxiSFj-CDKHwEi9ZcwIJsv6ap8sGqRVnLbimjFdonewtc45AGqw/h120/profile.png'/><span class='author-link' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<h6><a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a></h6>
</span></div>
<p>عن المدون</p>

<div class='about-author'>
<p style='background-color: beige; padding: 5px; border-radius: 5px; margin-right: 150px'>
مدون وأحب القراءة وكل جديد التكنولوجيا والإنترنت . إنشاء فولفولي جاء من الرغبة في مشاركة تجربتي المتواضعة ولأكون مساهما ولو بالقليل في محتوى الإنترنت...<a href='https://www.folfoly.com/p/brahim-zouggagh.html'>المزيد </a>
</p>
</div>

</div>
</div>
</div>

6 - يكفي الآن حفظ التغييرات بعد القيام بالتغييرات التالية:

- رابط صورتكم الشخصية بالأحمر

- نبذة قصيرة حول الكاتب بالأخضر

- رابط صفحة تحتوي المزيد من المعلومات حول المدون بالأزرق.

التصميم الرابع

بجانب صورة المدون وإسمه، الاداة تتوفر على روابط الشبكات الاجتماعية مع الايقونات

نموذج أداة تعريف الكاتب لمدونة بلوجر

شاهد مثال

لإضافة أداة تعريف الكاتب على مدونتكم يرجى تتبع هذه الخطوات:
* الخطوة 1:
من واجهة التحكم بالمدونة نختار القالب ثم تحرير HTML
* الخطوة 2:
من لوحة المفاتيح Ctrl+F ثم قوموا بالبحث عن الكود التالي:

أو الكودالتالي:

<data:post.body/>

* الخطوة3:
بعد ايجادكم للكود، قوموا بلصق هذا الكود أسفله مباشرة بعد نسخه:

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

   * باللون الأحمر: هنا ستقومون بإضافة الرابط الخاص بصورتكم. من المستحسن أن تكون بحجم 150 على 150 طول عرض. (طريقة إضافة صورة على بلوجر ونسخ رابطها).
   * باللون الأخضر: روابط البروفيلات الخاصة بكم على الشبكات الإجتماعية
   * لون عن الكاتب ومربع لنتواصل بالأزرق: قوموا بتغيير الكود لتعويض اللون الأزرق باللون الذي تحبذونه: 0489e6

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

بلوجر

ابراهيم زكاغ 6/16/2014