مساحة إعلانية

2012-09-10

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

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

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

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

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


Demo for Author bio box widget by Making Differe
about author to blogger
هذا المقال كتب بواسطة:
بقلم 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("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 للتعديل على الكود

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

هناك 8 تعليقات

  1. لو سمحت انا عندي اكثر من مدون في مدوتني كيف اجعلها تظهر كل مشاركة باسم المدون الخاص بها ؟

    ردحذف
    الردود
    1. لا يمكن يا اخي لان تعريف الكاتب يكون في القالب ادا رادت ان يظهر لكل مدون عليك تحرير كود تعريف الناشر بصفحة التحرير في مكان html يعني يدون الناشر الموضوع تم يتجه من تحرير الى html ويضع الكود
      هدا موقعي
      http://www.3adnani.com/

      حذف
  2. اضافة جميلة جدا الله يوفقك

    ردحذف
  3. وجزاك الله كل خير
    شكرا لمرورك

    ردحذف
  4. ما هي الطريقة الصحيحة للتعامل مع شفرة اعلانات ادسنس

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

      حذف
  5. طيب دلوقت يا جماعه انا مركب عندى كود تعريف او نبذه عن الكاتب او المؤلف ... الان عندى اكثر من مؤلف عايز اجعل لك كاتب نبذه لوحده .. انا وجدت اكواد ممكن من خلالها اكتب نبذه لكل كاتب .. لكن مركب كود طريقة حلوه وعجبانى عايز اكررها لكل كاتب نبذه ..

    ردحذف

يمنع نشر التعليقات ذات الروابط الدعائية أو تعليقات بإسلوب غير لائق أو التى تحتوى على معلومات شخصية كالبريد الإلكترونى
أعتذر عن الرد على طلبات التصميم لضيق الوقت أو التبادل الإعلانى


لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"

Privacy-Policy | عودة الى الاعلى
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2016 ©

تصميم كن مدون