الخميس، 6 مارس، 2014

إضافة نبذه عن المؤلف وصورتة Blogger


إضافة نبذه عن المؤلف وصورة مع أزرار المشاركة الإجتماعية Blogger 



بسم الله الرحمن الرحيم
إضافة نبذه عن المؤلف وصورتة Blogger  |  ابداع ديزاين Abda3 Design  لخدمات التصميم والبرمجةموضوعنا اليوم هو إضافة نبذه عن المؤلف أو الكاتب Author widget فيها تعريف بسيط عن كاتب التدوينة أو المشاركة مع صورة مصغرة للكاتب مضاف إليها روابط الفيس بوك ،تويتر،جوجل بلس و القائمة البريدية.

    لكن السؤال يبقى، من اين احصل عليها ؟   

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

إضافة نبذه عن المؤلف وصورتة Blogger  |  ابداع ديزاين Abda3 Design  لخدمات التصميم والبرمجة

1- أذهب إلى لوحة تحكم بلوجر
2- ثم تحرير قالب HTML (إحتفظ بنسخة إحتياطية من القالب)
3- أضف علامة فى المربع الصغير لتوسيع القالب

4- إستخدم الكيبورد Ctrl+F
فى البحث عن الكود التالى

]]><b:ski/n>

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



<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("http://2.bp.blogspot.com/-IMM_B7aaLQA/T7ObAft4GbI/AAAAAAAADN0/mT6xK72Xe9I/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 للتعديل على الكود
ثم إضغط معاينة ثم حفظ

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

معاينة "أي لغة برمجة أقوى أو أفضل ?!" |  ابداع ديزاين Abda3 Design  لخدمات التصميم والبرمجة

... نهاية الشرح ...
معاينة "أي لغة برمجة أقوى أو أفضل ?!" |  ابداع ديزاين Abda3 Design  لخدمات التصميم والبرمجة

اقرا ايضا :


ولأي إستفسار الرجاء ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجلfaseel

لا تقرأ وترحل شارك معنا بتعليق فنحن نسعى لنقدم لك الافضل والاجمل



ضع تعليقك

0 التعليقات:

البحــث

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified

المتابعون

استثمارا للخبرات العالية والإمكانات التقنية المتميزة والطاقات البشرية الكبيرة التي تتميز بها "ابداع" أنشأت المؤسسة إدارة تتبنى عمل المواقع الخدمية المتنوعة للأفراد والهيئات والمؤسسات الكبرى. كما يمكنها عمل مواقع للتجارة الإلكترونية تتمكن الشركات والمتاجر من ترويج منتجاتها في كافة أنحاء العالم وتزويد مواقعها بإمكانية البيع عبر الإنترنت وتشمل خدمة بناء مواقع الإنترنت عدة مراحل بدأ من عملية التصميم المبدئي للموقع، وحتى الانتهاء منه، والقيام بتحديث الموقع كلما تطلب الأمر كما تتميز مؤسسة "ابداع" بأقوى فريق عمل متواصل مع العملاء 24 ساعة على مدار الأسبوع وتمتاز أيضا بكفاءة الدقة والسرعة في العمل لذلك نحمد الله العلي العظيم على منحنا تلك القدرة