.png){kind=logo}
صندوق تعريف بشكل إحترافي لأكثر من كاتب لمدونات بلوجر
أهلا بكم أعزائى الكرام متابعى مدونة أبو إياد. الحاقا بموضوعنا السابق الخاص بصندوق تعريف للكاتب بشكل احترافي والذى كتب بواسطة الزميل عبد الله أبو دقة. نذكركم بختام تدوينته وهى أن الإضافة بعد تجربتها وجد فيه قصورا بحيث لا يمكن استخدام مميزاتها ان كان هناك أكثر من مؤلف للمدونة بحيث تكون الإضافة مفعلة جزئيا على باقى المؤلفين حيث سيتفعل فقط صورتهم ونبذة تعريفية عنهم وكذلك ملفهم على جوجل بلس وهذا كله بسبب ربط بلوجر بجوجل بلس. ولكن بحمد الله وجدنا طريقة أخرى لحل هذه المشكلة لتتمتعوا بالإضافة بكامل مميزاتها ان كانت مدوناتكم تضم عددا من المؤلفين.
تابعونا بإمعان وتركيز لتنجح معكم هذه الإضافة المتميزة ونشكر الرائع +SagarTRajan على الإضافة
قبل كل شىء خذ نسخة إحتياطية من قالبك. ثم قم بالدخول الى قالب ثم تحرير HTML وهيا نبدأ المعركة
أولا: إضافة أكواد CSS
قم بالضغط على CTRL+F وابحث عن </b:skin> ثم ضع فوقه الكود التالى
.ts-fab-wrapper {
margin: 0 0 2em;
clear: both;
}
.ts-fab-wrapper ul
{
list-style:none outside none;
}
.ts-fab-wrapper a {
text-decoration: none !important;
}
.ts-fab-wrapper img {
border: none !important;
}
.ts-fab-list {
overflow: hidden;
padding: 0 0 0 5px !important;
margin: 0 !important;
}
.ts-fab-list li {
display: block;
float: left;
list-style: none;
margin: 0 5px 0 0 !important;
}
.ts-fab-list li a {
display: block;
line-height: 16px;
height: 16px;
padding: 8px 12px;
background-color: #e9e9e9;
border: 1px solid #e9e9e9;
border-bottom: none !important;
text-decoration: none;
font-size: 13px;
color: #333;
font-weight: bold;
outline: 0;
text-shadow: none !important;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.ts-fab-list li a:hover {
color: #333;
}
.ts-fab-list li.active a {
background-color: #333;
color: #fff;
border-color: #333;
}
.ts-fab-list li a {
background-image: url("'http://www.steamfeed.com/wp-content/plugins/fanciest-author-box_10-13-12/images/fab_tab_icons.png'");
}
.ts-fab-list li.ts-fab-bio-link a {
background-position: 8px 8px;
background-repeat: no-repeat;
padding-left: 27px;
}
.ts-fab-list li.ts-fab-bio-link.active a {
background-position: -280px 8px;
background-repeat: no-repeat;
padding-left: 27px;
}
.ts-fab-list li.ts-fab-twitter-link a {
background-position: 8px -42px;
background-repeat: no-repeat;
padding-left: 35px;
}
.ts-fab-list li.ts-fab-twitter-link.active a {
background-position: -270px -42px;
background-repeat: no-repeat;
padding-left: 35px;
}
.ts-fab-list li.ts-fab-facebook-link a {
background-position: 8px -92px;
background-repeat: no-repeat;
padding-left: 23px;
}
.ts-fab-list li.ts-fab-facebook-link.active a {
background-position: -284px -92px;
background-repeat: no-repeat;
padding-left: 23px;
}
.ts-fab-list li.ts-fab-googleplus-link a {
background-position: 8px -142px;
background-repeat: no-repeat;
padding-left: 30px;
}
.ts-fab-list li.ts-fab-googleplus-link.active a {
background-position: -276px -142px;
background-repeat: no-repeat;
padding-left: 30px;
}
.ts-fab-list li.ts-fab-linkedin-link a {
background-position: 8px -242px;
background-repeat: no-repeat;
padding-left: 30px;
}
.ts-fab-list li.ts-fab-linkedin-link.active a {
background-position: -276px -242px;
background-repeat: no-repeat;
padding-left: 30px;
}
.ts-fab-custom-link a {
background-image: none !important;
}
.ts-fab-widget .ts-fab-list li a, .ts-fab-icons-only .ts-fab-list li a {
text-indent: -9999em;
padding: 8px 12px !important;
}
.ts-fab-widget .ts-fab-list li.ts-fab-bio-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-bio-link a {
width: 4px;
}
.ts-fab-widget .ts-fab-list li.ts-fab-twitter-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-twitter-link a {
width: 12px;
}
.ts-fab-widget .ts-fab-list li.ts-fab-googleplus-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-googleplus-link a {
width: 8px;
}
.ts-fab-widget .ts-fab-list li.ts-fab-linkedin-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-linkedin-link a {
width: 8px;
}
.ts-fab-widget .ts-fab-list li.ts-fab-facebook-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-facebook-link a {
width: 0;
}
.ts-fab-widget .ts-fab-list li.ts-fab-latest-posts-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-latest-posts-link a {
width: 4px;
}
.ts-fab-widget .ts-fab-list li.ts-fab-custom-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-custom-link a {
text-indent: 0 !important;
}
.ts-fab-tab {
display: none;
border: 2px solid #333;
padding: 12px;
background: #fff;
min-height: 64px;
overflow: hidden;
}
.ts-fab-tab:first-child {
display: block;
}
.ts-fab-widget .ts-fab-tab {
padding: 8px;
}
.ts-fab-avatar {
display: block;
float: left;
width: 64px;
height: 64px;
}
.ts-fab-no-float .ts-fab-avatar {
float: none;
margin: 0 0 12px;
}
.ts-fab-avatar img {
display: block;
border: none !important;
}
.ts-fab-text {
margin-left: 76px;
line-height: 1.5;
}
.ts-fab-no-float .ts-fab-text {
margin-left: 0;
}
.ts-fab-header {
margin-bottom: 10px;
}
.ts-fab-text h4 {
clear: none;
font-size: 18px;
line-height: 1 !important;
font-weight: bold;
margin: 0 0 0.2em !important;
line-height: 1;
padding: 0;
}
.ts-fab-description {
font-size: 12px
}
.ts-fab-follow {
margin-top: 10px;
}
.ts-fab-latest {
margin: 0 !important;
padding: 0 !important;
}
.ts-fab-latest li {
list-style: none !important;
line-height: 1.1;
margin: 0 0 0.6em !important
}
.ts-fab-latest li span, .ts-fab-twitter-time {
font-size: 12px;
}
.latest-see-all {
font-weight: normal;
}
.ts-fab-wrapper iframe {
margin-bottom: 0 !important;
}
body.rtl .ts-fab-avatar {
float: right;
}
body.rtl .ts-fab-text {
margin-left: 0;
margin-right: 76px;
}
body.rtl .ts-fab-list {
padding: 0 5px 0 0 !important;
}
body.rtl .ts-fab-list li {
float: right;
margin: 0 0 0 5px !important;
}
قم بالبحث عن الكود التالى
<div class='post-footer-line post-footer-line-1'>
اذا لم تجده قم بالبحث عن الكود التالى
<div class='post-footer'>
ثانيا: إضافة أكواد HTML
نضع الأكواد التاليه أعلى الكود
<div class='post-footer-line post-footer-line-1'>
<b:if cond='data:blog.pageType == "item"'><!-- For Author Box 1 --><b:if cond='data:post.author == "Author1Name"'><div class='ts-fab-wrapper ts-fab-icons-text' id='ts-fab-below-10105'><ul class='ts-fab-list'><li class='ts-fab-bio-link active'><a href='#ts-fab-bio-below-10105'>About</a></li><li class='ts-fab-twitter-link'><a href='#ts-fab-twitter-below-10105'>Twitter</a></li><li class='ts-fab-facebook-link'><a href='#ts-fab-facebook-below-10105'>Facebook</a></li><li class='ts-fab-googleplus-link'><a href='#ts-fab-googleplus-below-10105'>Google+</a></li></ul><div class='ts-fab-tabs'><div class='ts-fab-tab' id='ts-fab-bio-below-10105' style='display: block;'><div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-0' src='AUTHOR 1 IMAGE URL HERE' width='64'/></div><div class='ts-fab-text'><div class='ts-fab-header'><h4><a href='AUTHOR 1 WEBSITE LINK HERE'>AUTHOR 1 NAME HERE</a></h4></div> <div class='ts-fab-content'>AUTHOR 1 BIO HERE</div></div></div><div class='ts-fab-tab' id='ts-fab-twitter-below-10105' style='display: none;'><div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-1' src='AUTHOR 1 IMAGE URL' style='' width='64'/></div><div class='ts-fab-text'><div class='ts-fab-header'><h4><a href='http://twitter.com/AUTHOR 1 TWITTER PROFILE ID'>@AUTHOR 1 NAME</a></h4></div> <div class='ts-fab-content'> </div><div class='ts-fab-follow'><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1374787011.html#_=1375013320942&id=twitter-widget-2&lang=en&screen_name=AUTHOR 1 TWITTER PROFILE ID&show_count=true&show_screen_name=true&size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 243px; height: 20px;"></iframe></div></div></div><div class='ts-fab-tab' id='ts-fab-facebook-below-10105' style='display: none;'><div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-2' src='AUTHOR IMAGE URL' style='' width='64'/></div><div class='ts-fab-text'><div class='ts-fab-header'><h4><a href='http://www.facebook.com/AUTHOR 1 FACEBOOK ID'>AUTHOR 1 NAME</a></h4></div><div class='fb-follow' data-href='https://www.facebook.com/AUTHOR 1 FACEBOOK ID' data-show-faces='true' data-width='450'><span style='height: 35px; width: 450px;'><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2FAUTHOR 1 FACEBOOK ID&layout=standard&show_faces=true&colorscheme=light&font&width=450&height=27' style='border:none; overflow:hidden; width:450px; height:27px;'/></span></div></div></div><div class='ts-fab-tab' id='ts-fab-googleplus-below-10105' style='display: none;'><div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-3' src='AUTHOR 1 IMAGE URL' style='' width='64'/></div><div class='ts-fab-text'><div class='ts-fab-header'><h4><a href='https://plus.google.com/AUTHOR 1 GOOGLE+ ID?rel=author'>AUTHOR 1 NAME</a></h4></div><div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/AUTHOR 1 GOOGLE+ ID' data-rel='author'/></div></div></div></div><!-- For Author Box 2 --><b:if cond='data:post.author == "Author2 Name"'><div class='ts-fab-wrapper ts-fab-icons-text' id='ts-fab-below-10105'><ul class='ts-fab-list'><li class='ts-fab-bio-link active'><a href='#ts-fab-bio-below-10105'>About</a></li><li class='ts-fab-twitter-link'><a href='#ts-fab-twitter-below-10105'>Twitter</a></li><li class='ts-fab-facebook-link'><a href='#ts-fab-facebook-below-10105'>Facebook</a></li><li class='ts-fab-googleplus-link'><a href='#ts-fab-googleplus-below-10105'>Google+</a></li></ul><div class='ts-fab-tabs'><div class='ts-fab-tab' id='ts-fab-bio-below-10105' style='display: block;'><div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-0' src='AUTHOR 2 IMAGE URL HERE' width='64'/></div><div class='ts-fab-text'><div class='ts-fab-header'><h4><a href='AUTHOR 2 WEBSITE LINK HERE'>AUTHOR 2 NAME HERE</a></h4></div> <div class='ts-fab-content'>AUTHOR 2 BIO HERE</div></div></div><div class='ts-fab-tab' id='ts-fab-twitter-below-10105' style='display: none;'><div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-1' src='AUTHOR 2 IMAGE URL' style='' width='64'/></div><div class='ts-fab-text'><div class='ts-fab-header'><h4><a href='http://twitter.com/AUTHOR 2 TWITTER PROFILE ID'>@AUTHOR 2 NAME</a></h4></div> <div class='ts-fab-content'> </div><div class='ts-fab-follow'><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1374787011.html#_=1375013320942&id=twitter-widget-2&lang=en&screen_name=AUTHOR TWITTER 2 PROFILE ID&show_count=true&show_screen_name=true&size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 243px; height: 20px;"></iframe></div></div></div><div class='ts-fab-tab' id='ts-fab-facebook-below-10105' style='display: none;'><div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-2' src='AUTHOR 2 IMAGE URL' style='' width='64'/></div><div class='ts-fab-text'><div class='ts-fab-header'><h4><a href='http://www.facebook.com/AUTHOR 2 FACEBOOK ID'>AUTHOR 2 NAME</a></h4></div><div class='fb-follow' data-href='https://www.facebook.com/AUTHOR 2 FACEBOOK ID' data-show-faces='true' data-width='450'><span style='height: 35px; width: 450px;'><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2FAUTHOR 2 FACEBOOK ID&layout=standard&show_faces=true&colorscheme=light&font&width=450&height=27' style='border:none; overflow:hidden; width:450px; height:27px;'/></span></div></div></div><div class='ts-fab-tab' id='ts-fab-googleplus-below-10105' style='display: none;'><div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-3' src='AUTHOR 2 IMAGE URL' style='' width='64'/></div><div class='ts-fab-text'><div class='ts-fab-header'><h4><a href='https://plus.google.com/AUTHOR 2 GOOGLE+ ID?rel=author'>AUTHOR 2 NAME</a></h4></div><div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/AUTHOR 2 GOOGLE+ ID' data-rel='author'/></div></div></div></div></b:if></b:if></b:if>
هل لديك أكثر من مؤلفين؟ يمكنك استخدام الكود الثانى وتكراره ان كان لديك المزيد من المؤلفين
<!-- For Author Box 3 -->
<b:if cond='data:post.author == "Author3 Name"'>
<div class='ts-fab-wrapper ts-fab-icons-text' id='ts-fab-below-10105'><ul class='ts-fab-list'><li class='ts-fab-bio-link active'><a href='#ts-fab-bio-below-10105'>About</a></li><li class='ts-fab-twitter-link'><a href='#ts-fab-twitter-below-10105'>Twitter</a></li><li class='ts-fab-facebook-link'><a href='#ts-fab-facebook-below-10105'>Facebook</a></li><li class='ts-fab-googleplus-link'><a href='#ts-fab-googleplus-below-10105'>Google+</a></li></ul>
<div class='ts-fab-tabs'>
<div class='ts-fab-tab' id='ts-fab-bio-below-10105' style='display: block;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-0' src='AUTHOR 3 IMAGE URL HERE' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'><h4><a href='AUTHOR 3 WEBSITE LINK HERE'>AUTHOR 3 NAME HERE</a></h4></div> <div class='ts-fab-content'>AUTHOR 3 BIO HERE</div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-twitter-below-10105' style='display: none;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-1' src='AUTHOR 3 IMAGE URL' style='' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='http://twitter.com/AUTHOR 3 TWITTER PROFILE ID'>@AUTHOR 3 NAME</a></h4></div> <div class='ts-fab-content'> </div><div class='ts-fab-follow'><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1374787011.html#_=1375013320942&id=twitter-widget-2&lang=en&screen_name=AUTHOR TWITTER 3 PROFILE ID&show_count=true&show_screen_name=true&size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 243px; height: 20px;"></iframe></div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-facebook-below-10105' style='display: none;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-2' src='AUTHOR 3 IMAGE URL' style='' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='http://www.facebook.com/AUTHOR 3 FACEBOOK ID'>AUTHOR 3 NAME</a></h4></div>
<div class='fb-follow' data-href='https://www.facebook.com/AUTHOR 3 FACEBOOK ID' data-show-faces='true' data-width='450'><span style='height: 35px; width: 450px;'><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2FAUTHOR 3 FACEBOOK ID&layout=standard&show_faces=true&colorscheme=light&font&width=450&height=27' style='border:none; overflow:hidden; width:450px; height:27px;'/></span></div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-googleplus-below-10105' style='display: none;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-3' src='AUTHOR 3 IMAGE URL' style='' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='https://plus.google.com/AUTHOR 3 GOOGLE+ ID?rel=author'>AUTHOR 3 NAME</a></h4>
</div>
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/AUTHOR 3 GOOGLE+ ID' data-rel='author'/>
</div>
</div>
</div>
</div>
</b:if>
ثالثا: إضافة أكواد الجافا سكريبت
ابحث عن </head> وقم بوضع الكود التالى فوقها
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function(a){a(".ts-fab-tabs > div").hide();a(".ts-fab-tabs > div:first-child").show();a(".ts-fab-list li:first-child").addClass("active");a(".ts-fab-list li a").click(function(){a(this).closest(".ts-fab-wrapper").find("li").removeClass("active");a(this).parent().addClass("active");var b=a(this).attr("href");if(b.indexOf("#")!=-1){currentTabExp=b.split("#");b="#"+currentTabExp[1]}a(this).closest(".ts-fab-wrapper").find(".ts-fab-tabs > div").hide();a(b).show();return false})});
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
(function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
// Google + (plus)
(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>
تعديلات هامة لضمان عمل الأضافة بطريقة صحيحة وسنأخذ كمثال أول تعريف الذى يسمى Author1Name
- نستبدل Author1Name باسم المؤلف أو الكاتب كما هو واضح فى لوحة تحكم مدونتك.
- نستبدل AUTHOR 1 IMAGE URL HERE برابط صورتك
- نستبدل AUTHOR 1 WEBSITE LINK HERE برابط مدونة المؤلف
- نستبدل AUTHOR 1 BIO HERE بنبذة عن المؤلف
- نستبدل AUTHOR 1 TWITTER PROFILE ID باسمه على تويتر كما هو موجود برابط حسابه
- نستبدل AUTHOR 1 FACEBOOK ID باسمه على الفيسبوك كما هو موجود برابط حسابه
- نستبدل AUTHOR 1 GOOGLE+ ID باسمه على جوجل بلس كما هو موجود برابط حسابه ويفضل أن يقوم بطريقة الأرقام ويمكنك الاستعانة من خلال هذا الرابط لتحصل على ID الخاص بحسابك بجوجل بلس بطريقة سهلة للغاية.
شارك الموضوع
