اضافة تعريف الكاتب بشكل منزلق V1

لعلك بحثت قديما عن شكل تعريف الكاتب ولكن الاشكال كلها قديمة وتقليدية ولكن وجدت مؤخرا انه كلهم بنفس الكيفية ولكن الان نقدم لكم تعريف كاتب منزلق فريد من نوعه بتصميم css و jquery سهل وبسيط وحصري لمدونه كن مهووس.

صوره من الاضافة

كما نري تصميم بسيط وراقي ويمكن اغلاقها وفتحها كما تريد :)

هل اعجبتك الاضافة؟ فالنركبها

1- اول شئ ابحث عن هذا الكود </body> بأستخدام ctrl+f

ثم قم بأضافه هذا الكود فوقه مباشرة

2- ابحث عن هذا الكود <data:post.body/> عن طريق ctrl+f

ستجد الكثير منه الكثير تقريبا الاخير هو المقصود

ضيف هذه الاكواد تحته

<div id='hide' style="display:none;">
<div class="card-content" rel-user="23">
<section class="user-card">
 <div class="boxProfile-fields profile-picture">
  <div id="avatarImage" class="designerPic avatar">
         <a href="http://www.facebook.com/lacolombsanti" onclick="trk_uc('user-link');"><img class="gr_avatar_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNGhsSR_R9xfuPh2iIcEDQ0HWXa1miEwNawvkm61WzsuKSm4rz-hLxQ6LG7dg3Z_koAiAF3asN_6oM4ktTrY2WldwzjZ9r-6kFQGHc0E8-aGoYCUpLZf1SDh2VzdZSi85xb8UxqyXWkgAk/s1600/13256252_100929870326952_8871261855062891597_n.jpg"/></a>
     </div>

  <a href="" class="username" onclick="trk_uc('user-link');">@elfager1</a>
  <span class="real-name">عبدالله محمد</span>
<p class="about">
اضافة حصرية ل كن مهووس | هوسنا سر ابداعنا 
الفاجر | عبدالله محمد
      </p>
 </div>
