ব্লগে ব্রেকিং নিউজ বার যোগ করবেন কিভাবে

কয়েকদিন আগে আমাকে একজন বলল ভাই কিভাবে আপনার সাইটের মত ব্রেকিং/সদ্যপ্রাপ্ত নিউজ বার যোগ করবো।আর তাই আমি আজ সবার জন্য এই সুন্দর বারটি নিয়ে আসল...

কয়েকদিন আগে আমাকে একজন বলল ভাই কিভাবে আপনার সাইটের মত ব্রেকিং/সদ্যপ্রাপ্ত নিউজ বার যোগ করবো।আর তাই আমি আজ সবার জন্য এই সুন্দর বারটি নিয়ে আসলাম আশা করি সবার ভালো লাগবে।আমরা প্রায় খবরের ওয়েবসাইটে গেলে দেখি একটা ব্রেকিং নিউজ বারে কিছু ব্রেকিং নিউজ দেখা যায়।সবারই মনে হয় তাদের সাইটটি সুন্দর ভাবে সাজাতে।আর এর জন্য কত কস্ট করতে হয় সেটা সবার জানা।তাহলে আসুন আজ দেখে নেয়া যাক কিভাবে ব্রেকিং নিউজ বার যোক করবেন।

কিভাবে যোক করবেনঃ

• প্রথমে আপনার ব্লগে প্রবেশ করুন।
• Template এ ক্লিক করুন।
• এবার আপনার টেমপ্লেট এর ব্যাকআপ রাখুন এটা সুবিধার জন্য। 
• Edit Template এ ক্লিক করুন।
• এবার কোডটুকু আপনি যেখানে ব্রেকিং নিউজ বার যোগ করতে চান সেখানে বসান।যেমন আমি আমার সাইটের মেনুবার এর নিচে বসিয়েছি আপনিও চাইলে এমন বসাতে পারেন বা আপনি আপনার সাইটের উপরেও বসাতে পারেন।

ঠিক উপরের ছবির মত।যাই হোক নিচের কোড গুলো বসান।

<style type='text/css'>
#beakingnews {
    background: none repeat scroll 0 0 #FD4326;
    border-bottom: 1px solid #DDDDDD;
    height: 35px;
    line-height: 25px;
    overflow: hidden;
}

#beakingnews .tulisbreaking {
    background: none repeat scroll 0 0 #393939;
    color: #DDDDDD;
    display: block;
    float: left;
    font-family: Times New Roman;
    font-weight: bold;
    margin: 0 5px 0 0;
    padding: 5px 10px 5px 30px;
}

#recentpostbreaking{float:left}

#recentpostbreaking ul, #recentpostbreaking li {
    color: #333333;
    font-family: Times New Roman;
    font-size: 14px;
    font-weight: bold;
    list-style: none outside none;
    margin: 0;
    padding: 3px;
}

#recentpostbreaking ul, #recentpostbreaking li a {
    color: #FFFFFF;
}

</style>

    <div id='beakingnews'><span class='tulisbreaking'>Breaking News </span>
<div id='recentpostbreaking'>Loading...</div>
</div>

এবার </body> এইটুকু খুজুন এবং এর উপরে নিচের কোড গুলো বসিয়ে দিন।

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.blogtipsnticks.com/', // Replace With your Blog Url (Add Blogspo.com url)
    numpostx     = 10; // How many Post do You Want To Show
$.ajax({
    url: ''+url_blog+'/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',
    type: 'get',
    dataType: "jsonp",
    success: function(data) {
        var posturl, posttitle, skeleton = '',
            entry = data.feed.entry;
        if (entry !== undefined) {
            skeleton = "<ul>";
        for (var i = 0; i < entry.length; i++) {
                for (var j=0; j < entry[i].link.length; j++)
                {
                     if (entry[i].link[j].rel == "alternate")
                        {
                            posturl = entry[i].link[j].href;
                            break;
                         }
                }              
            posttitle = entry[i].title.$t;
            skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';
        }
            skeleton += '</ul>';
            $('#recentpostbreaking').html(skeleton);

            function tick(){
            $('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); });
            }
        setInterval(function(){ tick () }, 5000);
        } else {
            $('#recentpostbreaking').html('<span>No result!</span>');
        }
    },
    error: function() {
            $('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');
       }
});
});
//]]>
</script>

 এবার উপরে এই সাইটের অ্যাড্রেস এর জায়গায় আপনার সাইটের অ্যাড্রেসটি দিন।ব্যস এবার সেভ করুন।

এবার আপনি সফল ভাবে পেরেছেন।