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

أفضل المواضيع
  • قالب كن مهووس v3
  • أحدث وأضخم باتشات PES 2010 لعام 2016 باخر الانتقالات والاضافات الرهيبة
  • قالبي تدوين وماتلاين المدفوعين على بيكاليكا {تحديث}
  • قالب مدونة نكهة الاصلى مجانا بدون مشاكل
  • Stronghold Crusader 2 The Templar and The Duke-CODEX
  • هذه هي كافة أجهزة سوني التي ستدعم تحديث الأندرويد "مارشميلو 6.0" الجديد
  • تشغيل نت مجانى على خط فودافون
  • اضافة واجهة احترافية v2
  • اضافة صفحة الخطا v2
  • قالب كن مهووس v2 مجانا
نشر في
اضافة تعريف الكاتب بشكل منزلق V1
كتب بواسطة
عدد التعليقات
3 التعليقات

لعلك بحثت قديما عن شكل تعريف الكاتب ولكن الاشكال كلها قديمة وتقليدية ولكن وجدت مؤخرا انه كلهم بنفس الكيفية ولكن الان نقدم لكم تعريف كاتب منزلق فريد من نوعه بتصميم 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="//2.bp.blogspot.com/-Hh0OFhz8ZsE/Vz2tr05nKlI/AAAAAAAAAtc/Vh7WwRkH8Q0NjkFfAcVn6zLTdT2j8k5VgCK4B/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://2.bp.blogspot.com/-FvjEHcq49uY/V1pU5yJ6SlI/AAAAAAAABTs/OyxtF4afovATfKKUrHX0j6DW4RHnnO30QCLcB/s1600/free.png" style="     width: 37px !important; " title=""/>
<img class="a-tooltip" data-original-title="بائع لديه منتجات محملة بكثرة" data-placement="bottom" data-toggle="tooltip" src="https://4.bp.blogspot.com/-PUTbVwPI-8Q/V1pZ-q2s75I/AAAAAAAABUE/sVFaW-e05DgwPCUuRfEi-fHs8OIjeNIuwCLcB/s320/trends.png" style="     width: 37px !important; " title=""/>
<img class="a-tooltip" data-original-title="بائع بأكثر من 500$" data-placement="bottom" data-toggle="tooltip" src="https://2.bp.blogspot.com/-NPbuFAVfBBc/V1pZ8EfAthI/AAAAAAAABT8/rN4R2Fpdj-cp6fjKXE8i7UrPh0Yec4NFwCLcB/s320/plus500.png" style="     width: 37px !important; " title=""/>
<img class="a-tooltip" data-original-title="بائع مميز " data-placement="bottom" data-toggle="tooltip" src="https://4.bp.blogspot.com/-oyuDr-pjTfQ/V1pU5hjwH3I/AAAAAAAABTg/kBiq1ChM84gMria-WO-aX0i1UaQLRRK3wCLcB/s1600/featured.png" style="     width: 37px !important; " title=""/>
<img class="a-tooltip" data-original-title="فاز باحدى المسابقات" data-placement="bottom" data-toggle="tooltip" src="https://4.bp.blogspot.com/-gGR9RbhNtM4/V1pZ-h0Gi_I/AAAAAAAABUI/6et4inl5sm0oT6WYcw8xivJL-tT2JfUKwCLcB/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;
}

رابط المعاينه في السايد بار

ملحوظه اذا دخلت الي المعاينه الاولي ستجد الاضافة في اخر التدوينه عند مشاركه الموضوع كما في صوره الاضافة
دمتم في امان الله

معاينة الاضافة

معاينة معاينة
avatar

جميل جدا ،واصل إبداعك

delete 11‏/2‏/2017 4:41 م
avatar

تسلم اخي الاصدار التاني اللي هو تظهر مع التدوينه فقط و تنزل معك بطول الصفحه قريبا :*

delete 15‏/2‏/2017 8:10 م

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1-أن يكون التعليق خاص بمحتوى التدوينة
2-أن لا تضع أي روابط خارجية
3-لاضافة كود حوله اولا بمحول الاكواد
4-أي سؤال خارج محتوى التدوينة يرجى التواصل معنا عبر صفحتنا


محول الاكواد الابتسامات





اخبار الهواتف الذكيه
    فريق العمل

    Milad Shenouda

    Front-End Developer

    السيد ابراهيم

    مدير الموقع ومصمم فوتوشوب

    انضم الينا

    مدون محترف

    انضم الينا

    مدون محترف

    اعجب بصفحتنا على الفيسبوك
    ماذا تنتظر !!!
    أنضم الى اعضاء مدونة
    كن مهووس | هوسنا هو سر ابداعنا
    تابعنا الان على تويتر
    فنحن الافضل

    جميع الحقوق محفوظة

    كن مهووس

    2018

    تكويد وتطوير