Home blogger tutorial ব্লগে যুক্ত করুন News Headlines Widget সাথে টুলটিপস

ব্লগে যুক্ত করুন News Headlines Widget সাথে টুলটিপস

news-headlines-widget-for-blogger

আমরা আজ আকর্ষণীয় একটি নতুন Headlines News Widget শেয়ার করতে যাচ্ছি। সাধারণত এ ধরনের উইজেট প্রিমিয়াম ব্লগার টেমপ্লেটে ব্যবহার করতে দেখা যায়। এই ধরনের উইজেট ব্লগের মূল পাতায় ব্যবহার করে ব্লগের গুরুত্বপূর্ণ Label পোষ্টগুলিকে সহজে ভিজিটরদের সামনে উপস্থাপন করে Page View বাড়ীয়ে নেয়া যায়। তাছাড়া যারা ম্যাগাজিন টাইপের ব্লগ ব্যবহার করছেন তাদের ব্লগে এই ধরনের উইজেট যুক্ত করতেই হয় অসাধারণ একটি News Ticker চলুন দেখে আসি কিভাবে এটি করবো বুঝতে না পারলে নিচের ভিডিও দেখুন।

উইজেটটি সম্পর্কে বেশী কিছু বলতে চাইছি না নিচে থেকে লাইভ ডোমো দেখলেই বুঝতে পারবেন

লাইভ ডোমো


হেডলাইন নিউজ উইজেট কি ?

হেডলাইন  নিউজ উইজেট মূলত একটি নিউজ টিকার প্লাগইন যা আপনার ব্লগস্পট ব্লগের সর্বশেষ শিরোনাম দেখায়

চলুন দেখি কিভাবে Headlines News Widget যুক্ত করব

১ প্রথমে ব্লগে লগইন করুন।

২ ব্লগার ড্যাশবোর্ডে হতে Template > Edit Html এ ক্লিক করুন।

৩ কিবোর্ড থেকে Ctrl+F চেপে <head> অংশটি সার্চ করুন।

৪ নিচের Css কোডগুলি <head> ট্যাগের নিচে পেষ্ট করুন।

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

৫ আবার কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
৬ এবার নিচের Scripts গুলি ]]></b:skin> ট্যাগের ঠিক উপরে পেষ্ট করুন।

