ব্লগার ব্লগে ব্যবহার করুন RSS News Ticker ওয়েডগেট !

ব্লগার ব্লগে ব্যবহার করুন RSS News Ticker ওয়েডগেট !
Posted by IT Sayim
Your Ads Here

আজকে আমি আপনাদের সঙ্গে একটি শেয়ার করবো খুব সুন্দর একটি RSS News Ticker ওয়েডগেট। এটাতে সিএসএস ব্যবহার করে খুব সুন্দর রূপ দেওয়া হয়েছে যার ফলে এটা দেখতে এবং কাজে অসধারন । আসলে এই নিউজ টিকার ওয়েডগেট টি আপনার ব্লগেও ব্যবহার করতে চাইলে অবশই আপনার একটি আর.এস.এস ফিড অ্যাকাউন্ট থাকতে হবে, আশাকরি প্রতিটি ব্লগারের এই অ্যাকাউন্ট আছে । কারন আমারা সাবস্ক্রাইব ওয়েডগেট ব্যবহার করার সময় এটা  ব্যবহার করে থাকে এবং আমারা সবাই জানি একটি ব্লগের জন্য সাবস্ক্রাইব সিস্টেম কতটা প্রয়োজনীয়। যাই হোক আপনার যদি আগে থেকে ফিড অ্যাকাউন্ট না থাকে তাহলে আপনি এখান থেকে একটি অ্যাকাউন্ট করেনিন । আপনার অ্যাকাউন্ট তৈরি শেষ হলেই আপনি নিচের টিপস দেখুন এবং প্রতিটি স্টেপ দেখে দেখে কাজ করুন ।








ব্লগার ব্লগে ব্যবহার করুন RSS News Ticker ওয়েডগেট :

Your Ads Here



প্রথমে আপনার ব্লগার অ্যাকাউন্ট লগইন করুন এবং ড্যাশবোর্ড থেকে Template এ ক্লিক করুন Edit HTML এ ক্লিক করে আপনার কীবোর্ড এর CTRL + F প্রেস করে নিচের এই ]]></b:skin> ট্যাগ সার্চ করুন। এবার নিচের কোড গুল উপরে বসিয়ে দিন ।



 .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/AVvXsEhfIpDAcRpCGxEONDYbYzOPXcLYKFMYPouedd2zu6rW0yGGfIudBG1ejuqic0-p-FF6KfexfVrcjdlZMUrYYKaJMmjydJNUAU7V6OLOoKi_LtGssEf1aeIVRHGVh06g-kEBgx2EcR-W222r/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/AVvXsEhfIpDAcRpCGxEONDYbYzOPXcLYKFMYPouedd2zu6rW0yGGfIudBG1ejuqic0-p-FF6KfexfVrcjdlZMUrYYKaJMmjydJNUAU7V6OLOoKi_LtGssEf1aeIVRHGVh06g-kEBgx2EcR-W222r/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/AVvXsEhfIpDAcRpCGxEONDYbYzOPXcLYKFMYPouedd2zu6rW0yGGfIudBG1ejuqic0-p-FF6KfexfVrcjdlZMUrYYKaJMmjydJNUAU7V6OLOoKi_LtGssEf1aeIVRHGVh06g-kEBgx2EcR-W222r/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/AVvXsEhfIpDAcRpCGxEONDYbYzOPXcLYKFMYPouedd2zu6rW0yGGfIudBG1ejuqic0-p-FF6KfexfVrcjdlZMUrYYKaJMmjydJNUAU7V6OLOoKi_LtGssEf1aeIVRHGVh06g-kEBgx2EcR-W222r/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/AVvXsEjStS20psqLIPfnrbSGS968PdYKGWsZjB5gTKEtPJfbwfh7Q8_m41N0acIcWhfjdqrydmtswHWd6t2wCZu34wGs63m7xxNEirB9lI5bAE1bQPwxOchkAlAmlqunqUGQYZlDOWxvb_yj1rlZ/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/AVvXsEjStS20psqLIPfnrbSGS968PdYKGWsZjB5gTKEtPJfbwfh7Q8_m41N0acIcWhfjdqrydmtswHWd6t2wCZu34wGs63m7xxNEirB9lI5bAE1bQPwxOchkAlAmlqunqUGQYZlDOWxvb_yj1rlZ/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/AVvXsEjStS20psqLIPfnrbSGS968PdYKGWsZjB5gTKEtPJfbwfh7Q8_m41N0acIcWhfjdqrydmtswHWd6t2wCZu34wGs63m7xxNEirB9lI5bAE1bQPwxOchkAlAmlqunqUGQYZlDOWxvb_yj1rlZ/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/AVvXsEjStS20psqLIPfnrbSGS968PdYKGWsZjB5gTKEtPJfbwfh7Q8_m41N0acIcWhfjdqrydmtswHWd6t2wCZu34wGs63m7xxNEirB9lI5bAE1bQPwxOchkAlAmlqunqUGQYZlDOWxvb_yj1rlZ/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/AVvXsEh97L6idyIFWV0A8bajVF11_8l6ZW_Su1lfwML__XBbMbACsjvI4s6UkSzdG8hE4NolW5dXkJpDKzD2g3NPOSndMWsSXSkC1KlCzRd_JgEBiGJoKo8HVvyVoWTnim8PFK0KBqlqkCRkrK3D/s1600/arrows-black.png) top no-repeat;
}
.MBLnewsticker>div.MBL-bottom-arrow {
bottom: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh97L6idyIFWV0A8bajVF11_8l6ZW_Su1lfwML__XBbMbACsjvI4s6UkSzdG8hE4NolW5dXkJpDKzD2g3NPOSndMWsSXSkC1KlCzRd_JgEBiGJoKo8HVvyVoWTnim8PFK0KBqlqkCRkrK3D/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;
}



এবার একি ভাবে CTRL + F প্রেস করে এই </head> ট্যাগ সার্চ করুন এবং এই ট্যাগ এর ঠিক উপরে নিচের কোড গুল বসিয়ে দিন ।



 <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",
Your Ads Here

Your Ads Here

    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>



    এবার Save Template এ ক্লিক করুন । এবং নিচের বাকি কাজ করুন ।


    এবার ড্যাশবোর্ড থেকে Layout এ ক্লিক করুন তারপর Add a Gadget এ ক্লিক করুন তারপর 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/asobondhu",
    width:"100%",
    contentlinkcolor: "#766D6D",
    timer:5000,
    titlecolor: "#333",
    titlefontsize: "16px",
    itembgcolor: "#FFF",
    contentlinkcolor: "#766D6D",
    infobgcolor: "#f2f2f2",
    bordercolor: "#DDD"
    });
    });
    </script>



    উপরের কোড থেকে শুধু মাত্র asobondhu মুছে সেখানে আপনার ফিড ID বসিয়ে দিন। ব্যাস এবার Save করে আপনার ব্লগে ভিজিট করুন ।


    পোস্টটি ভাল লাগলে অবশ্যই বন্ধুদের সঙ্গে শেয়ার করুন । কোন রকম সমস্যা হলে নিচে কমেন্ট করুন এবং ভাল লাগলেও কমেন্ট করে জানাতে ভুলবেন না । ভাল থাকবেন সুস্থ থাকবেন । আসসালামু আলাইকুম ।

    Your Ads Here

    নবীনতর পোস্টসমূহ নবীনতর পোস্টসমূহ পুরাতন পোস্টসমূহ পুরাতন পোস্টসমূহ

    Related Posts

    Your Ads Here

    মন্তব্যসমূহ

    একটি মন্তব্য পোস্ট করুন
    Loading comments...