طريقة اضافة اخر المواضيع rss متحركة في العمود الجانبي بلوجر
How to Add a RSS Feed News Ticker in Blogger Sidebar
اول شئ هو الدخول الي حسابك في بلوجر.
بعد تسجيل الدخول الي حسابك قم باختيار المدونة التي تريد ان تضيف بها هذه الاضافة.
الذهاب الي قالب >> تعديل HTML >> و الان ابحث عن الكود التالي ]]></b:skin> و فوقه مباشرة قم باضافة كود CSS التالي:
.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%;
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: 20px;
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/AVvXsEgMzgc1-Iu4SYdThNySPp9SSpcX_fgwZSlheiASObV7viGg3t5ksw3M1Y64fXau4nJRbAQtRuofG-I8YPCRSVjA0BuApB8hGOzrVGWZQGxvYDQfm7IjlPbPkaRG0wi6g0hSn-b9YdxCnxhb/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/AVvXsEgMzgc1-Iu4SYdThNySPp9SSpcX_fgwZSlheiASObV7viGg3t5ksw3M1Y64fXau4nJRbAQtRuofG-I8YPCRSVjA0BuApB8hGOzrVGWZQGxvYDQfm7IjlPbPkaRG0wi6g0hSn-b9YdxCnxhb/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/AVvXsEgMzgc1-Iu4SYdThNySPp9SSpcX_fgwZSlheiASObV7viGg3t5ksw3M1Y64fXau4nJRbAQtRuofG-I8YPCRSVjA0BuApB8hGOzrVGWZQGxvYDQfm7IjlPbPkaRG0wi6g0hSn-b9YdxCnxhb/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/AVvXsEgMzgc1-Iu4SYdThNySPp9SSpcX_fgwZSlheiASObV7viGg3t5ksw3M1Y64fXau4nJRbAQtRuofG-I8YPCRSVjA0BuApB8hGOzrVGWZQGxvYDQfm7IjlPbPkaRG0wi6g0hSn-b9YdxCnxhb/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/AVvXsEgQgLlOUdDmHkSXM2OS8lRHVojnZJ3YpmmqOjp88QxWQR9kTnFis7mHZ5gzsNmxeVodTJiIQ-5wpwqZs5rq3aIGeja278EJDW0q5UQ0Xg0N5b1fNxnXo6NwIbg_KIm4qp8PffG5scDIOK81/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/AVvXsEgQgLlOUdDmHkSXM2OS8lRHVojnZJ3YpmmqOjp88QxWQR9kTnFis7mHZ5gzsNmxeVodTJiIQ-5wpwqZs5rq3aIGeja278EJDW0q5UQ0Xg0N5b1fNxnXo6NwIbg_KIm4qp8PffG5scDIOK81/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/AVvXsEgQgLlOUdDmHkSXM2OS8lRHVojnZJ3YpmmqOjp88QxWQR9kTnFis7mHZ5gzsNmxeVodTJiIQ-5wpwqZs5rq3aIGeja278EJDW0q5UQ0Xg0N5b1fNxnXo6NwIbg_KIm4qp8PffG5scDIOK81/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/AVvXsEgQgLlOUdDmHkSXM2OS8lRHVojnZJ3YpmmqOjp88QxWQR9kTnFis7mHZ5gzsNmxeVodTJiIQ-5wpwqZs5rq3aIGeja278EJDW0q5UQ0Xg0N5b1fNxnXo6NwIbg_KIm4qp8PffG5scDIOK81/s1600/buttons-white.png) -60px 0 no-repeat;
float: right;
}
.MBLnewsticker>ul>li>.MBL-info span {
position: absolute;
left: 80px;
right: 30px;
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/AVvXsEjjOg-1imgxCqyL8Z46o9hPqaIrIopjea9sjBmrzci4Pm5WYjh_0P_RwVi402oKOveKU_YMxE5PkQHk0lEishguWT3rrG-OQssikXFLOpKDaSpbAl-RX2XC6McbKXhUO-Jpd8-XSurKCSlh/s1600/arrows-black.png) top no-repeat;
}
.MBLnewsticker>div.MBL-bottom-arrow {
bottom: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjOg-1imgxCqyL8Z46o9hPqaIrIopjea9sjBmrzci4Pm5WYjh_0P_RwVi402oKOveKU_YMxE5PkQHk0lEishguWT3rrG-OQssikXFLOpKDaSpbAl-RX2XC6McbKXhUO-Jpd8-XSurKCSlh/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;
♥ و الان مرة اخري ابحث عن هذا الكود </head> و فوقه مباشرة قم بوضع كود JavaScript التالي: ( هذا الكود هو الذي سيجعل الشريط يعمل لذلك تأكد من اضافته بشكل صحيح)
<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">Rss Feed Loading...</div></li>'); u() } else { o() } }) }})(jQuery)/*]]>*/</script>
♥ و الان لاضافة الشريط في العمود الجانبي للمدونة ... اذهب الي تخطيط >> اضافة اداة >> من القائمة الجديدة اختار HTML/JavaScript ثم قم باضافة الكود التالي:
<div class="MBLnewsticker MBL-radius MBL-shadow MBL-easing" id="MBLnewsticker1"><ul> <li> <div class="MBL-content" data-link="http://mybloggerlab.com">Powered by MyBloggerLab (Don't remove or Widget will not work).</div></li></ul> </div>
<script> $(document).ready(function(){$("#MBLnewsticker1").MBLnewsticker({feed:"http://feeds.feedburner.com/msstra",width:"100%",contentlinkcolor: "#766D6D",timer:5000,titlecolor: "#333",titlefontsize: "16px",itembgcolor: "#FFF",contentlinkcolor: "#766D6D",infobgcolor: "#f2f2f2",bordercolor: "#DDD"}); });</script>
التعديل علي شكل الاضافة كما يحلو لك:
قم بتغيير ما يلي بما يناسبك:
♥ قم بتغيير http://feeds.feedburner.com/msstra بالرابط الخاص بك
♥ تغيير 100% لتعديل عرض الاضافة
♥ تغيير 5000 لتعديل سرعة تناوب الشرائح
♥ تغيير #FFF لتعديل لون خلفية info bar
♥ تغيير #766D6D لتعديل لون الرابط الذي يظهر في الشريط
♥ تغيير #f2f2f2 لتعديل لون خلفية الشريط الاخباري
♥ تغيير #DDD لتعديل لون border او الحواف الخاصة بالشريط
بعد التعديل و الانتهاء من كل شئ قم بحفظ الاداة عن طريق الضغط علي زر "حفظ"
قم بتغيير ما يلي بما يناسبك:
♥ قم بتغيير http://feeds.feedburner.com/msstra بالرابط الخاص بك
♥ تغيير 100% لتعديل عرض الاضافة
♥ تغيير 5000 لتعديل سرعة تناوب الشرائح
♥ تغيير #FFF لتعديل لون خلفية info bar
♥ تغيير #766D6D لتعديل لون الرابط الذي يظهر في الشريط
♥ تغيير #f2f2f2 لتعديل لون خلفية الشريط الاخباري
♥ تغيير #DDD لتعديل لون border او الحواف الخاصة بالشريط
بعد التعديل و الانتهاء من كل شئ قم بحفظ الاداة عن طريق الضغط علي زر "حفظ"
ليست هناك تعليقات:
إرسال تعليق