شريط اخبار واستايل وجافا سكربت

مشاهدات الان

 البحث عن

</body>

تحته

<script type='text/javascript'>

//<![CDATA[

function Article_loop() {

    NumOfArt = $(".bnone").length, WidthOfCon = $("#bnby7amian").width(), WidthOfTito = $("#tito7").width(), Widthsource = WidthOfCon, goku = 0 - WidthOfTito;

    for (let t = 0; t < NumOfArt; t++) goku = 20 + goku + $(".bnone").eq(t).width();

    $("#bnmove").css("margin-right", WidthOfCon + "px"), setInterval(function() {

        1 == hamian && ($("#bnmove").css("margin-right", WidthOfCon + "px"), WidthOfCon < -1 * goku && (WidthOfCon = Widthsource), WidthOfCon -= 1)

    }, 15)

}

NumOfPost = 7, hamian = !0, $("#bnmove").mouseover(function() {

    hamian = !1

}).mouseout(function() {

    hamian = !0

}), $.ajax({

    type: "get",

    url: "/feeds/posts/default?alt=json-in-script&max-results=" + NumOfPost,

    data: "data",

    dataType: "jsonp",

    success: function(t) {

        NumOfEntry = t.feed.openSearch$itemsPerPage.$t, OrderOfLinks = t.feed.entry[0].link.length - 1;

        for (let n = 0; n < NumOfEntry; n++) $("#bnmove").append('<div class="bnone"><a href="' + t.feed.entry[n].link[OrderOfLinks].href + '">' + t.feed.entry[n].link[OrderOfLinks].title + "</a><div>"), n == NumOfEntry - 1 && ($("#bnmove").css("display", "flex"), Article_loop())

    }

});

//]]>

</script>

والبحث عن

</b:skin>

فوقه

.bntool{background-color:#f1f1f1;width:100%;height:40px;text-align:right;direction:rtl;display:flex;flex-direction:row;position:relative;overflow:hidden;border-left:solid 2px #0000aa;box-shadow:0 0 1px #333;border-radius:3px;margin:10px 1px}

.bntitle{display:inline-block;font-size:18px;line-height:40px;padding:0 10px;background-color:#001122;color:#fff;border-left:solid 3px #0000aa;z-index:1;border-radius:3px 0 0 3px}

.bntitle::before{content:"";display:inline-block;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='white' class='bi bi-layout-text-window-reverse' viewBox='0 0 16 16'%3E%3Cpath d='M13 6.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm0 3a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5zm-.5 2.5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1h5z'/%3E%3Cpath d='M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM2 1a1 1 0 0 0-1 1v1h14V2a1 1 0 0 0-1-1H2zM1 4v10a1 1 0 0 0 1 1h2V4H1zm4 0v11h9a1 1 0 0 0 1-1V4H5z'/%3E%3C/svg%3E");margin-left:8px;width:20px;height:20px;vertical-align:middle;fill:#fff}

.bnloop{display:none;flex-direction:row;position:absolute;z-index:0}

.bnone{display:flex;flex-shrink:0;font-size:inherit;line-height:40px;margin:0 10px}

.bnone a{color:#000;text-decoration:none}

.bnone a::before{content:"";display:inline-block;background:url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fal' data-icon='file-alt' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23444' d='M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zm-22.6 22.7c2.1 2.1 3.5 4.6 4.2 7.4H256V32.5c2.8.7 5.3 2.1 7.4 4.2l83.9 83.9zM336 480H48c-8.8 0-16-7.2-16-16V48c0-8.8 7.2-16 16-16h176v104c0 13.3 10.7 24 24 24h104v304c0 8.8-7.2 16-16 16zm-48-244v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm0 64v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm0 64v8c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;margin-left:5px;width:13px;height:13px;color:#fff;vertical-align:middle}

.bnone a:hover{color:#0000dd;transition:300ms}

والان الجافا سكربت واختار المكان المناسب

<div class="bntool" id='Kuwait 101'>

<div class="bntitle" id="tito7">آخر الاخبار</div>

<div class="bnloop" id="bnmove"></div>

</div>

انتهي