15‏/12‏/2015

أتقدم لكم بإضافة غنية عن التعريف وهي صندوق تعريف الكاتب بأزرار المتابعة على الشبكات الاجتماعية، باستعمالك لهذا الصندوق ستتمكن بسهولة إضافة نبذة عن الكاتب وكذلك الصورة التعريفية مع الإسم يرافقه رابط صفحتك على جوجل بلس ولا ننسى أزرار التواصل التي تجمع بين أهمها من فيسبوك وصولا إلى يوتيوب.
إقرأ أيضًا : إضافة تعريف الكاتب | الشكل الثاني
يمكن اعتبار تعريف الكاتب هذا احترافي ببساطته وقد منحته وقته في التصميم بإضافة التولتيب والأزرار بالتأثيرات الجميلة، هذه الإضافة قد تجعل موقعك أكثر جاذبية ولها إفادة طبعا في تعريفك بأبهى حلة 🍰

يتم استخدام هذا التعريف بالكاتب عن طريق جوجل بلس بحيث يأتي لك تلقائيا بالصورة المستعملة والنبذة مع الإسم، وهي تدعم كاتب ثاني سوى كان مدير بالمدونة أو كتاب (مؤلفين). بعدما تعرفت على ما تتضمنه الإضافة يمكنك الشروع بمعاينتها إن لم تكن الصورة كافية لك 😀
طريقة التركيب
1. ابحث بإستعمال CTRL+F عن ]]></b:skin> أو ضعه بين <style> </style> فوق </head>
2. ضع الكود التالي فوقه
/* CSS Author Bio Box by Ar1web.com */
.authorboxwrap{Font-family: Open Sans;background:#fff;margin:10px auto 20px;padding:10px;clear: both;border:1px solid #E2E1E1;}
.avatar-container {float:right;margin-left:20px;}
.avatar-container img{width: 110px; border-radius: 2px!important;margin: -3px;}
.author_description_container p{margin: 0; color: #7c7c7c; font: normal 12px/18px Tahoma, Geneva, sans-serif; text-align: justify;line-height: 1.9em;}
.ar1web-tooltip {position:relative;display:inline-block;}
.ar1web-tooltip:before, .ar1web-tooltip:after {position:absolute;opacity:0;z-index:1000000;-webkit-transition:0.3s ease;-moz-transition:0.3s ease;pointer-events:none;}
.ar1web-tooltip:hover:before, .ar1web-tooltip:hover:after {opacity:1;}	
.ar1web-tooltip:after {content: attr(data-ar1web-tooltip);background: #b9f;color: #fff;padding: 5px 8px;font-size: 11px;white-space: nowrap;
-webkit-backface-visibility: hidden;}
.ar1web-tooltip-top:before {bottom:129%;left:10%;margin:0 0 -18px 0;border-top-color:rgba(0,0,0,0.7);border-top-color:hsla(0,0%,20%,0.9);}
.ar1web-tooltip-top:after {bottom:125%;left:10%;margin:0 0 -6px -10px;}
.ar1web-tooltip-top:hover:before {margin-bottom:-10px;}
.ar1web-tooltip-top:hover:after {margin-bottom:2px;}
.author-bar { width:490px; height: 32px; float:right; background: #b9f; margin-bottom: 5px; } .author-data { padding-right: 10px; text-align:center; color: #fff; float: right; line-height: 32px; } .author-data a { color: #fff;text-decoration: none; } .author-data a:hover { color:#eee;  } .author-social { height:32px; float: left; background: #EEF3F6; }
ul.spicesocialwidget li {float:left;list-style: none outside none;border:none;}
ul.spicesocialwidget li a{background-color:transparent;background-image:url('http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/s1600/spice-social-gadget-sprite.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
.ie7 ul.spicesocialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url('http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/s1600/spice-social-gadget-sprite.png' )}
ul.spicesocialwidget li.facebook a{ background-position:0 0}
ul.spicesocialwidget li.googleplus a{ background-position:-96px 0}
ul.spicesocialwidget li.rss a{ background-position:-192px 0}
ul.spicesocialwidget li.skype a{ background-position:-224px 0}
ul.spicesocialwidget li.twitter a{ background-position:-256px 0}
ul.spicesocialwidget li.youtube a{ background-position:-320px 0}
ul.spicesocialwidget li.facebook a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{ background-position:0 -32px}
ul.spicesocialwidget li.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px}
ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px}
ul.spicesocialwidget li.skype a:hover, #sidebar ul.spicesocialwidget li.skype a:hover{ background-position:-224px -32px}
ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px}
ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px}
3. ابحث عن <data:post.body/> ضع قبله الكود الأتي
* ملاحظة ستجد الكود متكرر مرتين أو أكثر الأخير هو المقصود -- بإمكانك الإستغناء عن البحث عنه إذا كان لديك أزرار المشاركة إلى غير ذلك وتعرف مكان الأكواد بالبحث عن الإسم فقط
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/>
</a>
</div>
<div class='author_description_container'>
<div class="author-bar">
				
				<div class="author-data">عن الكاتب :
                  <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='الكاتب'> <span itemprop='name'><data:post.author/></span> </a>	</div>
			
			<div class="author-social">
              	<ul class="spicesocialwidget">
