اضافة سلايدر أخر المواضيع بطريقة جميلة للبلوجر

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

اتبع الخطوات أدناه لإضافة الأداة .

1- بعد   تسجيل الدخول إلى حساب Blogger الخاص بك وافتح صفحة رموز القوالب الخاصة بمدونتك عن طريق اتباع تحرير HTML على لوحة تحكم مدونتك. على الصفحة التالية بمساعدة CTRL + F قم بالبحث عن الكود التالي  </ b: skin>

ثم نقوم باضافة الكود الثالي فوقه مباشرة.

 .news-headline {
    margin: 0;
    width: auto;
}
.daring .title {
    float: left;
    height: 40px;
    background: #e74c4c;
    font-size: 15px;
    color: #fff;
    line-height: 40px;
    font-weight: 400;
    overflow: hidden;
    padding: 0 10px
}
.daring .title .fa {
    margin-right: 10px;
    transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);
    -webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    -o-transform: rotate(-30deg)
}
.daring .widget-content {
    height: 40px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 4px;
    border: 1px solid #eee
}
.daring .widget-content li {
    float: left;
    margin-left: 30px;
    display: inline-block;
    height: 38px;
    line-height: 38px;
    padding: 0
}
.daring .widget {
    border-bottom: 1px solid #e0e5e8;
    background: #f5f5f5;
    max-width: 1063px;
    margin: 0 auto;
    overflow: hidden
}
.recent-thumb {
    float: left;
    margin: 4px 10px 0 0
}
.dr-img {
    position: relative;
    display: block;
    width: 35px;
    height: 30px;
    overflow: hidden
}
.daring .post-tag {
    display: inline-block;
    background: #ffa401;
    color: #fff;
    margin-right: 10px;
    font-weight: 400;
    border-radius: 2px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    font-size: 10px;
    position: relative;
    margin-top: 10px;
    float: left
}
.daring .recent-title {
    font-size: 14px;
    font-weight: 400;
    display: inline-block
}
.daring .recent-title a {
    color: #222222
}
.daring .recent-title a:hover {
    color: #e74c3c
}
.daringcontainer,
.daringcontainer .mask,
ul.newsdaring {
    -webkit-transition: all 0 linear;
    -moz-transition: all 0 linear;
    -o-transition: all 0 linear;
    transition: all 0 linear;
    list-style: none;
    margin: 0
}
.daringcontainer {
    margin: 0;
    padding: 0;
    overflow: hidden
}
.daringcontainer .mask {
    position: relative;
    overflow: hidden
}
.newsdaring {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0
}
ul.newsdaring {
    -webkit-transition: all 0s linear;
    -moz-transition: all 0s linear;
    -o-transition: all 0s linear;
    transition: all 0s linear;
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0
}
.daringoverlay-left {
    display: none
}
.daringoverlay-right {
    display: none
}


  2- ثم نقوم بالبحث عن كود   </ body> لاضافة شفرة جافا سكريبت  التالية .



<script src='https://rawgit.com/Bloggeritunes/jQuery/master/daring.js'/>


3. نضيف شفرة HTML التالية إلى المكان المناسب ليضهر السلايدر في   المدونة واحفظ القالب.


<div class='news-headline'>
<b:section class='daring' id='daring' maxwidgets='1' name='Blog NEW POSTS' showaddelement='yes'/>
</div>



4- قم بإنشاء HTML / JavaScript الخاص بك باستخدام الأداة الخاصة بك المرفقة بلوحة التحكم الخاصة بمدونتك. يمكنك تشغيل المكون الإضافي عن طريق إضافة الشفرة التالية إلى HTML / JavaScript الذي تقوم بإنشائه.

إذا كنت تريد تحديث مدونتك ، فأضف الشفرة التالية في عنصر واجهة مستخدم HTML / جافا سكريبت "".


<span data-type="recent" data-no="5"></span>

إذا كنت تريد إظهار احد الوسوم في المدونتة ، فاستخدم الرمز التالي. أضف الوسم  المميز (رمز) في الكود.


<span data-type="label" data-label="Label" data-no="5"></span>

يحدد الرمز الذي تم وضعه في شفرات HTML السابقة عدد المواضيع - no = "5" من المشاركات التي سيتم عرضها في أداة أخبار المدونات.


في الأخير قم بنشر هذه الإضافة على موقعك و شارك الدرس ليستفيد  جميع المدونين  منها.  ويمكنك ايضا مشاركة آرائك واقتراحاتك حول الاضافة.