السلام عليكم ورحمه الله وبركاته
اليوم أريد ان اشرككم اداه جميله جداا وفريده وهى اضافه صندوق تعريف للكاتب تحت كل تدوينه فأتمنى ان تعجبكم ان شاء الله.
كيفيه تركيب صندوق لتعريف الكاتب تحت كل تدوينه
نذهب الى المدونه تختار القالب --> تحرير القالب
تضغط علىCTRL+ F
ابحث عن هذا الكود
]]></b:skin>
وضع هذا الكود فوقه مباشره
.ts-fab-content{color:#fff;}
.placeheld{color:#888}.ts-fab-wrapper{margin:2em
0;clear:both}.ts-fab-wrapper
a{text-decoration:none !important}.ts-fab-wrapper
img{border:none !important}.ts-fab-list{overflow:hidden;margin:0
!important;padding:0
0 0 5px}.ts-fab-list
li{display:block;float:left;clear:none;list-style:none !important;margin:0
5px 0 0 !important}.ts-fab-list li:before{display:none !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;border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;box-sizing:content-box;-moz-box-sizing:content-box}.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('/wp-content/plugins/fancier-author-box/images/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:-279px 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-latest-posts-link
a{background-position:8px -192px;background-repeat:no-repeat;padding-left:27px}.ts-fab-list li.ts-fab-latest-posts-link.active
a{background-position:-280px -192px;background-repeat:no-repeat;padding-left:27px}.ts-fab-widget .ts-fab-list li
a{text-indent:-9999em;padding:8px
12px !important}.ts-fab-widget .ts-fab-list li.ts-fab-bio-link
a{width:4px}.ts-fab-widget .ts-fab-list li.ts-fab-twitter-link
a{width:12px}.ts-fab-widget .ts-fab-list li.ts-fab-googleplus-link
a{width:8px}.ts-fab-widget .ts-fab-list li.ts-fab-facebook-link
a{width:0}.ts-fab-widget .ts-fab-list li.ts-fab-latest-posts-link
a{width:4px}.ts-fab-tab{display:none;border:2px
solid #333;padding:12px;background:#030303;min-height:80px;overflow:hidden}.ts-tab:first-child{display:block}.ts-fab-widget .ts-fab-tab{padding:8px}.ts-fab-avatar{display:block;float:left}.ts-fab-no-float .ts-fab-avatar{float:none;margin:0
0 12px}.ts-fab-text{margin-left:96px;line-height:1.5}.ts-fab-no-float .ts-fab-text{margin-left:0}.ts-fab-avatar>img{width:80px;max-width:100% !important}.ts-fab-header{margin-bottom:10px;color:#FFF500}.ts-fab-text
h4{clear:none !important;font-size:18px;line-height:1 !important;font-weight:bold;margin:0
0 .2em !important;line-height:1;padding:0}.ts-fab-description{font-size:12px}.ts-fab-follow{margin-top:10px}.ts-fab-social-links{margin:.1em 0 0;text-align:center}.ts-fab-social-links
a{display:inline-block;margin:0
1px;opacity:.5;transition:opacity .2s;-moz-transition:opacity .2s;-webkit-transition:opacity .2s;-o-transition:opacity .2s}.ts-fab-social-links a:hover{opacity:1}.ts-fab-latest{margin:0
!important;padding:0
!important}.ts-fab-latest
li{list-style:none !important;line-height:1.2;margin:0
0 .6em;clear:none !important}.ts-fab-latest li span,.ts-fab-twitter-time{font-size:12px}.latest-see-all{font-weight:normal}.socialmedia-buttons{margin-top:5px}.smw_left{text-align:left}.smw_center{text-align:center}.smw_right{text-align:right}li.Social_Widget
a{padding:0
!important;margin:0
!important;background:none !important;text-align:center}.smw_center img,
ثم تبحث ايضا عن هذا الكود
data:post.body
وضع فوقه هذا الكود مباشرة
<div id="ts-fab-below" class="ts-fab-wrapper"><ul class="ts-fab-list"><li class="ts-fab-latest-posts-link"></li></ul><div class="ts-fab-tabs">
<div class="ts-fab-tab" id="ts-fab-bio-below" style="display: block;">
<div class="ts-fab-avatar"><img alt="" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/c86.34.430.430/s160x160/1368_690848307595184_1023146878_n.jpg" class="avatar avatar-80 photo" height="80" width="80" /><div class="ts-fab-social-links"><a href="http://twitter.com/mohamedtahsen" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://twitter.com']);" title="Twitter" target="_blank"><img src="http://justwp.org/wp-content/plugins/fancier-author-box/images/twitter.png" width="18" height="18" alt="My Twitter profile" /></a><a href="http://facebook.com/thetahseens" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://facebook.com']);" title="Facebook" target="_blank"><img src="http://justwp.org/wp-content/plugins/fancier-author-box/images/facebook.png" width="18" height="18" alt="My Facebook profile" /></a><a href="http://plus.google.com/110280613398127301380?rel=author" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://plus.google.com']);" title="Google+" target="_blank"><img src="http://justwp.org/wp-content/plugins/fancier-author-box/images/googleplus.png" width="18" height="18" alt="My Google+ profile" /></a></div>
</div>
<div class="ts-fab-text">
<div class="ts-fab-header"><h4>محمد تحسين</h4></div><!-- /.ts-fab-header -->
<div class="ts-fab-content"><div dir="rtl" style="text-align: right;" trbidi="on">
<span style="font-size: large;">محمد تحسين طالب فى كليه تجاره. أهتم بعالم المعرفه والتكنولوجيا الحديثه والمتطوره وأمل ان اكون ذات يوما من المبرمجين والمسوقين الالكترونين فى مجال الانترنت ونحاول جاهدين فى مدونه وسيله ان نقدم كل ما يخص المعرفه والتكنولوجيا فتابعونا على المواقع الاجتماعيه ليصلكم كل تحديثاتنا</span><br />
<br /></div>
</div>
</div>
</div>
<div class="ts-fab-tab" id="ts-fab-latest-posts-below" style="display: none;">
<div class="ts-fab-avatar"><img alt="" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/c86.34.430.430/s160x160/1368_690848307595184_1023146878_n.jpg" class="avatar avatar-80 photo" height="80" width="80" /><div class="ts-fab-social-links"><a href="http://twitter.com/mohamedtahsen" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://twitter.com']);" title="Twitter" target="_blank"><img src="http://justwp.org/wp-content/plugins/fancier-author-box/images/twitter.png" width="18" height="18" /></a><a href="http://facebook.com/thetahseens" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://facebook.com']);" title="Facebook" target="_blank"><img src="http://justwp.org/wp-content/plugins/fancier-author-box/images/facebook.png" width="18" height="18" /></a><a href="http://plus.google.com/110280613398127301380" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://plus.google.com']);" title="Google+" target="_blank"><img src="http://justwp.org/wp-content/plugins/fancier-author-box/images/googleplus.png" width="18" height="18" /></a></div>
</div>
</div>
</div>
</div>
نبدأ بتغير ما هو ملون اذا ما هو باللون الاحمر فهو الصوره التى يجب ان تغيرها بصوره الكاتب الذى تريد ان تضع صورته اما ما هو باللون الازرق فهو اسم حساب تويتر الخاص بالكاتب وما هو باللون الاصفر فهو اسم حسابك على الفيس والبنفسجى يخص حسابك على جوجل والرمادى لتكتب نبذه عن الكاتب.
ملحوظه : يوجد أكثر من كود data:post.body فاذا لم يعمل الاول فجرب الثانى وهكذا حتى يشتغل بكفاءه.
0 التعليقات:
إرسال تعليق