<div class="badges" style="     margin-top: 13px; ">
<img class="a-tooltip" data-original-title="في العراق" data-placement="bottom" data-toggle="tooltip" src="http://www.myiconfinder.com/uploads/iconsets/32dc8bace64ed60377fe0395b1f69fad.png" style="     width: 37px !important; " title=""/>
<img class="a-tooltip" data-original-title="بائع لعمل مجاني" data-placement="bottom" data-toggle="tooltip" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1unXvns3YrLnbOCPR5ME9zoucBgdj9ryicqnC1pFS0cg7l6O-8yhf36eEhGyZ3Qcanj7ZtHwbi77u8LQDdhtWan-pwIC4sac8qwK54NbZ9EJJercsavWiwzIaDFtWAPhaQvipduA4G04/s1600/free.png" style="     width: 37px !important; " title=""/>
<img class="a-tooltip" data-original-title="بائع لديه منتجات محملة بكثرة" data-placement="bottom" data-toggle="tooltip" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIUPHVCJGrsnjWcWorlT90pdR2DWLxpjwIpdnx5tAzZcxfh0n_qQZd77Dr9GWkZim8EOdLsaaI7tLrbIsWgLD3iJbuBbFsgI6xpOvCfoUveXO2o9ssJUA8v2J8PN9xLlgywLG60dLcslk/s320/trends.png" style="     width: 37px !important; " title=""/>
<img class="a-tooltip" data-original-title="بائع بأكثر من 500$" data-placement="bottom" data-toggle="tooltip" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHlmoz2ULhUm44fc6PsDbVK0RoQpKksOciN7XuQG736JPJZN3GbkJoAu-zmj-6aLx-A_OqPh-EK8KW10eu-fURDHNFoXn2NI84QWv31vg5Iucd896fh5qFtdtDR-5_zpHB-TZd5XaeYYs/s320/plus500.png" style="     width: 37px !important; " title=""/>
<img class="a-tooltip" data-original-title="بائع مميز " data-placement="bottom" data-toggle="tooltip" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5hQQRarzgz7JODKM8Q9ZhOHIOUGaIjv30s7BD-XwnVd0HHqPkwnCwz5olMrvC8VU-iXuElSccB-dLMb-yCsjC29vV1T25Esp5mtjHQXBKLnY7myN79ScT6VNN0oZSiUx7mMjVXKdk2Kk/s1600/featured.png" style="     width: 37px !important; " title=""/>
<img class="a-tooltip" data-original-title="فاز باحدى المسابقات" data-placement="bottom" data-toggle="tooltip" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibmRWijGmpi9IrJXE0_4CJ3xc2Zc-0acyVhJw2wlO-KsvgZeK5akUP8hBhNUgqOskMKUFpAaJTk6lOWXo-8Wnw7GYFPsaKgG9orff_gIp85ff8JUuVx4ZC-IAwfbxUqakBR2Rxiu5exvo/s320/winners.png" style="     width: 37px !important; " title=""/>
</div>
  <a href="http://www.cn1gk.com" id="cn1gk" rel="dofollow" target="_blank">كن مهوسا | هوسنا هو سر ابداعنا</a>
 
 <div class="links card-hidden">
  <a href="#" class="flaticon-location" target="_blank" onclick="trk_uc(&#39;location&#39;);"><i class="fa fa-plus" aria-hidden="true"></i> تابعنا لنكون علي تواصل</a>
  <a href="https://www.facebook.com/abdallahxmo" class="user-url flaticon-link" target="_blank" onclick="trk_uc('user-link');">Abdallah Mohamed</a>
    <a href="http://www.cn1gk.com/" class="user-website flaticon-earth" target="_blank" rel="nofollow" onclick="trk_uc('url-web');">كن مهوسا</a> </div>

  <div class="user-social card-hidden">
  <ul>
   <li><a href="https://www.facebook.com/lacolombsanti" class="flaticon-googlerounded icon-google" target="_blank" rel="nofollow" onclick="trk_uc('social_google');"></a></li>   <li><a href="https://www.facebook.com/lacolombsanti" class="flaticon-facebookrounded icon-facebook" target="_blank" rel="nofollow" onclick="trk_uc('social_facebook');"></a></li>   <li><a href="https://www.facebook.com/lacolombsanti" class="flaticon-twitterrounded icon-twitter" target="_blank" rel="nofollow" onclick="trk_uc('social_twitter');"></a></li>   <li><a href="https://www.facebook.com/lacolombsanti" class="flaticon-pinterestrounded icon-pinterest" target="_blank" rel="nofollow" onclick="trk_uc('social_pinterest');"></a></li>   <li><a href="https://www.facebook.com/lacolombsanti" class="flaticon-dribbblerounded icon-dribbble" target="_blank" rel="nofollow" onclick="trk_uc('social_dribbble');"></a></li>   <li><a href="https://www.facebook.com/lacolombsanti" class="flaticon-behancerounded icon-behance" target="_blank" rel="nofollow" onclick="trk_uc('social_behance');"></a></li>  </ul>
 </div>
 
  <button class="more-info">
  <span style="    font-family: 'jazeera';">+ المزيد</span>
  <span style="    font-family: 'jazeera';">- اقل</span>
 </button>

 <script type="text/javascript">$('.more-info').on('click', function () { $('section.user-card').toggleClass('expanded'); });</script>
 
  
 </section>
<script type="text/javascript">function trk_uc(event) { ga('send', 'event', 'user-card', 'freepik', event); }</script></div>
</div>
<div style="text-align: center;
    width: 33%;
    float: right;">
  <button style="border-color: #e7505a;
    color: #fff;
    background-color: #e7505a;
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1.5;
    box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.18);
    border: none;
    font-size: 12px;
    transition: box-shadow .28s cubic-bezier(.4,0,.2,1);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    user-select: none;
    padding: 8px 14px 7px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 25px!important;
    overflow: hidden;
    outline: 0!important;
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: 'jazeera';" class="abdallah">عن الكاتب <i class="fa fa-heart" aria-hidden="true"></i></button>
  </div>

1. ابحث عن هذا الكود </b:skin> واضف قبله هذه الاكواد

