إضافة صندوق تعريف الكاتب بشكل جميل ورائع

إضافة صندوق تعريف الكاتب

السلام عليكم ورحمة الله وبركاته’في تدوينتنا هذه سنتعرف على كيفية إضافة صندوق تعريف الكاتب بشكل جميل ورائع لاشك أن الكل يعرف هذه الإضافة وقد سبق وأن طرحنا الجزء الأول "إضافة صندوق تعريف الكاتب الجزء الأول" ولكن هذا الجزء الثاني أحسن لأنه بسيط وسهل التركيب 

يمكنك معاينة الإضافة عبر الز التالي

• معاينة

طريقة التركيب

إبحث عن الوسم ]]></b:skin> وأضف الكود التالي فوقه

CSS/* AUTHOR Box Tech5academy.blogspot.com */
.tl-author{background:#eef1f3;padding:25px;color:#222222;margin:15px -25px 35px -25px;font-family: 'Droid Arabic Naskh', serif;}
.tl-author a {color:#e5192c;}
.tl-author p {font-size: 14px;}
.tl-author .tl-authAvatar img{width:100px;height:100px;overflow:hidden;;float: right;margin-left: 30px;}
.tl-author p.tl-authName{font-weight:700;font-size:18px;margin-bottom:7px;margin-top:-7px}
.tl-author .tl-authDesc{display:block;margin-top:3px}
.tl-author .fa {background:#777777;}
.tl-authDesc p{margin-bottom:20px}
.auth-profiles ul li {margin: 0;}
.tl-author .tl-authSocial{font-size:12px;margin-top:-8px;text-align:center}
.list-unstyled{padding-left:0;list-style:none;margin:2px}.list-inline li{display:inline-block;padding-right:5px;padding-left:5px;margin-bottom:10px}.tl-colored-social .fa,.tl-social-icons .fa{font-size:16px}.tl-colored-social .fa,.tl-social-icons .fa{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}.tl-colored-social .fa,.tl-social-icons .fa{width:35px;height:35px;line-height:35px;text-align:center;color:#FFF;color:rgba(255,255,255,0.8)}.tl-colored-social.icon-circle .fa,.tl-social-icons.icon-circle .fa{border-radius:50%}.tl-colored-social.icon-rounded .fa,.tl-social-icons.icon-rounded .fa{border-radius:2px}.tl-colored-social.icon-flat .fa,.tl-social-icons.icon-flat .fa{border-radius:0}.tl-colored-social .fa:hover,.tl-colored-social .fa:active,.tl-social-icons .fa:hover,.tl-social-icons .fa:active{color:#FFF}.tl-colored-social.icon-zoom .fa:hover,.tl-colored-social.icon-zoom .fa:active,.tl-social-icons.icon-zoom .fa:hover,.tl-social-icons.icon-zoom .fa:active,.tl-social-sidebar li:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}.tl-colored-social.icon-rotate .fa:hover,.tl-colored-social.icon-rotate .fa:active,.tl-social-icons.icon-rotate .fa:hover,.tl-social-icons.icon-rotate .fa:active{-webkit-transform:scale(1.1) rotate(360deg);-moz-transform:scale(1.1) rotate(360deg);-ms-transform:scale(1.1) rotate(360deg);-o-transform:scale(1.1) rotate(360deg);transform:scale(1.1) rotate(360deg)}.tl-colored-social .fa-dribbble,.tl-social-icons .fa-dribbble:hover,.tl-socialicons .tl-dribbble:hover .tl-sicon{background-color:#F46899}.tl-colored-social .fa-stumbleupon,.tl-social-icons .fa-stumbleupon:hover{background-color:#eb4924}.tl-colored-social .fa-reddit,.tl-social-icons .fa-reddit:hover{background-color:#5f99cf}.tl-colored-social .fa-facebook,.tl-social-icons .fa-facebook:hover,.tl-socialicons .tl-facebook:hover .tl-sicon{background-color:#3C599F}.tl-colored-social .fa-rss,.tl-social-icons .fa-rss:hover{background-color:#f26522}.tl-colored-social .fa-lastfm,.tl-social-icons .fa-lastfm:hover{background-color:#d51007}.tl-colored-social .fa-flickr,.tl-social-icons .fa-flickr:hover{background-color:#FF0084}.tl-colored-social .fa-instagram,.tl-social-icons .fa-instagram:hover,.tl-socialicons .tl-instagram:hover .tl-sicon{background-color:#685243}.tl-colored-social .fa-foursquare,.tl-social-icons .fa-foursquare:hover,.tl-socialicons .tl-foursquare:hover .tl-sicon{background-color:#0086BE}.tl-colored-social .fa-github,.tl-social-icons .fa-github:hover,.tl-socialicons .tl-github:hover .tl-sicon{background-color:#070709}.tl-colored-social .fa-google-plus,.tl-social-icons .fa-google-plus:hover,.tl-socialicons .tl-googleplus:hover .tl-sicon{background-color:#CF3D2E}.tl-colored-social .fa-instagram,.tl-social-icons .fa-instagram:hover{background-color:#A1755C}.tl-colored-social .fa-linkedin,.tl-social-icons .fa-linkedin:hover{background-color:#0085AE}.tl-colored-social .fa-pinterest,.tl-social-icons .fa-pinterest:hover,.tl-socialicons .tl-pinterest:hover .tl-sicon{background-color:#CC2127}.tl-colored-social .fa-twitter,.tl-social-icons .fa-twitter:hover,.tl-socialicons .tl-twitter:hover .tl-sicon{background-color:#32CCFE}.tl-colored-social .fa-vk,.tl-social-icons .fa-vk:hover,.tl-socialicons .tl-vk:hover .tl-sicon{background-color:#375474}.tl-colored-social .fa-soundcloud,.tl-social-icons .fa-soundcloud:hover,.tl-socialicons .tl-soundcloud:hover .tl-sicon{background-color:#FF4100}.tl-colored-social .fa-vine,.tl-social-icons .fa-vine:hover,.tl-socialicons .tl-vine:hover .tl-sicon{background-color:#35B57C}.tl-colored-social .fa-xing,.tl-social-icons .fa-xing:hover{background-color:#00555C}.tl-colored-social .fa-youtube,.tl-social-icons .fa-youtube:hover,.tl-socialicons .tl-youtube:hover .tl-sicon{background-color:#C52F30}.top-social ul li{margin:0;padding:0}div#socialicons-top{float:left}.top-social .list-unstyled{margin:0}
.tl-socialicons{text-align:center;overflow:auto;font-size:22px;margin:0 -8px}.tl-socialicons .tl-socialInner{position:relative;overflow:hidden;padding-left:8px}.tl-socialicons .tl-social{float:left;width:25%}.tl-socialicons .tl-sinn{padding-right:8px}.tl-socialicons .tl-sinn:hover .tl-sicon{color:#fff}.tl-socialicons .tl-sicon{display:block;padding:10px 0;}.tl-socialicons .tl-facebook .tl-sicon{color:#3B5998}.tl-socialicons .tl-googleplus .tl-sicon{color:#DD4B39}.tl-socialicons .tl-twitter .tl-sicon{color:#2AA9E0}.tl-socialicons .tl-instagram .tl-sicon{color:#685243}.tl-socialicons .tl-pinterest .tl-sicon{color:#CC2028}.tl-socialicons .tl-youtube .tl-sicon{color:#DE1829}.tl-socialicons .tl-vine .tl-sicon{color:#35B57C}.tl-socialicons .tl-soundcloud .tl-sicon{color:#FF4100}.tl-socialicons .tl-vk .tl-sicon{color:#45668e}.tl-socialicons .tl-foursquare .tl-sicon{color:#f94877}.tl-socialicons .tl-github .tl-sicon{color:#333333}.tl-socialicons .tl-dribbble .tl-sicon{color:#ea4c89}.tl-socialicons .tl-sicon{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-ms-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease}.tl-socialicons .tl-scount{display:block;color:#222222;background:#F5F5F5;padding:5px 0;position:relative;margin-bottom:8px;font-size:14px;font-weight:600}.tl-socialicons .tl-scount:after{bottom:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(238,238,238,0);border-bottom-color:#FFFFFF;border-width:4px;margin-left:-4px}

ثم إبحث عن <div class='post-footer-line post-footer-line-1'> وأضف الكود التالي تحته (أسفله)

html<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tl-author'>
<div class='tl-authAvatar'><img alt='Mohamed' class='avatarr' height='96' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiCGbQKPmtmialM1OWk2c_SAh2D4IrMaCmXuy758rrwBii1JjChSzHA_4N8vmVjsnEGbAbpZcGu__pqDlVfqkhUy9EWlTpX9vbVd842j_RDe1ErIXrb4_BuS-Tw5Txujxr4QqRz7si1dmK/s1600/M.png' width='96'/>
</div>
<div class='tl-authDesc'>
<a href='#'><p class='tl-authName'>محمد</p></a>
<p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة&#1548; لقد تم توليد هذا النص من مولد النص العربى&#1548; حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق</p>
<div class='tl-authSocial'>
<div class='auth-profiles'>
<ul class='tl-social-icons icon-flat list-unstyled list-inline'>
<li>
<a href='#'><i class='fa fa-twitter'/></a></li>
<li>
<a href='#'><i class='fa fa-facebook'/></a></li>
<li>
<a href='#'><i class='fa fa-google-plus'/></a></li>
<li>
<a href='#'><i class='fa fa-pinterest'/></a></li>
<li>
<a href='#'><i class='fa fa-github'/></a></li>
<li>
<a href='#'><i class='fa fa-dribbble'/></a></li>
</ul></div></div>
</div>
</div></b:if>

وأخيرا غير بعض الجمل الأساسية مثل الإسم و الوصف ...

إحفظ قالبك ومبروك عليك الإضافة
شكرا لكم ولحسن تتبعكم إلى تدوينة أخرى إنشاء الله
لاتنسو مشاركة الموضوع مع أصدقائكم عبر الأزرا الموجودة أسفل التدونة

person_outline محمد  schedule 5/01/2016 

إضافات بلوجر بلوجر