كيفية اضافة صورة الكاتب بجانب عناوين الموضوع بشكل دائرى avatar-author

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

كيفية تركيب الاضافة :

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

الان قم بالبحث عن هذا الكود :

]]></b:skin>

ضع فوقة مباشرة هذا الكود

.avatar-author{float:left;margin-right:10px;border:0;border-radius:50%;padding:0;width:30px;height:30px}

قم بالبحث مرة اخرى عن هذا الكود :

</ head>

ضع قبلة مباشرة هذا الكود :

<script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
//]]>
</script>

ابحث مرة اخرى عن هذا الكود :

<b:if cond='data:post.title'>

ستجدة مكرر غالبا يكون الثانى
الان ضع فوقة مباشرة هذا الكود :

<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>

بالاخير اضغط حفظ
اذاهب الى الصفحة الرئيسية لتشاهد شكل الاضافة

ملحوظة هامة :

اذا كنت تريد صورة الكاتب متواجدة بالجهة اليمنة قم بوضع كلمة right بدل الكلمة المحددة باللون الاصفر وهذه صورة موضحة لشكل الصورة من الجهة اليمنة :

واذا كنت تريد الصورة تظهر بالجانب الايسر فالا تقم بتغيير اى شيى وهذه صورة موضحة لشكل صورة الكاتب من الجهة اليسرى :

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