<li class='facebook ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='صفحتنا'>
<a rel="nofollow" href="http://www.facebook.com/" target="_blank">
</a></li>
<li class='googleplus ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='تابعني على جوجل بلس'>
<a rel="nofollow" href="https://plus.google.com/" target="_blank">
</a></li>
<li class='twitter ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='تابعني على تويتر'>
<a rel="nofollow" href="http://twitter.com/" target="_blank">
</a></li>
<li class='rss ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='اشترك في النشرة البريدية'>
<a rel="nofollow" href="http://feedburner.com/" target="_blank">
</a></li>
<li class='skype ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='تواصل معي'>
<a rel="nofollow" href="http://www.skype.com/" target="_blank">
</a></li>
<li class='youtube ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='قناتي'>
<a rel="nofollow" href="http://www.youtube.com/" target="_blank">
</a></li>
</ul>
								
								
											
              </div>
				
			</div>
<p>
<data:post.authorAboutMe/>       
</p>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>
4. قم بحفظ النموذج

إضافة التعريف وإظهاره
1. الآن نمر للمرلحة ما قبل الأخيرة وهي إضافة النبذة عبر جوجل بلس وإضهاره بالمدونة داخل المواضيع لفعل ذلك إتجه لرابط صفحتك : https://plus.google.com/u/0/+iHussam/about بعدها حرر Story واملئ صندوق Introduction بنبذة قصيرة عنك وقم بالحفظ



2. قم بالعودة لمدونتك واتجه إلى التخطيط ثم حرر رسائل المدونة الإلكترونية وتأكد من تفعيل خيار إظهار الملف الشخصي للمؤلف أسفل مشاركة



إكتمل التركيب!
إذا واجهتك مشكلة فأعلمني بصندوق التعليقات، بالمناسبة لا تنسى مشاركة هذه التدوينة مع أصدقائك...
أتقدم لكم بإضافة غنية عن التعريف وهي صندوق تعريف الكاتب بأزرار المتابعة على الشبكات الاجتماعية، باستعمالك لهذا الصندوق ستتمكن بسهولة إضافة نبذة عن الكاتب وكذلك الصورة التعريفية مع الإسم يرافقه رابط صفحتك على جوجل بلس ولا ننسى أزرار التواصل التي تجمع بين أهمها من فيسبوك وصولا إلى يوتيوب.
إقرأ أيضًا : إضافة تعريف الكاتب | الشكل الثاني
يمكن اعتبار تعريف الكاتب هذا احترافي ببساطته وقد منحته وقته في التصميم بإضافة التولتيب والأزرار بالتأثيرات الجميلة، هذه الإضافة قد تجعل موقعك أكثر جاذبية ولها إفادة طبعا في تعريفك بأبهى حلة 🍰

