How to Add Breaking News Ticker in Blogger Template

How to Add Breaking News Ticker in Blogger Template

यदि आप ब्लॉगर है तो यह पोस्ट आपके लिए है हमारी इस site पर आपका स्वागत है। इस पोस्ट में हम जानेगे की अपनी ब्लॉग में Blogger me Breaking News Ticker kaise Lagaye ब्लॉग के होम पेज में ब्रेकिंग न्यूज़ को दिखाने से आपके visitor को तुरंत पता चल जाता है कि आपके ब्लॉग पर कौन सा नया पोस्ट आया है। इस लिए अपने ब्लॉग में Breaking News Ticker जरूर लगाए।
तो चलिए जानते है How to Add Breaking News Ticker in Blogger Template

आज कल हम ब्लॉग्गिंग में पोस्ट डालते है और क्युकि हम इतने professional तो नहीं इसलिए FREE की Template यूज़ करते है , और समय के हिसाब से मार्किट में नयी नयी THEME आती है और हमको लगता है की उस theme के नए नए फीचर्स अपनी भी THEME में भी वह सब ऑप्शन होते है। और इसके लिए आप पूरी theme चेंज कर देते है। जिससे दोनों थीम का इफ़ेक्ट आपकी ब्लॉग में आ जाता है जिस से ब्लॉग का look ख़राब हो जाता है। इसके लिए आप आसानी से नए नए फीचर्स को आसानी से ऐड कर सकते है। तो हम इस स्थिति में Theme Customise करेंगे और जानेगे की आप How to Customise Blogger Theme.
तो हम इसी फीचर्स को किसी भी टेम्पलेट में कैसे add कर सकते है। इसके बारे में विस्तार से जानेगे।

Step to Add Breaking News Ticker in Blogger Template 

आप बहुत ही आसानी से अपने ब्लॉग में Breaking News Ticker को जोड़ कर अपने ब्लॉग को एक नया रूप दे सकते है। निचे हम इसके स्टेप बताने वाले है कौन सा भी स्टेप छोड़े नहीं , और ऐसा किया तो ये फीचर्स शायद काम ना करे। और आप आसानी से ब्लॉग में New Widget को आसानी से ऐड कर सकते है।  इस पोस्ट में हम ये भी जान लेंगे की अपनी ब्लॉग में How To Add Widget in Blogger Template

Step 1- अपने ब्लॉगर Dashboard में लोगी करें और Theme Section में जाकर Edit Theme पर क्लिक करें। 

Step - 2 अब आपको CTRL+F दबाएंगे तो एक सर्च बॉक्स ओपन होगा। इस सर्च बॉक्स में टाइप करे  </body> और एंटर करे। निचे बॉक्स में दी गयी Javascript को अच्छे से कॉपी करे और </body> Tag के ऊपर Paste करें। 

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'PASTE YOUR URL HERE', //replace with your Domain 
    numpostx  = 10; //Posts want to display
$.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);
            // kode untuk efek pada breaking news
            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>

Step 3- इस कोड में PASTE YOUR URL HERE की जगह अपने ब्लॉग का URL PASTE करें 
और ध्यान दे की ' ' के अंदर ही हो

Step 4 - अब आपको CTRL+F दबाएंगे तो एक सर्च बॉक्स ओपन होगा। इस सर्च बॉक्स में टाइप करे  </head> और एंटर करे। निचे बॉक्स में दी गयी Javascript को अच्छे से Copy करे और </head > Tag के ऊपर Paste करें और Save Theme पर क्लिक करें।

  <style type='text/css'>
#beakingnews{width:980px;margin:0 auto;line-height:25px;height:25px;background:#F7F7F7;overflow:hidden;margin-top:5px;}
#beakingnews .tulisbreaking{display:block;float:left;padding:0 7px;margin:0 5px 0 0;color:#FCFCFC;background:#5F0000}
#recentpostbreaking{float:left}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
</style>

Step 5 - अब अपने ब्लॉगर के layout section में जाकर Add To Gadget करके HTML/Javascript पर क्लिक करके निचे दिए गए कोड को Paste करें। यह Gadget जहां भी ऐड करेंगे वहाँ यह ब्रेकिंग न्यूज़ दिखाई देखा।

<div id='beakingnews'><span class='tulisbreaking'>Breaking News</span><!-- tag pembuka tempat Breaking News-->
<div id='recentpostbreaking'>Loading...</div><!-- tag tempat daftar Breaking News ditampilkan-->
</div><!-- tag penutup tempat Breaking News-->
  </b:if></b:if>

आपको हमारा यह आर्टिकल कैसा लगा और कमेंट बॉक्स में कमेंट जरूर करे।