إضافة آخر المواضيع بشكل متحرك وجميل

إضافة أداة آخر المواضيع بشكل جيل ومتحرك

معاينة

شرح التركيب :

1 - التخطيط .

2 - إضافة أداة .

3 - HTML/javascript .

4 - حفظ .

<style>
.MBL-container-header h1{font-weight:300; font-size:48px; text-align:center;}
 .MBL-container-header h2{font-size:30px; text-align:center;}
      
  #MBLnewsticker1 ul { padding: 0px; }
.MBLnewsticker {
    width: 100%;
    overflow: hidden;
    height: 440px;
    position: relative;
    padding: 0 5px;
    box-sizing: border-box;
    margin: 0 auto;
    text-align:center;
}
.MBLnewsticker>ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    position: relative;
}
.MBLnewsticker>ul>li {
    display: none;
    width: 100%;
    height: 100px;
    background: #FFF;
    position: absolute;
    overflow: hidden
}
.MBLnewsticker>ul>li>.MBL-content {
    position: absolute;
    top: 0;
    bottom: 30px;
    left: 0;
    right: 0;
    box-sizing: border-box;
    padding: 5%;
        font: 14px/1.8em tahoma;
    overflow: hidden;
}
.MBLnewsticker>ul>li>.MBL-content a {
    text-decoration: none;
}
.MBLnewsticker>ul>li>.MBL-content a:hover {
    text-decoration: underline;
}
.MBLnewsticker>ul>li>.MBL-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    padding: 5px;
    border-top: solid 1px #DDD;
}
.MBLnewsticker>ul>li>.MBL-info a {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #0F0;
    opacity: 0.2;
    cursor: pointer;
}
.MBLnewsticker>ul>li>.MBL-info a:hover {
    opacity: 1;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-facebook-black {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrG4iSWEktX3HoxxfY5Imh2yrY8-Fc6Oaw_jX1yAvHsibvgQQz0vUqj3fNQy-TaNVUyZ33gcvG8eTof_Zuy62OCmRdbLaTjeb-067PfdKAqZy-ERnS4_y7TSVWCwI6JuylJDWjX-uLMXdt/s1600/buttons-black.png) 0 0 no-repeat;
    float: left;
    margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-black {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrG4iSWEktX3HoxxfY5Imh2yrY8-Fc6Oaw_jX1yAvHsibvgQQz0vUqj3fNQy-TaNVUyZ33gcvG8eTof_Zuy62OCmRdbLaTjeb-067PfdKAqZy-ERnS4_y7TSVWCwI6JuylJDWjX-uLMXdt/s1600/buttons-black.png) -20px 0 no-repeat;
    float: left;
    margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-google-black {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrG4iSWEktX3HoxxfY5Imh2yrY8-Fc6Oaw_jX1yAvHsibvgQQz0vUqj3fNQy-TaNVUyZ33gcvG8eTof_Zuy62OCmRdbLaTjeb-067PfdKAqZy-ERnS4_y7TSVWCwI6JuylJDWjX-uLMXdt/s1600/buttons-black.png) -40px 0 no-repeat;
    float: left;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-link-black {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrG4iSWEktX3HoxxfY5Imh2yrY8-Fc6Oaw_jX1yAvHsibvgQQz0vUqj3fNQy-TaNVUyZ33gcvG8eTof_Zuy62OCmRdbLaTjeb-067PfdKAqZy-ERnS4_y7TSVWCwI6JuylJDWjX-uLMXdt/s1600/buttons-black.png) -60px 0 no-repeat;
    float: right;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-facebook-white {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjul_gQDWrDB7vUn3YvLeRKW5r4QDexF9bGzs_9k06rkZveLgV4PLHodOJ_E_tNPx8PlBFTQ0bxx-rZOAV_hMnVqjIQZDkW_z_ZmlQMV9WMR9GW16gP04aN12khZ4eeo5AEEcaNY2KuqhVG/s1600/buttons-white.png) 0 0 no-repeat;
    float: left;
    margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-white {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjul_gQDWrDB7vUn3YvLeRKW5r4QDexF9bGzs_9k06rkZveLgV4PLHodOJ_E_tNPx8PlBFTQ0bxx-rZOAV_hMnVqjIQZDkW_z_ZmlQMV9WMR9GW16gP04aN12khZ4eeo5AEEcaNY2KuqhVG/s1600/buttons-white.png) -20px 0 no-repeat;
    float: left;
    margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-google-white {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjul_gQDWrDB7vUn3YvLeRKW5r4QDexF9bGzs_9k06rkZveLgV4PLHodOJ_E_tNPx8PlBFTQ0bxx-rZOAV_hMnVqjIQZDkW_z_ZmlQMV9WMR9GW16gP04aN12khZ4eeo5AEEcaNY2KuqhVG/s1600/buttons-white.png) -40px 0 no-repeat;
    float: left;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-link-white {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjul_gQDWrDB7vUn3YvLeRKW5r4QDexF9bGzs_9k06rkZveLgV4PLHodOJ_E_tNPx8PlBFTQ0bxx-rZOAV_hMnVqjIQZDkW_z_ZmlQMV9WMR9GW16gP04aN12khZ4eeo5AEEcaNY2KuqhVG/s1600/buttons-white.png) -60px 0 no-repeat;
    float: right;
}
.MBLnewsticker>ul>li>.MBL-info span {
    position: absolute;
    left: 80px;
    right: 60px;
    text-align: center;
    opacity: 0.4;
    z-index: 0;
    font-size: 13px;
    cursor: default;
}
.MBLnewsticker>div {
    width: 50px;
    height: 30px;
    cursor: pointer;
    position: absolute;
    opacity: 0.3;
}
.MBLnewsticker>div:hover {
    opacity: 1;
}
.MBLnewsticker>div.MBL-top-arrow {
    top: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik580wCYReSAmwxPd-vwH3WetdsCshNzLGp3tphEAe30eSkL0g1MPATCvI-LfO8oAisnFFIwRR8GzirrCzUMU5Ow8IEkBAs3XsUpeESgCFAzTmngPjk7fQorrBovOa_vB_ebul4Bx7LO1O/s1600/arrows-black.png) top no-repeat;
}
.MBLnewsticker>div.MBL-bottom-arrow {
    bottom: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik580wCYReSAmwxPd-vwH3WetdsCshNzLGp3tphEAe30eSkL0g1MPATCvI-LfO8oAisnFFIwRR8GzirrCzUMU5Ow8IEkBAs3XsUpeESgCFAzTmngPjk7fQorrBovOa_vB_ebul4Bx7LO1O/s1600/arrows-black.png) bottom no-repeat;
}
.MBLnewsticker .MBL-top0 {
    -ms-transform: scale(0.80);
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
    opacity: 0.85;
    top: 0;
    z-index: 1;
    display: block;
}
.MBLnewsticker .MBL-top1 {
    -ms-transform: scale(0.87);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.9;
    top: 20px;
    z-index: 2;
    display: block;
}
.MBLnewsticker .MBL-top2 {
    -ms-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 0.95;
    top: 45px;
    z-index: 3;
    display: block;
}
.MBLnewsticker .MBL-active {
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    top: 75px;
    z-index: 10;
    display: block;
}
.MBLnewsticker .MBL-bottom2 {
    -ms-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 0.95;
    top: 105px;
    z-index: 6;
    display: block;
}
.MBLnewsticker .MBL-bottom1 {
    -ms-transform: scale(0.87);
    -webkit-transform: scale(0.90);
    transform: scale(0.90);
    opacity: 0.9;
    top: 130px;
    z-index: 5;
    display: block;
}
.MBLnewsticker .MBL-bottom0 {
    -ms-transform: scale(0.80);
    -webkit-transform: scale(0.85);
    transform: scale(0.85);
    opacity: 0.85;
    top: 150px;
    z-index: 4;
    display: block;
}
.MBL-easing2 {
    transition: .25s linear;
    -moz-transition: .25s linear;
    -webkit-transition: .25s linear;
}
.MBL-easing li {
    transition: .5s ease-out;
    -moz-transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
}
.MBL-radius li {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.MBL-radius2 li {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.MBL-shadow li {
    -webkit-box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);
    -moz-box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);
    box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);
}
.MBL-shadow-big {
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;
}
</style>
<script type='text/javascript'>
/*<![CDATA[*/
(function(e) {
    $.fn.MBLnewsticker = function(e) {
        var t = {
            width: "100%",
            modulid: "MBLnewsticker",
            autoplay: true,
            timer: 3e3,
            itemheight: 130,
            infobarvisible: true,
            btnfacebook: true,
            btntwitter: true,
            btngoogleplus: true,
            btnlinkbutton: true,
            btnlinktarget: "_blank",
            pagecountvisible: true,
            buttonstyle: "black",
            pagenavi: true,
            pagenavistyle: "black",
            feed: false,
            feedcount: 100
        };

var e = $.extend(t, e);
        return this.each(function() {
            function o() {
                function o() {
                    $(e.modulid + ">div").css({
                        left: ($(e.modulid).width() - 30) / 2
                    })
                }
                function u() {
                    $(e.modulid + " ul li").eq(r[0]).addClass("MBL-top0");
                    $(e.modulid + " ul li").eq(r[1]).addClass("MBL-top1");
                    $(e.modulid + " ul li").eq(r[2]).addClass("MBL-top2");
                    $(e.modulid + " ul li").eq(r[3]).addClass("MBL-active");
                    $(e.modulid + " ul li").eq(r[4]).addClass("MBL-bottom2");
                    $(e.modulid + " ul li").eq(r[5]).addClass("MBL-bottom1");
                    $(e.modulid + " ul li").eq(r[6]).addClass("MBL-bottom0")
                }
                function a() {
                    t--;
                    if (t < 0) t = n;
                    l()
                }
                function f() {
                    t++;
                    if (t == n + 1) t = 0;
                    l()
                }
                function l() {
                    $(e.modulid + " ul li").attr("class", "");
                    if (t == 0) {
                        r[0] = n - 2;
                        r[1] = n - 1;
                        r[2] = n;
                        r[3] = t;
                        r[4] = t + 1;
                        r[5] = t + 2;
                        r[6] = t + 3
                    } else if (t == 1) {
                        r[0] = n - 1;
                        r[1] = n;
                        r[2] = t - 1;
                        r[3] = t;
                        r[4] = t + 1;
                        r[5] = t + 2;
                        r[6] = t + 3
                    } else if (t == 2) {
                        r[0] = n;
                        r[1] = t - 2;
                        r[2] = t - 1;
                        r[3] = t;
                        r[4] = t + 1;
                        r[5] = t + 2;
                        r[6] = t + 3
                    } else if (t == n) {
                        r[0] = n - 3;
                        r[1] = n - 2;
                        r[2] = n - 1;
                        r[3] = t;
                        r[4] = 0;
                        r[5] = 1;
                        r[6] = 2
                    } else if (t == n - 1) {
                        r[0] = n - 4;
                        r[1] = n - 3;
                        r[2] = n - 2;
                        r[3] = t;
                        r[4] = t + 1;
                        r[5] = 0;
                        r[6] = 1
                    } else if (t == n - 2) {
                        r[0] = n - 5;
                        r[1] = n - 4;
                        r[2] = n - 3;
                        r[3] = t;
                        r[4] = t + 1;
                        r[5] = t + 2;
                        r[6] = 0
                    } else {
                        r[0] = t - 3;
                        r[1] = t - 2;
                        r[2] = t - 1;
                        r[3] = t;
                        r[4] = t + 1;
                        r[5] = t + 2;
                        r[6] = t + 3
                    }
                    u()
                }
                $(e.modulid + " ul li").css({
                    height: e.itemheight,
                    background: e.itembgcolor,
                    border: "solid 1px " + e.bordercolor,
                    color: e.titlecolor,
                    "font-size": e.titlefontsize
                });
                $(e.modulid + " ul li").each(function(t, r) {
                    if (e.infobarvisible) {
                        i = '<div class="MBL-info" style="background:' + e.infobgcolor + "; border-color:" + e.bordercolor + ';">';
                        if (e.btnfacebook) i = i + '<a data-type="facebook" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-facebook-' + e.buttonstyle + '"></a>';
                        if (e.btntwitter) i = i + '<a data-type="twitter" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-twitter-' + e.buttonstyle + '"></a>';
                        if (e.btngoogleplus) i = i + '<a data-type="google" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-google-' + e.buttonstyle + '"></a>';
                        if (e.pagecountvisible) i = i + "<span>" + ($(this).index() + 1) + " / " + (n + 1) + "</span>";
                        if (e.btnlinkbutton) i = i + '<a href="' + $(this).find(".MBL-content").attr("data-link") + '" class="MBL-easing2 MBL-link-' + e.buttonstyle + '" target="' + e.btnlinktarget + '"></a>';
                        i = i + "</div>
"
                    }
                    $(this).append(i)
                });
                $(e.modulid + " ul li .MBL-content").find("a").css({
                    color: e.contentlinkcolor
                });
                $(e.modulid + " ul li").find(".MBL-info").find("a").click(function(e) {
                    if ($(this).attr("data-type") == "facebook") {
                        window.open("http://www.facebook.com/sharer.php?u=" + encodeURIComponent($(this).attr("data-url")) + "&t=" + encodeURIComponent($(this).attr("data-text")), "sharer", "toolbar=0,status=0,width=626,height=436");
                        return false
                    } else if ($(this).attr("data-type") == "twitter") {
                        window.open("http://twitter.com/share?text=" + $(this).attr("data-text") + "&url=" + $(this).attr("data-url"), "sharer", "toolbar=0,status=0,width=626,height=436");
                        return false
                    } else if ($(this).attr("data-type") == "google") {
                        window.open("https://plus.google.com/share?url=" + $(this).attr("data-url") + "&title=" + $(this).attr("data-text"), "sharer", "height=550,width=525,left=100,top=100,menubar=0");
                        return false
                    }
                });
                $(e.modulid + " ul li").click(function(e) {
                    t = $(this).index();
                    l()
                });
                if (e.pagenavi) {
                    $(e.modulid).append('<div class="MBL-top-arrow">
</div>
<div class="MBL-bottom-arrow">
</div>
');
                    $(e.modulid).css({
                        height: e.itemheight + 200,
                        padding: "20px 10px",
                        width: e.width
                    })
                } else {
                    $(e.modulid).css({
                        height: e.itemheight + 160,
                        padding: "0px 10px",
                        width: e.width
                    })
                }
                o();
                $(window).resize(function(e) {
                    o()
                });
                u();
                $(e.modulid + ">div").click(function(e) {
                    if ($(this).attr("class") == "MBL-top-arrow") a();
                    else f()
                });
                if (e.autoplay) {
                    s = setInterval(function() {
                        f()
                    }, e.timer);
                    $(e.modulid).hover(function() {
                        clearInterval(s)
                    }, function() {
                        s = setInterval(function() {
                            f()
                        }, e.timer)
                    })
                }
            }
            function u() {
                $.ajax({
                    type: "GET",
                    url: document.location.protocol + "//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=" + e.feedcount + "&callback=?&q=" + encodeURIComponent(e.feed),
                    dataType: "json",
                    async: false,
                    success: function(i) {
                        veri = i.responseData.feed.entries;
                        news = "";
                        $(veri).each(function(e, t) {
                            if (e == 0) news = news + '
<li class="MBL-active"><div class="MBL-content" data-link="' + veri[e].link + '">
<a href="' + veri[e].link + '">' + veri[e].title + "</a></div>
</li>
";
                            else if (e == 1) news = news + '
<li class="MBL-bottom2"><div class="MBL-content" data-link="' + veri[e].link + '">
<a href="' + veri[e].link + '">' + veri[e].title + "</a></div>
</li>
";
                            else if (e == 2) news = news + '
<li class="MBL-bottom1"><div class="MBL-content" data-link="' + veri[e].link + '">
<a href="' + veri[e].link + '">' + veri[e].title + "</a></div>
</li>
";
                            else if (e == 3) news = news + '
<li class="MBL-bottom0"><div class="MBL-content" data-link="' + veri[e].link + '">
<a href="' + veri[e].link + '">' + veri[e].title + "</a></div>
</li>
";
                            else if (e == veri.length - 1) news = news + '
<li class="MBL-top2"><div class="MBL-content" data-link="' + veri[e].link + '">
<a href="' + veri[e].link + '">' + veri[e].title + "</a></div>
</li>
";
                            else if (e == veri.length - 2) news = news + '
<li class="MBL-top1"><div class="MBL-content" data-link="' + veri[e].link + '">
<a href="' + veri[e].link + '">' + veri[e].title + "</a></div>
</li>
";
                            else if (e == veri.length - 3) news = news + '
<li class="MBL-top0"><div class="MBL-content" data-link="' + veri[e].link + '">
<a href="' + veri[e].link + '">' + veri[e].title + "</a></div>
</li>
";
                            else news = news + '
<li><div class="MBL-content" data-link="' + veri[e].link + '">
<a href="' + veri[e].link + '">' + veri[e].title + "</a></div>
</li>
"
                        });
                        $(e.modulid + " ul").html("");
                        $(e.modulid + " ul").append(news);
                        n = veri.length - 1;
                        r = [n - 2, n - 1, n, t, t + 1, t + 2, t + 3];
                        o()
                    },
                    error: function() {
                        $(e.modulid + " ul").html('
<li class="MBL-active"><div class="MBL-content">
Error! Please try again later...</div>
</li>
')
                    }
                })
            }
            e.modulid = "#" + $(this).attr("id");
            var t = 0;
            var n = $(e.modulid + " ul li").length - 1;
            var r = [n - 2, n - 1, n, t, t + 1, t + 2, t + 3];
            var i = "";
            var s = e.modulid;
            if (e.feed != false) {
                $(e.modulid + " ul").html("");
                $(e.modulid + " ul").append('
<li class="MBL-active"><div class="MBL-content">
جاري التحميل...</div>
</li>
');
                u()
            } else {
                o()
            }
        })
    }
})(jQuery)
/*]]>*/
</script>
<div class="MBLnewsticker MBL-radius MBL-shadow MBL-easing" id="MBLnewsticker1">
<ul>
<li>
 
</li>
</ul>
</div>
<script>
 $(document).ready(function(){
  $("#MBLnewsticker1").MBLnewsticker({
feed:"http://feeds.feedburner.com/blogger/IbyG",
width:"100%",
contentlinkcolor: "#766D6D",
timer:5000,
titlecolor: "#333",
titlefontsize: "16px",
itembgcolor: "#FFF",
contentlinkcolor: "#766D6D",
infobgcolor: "#f2f2f2",
bordercolor: "#DDD"
});
  });
</script>

ليست هناك تعليقات :

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)

حمّل تطبيقنا

تصميم | © 2018