يتم استخدام هذا التعريف بالكاتب عن طريق جوجل بلس بحيث يأتي لك تلقائيا بالصورة المستعملة والنبذة مع الإسم، وهي تدعم كاتب ثاني سوى كان مدير بالمدونة أو كتاب (مؤلفين). بعدما تعرفت على ما تتضمنه الإضافة يمكنك الشروع بمعاينتها إن لم تكن الصورة كافية لك 😀
طريقة التركيب
1. ابحث بإستعمال CTRL+F عن ]]></b:skin> أو ضعه بين <style> </style> فوق </head>
2. ضع الكود التالي فوقه
/* CSS Author Bio Box by Ar1web.com */
.authorboxwrap{Font-family: Open Sans;background:#fff;margin:10px auto 20px;padding:10px;clear: both;border:1px solid #E2E1E1;}
.avatar-container {float:right;margin-left:20px;}
.avatar-container img{width: 110px; border-radius: 2px!important;margin: -3px;}
.author_description_container p{margin: 0; color: #7c7c7c; font: normal 12px/18px Tahoma, Geneva, sans-serif; text-align: justify;line-height: 1.9em;}
.ar1web-tooltip {position:relative;display:inline-block;}
.ar1web-tooltip:before, .ar1web-tooltip:after {position:absolute;opacity:0;z-index:1000000;-webkit-transition:0.3s ease;-moz-transition:0.3s ease;pointer-events:none;}
.ar1web-tooltip:hover:before, .ar1web-tooltip:hover:after {opacity:1;}	
.ar1web-tooltip:after {content: attr(data-ar1web-tooltip);background: #b9f;color: #fff;padding: 5px 8px;font-size: 11px;white-space: nowrap;
-webkit-backface-visibility: hidden;}
.ar1web-tooltip-top:before {bottom:129%;left:10%;margin:0 0 -18px 0;border-top-color:rgba(0,0,0,0.7);border-top-color:hsla(0,0%,20%,0.9);}
.ar1web-tooltip-top:after {bottom:125%;left:10%;margin:0 0 -6px -10px;}
.ar1web-tooltip-top:hover:before {margin-bottom:-10px;}
.ar1web-tooltip-top:hover:after {margin-bottom:2px;}
.author-bar { width:490px; height: 32px; float:right; background: #b9f; margin-bottom: 5px; } .author-data { padding-right: 10px; text-align:center; color: #fff; float: right; line-height: 32px; } .author-data a { color: #fff;text-decoration: none; } .author-data a:hover { color:#eee;  } .author-social { height:32px; float: left; background: #EEF3F6; }
ul.spicesocialwidget li {float:left;list-style: none outside none;border:none;}
ul.spicesocialwidget li a{background-color:transparent;background-image:url('http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/s1600/spice-social-gadget-sprite.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
.ie7 ul.spicesocialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url('http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/s1600/spice-social-gadget-sprite.png' )}
ul.spicesocialwidget li.facebook a{ background-position:0 0}
ul.spicesocialwidget li.googleplus a{ background-position:-96px 0}
ul.spicesocialwidget li.rss a{ background-position:-192px 0}
ul.spicesocialwidget li.skype a{ background-position:-224px 0}
ul.spicesocialwidget li.twitter a{ background-position:-256px 0}
ul.spicesocialwidget li.youtube a{ background-position:-320px 0}
ul.spicesocialwidget li.facebook a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{ background-position:0 -32px}
ul.spicesocialwidget li.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px}
ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px}
ul.spicesocialwidget li.skype a:hover, #sidebar ul.spicesocialwidget li.skype a:hover{ background-position:-224px -32px}
ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px}
ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px}
3. ابحث عن <data:post.body/> ضع قبله الكود الأتي
* ملاحظة ستجد الكود متكرر مرتين أو أكثر الأخير هو المقصود -- بإمكانك الإستغناء عن البحث عنه إذا كان لديك أزرار المشاركة إلى غير ذلك وتعرف مكان الأكواد بالبحث عن الإسم فقط
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/>
</a>
</div>
<div class='author_description_container'>
<div class="author-bar">
				
				<div class="author-data">عن الكاتب :
                  <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='الكاتب'> <span itemprop='name'><data:post.author/></span> </a>	</div>
			
			<div class="author-social">
              	<ul class="spicesocialwidget">