/*--------------Headlines News Widget By bogracity24.com.com----------*/
.ticker-wrapper.has-js{margin:20px 0;padding:0 20px;width:780px;height:32px;display:block;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;background-color:#f8f0db;font-size:.75em}          
.ticker{width:710px;height:23px;display:block;position:relative;overflow:hidden;background-color:#f8f0db}           
.ticker-title{padding-top:9px;color:#900;font-weight:700;background-color:#f8f0db;text-transform:uppercase}           
.ticker-content{margin:0;padding-top:9px;position:absolute;color:#1F527B;font-weight:700;background-color:#f8f0db;overflow:hidden;white-space:nowrap;line-height:1.2em}           
.ticker-content a{text-decoration:none;color:#1F527B}           
.ticker-content a:hover{text-decoration:underline;color:#0D3059}           
.ticker-swipe{padding-top:9px;position:absolute;top:0;background-color:#f8f0db;display:block;width:800px;height:23px}           
.ticker-swipe span{margin-left:1px;background-color:#f8f0db;border-bottom:1px solid #1F527B;height:12px;width:7px;display:block}           
.ticker-controls{padding:8px 0 0;list-style-type:none;float:left}           
.ticker-controls li{padding:0;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block}           
.ticker-controls li.jnt-play-pause{background-image:url(../images/controls.png);background-position:32px 16px}           
.ticker-controls li.jnt-play-pause.over{background-position:32px 32px}           
.ticker-controls li.jnt-play-pause.down{background-position:32px 0}           
.ticker-controls li.jnt-play-pause.paused{background-image:url(../images/controls.png);background-position:48px 16px}           
.ticker-controls li.jnt-play-pause.paused.over{background-position:48px 32px}           
.ticker-controls li.jnt-play-pause.paused.down{background-position:48px 0}           
.ticker-controls li.jnt-prev{background-image:url(../images/controls.png);background-position:0 16px}           
.ticker-controls li.jnt-prev.over{background-position:0 32px}           
.ticker-controls li.jnt-prev.down{background-position:0 0}           
.ticker-controls li.jnt-next{background-image:url(../images/controls.png);background-position:16px 16px}           
.ticker-controls li.jnt-next.over{background-position:16px 32px}           
.ticker-controls li.jnt-next.down{background-position:16px 0}           
.js-hidden{display:none}           
.no-js-news{padding:10px 0 0 45px;color:#F8F0DB}           
.left .ticker-controls,.left .ticker-content,.left .ticker-title,.left .ticker{float:left}           
.left .ticker-controls{padding-left:6px}           
.right .ticker-controls,.right .ticker-content,.right .ticker-title,.right .ticker{float:right}           
.right .ticker-controls{padding-right:6px}           
/*########Default Style by MBT#########*/           
.ticker-wrapper.has-js{margin:0 0 -200px;padding:0;width:98%;min-height:242px;display:block;border-radius:0;background-color:#fff;border:0 solid #eee;font-size:12px;overflow:hidden}           
.ticker{width:80%;height:42px;display:block;position:relative;overflow:visible;background-color:#fff}           
.ticker-title{background:#71db00;padding:9px 10px;color:#FFF;font-size:16px;font-family:oswald;text-transform:uppercase;text-shadow:1px 1px 6px #666}           
.ticker-title:after{left:90px;top:10px;height:0;width:0;position:absolute;content:" ";pointer-events:none;margin-left:0;margin-top:1px;border-left:13px solid #71db00;border-top:10px solid transparent;border-bottom:10px solid transparent;-moz-transform:scale(.9999)}           
.ticker-content{background-color:#fff;margin-left:18px!important;color:#444;margin-top:1px!important;overflow:visible!important; padding-top: 2px!important;}           
.ticker-swipe{background-color:#fff;position:relative;top:6px;left:110px!important}           
.ticker-swipe span{margin-left:1px;background-color:#fff;border-bottom:1px solid #333;height:12px;width:7px}           
.ticker-controls{padding: 0px!important;margin: 17px 0 0 10px!important;list-style-type:none;position:relative;right:-50px}           
.ticker-controls li{padding:0;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block}           
.ticker-controls li a{border:0px!important; padding:0px!important;}           
.ticker-controls li.jnt-play-pause,.ticker-controls li.jnt-play-pause.paused,.ticker-controls li.jnt-play-pause.paused.over,.ticker-controls li.jnt-prev,.ticker-controls li.jnt-play-pause.over,.ticker-controls li.jnt-next{position:absolute;background:none}           
.ticker-controls li.jnt-play-pause:after,.ticker-controls li.jnt-play-pause.over:after{content:"\f04c";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:1.8em}           
.ticker-controls li.jnt-play-pause.paused:after,.ticker-controls li.jnt-play-pause.paused.over:after{content:"\f04b";font-size:13px;color:#71db00;font-family:fontAwesome;position:rel

৭ এবার Template Save করে বেরিয়ে আসুন।

৮ এখন ব্লগার টেমপ্লেটের Layout অপশনে যেখানে আপনি নিউজ হেডলাইন দেখাতে চান সেখানে Add a Gadget ক্লিক করে HTML/JavaScript ক্লিক করুন এবং নিচের কোড পেস্ট করে gadget Save করুন আপনার কাজ শেষ

<!-- ######### Headlines News Widget By bogracity24.com ############# -->

        
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>          
<script src="http://www.jquerynewsticker.com/includes/jquery.ticker.js" type="text/javascript"></script>

        
<!-- ######### Writing Callback Function ############# -->          
<script type="text/javascript">           
//----------------------------Defaults           
var ListBlogLink = "https://www.bogracity24.com/";           
var ListCount = 5;           
var TitleCount = 70;           
var ListLabel ="Widgets";           
var ChrCount = 140;           
var ImageSize = 200; 

        
//----------------------------Function Start          
function mbtlist(json) {           
document.write('<ul id="js-news" class="js-hidden">');           
for (var i = 0; i < ListCount; i++)           
{

        
//-----------------------------Variables Declared          
var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  "";           
//----------------------------- Title URL           
for (var j = 0; j < json.feed.entry[i].link.length; j++) {           
if (json.feed.entry[i].link[j].rel == 'alternate') {           
break;           
}           
}           
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";           
//----------------------------------- Title Stirng           
if (json.feed.entry[i].title!= null)           
{           
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);           
}

        
if (json.feed.entry[i].thr$total)          
{           
ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";           
}           
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");           
ListAuthor=ListAuthor.slice(0, 1).join(" ");           
AuthorPic = json.feed.entry[i].author[0].gd$image.src;

        
         
//################### Content Check           
ListConten = json.feed.entry[i].content.$t;           
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);

        
//################### Date Format

        
ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

        
ListDate= json.feed.entry[i].published.$t.substring(0,10);

        
                         Y = ListDate.substring(0, 4);          
                        m = ListDate.substring(5, 7);           
                         D = ListDate.substring(8, 10);           
                         M = ListMonth[parseInt(m - 1)];  

        
//################### Thumbnail Check          
if (json.feed.entry[i].media$thumbnail)           
{           
thumbUrl = json.feed.entry[i].media$thumbnail.url;           
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");           
ListImage= "'" + sk.replace("?imgmax=800","") + "'";           
}

        
// YouTube scan          
else if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)           
{           
    var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();           
    
    if (youtube_id.length == 11) {           
        var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";           
        }           
}

        
         
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)           
{           
// Support For 3rd Party Images           
ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];           
}           
else           
{           
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiXX3ih07W_rCxnrxw4OLhe0RGtQxjri1FgrdkamVBOsDoKXVeFkds9QlIO9Zrb755bgetNbQaW97pZXibv87Ei8edheew0NGJyCcZK9Ckoh-4D82jelpscyct7qoX-6lUiNhCpHRSzJI/s200/Icon.png'";           
} 

        
//----------------------------------- Printing List          
var listing = "<li class='news-item'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"           
+ListAuthor+ "</span> <span class='icomments'>"           
+ListComments + "</span>  <span class='idate'>"           
+ D + " " + M + "</span><i class='fa fa-chevron-right'></i> <a class='mbttitle tooltip' href="           
+ListUrl+           
"><span><b></b><img src="           
+ListImage+           
"/>"           
+ListContent+           
" →</span>"+ListTitle+"</a></li>";           
document.write(listing);           
}}

        
document.write("</ul><script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtlist'></"+"script>");           
/*##########Newsticker settings########*/           
    $(function () {           
        $('#js-news').ticker({           
        speed: 0.20,           
        controls: true,   
        titleText: 'Headlines',           
        displayType: 'reveal',           
        pauseOnItems: 2000});           
});           
</script>
বিশেষ দ্রষ্টব্যঃ এখানে কিছু পরিবর্তন করতে হবে

ListBlogLink এখানে আমার ব্লগের এডড্রেস https://www.bogracity24.com/ দেয়া আছে এখানে আপনার ব্লগের এডড্রেস দিন

ListCount এর জায়গায় 5 দেয়া আছে

ListLabel এর জায়গায় Widgets দেয়া আছে এখানে আপনার ব্লগ লেবেল দিন

আপনি যদিকোন নির্দিষ্ট লেবেল উল্লেখ না করে আপনার ব্লগের সর্বশেষ পোস্ট হেডলাইন প্রদর্শন করতে চান তবে উপরের কোড থেকে  রিমোভ করুন

আপনি যদিকোন নির্দিষ্ট লেবেল উল্লেখ না করে আপনার ব্লগের সর্বশেষ পোস্ট হেডলাইন প্রদর্শন করতে চান তবে উপরের কোড থেকে /-/"+ListLabel+" রিমোভ করুন




ব্লগে যুক্ত করুন News Headlines Widget সাথে টুলটিপস ব্লগে যুক্ত করুন News Headlines Widget সাথে টুলটিপস Reviewed by sohel on February 17, 2019 Rating: 5
Powered by Blogger.