طريقة اضافة اخر المواضيع rss متحركة في العمود الجانبي بلوجر
بسم الله الرحمن الرحيم
مرحبا بكم في مدونة مسطرة ... و اليوم موضوعنا عن طريقة اضافة اخر المواضيع rss متحركة في العمود الجانبي بلوجر How to Add a RSS Feed News Ticker in Blogger Sidebar ...
طريقة اضافة اخر المواضيع 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/AVvXsEhwg35JNKqDQJ_VnLW7vGwDa_kZ3flEralIBJ55j2blFHjVxyXJ30TL61URWsMxllqPQhUZL4NqKbJ60lgPq4yVQw1OB8C1Ie9__rVpbUyoK6CBuli2VbU7HJw_rrGCcvDbDaa7FO03F0mN/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/AVvXsEhwg35JNKqDQJ_VnLW7vGwDa_kZ3flEralIBJ55j2blFHjVxyXJ30TL61URWsMxllqPQhUZL4NqKbJ60lgPq4yVQw1OB8C1Ie9__rVpbUyoK6CBuli2VbU7HJw_rrGCcvDbDaa7FO03F0mN/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/AVvXsEhwg35JNKqDQJ_VnLW7vGwDa_kZ3flEralIBJ55j2blFHjVxyXJ30TL61URWsMxllqPQhUZL4NqKbJ60lgPq4yVQw1OB8C1Ie9__rVpbUyoK6CBuli2VbU7HJw_rrGCcvDbDaa7FO03F0mN/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/AVvXsEhwg35JNKqDQJ_VnLW7vGwDa_kZ3flEralIBJ55j2blFHjVxyXJ30TL61URWsMxllqPQhUZL4NqKbJ60lgPq4yVQw1OB8C1Ie9__rVpbUyoK6CBuli2VbU7HJw_rrGCcvDbDaa7FO03F0mN/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/AVvXsEhzvHLEmqYNFuDAHjngom6WO1BiF9huZI8-mXiwOHoKbsVLWSOoofzCXe21VtJrEKI8a2ppq6pabikt1tdCu5f8Mu0Q3XFMxeb8SSoOkjH9r22iCNnpw3VARBIxerU-afco3TrGZQZku5ef/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/AVvXsEhzvHLEmqYNFuDAHjngom6WO1BiF9huZI8-mXiwOHoKbsVLWSOoofzCXe21VtJrEKI8a2ppq6pabikt1tdCu5f8Mu0Q3XFMxeb8SSoOkjH9r22iCNnpw3VARBIxerU-afco3TrGZQZku5ef/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/AVvXsEhzvHLEmqYNFuDAHjngom6WO1BiF9huZI8-mXiwOHoKbsVLWSOoofzCXe21VtJrEKI8a2ppq6pabikt1tdCu5f8Mu0Q3XFMxeb8SSoOkjH9r22iCNnpw3VARBIxerU-afco3TrGZQZku5ef/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/AVvXsEhzvHLEmqYNFuDAHjngom6WO1BiF9huZI8-mXiwOHoKbsVLWSOoofzCXe21VtJrEKI8a2ppq6pabikt1tdCu5f8Mu0Q3XFMxeb8SSoOkjH9r22iCNnpw3VARBIxerU-afco3TrGZQZku5ef/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/AVvXsEhSmidJfpkTjtam_xIGaHNuTc-a1gv-tAmTuQ_tK-mzApzOnHbagyN671UjATKCZVwEYha-0OGFFAh45QACrC7YMXOaTHhNh-ojaSqZRmGW7ZFhoH94pHHy5i8A5sgTps9el-Pv0SMTM6xj/s1600/arrows-black.png) top no-repeat;
}
.MBLnewsticker>div.MBL-bottom-arrow {
bottom: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSmidJfpkTjtam_xIGaHNuTc-a1gv-tAmTuQ_tK-mzApzOnHbagyN671UjATKCZVwEYha-0OGFFAh45QACrC7YMXOaTHhNh-ojaSqZRmGW7ZFhoH94pHHy5i8A5sgTps9el-Pv0SMTM6xj/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 او الحواف الخاصة بالشريط
بعد التعديل و الانتهاء من كل شئ قم بحفظ الاداة عن طريق الضغط علي زر "حفظ"
و مبروك عليك الاضافة الجديدة ...
و بكده نكون انتهينا من موضوع اليوم وهو طريقة اضافة اخر المواضيع rss متحركة في العمود الجانبي بلوجر How to Add a RSS Feed News Ticker in Blogger Sidebar ... و السلام عليكم و رحمة الله بركاته ...
0 الرد على "طريقة اضافة اخر المواضيع rss متحركة في العمود الجانبي بلوجر"
إرسال تعليق