كن مهووس: اضافة تعريف الكاتب فى السايدبار v2

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

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

شرح اضافتها

  1.  نتوجه الى القالب => تحرير html => نبحث عن الوسم </head> => اضف قبله هذا الكود
  2. <style>
    .container1:hover .author-body { height: 70px; }
    .author-body a {color:#fff}
    .author2 { overflow: auto; padding: 20px; background: #fff; border-radius: 5px 5px 0 0; font-size:12px; color: #b9becd;   height: 85px;margin-bottom: 15px;}
    .author2  h1 { margin: 15px 0 5px; font-weight: 100; font-size:20px; color: #5e6d81; }
    .author-body { height: 0; background: #323a45; color: #fff; vertical-align: middle; transition: all .3s; }
    .author-body a { display: inline-block; width: 32%; height: 100%; border-right: 1px solid rgba(255,255,255,.25); text-align: center; color: #fff; font-size: 2.5em}
    .author-body a i{padding-top: 22px;}
    .author-body a:hover { background: #515761; }
    .author-body a:last-child { border-right: none; }
    [class^="footItem"] { display: inline-block; width: 33.333333%; padding: 15px 0; text-align: center; color: rgba(255,255,255,.8); font-size: 1.1em; }
    [class^="footItem"] span { display: block; font-size: 1.6em; margin-bottom: 5px; color: #fff; }
    .foot a{padding: 30px; display: -webkit-inline-box;}
    .footItem1 { background: #14b9d6;    color: white!important;}
    .footItem1:hover { background: #5bcee2; }
    .footItem2 { background: #f27935;    color: white!important;}
    .footItem2:hover { background: #f6a172; }
    .footItem3 { background: #1fbba6;     color: white!important;}
    .footItem3:hover { background: #63d0c1; }
    </style>
    1. ثم اذهب الى التخطيط وضع الكود التالي داخل اداة html/javascript
    
    <div class="container1">
    <div class="author2">
    <img src="https://2.bp.blogspot.com/-aadDxHR9bzw/V07joZNUBBI/AAAAAAAAB8Q/2TKLGWu-TactcfGNWNKSiwtcvcu2-uvWACKgB/s640/31.jpg" style="float: left;width: 90px;border-radius: 50%;height:84px" />
            <h1>Elsayed Ibrahim</h1>
            كن مهووس
        </div>
    <div class="author-body">
    <a href="#Twitter-LINK"><i class="fa fa-twitter"></i></a>
    <a href="#Facebook-LINK"><i class="fa fa-facebook"></i></a>
    <a href="#Gp-LINK"><i class="fa fa-google-plus"></i></a>
        </div>
      <div class="foot">
        <a href="#" class="footItem1"><i class="fa fa-heart"></i>102</a>
    <a href="#" class="footItem2"><i class="fa fa-user"></i>4,587</a>
    <a href="#" class="footItem3"><i class="fa fa-plus"></i>84,023</a>
      </div>
    
    احفظ القالب
    واذا كان هناك اي مشكله تفضل بتعليق
دمتم فى امان الله

ملحقات القالب

معاينة مباشرة

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


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





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

    Milad Shenouda

    Front-End Developer

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

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

    انضم الينا

    مدون محترف

    انضم الينا

    مدون محترف

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

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

    كن مهووس

    2018

    تكويد وتطوير