يمكن اعتبار تعريف الكاتب هذا احترافي ببساطته وقد منحته وقته في التصميم بإضافة التولتيب والأزرار بالتأثيرات الجميلة، هذه الإضافة قد تجعل موقعك أكثر جاذبية ولها إفادة طبعا في تعريفك بأبهى حلة 🍰
يتم استخدام هذا التعريف بالكاتب عن طريق جوجل بلس بحيث يأتي لك تلقائيا بالصورة المستعملة والنبذة مع الإسم، وهي تدعم كاتب ثاني سوى كان مدير بالمدونة أو كتاب (مؤلفين). بعدما تعرفت على ما تتضمنه الإضافة يمكنك الشروع بمعاينتها إن لم تكن الصورة كافية لك 😀
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXr6oZ9nCH4AayrrnOu7PdzOGnoVX9DL1xZq3zand_XEw0jBm9lzma2CUJdh9G9w6ykEQIl8OM8q_KM1ylEUIR-G-GVDC1492hoDqivHwUYntc1VelqE5oUJPQiuxhZ9EvRYM86JEZ4AQC/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXr6oZ9nCH4AayrrnOu7PdzOGnoVX9DL1xZq3zand_XEw0jBm9lzma2CUJdh9G9w6ykEQIl8OM8q_KM1ylEUIR-G-GVDC1492hoDqivHwUYntc1VelqE5oUJPQiuxhZ9EvRYM86JEZ4AQC/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}
* ملاحظة ستجد الكود متكرر مرتين أو أكثر الأخير هو المقصود -- بإمكانك الإستغناء عن البحث عنه إذا كان لديك أزرار المشاركة إلى غير ذلك وتعرف مكان الأكواد بالبحث عن الإسم فقط
<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>
1. الآن نمر للمرلحة ما قبل الأخيرة وهي إضافة النبذة عبر جوجل بلس وإضهاره بالمدونة داخل المواضيع لفعل ذلك إتجه لرابط صفحتك : https://plus.google.com/u/0/+iHussam/about بعدها حرر Story واملئ صندوق Introduction بنبذة قصيرة عنك وقم بالحفظ
2. قم بالعودة لمدونتك واتجه إلى التخطيط ثم حرر رسائل المدونة الإلكترونية وتأكد من تفعيل خيار إظهار الملف الشخصي للمؤلف أسفل مشاركة
إكتمل التركيب!
إذا واجهتك مشكلة فأعلمني بصندوق التعليقات، بالمناسبة لا تنسى مشاركة هذه التدوينة مع أصدقائك...