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

إعلان أدسنس

آخر المواضيع

breaking/مقالات/9
مرحبا بك في موقعنا ! :) .. للبحث عنا من جوجل يمكنك كتابة "نكهة التقنية" أو "Nak1ha" ! لا تنس جعل المدونة الصفحة الرئيسية لمتصفحك! :)
بلوجر

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية


شارك المدونة مع أصدقائك في الفيسبوك ليستفيدو أيظا

الجمعة، 28 أبريل، 2017

4:03:00 م

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

معاينة حية للاضافة 
طريقة تركيب الاضافة 

  1. أولا نقوم نقوم بتحرير القالب, ثم باستعمال Ctrl+f نبحث عن الوسم ]]></b:skin> ونضع فوقه الاكواد التالية.

.titlenak1ha {
    text-align: center;
    color: #fff;
    font-size: 24px;
    padding: 30px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 2px 2px 0 rgba(0,0,0,0.12);
    line-height: 30px;
    background: linear-gradient(130deg,#ca308b,#701e66);
    font-family: &#39;NeoSansArabic&#39;;
}
.titlenak1ha:before {
    content: &quot;\f0c0&quot;;
    background: linear-gradient(to bottom right, #b10294, #ce4295)!important;
    font-family: fontawesome;
    border-radius: 50%;
    width: 50px;
    color: #fff!important;
    height: 50px;
    box-shadow: 0 3px 7px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    padding: 12px;
    margin-left: 10px;
}
.araazowiar {
padding: 20px 60px;
overflow: hidden;
background:-webkit-linear-gradient(left, rgba(202, 48, 139, 0.7) 0%, rgba(112, 30, 102, 0.7) 100%), -webkit-linear-gradient(left, rgba(202, 48, 139, 0.7) 0%, rgba(112, 30, 102, 0.7) 100%);
background-size: cover;
color: #000;
position: static !important;
direction: rtl;
}
.araazowiar .item {
position: relative;
}
.araazowiar h2 {
margin-bottom: 20px;
text-align: center;
font-size: 30px;
color: white;
}
.nak1ha-Nom{
text-align: center;
    color: #fff;
    font-size: 18px;
    margin-left: 10px;
    line-height: 53px;
  }
.item p:before {
content: &#39;&#39;;
position: absolute;
border-color: transparent #ffffff transparent transparent;
border-style: solid;
border-width: 15px;
bottom: -30px;
left: 48%;
transform: rotate(-90deg);
text-align: center;
}
.item p {
background: white;
padding: 20px;
border-radius: 4px;
position: relative;
font-size: 18px;
text-align: justify;
margin-bottom: 21px;
height: 200px;
}
.item .photo {
    background: white;
    border-radius: 50%;
    width: 100px !important;
    height: 100px;
    font-size: 31px;
    text-align: center;
    line-height: 100px;
    color: #848282;
    position: absolute;
    border: 3px solid #fff;
    bottom: 13.5%;
    right: 36.2%;
}
.item h1 {
padding: 10px;
}
.item h1 i {
margin-left: 10px;
}


  1. ثانيا  نبحث عن الوسم </body> ونضع فوقه مباشرة السكريبت الآتي:

<script>
      var owl = $(&#39;.owl-araa&#39;);
      owl.owlCarousel({
        margin: 10,
        rtl: true,
        loop: true,
        nav: true,
        navText: [&quot;&quot;, &quot;&quot;],
        margin: 10,
        autoplay: true,
        autoplayHoverPause: true,
        responsive: {
          0: {
            items: 1
          },
          600: {
            items: 2
          },
          1000: {
            items: 3
          }
        }
      })
    </script>

  1. وأخيرا يتبقى لنا اكواد html لتظهر لنا الاضافة ويمكنكم وضعها في اي مكان تريدها لكني أفضل ان تضعوها فوق الفوتر كما وضعتها في نكهة الفن :)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <div class='titlenak1ha'>آراء زوارنا الأوفياء</div>
<div class='araazowiar'>
<div class='owl-araa'>
<div class='item'>
<p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة&#1548; لقد تم توليد هذا النص من مولد النص العربى&#1548; حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.</p>
<h1><i class='fa fa-user-o'/></h1>
<img class='photo' src='http://lh3.googleusercontent.com/-ASycC3uJZxg/AAAAAAAAAAI/AAAAAAAAAbA/EXK0kA8SElE/s70-c/photo.jpg'/>
  <div class='nak1ha-Nom'>نكهة التقنية</div>
</div>
<div class='item'>
<p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة&#1548; لقد تم توليد هذا النص من مولد النص العربى&#1548; حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.</p>
<h1><i class='fa fa-user-o'/></h1>
<img class='photo' src='http://lh3.googleusercontent.com/-ASycC3uJZxg/AAAAAAAAAAI/AAAAAAAAAbA/EXK0kA8SElE/s70-c/photo.jpg'/>
  <div class='nak1ha-Nom'>نكهة التقنية</div>
</div>
<div class='item'>
<p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة&#1548; لقد تم توليد هذا النص من مولد النص العربى&#1548; حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.</p>
<h1><i class='fa fa-user-o'/></h1>
<img class='photo' src='http://lh3.googleusercontent.com/-ASycC3uJZxg/AAAAAAAAAAI/AAAAAAAAAbA/EXK0kA8SElE/s70-c/photo.jpg'/>
  <div class='nak1ha-Nom'>نكهة التقنية</div>
</div>
<div class='item'>
<p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة&#1548; لقد تم توليد هذا النص من مولد النص العربى&#1548; حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.</p>
<h1><i class='fa fa-user-o'/></h1>
<img class='photo' src='http://lh3.googleusercontent.com/-ASycC3uJZxg/AAAAAAAAAAI/AAAAAAAAAbA/EXK0kA8SElE/s70-c/photo.jpg'/>
  <div class='nak1ha-Nom'>نكهة التقنية</div>
</div>
<div class='item'>
<p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة&#1548; لقد تم توليد هذا النص من مولد النص العربى&#1548; حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.</p>
<h1><i class='fa fa-user-o'/></h1>
<img class='photo' src='http://lh3.googleusercontent.com/-ASycC3uJZxg/AAAAAAAAAAI/AAAAAAAAAbA/EXK0kA8SElE/s70-c/photo.jpg'/>
  <div class='nak1ha-Nom'>نكهة التقنية</div>
</div>
</div>
</div>
        </b:if>

غير الملون بالأحمر برابط صورة الزائر الذي قام باعطاء رأيه بالمدونة وغير الملون بالاخضر باسمه ثم غير الملون بالازرق بالكلام

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

إرسال تعليق

مقالات