اضافة نموذح حلقات احترافية بشكل تقني ورائع

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

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

1. قم بالتوجه إلى القالب ثم تحريرHtml
2. قم بالبحث عن الوسم </head>
3. وضع فوقه الأكواد التالية:

<style>
.ep-slider{
    display: table;
background: #1550D6;
    margin: 5px 1px 5px 0px;
    width: 1088px;
    border-radius: 5px;
}
.ep-slider ul,.ep-slider li{margin:0;list-style:none;padding: 0;}
#feed-list-ep-slider ul li{
    line-height: normal;
    text-align: right;
    width: 230px;
    margin: 5px 5px 4px 0px;
    float: right;
    border-radius: 5px;
    height: 175px;
}
.ep-slider .ep-title{
    padding: 0;
    background-size: 22px 22px !important;
    height: 175px;
    width: 143px;
    float: right;
}
.ep-slider .ep-title h4{
    font-weight: normal;
    padding: 68px 26px 0px;
    color: #fff;
    font-size: 24px;
    width: 96px;
    text-align: center;
}
.ep-slider .ep-title img{
    background: none;
    float: right;
    padding-top: 9px;
}
.ep-slider .titlep a{
    font-size: 13px;
    text-decoration: none;
    color: #DCDCDC;
    text-shadow: 0px 0px 4px #000;
    line-height: 20px;
    padding: 110px 8px 5px 8px;
    display: flex;
}
.ep-slider .titlep a:hover{
    color: #fff;
    transition: 0.2s;
}

.ep-slider img,.ep-slider .img-fake{
border:none;
background-color:#333;
margin:0;
padding:0;
float:right
}
.titlep{
    line-height: 16px;
    padding: 0px;
    height: 175px;
    width: 230px;
    position: absolute;
    margin: 0px 0px 0px 0px;
    box-shadow: 0px -130px 110px -70px #1550D6 inset;
    text-align: justify;
    border-radius: 5px;
}
.titlep:hover{
    box-shadow: 0px -130px 100px -58px #262262 inset;
    transition: 0.2s;
}
</style>

1. الخطوة التالية عليك وضع الأكواد التالية في أي مكان تريد إضهار الإضافة فيها بالقالب.
2. ويمكنك وضعه أيظا في أداة html /javascript بالتخطيط.

<script type='text/javascript'>
var feedpara = {
    feedsource: [
  {
            name: &quot;حلقات&quot;,
            url: &quot;http://www.opsdevme.me/&quot;,
            tag: &quot;حلقات&quot;,
   background:&quot;url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX3cH0dGkRXRh0bP_0xUemylgYyY2W3FcMVtXlw6nzj1YOi5zci60cORHAtQSj5gLvaUmmlS8mXBzeJKZP04-w5X1oaAx8tOj4HoHRz37sIxzscChAoXaca2ln937K3py-CqxUfjpRVkA/s1600-r/youtube1.png) no-repeat 618px 11px;&quot;,
        }

    ],
    numberPost: 4,
    showThumbnail: true,
    titleLength: &quot;auto&quot;,
    Sizeimgw: 230,
 Sizeimgh: 175,
    containerrId: &quot;feed-list-ep-slider&quot;,
};

//<![CDATA[
var mf_defaults = {
    feedsource: [{
        name: "test1",
        url: "http://www.opsdevme.me/",
        tag: "test1",
  background:"f22",
    }],
    numberPost: 4,
    showThumbnail: true,
    titleLength: "auto",
    Sizeimgw: 230,
 Sizeimgh: 174,
    newTabLink: false,
    containerrId: "feed-list-ep-slider",
    menuClass: "ep-slider",
    autoHeightw: false,
    current: 0,
    onLoadFeed: function(a) {},
    onLoadComplete: function() {},
    loadFeed: function(c) {
        var d = document.getElementsByTagName("head")[0],
            a = document.getElementById(this.containerrId),
            b = document.createElement("script");
        b.type = "text/javascript";
        b.src = this.feedsource[c].url + "/feeds/posts/summary" + (this.feedsource[c].tag ? "/-/" + this.feedsource[c].tag : "") + "?alt=json-in-script&max-results=" + this.numberPost + "&callback=listEntries";
        d.appendChild(b)
    }
};
for (var i in mf_defaults) {
    mf_defaults[i] = (typeof(feedpara[i]) !== undefined && typeof(feedpara[i]) !== "undefined") ? feedpara[i] : mf_defaults[i]
}

function listEntries(q) {
    var p = q.feed.entry,
        c = mf_defaults,
        h = document.getElementById(c.containerrId),
        a = document.createElement("div"),
        d = "<ul>",
        l = c.feedsource.length,
        n, k, m, g;
    for (var f = 0; f < c.numberPost; f++) {
        if (f == p.length) {
            break
        }
        n = (c.titleLength !== "auto") ? p[f].title.$t.substring(0, c.titleLength) + (c.titleLength < p[f].title.$t.length ? "&hellip;" : "") : p[f].title.$t;
        
        g = ("media$thumbnail" in p[f]) ? '<img src="' + p[f].media$thumbnail.url.replace(/\/s72(\-c)?\//, "/s" + c.Sizeimgw + "-c/") + '" style="width:' + c.Sizeimgw + "px;height:" + c.Sizeimgh + 'px;border-radius:5px;" >' : '<span class="fake-img" style="width:' + c.Sizeimgw + "px;height:" + c.Sizeimgh + 'px;"></span>';
        for (var e = 0, b = p[f].link.length; e < b; e++) {
            k = (p[f].link[e].rel == "alternate") ? p[f].link[e].href : "#"
        }
        d += '<li><div width="180" height="174" class="inner"' + (!c.autoHeightw ? ' style="height:' + c.Sizeimgh + 'px;overflow:hidden;"' : "") + ">";
        d += (c.showThumbnail) ? g : "";
        d += '<div class="titlep"><a href="' + k + '"' + (c.newTabLink ? ' target="_blank"' : "") + ">" + n + "</a></div>";
        
        d += '<span style="display:block;clear:both;"></span></div></li>'
    }
    d += "</ul>";
    
    a.className = c.menuClass;
    a.innerHTML = '<div class="ep-title" style="background:' + c.feedsource[c.current].background + ';" ><h4><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKAa3j2TEtyXhETPAnTqKmn2pLWnvlRX3r0W6dDrCkWjqnor6FakXRxZ7YvHtfaC4zk-i6XBEhAQWVrwXyZkaIE88RhlG0dXRFW77kdbEcb3HqF45jnGSVm20huSlMRNgi7P0emaxNJcpB/s1600-r/youtube1+%25282%2529.png"/> ' + c.feedsource[c.current].name + "</h4></div>" + d;
    h.appendChild(a);
    c.onLoadFeed(c.current);
    if ((c.current + 1) < l) {
        c.loadFeed(c.current + 1)
    }
    if ((c.current + 1) == l) {
        c.onLoadComplete()
    }
    c.current++
}
mf_defaults.loadFeed(0);

//]]>
</script>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='feed-list-ep-slider'/>
</b:if>

تخصيص الإضافة:

1. قم بتغيير هذا الرابط http://www.opsdevme.me/ برابط مدونتك وستجد رابطين
2. قم بتغيير حلقات الملونة بالأحمر بالتسمية التي تريدها.
3. مبروك عليك الإضافة.

• وهذا كل شئ فى موضوع اليوم اذا واجهتك أي مشكلة فى تركيب الإضافة او تريد التعديل على أي شيء ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع