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

صورة للاضافة

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

معاينة   

طريقة تركيب الاضافة 

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>