<li class='facebook ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='صفحتنا'>
<a rel="nofollow" href="http://www.facebook.com/" target="_blank">
</a></li>
<li class='googleplus ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='تابعني على جوجل بلس'>
<a rel="nofollow" href="https://plus.google.com/" target="_blank">
</a></li>
<li class='twitter ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='تابعني على تويتر'>
<a rel="nofollow" href="http://twitter.com/" target="_blank">
</a></li>
<li class='rss ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='اشترك في النشرة البريدية'>
<a rel="nofollow" href="http://feedburner.com/" target="_blank">
</a></li>
<li class='skype ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='تواصل معي'>
<a rel="nofollow" href="http://www.skype.com/" target="_blank">
</a></li>
<li class='youtube ar1web-tooltip ar1web-tooltip-top' data-ar1web-tooltip='قناتي'>
<a rel="nofollow" href="http://www.youtube.com/" target="_blank">
</a></li>
</ul>
								
								
											
              </div>
				
			</div>
<p>
<data:post.authorAboutMe/>       
</p>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>
4. قم بحفظ النموذج

إضافة التعريف وإظهاره
1. الآن نمر للمرلحة ما قبل الأخيرة وهي إضافة النبذة عبر جوجل بلس وإضهاره بالمدونة داخل المواضيع لفعل ذلك إتجه لرابط صفحتك : https://plus.google.com/u/0/+iHussam/about بعدها حرر Story واملئ صندوق Introduction بنبذة قصيرة عنك وقم بالحفظ



2. قم بالعودة لمدونتك واتجه إلى التخطيط ثم حرر رسائل المدونة الإلكترونية وتأكد من تفعيل خيار إظهار الملف الشخصي للمؤلف أسفل مشاركة



إكتمل التركيب!
إذا واجهتك مشكلة فأعلمني بصندوق التعليقات، بالمناسبة لا تنسى مشاركة هذه التدوينة مع أصدقائك...
23 Blogger تعليقات
Disqus
23 التعليقات
المشرف
avatar

رائع ^________^

المشرف
avatar

اخي لدي مشكل في مدونتي، عندما اضيف اداة HTML/JavaScript بعد مرور مدة قصيرة لااجدها ممكن حل أخي

المشرف
avatar

أخي حسام , ممكن طريقة أضافة اداة html ثابتة من القالب حتي تظهر في التخطيط كي أقوم بالتعديل عليها مثل اعلان فوق واسفل المدونة... وهكذا بدون ما اضيف الشفرة من القالب , اضيفها الي الاداة مثل widget :)

المشرف
avatar

إن شاء الله سأضع الشرح

المشرف
avatar

اضافة جميلة جدا وفكره جديده سحب ملف الشخصي من بلس مبهر الاخ حسام

المشرف
avatar

نورتنا بمرورك اخي عمر

المشرف
avatar

اخي اين اجد تحرير stoty هل تم حذفها ام ماذا

المشرف
avatar

عليك فقط أن تغير إسمي iHussam إلى إسم المستخدم الخاص بك :
https://plus.google.com/u/0/+iHussam/about

المشرف
avatar

لو سمحت انا مش عارف اركب الصندوق :(

المشرف
avatar

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

المشرف
avatar

ابحث عن هذا : .author-bar ستجد بسطره width:490px; غير 490 لـ 600

المشرف
avatar

شكرا جزاك الله خير

المشرف
avatar

اخي تم تطبيق الشرح ولكن صندوق الكاتب يظهر بطريقة ليست جميله

المشرف
avatar

اترك رابط للمعاينة لو سمحت

المشرف
avatar

اليك اخي موضوع تجريبي للمعاينه

المشرف
avatar

حضرتك الكود الثالث مو لاقي الكلمة عندي

المشرف
avatar

حسنا فلتبحث عن هذا <div class='post-footer'>

أزال أحد مشرفي المدونة هذا التعليق. - حذف
المشرف
avatar

امسح هذا الكود الموجود بالستايل :
.author-social { margin-top: -8px; margin-left: -7px; }

المشرف
avatar

لم اجدها يا اخي :'(

المشرف
avatar
المشرف
avatar

ابحث فقط عن .author-social حتى تجد بجانبها margin-top: -8px; margin-left: -7px;
واحذف كامل الكود

المشرف
avatar

لا يضهر التعريف

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة