របៀបដាក់​ធាតុក្រាហ្វិក Breaking News នៅ​ក្នុង​ប្លុកករ

   Breaking News គឺ​ជា​ធាតុក្រាហ្វិក​ប្លុក​មួយ ដែល​អ្នក​សរសេរ​ប្លុក​គួរ​តែ​ប្រើប្រាស់។ :D សូម្បី​តែ​ប្លុក​ដែល​សរសេរ​ជា​លក្ខណៈ​ពត៌មាន ក៏​ភាគ​ច្រើន​ គេ​បាន​ប្រើប្រាស់ប្រភេទ​នៃ​ធាតុក្រាហ្វិក​នេះ។ នៅ​ពេល​ដែល​អ្នក​ទស្សនា ចូល​មក​មើល​ប្លុក​របស់​អ្នក ពួកគេ​នឹង​ឃើញ​ជា​ចំណង​ជើង នៃ​អត្ថបទ​ដែល​បាន​ប្រកាស​នៅ​ក្នុង​ប្លុក​របស់​អ្នក ហើយ​ជាអត្ថបទ​ថ្មីៗ។ សូម​មើល​គម្រូ​ខាង​ក្រោម​នេះ ៖

ដើម្បី​ធ្វើ​វា​បាន​ សូម​លោក​អ្នក​អនុវត្ត​តាម​វិធី​ងាយៗ​ដូច​ខាង​ក្រោម​នេះ ៖
៙ ​របៀបដាក់​ធាតុក្រាហ្វិក Breaking News នៅ​ក្នុង​ប្លុកករ  ៖  
១. ជំហានទី1 :
- កត់ត្រា​ចូល Log In ក្នុង​គណនី​ Blogger របស់​អ្នក​។
- ចូល​ទៅ​កាន់​មីនុយ Template >> Edit HTML (មើលរូប)

- រក​មើល​ស្លាក </body> ។
- ពេល​រក​ឃើញ​ហើយ សូម​ចម្លង​កូដ​ខាង​ក្រោម ទៅ​ដាក់​ពី​លើ​វា។

កូដ​ដែល​ត្រូវ​ដាក់​ពី​លើ </body>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

var url_blog = 'http://tingmoung.blogspot.com/', //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>

  </b:if></b:if>

*** បញ្ជាក់ ៖ នៅ​ត្រង់ http://tingmoung.blogspot.com/ សូម​ប្ដូរ​ទៅ​ជា​ដំណ​ភ្ជាប់ (URL) នៃ​ប្លុក​របស់​លោក​អ្នក។
- បន្ទាប់​មក​ទៀត ស្វែង​រក​ស្លាក </head>។ ហើយ​ចម្លង​កូដ​ខាង​ក្រោម ទៅ​បិទ​ភ្ជាប់​ពី​លើ </head>។

កូដ​ដែល​ត្រូវ​ដាក់​ពី​លើ </head>

  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<style type='text/css'>

#beakingnews{width:auto;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>

  </b:if></b:if>

- សូម​ធ្វើ​ការ Save Template នៃ​ប្លុក​របស់​លោក​អ្នក។

២. ជំហានទី2 :
- ​ចូល​ទៅ​កាន់​ផ្នែក Layout >> រួច​ចុច​លើ​តំណ​​អក្សរ Add a Gadget នៅ​ទីតាំង​ណាមួយ (ឧទាហរណ៍​សូម​មើល​រូប​ខាង​ក្រោម)

- រមូរ​​ចុះ (scroll down) រក​មើល gadget ដែល​មាន​ឈ្មោះ​ថា HTML/JavaScript រួច​ចុច​​លើ​វា​ដើម្បី​បើក (មើល​រូប​ខាង​ក្រោម​នេះ)

- ចម្លង​កូដ​ខាង​ក្រោម​​នេះ យក​ទៅ​បិទភ្ជាប់​ក្នុង​ HTML/JavaScript ។ 
- បន្ថែម ៖ ចំពោះ​ឈ្មោះ widget ​លោក​អ្នក​​ដាក់ ឬ​មិន​បាច់​ដាក់​ក៏​បាន។

កូដដែល​អ្នក​ត្រូវ​ចម្លង​ដាក់ HTML/JavaScript

  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<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>

<div style='clear: both;'/>

*** ពេល​​ដាក់​រូច​ហើយ សូម​ចុច​លើ​ប៊ូតុង Save ។

អត្ថបទស្រដៀងគ្នា:

Tweet