نبذة عن المؤلف مع أزرار المشاركة الإجتماعية لمدونات بلوجر Author widget

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

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

مثال

Demo for Author bio box widget by Making Differe

هذا المقال كتب بواسطة:
بقلم Dr.R.O هوايتى التقنية والجرافيكس وأحببت أن أدون كل ما تعلمته فى هذه المدونة للإفادة فى أعمال هادفة

تابع جديد المدونة!

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

أذهب إلى لوحة تحكم بلوجر >> ثم تحرير قالب HTML (إحتفظ بنسخة إحتياطية من القالب)

أضف علامة فى المربع الصغير لتوسيع القالب
إستخدم الكيبورد Ctrl+F
فى البحث عن الكود التالى

]]></b:skin>

و إنسخ الكود التالى كاملا وإلصقه فوق الكود السابق مباشرة

<style>.mdauthor_info{float:left;width:550px;padding:15px;border:1px solid #5c080b;margin-bottom:15px;margin-top:15px;background:#f0dfdf;color:#000;}.mdauthor_info:hover{background:#f0dfdf;border:1px solid #5c080b;-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);}.mdauthor_info h3{color:#000;margin-bottom:10px;}.mdauthor_info h3:hover{ border : 1px solid #EEEEEE;-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);}.mdauthor_photo{float:right;margin:0 0 0 10px;}.mdauthor_photo img{border:1px solid #666;-webkit-transition:-webkit-transform .15s linear;-moz-transition:-moz-transform .15s linear;-o-transition:-o-transform .15s linear;transition:transform .15s linear;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);box-shadow:0 3px 6px rgba(0,0,0,.25);padding:5px 5px 5px 5px;-webkit-transform:rotate(+2deg);-moz-transform:rotate(+2deg);-ms-transform:rotate(+2deg);-o-transform:rotate(+2deg);transform:rotate(+2deg);float:left;}.mdauthor_photo img:hover{background:#FFFFFFborder : 1px solid #EEEEEE;-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);-webkit-transform:rotate(-1deg);-moz-transform:rotate(-1deg);-ms-transform:rotate(-1deg);-o-transform:rotate(-1deg);transform:rotate(-1deg);}ul.mdsocial{list-style:none;margin:10px;overflow:hidden;}.mdsocial li{float:left;background:none !important;padding:0 !important;margin:0 8px;}.mdsocial li a{display:block;width:40px;height:40px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh839domLaesHunxK2d_0GvtThW2hRiOp1xJXo37le0pey-l6ew7JdVEhgcliwcTPykjo6bmNHaGgWUCy8m2hzLC_56xdB9i3HsLRtq6ua5ONIuNHeAVwbE6tbnKVSIM8O9kge8_x8h5ks1/s1600/social.png") no-repeat transparent;text-indent:-99999em !important;}.mdsocial li a:hover{padding:0 !important;}.mdsocial li.rssicon a{background-position:0 0;}.mdsocial li.twicon a{background-position:-50px 0;}.mdsocial li.fbicon a{background-position:-100px 0;}.mdsocial li.gicon a{background-position:-150px 0;}.mdsocial li.rssicon a:hover{background-position:0 -50px;}.mdsocial li.twicon a:hover{background-position:-50px -50px;}.mdsocial li.fbicon a:hover{background-position:-100px -50px;}.mdsocial li.gicon a:hover{background-position:-150px -50px;}.mdlinediv{height:0px;clear:both;display:block;border-top:1px solid #fefefe;border-bottom:1px solid #CCCCCC;}.mdemailbutton{background:#f7f8f9;background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1));background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);color:#888;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;}.mdemailbutton:hover{background:#f1f1f1;background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1));background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );text-decoration:none !important;}.mdemail{clear:both;width:100%;margin:10px 0;}.mdemailform{position:relative;width:250px;margin:0 auto;}.mdemailinput{width:200px;height:18px;margin:0 auto;padding:8px 40px 8px 10px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;font-family:georgia;font-style:italic;-webkit-box-shadow:1px 1px 2px #dfdfdf;-moz-box-shadow:1px 1px 2px #dfdfdf;box-shadow:1px 1px 2px #dfdfdf;font-size:14px;color:#666;}.mdemailbutton{-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;-webkit-border-top-left-radius:0px;-webkit-border-bottom-left-radius:0px;-moz-border-radius-topleft:0px;-moz-border-radius-bottomleft:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;padding:9px;position:absolute;right:-2px;top:0;display:block;line-height:16px;}.mdemailbutton{padding:8px !important;}.mdemailform, .mdemailinput{width:98% !important;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:auto;}</style>

لتغيير لون الخلفية يمكن تغيير الكود المظلل باللون البرتقالى بكود اللون المناسب لمدونتك (أكواد الألون من هنااااااااا)

ثم إبحث عن الكود التالى:

<div class='post-footer-line post-footer-line-1'>

إن لم تجده فإبحث عن الكود التالى إن وجد منه إثنين فالثانى هو المقصود

 <data:post.body/>

و إنسخ الكود التالى وإلصقه بعد أحد الكودين السابقين مباشرة:

<b:if cond="data:blog.pageType == &quot;item&quot;">
<div class="mdauthor_info">
<div class="mdauthor_photo"><img alt="author" src="رابط مباشر لصورة مصغرة" height="150" width="150" /></div>
<h2>هذا المقال كتب بواسطة:</h2>
<p>أكتب نبذة مختصرة عن المؤلف
</p>
<div class="mdlinediv"></div>
<table width="100%">
<tbody>
<tr>
<td>
<p style="text-align: center;"> <small>تابع جديد المدونة!</small></p>
<div class="mdemail"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/avWDc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="mdemailform"> <input value="MakingDiffrent" name="uri" type="hidden" /> <input name="loc" value="en_US" type="hidden" /> <input onblur="if (this.value == \" \?)="" {this.value="\&quot;Enter" your="" email...\?;}?="" onfocus="if (this.value == \" enter="" email...\?)="" value="Enter your email..." name="email" class="mdemailinput" type="text" /> <input class="mdemailbutton" value="SignUp" title="" type="submit" /></form></div></td>
<td>
<ul class="mdsocial">
<li class="rssicon"><a href="http://feeds.feedburner.com/blogspot/avWDc">Rss</a></li>
<li class="twicon"><a href="http://twitter.com/DrRo2">Twitter</a></li>
<li class="fbicon"><a href="http://facebook.com/designsblog">FaceBook</a></li>
<li class="gicon"><a href="https://plus.google.com/105400830730395545290">Google +</a></li></ul></td></tr></tbody></table></div></b:if>

للتعديل على الكود السابق بما يناسب مدونتك

إستخدم البحث بالكيبورد Ctrl+F

إستبدل designsblog بإسم المستخدم الخاص بصفحتك على الفيس بوك facebook fanpage username

إستبدل DrRo2 بإسم المستخدم الخاص بحسابك على تويتر twitter username

إستبدل blogspot/avWDc بإسم المستخدم الخاص بخلاصات مدونتك feedburner username

إستبدل ID جوجل بلس بالـ ID الخاص بحساب جوجل بلس(الرقم الموجود بالرابط أعلى المتصفح لحساب جوجل بلس)

ولا تنس وضع رابط مباشر لصورة مصغرة بالمكان المخصص بالكود.

يمكن الإستعانة بمحرر الأكواد HTML للتعديل على الكود

ثم إضغط معاينة ثم حفظ

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

جزيرة التدوين العربى

المشاركات الشائعة

أرشيف المدونة الإلكترونية

التسميات