#hide{
font-family: 'jazeera';
width:100%;
float:right;
}
.btn-group-justified {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
}
.card-loader{position:relative;overflow:hidden;margin-bottom:0}.card-loader{background-color:#fff;border-radius:4px}.card-loader>img{display:block;position:relative;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%)}.card-loader .user-card{margin-bottom:0}.card-loader:after{content:'';width:80px;height:100%;position:absolute;left:0;top:0;background:rgba(255,255,255,0);background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );animation:card-loader 1.5s linear infinite;-webkit-animation:card-loader 1.5s linear infinite}@keyframes card-loader{0%{left: -20%;opacity:1}90%{left:120%;opacity:1}98%{left:120%;opacity:0}99%{left: -20%;opacity:0}100%{left: -20%;opacity:1}}@-webkit-keyframes card-loader{0%{left: -20%;opacity:1}90%{left:120%;opacity:1}98%{left:120%;opacity:0}99%{left: -20%;opacity:0}100%{left: -20%;opacity:1}}.user-card{width:100%;display:block;position:relative;background-color:#fff;border-radius:4px;box-shadow:0px 1px 2px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 0px rgba(0,0,0,0.2);text-align:center;margin-bottom:2em;font-size:16px;padding-top:1px}.user-card:last-child{margin-right:0}.user-card .profile-picture
.avatar{display:block;width:120px;height:120px;box-shadow:0 0 12px #b3b3b3;background-color:#fff;border-radius:100%;overflow:hidden;background-size:100%;border:6px
solid #fff;position:relative;margin:1em
auto}.user-card .profile-picture .avatar
img{max-width:100%;max-height:100%;position:relative;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);border-radius:100%;margin-right:0px;margin-left:0px;}.user-card .profile-picture .avatar
label{opacity:0;width:50%;height:50%;color:#333;cursor:pointer;background:white;display:block;border-radius:0 3em 0 1em;z-index:1;position:absolute;top: -1px;right: -1px;display:block;-webkit-transition:opacity 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22);-moz-transition:opacity 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22);-o-transition:opacity 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22);-ms-transition:opacity 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22);transition:opacity 0.2s cubic-bezier(0.895, 0.03, 0.685, 0.22)}.user-card .profile-picture .avatar label:before{font-size:1.4em;margin-top:15px;margin-right:5px;display:inline-block}@media screen and (max-width: 880px){.user-card .profile-picture .avatar
label{opacity:1}}.user-card .profile-picture .avatar:hover
label{opacity:1}.user-card .profile-picture
.username{color:#333;display:block;padding:0
1em;word-wrap:break-word}.user-card .profile-picture .real-name{color:#a6a9ac;display:block;font-size: .8em;padding:0
1em;word-wrap:break-word}.user-card .profile-picture
.about{color:#a6a9ac;word-wrap:break-word;padding:0
1em;margin-top: .5em;font-size:0.9em}.user-card
.ranking{border-radius:20px;color:#fff;padding: .1em .5em;font-weight:bold;background-color:#f05f5c;position:absolute;margin-top: -3em;font-size:1em;margin-left:2em;cursor:default}.user-card .ranking:hover{background-color:#f05f5c}.user-card
.stats{border-top:1px solid #f5f8f9}.user-card .stats::after{clear:both;content:"";display:table}.user-card .stats a, .user-card .stats
div{color:#333;float:left;width:25%;display:block;padding: .5em;margin:0;text-decoration:none;border-right:1px solid #f5f8f9;font-size:0.9em}.user-card .stats a b, .user-card .stats div
b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.user-card .stats a i, .user-card .stats div
i{font-size:1em;display:block}.user-card .stats a i:before, .user-card .stats div i:before{font-size:1em;line-height:1.5em;margin:0}.user-card .stats a:last-child{border:none}.user-card .stats a:hover
span{color:#333}.user-card .stats a span, .user-card .stats div
span{color:#a6a9ac;display:block}.user-card .stats a span i.flaticon-photo{font-size:1.2em;margin-top: -2px}.user-card
.links{padding:0.5em;text-align:left;border-top:1px solid #f5f8f9}.user-card .links
a{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;display:block;color:#a6a9ac;font-size: .9em;line-height:2em}.user-card .links a:before{margin:0;margin-right: .8em;display:inline-block;width:22px;text-align:center;font-size:1.4em;vertical-align:middle}.user-card .links a:hover{color:#333}.user-card .file-stats{border-top:1px solid #f5f8f9}.user-card .file-stats::after{clear:both;content:"";display:table}.user-card .file-stats
div{width:50%;padding:0.5em;float:left}.user-card .file-stats div
i{display:block;text-align:center;color:#333}.user-card .file-stats div i:before{display:block;text-align:center;margin:0}.user-card .file-stats div
span{display:block;text-align:center;font-size:0.9em;color:#a6a9ac;margin-top:0.1em}.user-card .file-stats div:nth-child(2){border-left:1px solid #f5f8f9;border-right:1px solid #f5f8f9}.user-card .user-social{margin:0;padding:0.5em;border-top:1px solid #f5f8f9}.user-card .user-social
ul{margin:0;padding:0}.user-card .user-social ul
li{display:inline-block}.user-card .user-social ul li
a{display:block;top:0;position:relative;-webkit-transition:all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);-moz-transition:all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);-o-transition:all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);-ms-transition:all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);transition:all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1)}.user-card .user-social ul li a:hover{top: -3px;text-decoration:none}.user-card .user-social ul li a:before{font-size:1.4em;margin:0}@media screen and (max-width: 880px){.user-card .user-social ul li a:before{font-size:2.3em}}.user-card
.badges{    padding: 0.5em;
    border-top: 1px solid #d5d9da;}.user-card .badges
ul{padding:0;margin:0}.user-card .badges ul
li{display:inline-block;margin:0
2px}.user-card .badges ul li
img{max-width:34px;max-height:34px}.user-card .btn-holder{padding:0.5em;border-top:1px solid #f5f8f9}.user-card .btn-holder
.btn{width:100%}.btn-follow{background-color:#286ebb;padding:1em;color:#fff !important;text-align:center;cursor:pointer;font-size:1em;font-weight:bold !important;border-radius:4px}.btn-follow:hover{background-color:#3476d9;text-decoration:none}.btn-follow
i{border:2px
solid #fff;border-radius:100%;display:inline-block;width:20px;height:20px;line-height:16px}.btn-unfollow{background-color:#1bcc87;padding:1em;color:#fff !important;text-align:center;cursor:pointer;font-size:1em;font-weight:bold !important;border-radius:4px;text-decoration:none}.btn-unfollow:hover{text-decoration:none}.btn-unfollow
i{border:2px
solid #fff;border-radius:100%;display:inline-block;width:20px;height:20px;line-height:16px}.btn-unfollow i:before{margin:0;font-size:14px;vertical-align:baseline;display:block;margin-top: -2px}.btn-unfollow span:nth-child(1) i{font-size:0.8em;padding-top:2px}.btn-unfollow span:nth-child(2){display:none}.btn-unfollow:hover{background-color:#f05f5c}.btn-unfollow:hover span:nth-child(1){display:none}.btn-unfollow:hover span:nth-child(2){display:block}.user-card .more-info{border:none;background:none;outline:none;cursor:pointer;display:block;width:100%;text-align:center;border-top:1px solid #f5f8f9}.user-card .more-info:hover{color:#a6a9ac}.user-card .more-info span:nth-child(2){display:none;}.user-card .card-hidden{overflow:hidden;padding:0
0.5em;height:0;border:none;-webkit-transition:all .1s ease-in-out;-ms-transition:all .1s ease-in-out;transition:all .1s ease-in-out}.user-card.expanded .card-hidden{overflow:visible;padding:0.5em;height:auto;border-top:1px solid #f5f8f9}.user-card.expanded .more-info span:nth-child(1){display:none}.user-card.expanded .more-info span:nth-child(2){display:block}.icon-google{color:#db402c !important}.icon-google:before{color:#db402c}.icon-facebook{color:#3b5998 !important}.icon-facebook:before{color:#3b5998}.icon-twitter{color:#55acee !important}.icon-twitter:before{color:#55acee}.icon-gravatar{color:#1E8CBE !important}.icon-gravatar:before{color:#1E8CBE}.icon-pinterest{color:#cb2027 !important}.icon-pinterest:before{color:#cb2027}.icon-dribbble{color:#ea4c89 !important}.icon-dribbble:before{color:#ea4c89}.icon-behance{color:#1769ff !important}.icon-behance:before{color:#1769ff}.alert{clear:both;width:100%;border-radius:4px;color:#fff;font-size: .9em;position:relative;background-color:#b3b3b3;color:#fff}.alert.success{background-color:#1bcc87;color:#fff}.alert.error{background-color:#db402c;color:#fff}.alert.danger{background-color:#f05f5c;color:#fff}.alert.warning{background-color:#FDC345;color:#fff}.alert
i{position:absolute;top:50%;left:0;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);padding:0
1em;text-align:center;height:100%}.alert i:before{font-size:1em;position:relative;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);margin:0;display:block}.alert
a{color:#fff !important;text-decoration:underline;font-weight:bold}.alert
p{margin:0;display:inline-block;vertical-align:middle;color:#fff !important;padding:1em
4.5em 1em 3em;text-align:left;width:100%}.alert .close-alert{color:#fff;text-decoration:none;float:right;font-size:1.4em;padding: .4em 1em;border-radius:0 4px 4px 0;position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;background-color:rgba(0, 0, 0, 0.15);height:100%}.alert .close-alert:hover{color:#fff;background-color:rgba(0, 0, 0, 0.1)}.alert .close-alert
span{display:block;position:relative;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)}.alert .close-alert~p{padding-right:1em}.alert-top{background-color:#FDC345;padding: .5em;text-align:center;position:relative;z-index:99999}
.user-card .more-info,#detail #main .content-holder #sidebar .sidebar-content .user-card .more-info{}#detail-exclusive #main .content-holder #sidebar .sidebar-content .user-card .card-hidden,#detail #main .content-holder #sidebar .sidebar-content .user-card .card-hidden{overflow:visible;padding:0.5em;height:auto;border-top: 1px solid #d5d9da;}}
.abdallah:hover{
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}
.user-card .links a{
    text-align: center;
    text-decoration: none;
}
.user-card
.badges img{
margin-right:0px;
}