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

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

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

avatar شرح
اضافتها

  1.  نتوجه الى القالب => تحرير html => نبحث عن الوسم </body> => اضف قبله هذا الكود
<script>
$(document).ready(function(){
        $(&quot;div.author-box3&quot;).replaceWith($(&quot;div.author-box2&quot;));
});
</script>
<style type='text/css'>
/* CSS Author Box V1 */
.text-center {text-align: center;}
a.socnet {display: inline-block;width: 27px;border-bottom: 3px double #bfc5e6;font-size: 14px;height: 27px;margin-top: 0;line-height: 21px;transition: 0.3s;margin-right: 5px;overflow: hidden;}a.socnet:hover{color: #7986cb;}
.author-box2 {display: none;}.author-box2.show-author {display:block;margin-bottom: 15px;position: relative;}
.author-content p {color: #666;margin-bottom: 10px;}
.author-content h12 {margin-top: 5px;margin-bottom: 7px;}
.author-content { padding: 0 10px;padding-bottom: 15px;padding: 0 35px;padding-bottom: 15px;}
.author-content {padding: 0 10px;padding-bottom: 15px;padding: 0 35px;padding-top: 13px;padding-bottom: 15px;background: #fff;border-top: 2px solid #ee9497;font-weight: 900;}
.author-content img {border-radius: 50%;border: 3px solid #ee9497;width: 50px;position: absolute;right: 5px;top: 30px;}
.coverauthor {height: 60px;background: linear-gradient(130deg,#b9c4ff,#7986cb);background-size: contain;}.item .coverauthor{height: 61px;background: linear-gradient(130deg,#b9c4ff,#7986cb);background-size: contain;}
a.morepostauthor {position: absolute;border-radius: 20px;padding: 7px;top: 17px;left: 10px;font-size: 12px;color: #ffffff;background-image: -webkit-linear-gradient(137deg,#ee6587 0,#ee9a99 100%);background-image: linear-gradient(-47deg,#ee6587 0,#ee9a99 100%);}
a.morepostauthor:hover {background-image: -webkit-linear-gradient(137deg,#ee9a99 0,#ee6587 100%);background-image: linear-gradient(-47deg,#ee9a99 0,#ee6587 100%);   color: #ffffff;}
</style>
  1. ابحث عن <div id='sidebar-wrapper'> واضف هذا الكود بعده مباشرة
ملحوظة: قد يختلف كود السايدبار من قالب لاخر. اذا لم تجده ضع تعليق به رابط المدونة وسوف يرد احد المدونين عليك

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="author-box3"/>
</b:if>

  1. ابحث عن <data:post.body/> واضف هذا الكود بعده
ملحوظة: سوف تجد اكثر من واحد غالبا الاخير هو المطلوب

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="author-box2 text-center show-author">
<div class="coverauthor opa"></div>
<div class="author-content">
<img expr:src='data:post.authorPhoto.url'/>
<a class="morepostauthor" href="/search/?author=Mido_Oops">اخر مواضيع <data:post.author/></a>
<h12><data:post.author/></h12>
<p>ميدو , مطور ويب متخصص في بلوجر واقدم هنا خلاصة تجربتي في التعلم

</p>
<div class="social-author">
<a class="facebook-author socnet" href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a>
<a class="twitter-author socnet" href="https://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="codepen-author socnet" href="http://codepen.io//"><i class="fa fa-codepen"></i></a>
<a class="Youtube-author socnet" href="https://www.youtube.com/"><i class="fa fa-youtube-play"></i></a>
<a class="Beahnce-author socnet" href="#"><i class="fa fa-behance"></i></a>
</div>
</div>
</div>
</b:if>
  1. احفظ القالب
دمتم فى امان الله

ملحقات التدينة

معاينة مباشرة
avatar
غير معرف

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


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





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

    Milad Shenouda

    Front-End Developer

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

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

    انضم الينا

    مدون محترف

    انضم الينا

    مدون محترف

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

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

    كن مهووس

    2018

    تكويد وتطوير