إضافة تغذية شريط الأخبار في السيدبار

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

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

• معاينة

شرح طريقة التركيب

1. من لوحة التحكم أدخل إلى التخطيط

2. أضف أداة Html/Javascript بالسيدبار وضع بها الكود التالي

<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(http://4.bp.blogspot.com/-WE0hDxrPTis/VJPDaZrLeLI/AAAAAAAAFQ8/ugZy43TAqa8/s1600/buttons-black.png) 0 0 no-repeat; float: left; margin-right: 5px; } .MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-black { background: url(http://4.bp.blogspot.com/-WE0hDxrPTis/VJPDaZrLeLI/AAAAAAAAFQ8/ugZy43TAqa8/s1600/buttons-black.png) -20px 0 no-repeat; float: left; margin-right: 5px; } .MBLnewsticker>ul>li>.MBL-info a.MBL-google-black { background: url(http://4.bp.blogspot.com/-WE0hDxrPTis/VJPDaZrLeLI/AAAAAAAAFQ8/ugZy43TAqa8/s1600/buttons-black.png) -40px 0 no-repeat; float: left; } .MBLnewsticker>ul>li>.MBL-info a.MBL-link-black { background: url(http://4.bp.blogspot.com/-WE0hDxrPTis/VJPDaZrLeLI/AAAAAAAAFQ8/ugZy43TAqa8/s1600/buttons-black.png) -60px 0 no-repeat; float: right; } .MBLnewsticker>ul>li>.MBL-info a.MBL-facebook-white { background: url(http://2.bp.blogspot.com/-TiC0VyY5nhk/VJPDlyCRo8I/AAAAAAAAFRE/DpgrjTXsHqA/s1600/buttons-white.png) 0 0 no-repeat; float: left; margin-right: 5px; } .MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-white { background: url(http://2.bp.blogspot.com/-TiC0VyY5nhk/VJPDlyCRo8I/AAAAAAAAFRE/DpgrjTXsHqA/s1600/buttons-white.png) -20px 0 no-repeat; float: left; margin-right: 5px; } .MBLnewsticker>ul>li>.MBL-info a.MBL-google-white { background: url(http://2.bp.blogspot.com/-TiC0VyY5nhk/VJPDlyCRo8I/AAAAAAAAFRE/DpgrjTXsHqA/s1600/buttons-white.png) -40px 0 no-repeat; float: left; } .MBLnewsticker>ul>li>.MBL-info a.MBL-link-white { background: url(http://2.bp.blogspot.com/-TiC0VyY5nhk/VJPDlyCRo8I/AAAAAAAAFRE/DpgrjTXsHqA/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(http://3.bp.blogspot.com/-lITqIhqOgXc/VJPESRoZK4I/AAAAAAAAFRM/MloiTyBZg8Y/s1600/arrows-black.png) top no-repeat; } .MBLnewsticker>div.MBL-bottom-arrow { bottom: 0; background: url(http://3.bp.blogspot.com/-lITqIhqOgXc/VJPESRoZK4I/AAAAAAAAFRM/MloiTyBZg8Y/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/ar1web/TFDh", width:"100%", contentlinkcolor: "#766D6D", timer:5000, titlecolor: "#333", titlefontsize: "16px", itembgcolor: "#FFF", contentlinkcolor: "#766D6D", infobgcolor: "#f2f2f2", bordercolor: "#DDD" }); }); </script>

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

يمكنك تخصيصها كما تشاء وبسهولة تامة تابع معنا :

1. غير ar1web/TFDh برابط خلاصتك يمكنك إنشائه من هنا

2. الرقم 100% هو لتعديل عرض الإضافة / الصندوق

3. 5000 هو توقيت تغيير المواضيع يمكنك تسريعه عبر خفض الرقم

4. #FFF هو لون إطار المواضيع

5. #f2f2f2 هو لون خط المواضيع

6. #DDD هو لون حواف الصندوق

المصدر عرب ويب