আজকে আমি আপনাদের সঙ্গে একটি শেয়ার করবো খুব সুন্দর একটি RSS News Ticker ওয়েডগেট। এটাতে সিএসএস ব্যবহার করে খুব সুন্দর রূপ দেওয়া হয়েছে যার ফলে এটা দেখতে এবং কাজে অসধারন । আসলে এই নিউজ টিকার ওয়েডগেট টি আপনার ব্লগেও ব্যবহার করতে চাইলে অবশই আপনার একটি আর.এস.এস ফিড অ্যাকাউন্ট থাকতে হবে, আশাকরি প্রতিটি ব্লগারের এই অ্যাকাউন্ট আছে । কারন আমারা সাবস্ক্রাইব ওয়েডগেট ব্যবহার করার সময় এটা ব্যবহার করে থাকে এবং আমারা সবাই জানি একটি ব্লগের জন্য সাবস্ক্রাইব সিস্টেম কতটা প্রয়োজনীয়। যাই হোক আপনার যদি আগে থেকে ফিড অ্যাকাউন্ট না থাকে তাহলে আপনি এখান থেকে একটি অ্যাকাউন্ট করেনিন । আপনার অ্যাকাউন্ট তৈরি শেষ হলেই আপনি নিচের টিপস দেখুন এবং প্রতিটি স্টেপ দেখে দেখে কাজ করুন ।
প্রথমে আপনার ব্লগার অ্যাকাউন্ট লগইন করুন এবং ড্যাশবোর্ড থেকে Template এ ক্লিক করুন Edit HTML এ ক্লিক করে আপনার কীবোর্ড এর CTRL + F প্রেস করে নিচের এই ]]></b:skin> ট্যাগ সার্চ করুন। এবার নিচের কোড গুল উপরে বসিয়ে দিন ।
এবার একি ভাবে CTRL + F প্রেস করে এই </head> ট্যাগ সার্চ করুন এবং এই ট্যাগ এর ঠিক উপরে নিচের কোড গুল বসিয়ে দিন ।
ব্লগার ব্লগে ব্যবহার করুন RSS News Ticker ওয়েডগেট :
প্রথমে আপনার ব্লগার অ্যাকাউন্ট লগইন করুন এবং ড্যাশবোর্ড থেকে 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/AVvXsEjrBrH00B9bdiq8yiBD0voMj61e4BVJqgZqMGPHsE-5sSDOwqTy_khyK4xLcqCPANXSng4DKdDRU0nELPQuNVMdgxsGrNdWwR06sSeD3Wcb_B5uhQbKESXF49aYd6qvf3NYd_vV0gapwv-E/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/AVvXsEjrBrH00B9bdiq8yiBD0voMj61e4BVJqgZqMGPHsE-5sSDOwqTy_khyK4xLcqCPANXSng4DKdDRU0nELPQuNVMdgxsGrNdWwR06sSeD3Wcb_B5uhQbKESXF49aYd6qvf3NYd_vV0gapwv-E/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/AVvXsEjrBrH00B9bdiq8yiBD0voMj61e4BVJqgZqMGPHsE-5sSDOwqTy_khyK4xLcqCPANXSng4DKdDRU0nELPQuNVMdgxsGrNdWwR06sSeD3Wcb_B5uhQbKESXF49aYd6qvf3NYd_vV0gapwv-E/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/AVvXsEjrBrH00B9bdiq8yiBD0voMj61e4BVJqgZqMGPHsE-5sSDOwqTy_khyK4xLcqCPANXSng4DKdDRU0nELPQuNVMdgxsGrNdWwR06sSeD3Wcb_B5uhQbKESXF49aYd6qvf3NYd_vV0gapwv-E/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/AVvXsEhbry0Hwm8lbjQB0GKP8uMT2kH7KKL82Pjzj2mymFGqx-HAG_3TZNW4TvMj4QIIYffKYp-GbOllm2GrtKXbRYaidTNs1nNHptJRGLIXDGRRt8Gg49pd3TeML_XFjTtWBuiJ-VaorTEDCbMA/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/AVvXsEhbry0Hwm8lbjQB0GKP8uMT2kH7KKL82Pjzj2mymFGqx-HAG_3TZNW4TvMj4QIIYffKYp-GbOllm2GrtKXbRYaidTNs1nNHptJRGLIXDGRRt8Gg49pd3TeML_XFjTtWBuiJ-VaorTEDCbMA/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/AVvXsEhbry0Hwm8lbjQB0GKP8uMT2kH7KKL82Pjzj2mymFGqx-HAG_3TZNW4TvMj4QIIYffKYp-GbOllm2GrtKXbRYaidTNs1nNHptJRGLIXDGRRt8Gg49pd3TeML_XFjTtWBuiJ-VaorTEDCbMA/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/AVvXsEhbry0Hwm8lbjQB0GKP8uMT2kH7KKL82Pjzj2mymFGqx-HAG_3TZNW4TvMj4QIIYffKYp-GbOllm2GrtKXbRYaidTNs1nNHptJRGLIXDGRRt8Gg49pd3TeML_XFjTtWBuiJ-VaorTEDCbMA/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/AVvXsEgmImvnWpYgq_9B7RSdtik_LX1JVtbV0g2hBeGcMyMXouiuEKBzIjPtustpEDR1BADHPuqUZO6svYS_CuVffQIjZOCaEHVRvrgkbENGk_ThGWQsahPJTzvwfd6KxYY-DHHw0PKMGeKzXa1O/s1600/arrows-black.png) top no-repeat;
}
.MBLnewsticker>div.MBL-bottom-arrow {
bottom: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmImvnWpYgq_9B7RSdtik_LX1JVtbV0g2hBeGcMyMXouiuEKBzIjPtustpEDR1BADHPuqUZO6svYS_CuVffQIjZOCaEHVRvrgkbENGk_ThGWQsahPJTzvwfd6KxYY-DHHw0PKMGeKzXa1O/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",
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 করে আপনার ব্লগে ভিজিট করুন ।
পোস্টটি ভাল লাগলে অবশ্যই বন্ধুদের সঙ্গে শেয়ার করুন । কোন রকম সমস্যা হলে নিচে কমেন্ট করুন এবং ভাল লাগলেও কমেন্ট করে জানাতে ভুলবেন না । ভাল থাকবেন সুস্থ থাকবেন । আসসালামু আলাইকুম ।