الموضوع
اقرأ ايضًا
التعليقات
عن الكاتب
تعليمات
أتقدم لكم بإضافة غنية عن التعريف وهي صندوق تعريف الكاتب بأزرار المتابعة على الشبكات الاجتماعية، باستعمالك لهذا الصندوق ستتمكن بسهولة إضافة نبذة عن الكاتب وكذلك الصورة التعريفية مع الإسم يرافقه رابط صفحتك على جوجل بلس ولا ننسى أزرار التواصل التي تجمع بين أهمها من فيسبوك وصولا إلى يوتيوب.
إقرأ أيضًا : إضافة تعريف الكاتب | الشكل الثاني
يمكن اعتبار تعريف الكاتب هذا احترافي ببساطته وقد منحته وقته في التصميم بإضافة التولتيب والأزرار بالتأثيرات الجميلة، هذه الإضافة قد تجعل موقعك أكثر جاذبية ولها إفادة طبعا في تعريفك بأبهى حلة 🍰
يتم استخدام هذا التعريف بالكاتب عن طريق جوجل بلس بحيث يأتي لك تلقائيا بالصورة المستعملة والنبذة مع الإسم، وهي تدعم كاتب ثاني سوى كان مدير بالمدونة أو كتاب (مؤلفين). بعدما تعرفت على ما تتضمنه الإضافة يمكنك الشروع بمعاينتها إن لم تكن الصورة كافية لك 😀
طريقة التركيب
1. ابحث بإستعمال CTRL+F عن ]]></b:skin> أو ضعه بين <style> </style> فوق </head>
2. ضع الكود التالي فوقه
* ملاحظة ستجد الكود متكرر مرتين أو أكثر الأخير هو المقصود -- بإمكانك الإستغناء عن البحث عنه إذا كان لديك أزرار المشاركة إلى غير ذلك وتعرف مكان الأكواد بالبحث عن الإسم فقط
إضافة التعريف وإظهاره
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 == "item"'>
<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أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻
إرشادات
- موقع : Mediafire
- موقع :file-upload
- باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
- تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
- كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
- إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
تحميل الملفات
أين تجدنا؟
كلمة الختام
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم
رائع ^________^
ردحذفاخي لدي مشكل في مدونتي، عندما اضيف اداة HTML/JavaScript بعد مرور مدة قصيرة لااجدها ممكن حل أخي
ردحذفأخي حسام , ممكن طريقة أضافة اداة html ثابتة من القالب حتي تظهر في التخطيط كي أقوم بالتعديل عليها مثل اعلان فوق واسفل المدونة... وهكذا بدون ما اضيف الشفرة من القالب , اضيفها الي الاداة مثل widget :)
ردحذفإن شاء الله سأضع الشرح
حذفاضافة جميلة جدا وفكره جديده سحب ملف الشخصي من بلس مبهر الاخ حسام
ردحذفنورتنا بمرورك اخي عمر
حذفاخي اين اجد تحرير stoty هل تم حذفها ام ماذا
ردحذفعليك فقط أن تغير إسمي iHussam إلى إسم المستخدم الخاص بك :
حذفhttps://plus.google.com/u/0/+iHussam/about
لو سمحت انا مش عارف اركب الصندوق :(
ردحذفممكن كيفية تغير حجم الاضافة للتناسب مع مدونتي
ردحذفابحث عن هذا : .author-bar ستجد بسطره width:490px; غير 490 لـ 600
حذفشكرا جزاك الله خير
ردحذفاخي تم تطبيق الشرح ولكن صندوق الكاتب يظهر بطريقة ليست جميله
ردحذفاترك رابط للمعاينة لو سمحت
حذفاليك اخي موضوع تجريبي للمعاينه
حذفحضرتك الكود الثالث مو لاقي الكلمة عندي
ردحذفحسنا فلتبحث عن هذا <div class='post-footer'>
حذفأزال أحد مشرفي المدونة هذا التعليق.
ردحذفامسح هذا الكود الموجود بالستايل :
حذف.author-social { margin-top: -8px; margin-left: -7px; }
لم اجدها يا اخي :'(
حذفلن تساعدني ؟
ردحذفابحث فقط عن .author-social حتى تجد بجانبها margin-top: -8px; margin-left: -7px;
حذفواحذف كامل الكود
لا يضهر التعريف
ردحذف