Cara Membuat Headline Breaking News di Blog - PenyairCoding (Bergerak & Kemudian Terjadi)
Latest Post
Tunggu...

Jumat, 18 Oktober 2019

Cara Membuat Headline Breaking News di Blog

Cara Membuat Headline Breaking News di Blog

Bagaimana Cara Membuat Headline Breaking News di Blog?

Seberapa penting breaking news pada headline blog sobat? Sebenarnya fungsi headline ini sama
Widget Blog
seperti widget pada umumnya, hanya saja pada recent post atau latest post pada widget blog berbentuk horizontal, pada tulisan ini, penulis membuat tutorial cara membuat headline breaking news berbentuk vertikal, dimana setiap artikel sobat akan berganti satu dengan yang lainnya.
Bagaimana caranya? Yuk simak.

Langkah pertama
  • Login blog sobat
Langkah kedua
  • Masuk ke tata letak atau layout
Langkah ketiga
  • Masukan widget HTML/JavaScript
Kemudian Copy-Paste kode/script dibawah ini.
<style type='text/css' scoped="scoped">
#news{background:#e6e630;border-bottom:5px solid #333;border-top:5px solid #333;display:block;float:left;height:20px;line-height:20px;overflow:hidden;padding:5px 30px;width:835px}.titlenews{background:#333;color:#fff;display:block;float:left;font:bold 12px/22px Tahoma;padding:9px;margin-top:-10px;position:absolute}#ltsposts{float:left;margin-left:120px}#ltsposts ul,#ltsposts li{list-style:none;margin:0;padding:0}#ltsposts li a{background:none !important;color:#fff !important;font:bold 12px/22px Tahoma;text-decoration:none}ul.shsocial{background:#333;float:right;margin:-8px 0}ul.shsocial li{float:left;list-style:none outside none;border:none}ul.shsocial li a{background-color:transparent;background-image:url(http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/s1600/spice-social-gadget-sprite.png);background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:#fff;direction:ltr;display:block;height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all .2s ease 0s;width:32px }ul.shsocial li.fb a{background-position:0 0 }ul.shsocial li.gp a{background-position:-96px 0 }ul.shsocial li.rs a{background-position:-192px 0 }ul.shsocial li.tw a{background-position:-256px 0 }ul.shsocial li.fb a:hover{background-position:0 -32px }ul.shsocial li.gp a:hover{background-position:-96px -32px }ul.shsocial li.rs a:hover{background-position:-192px -32px }ul.shsocial li.tw a:hover{background-position:-256px -32px }
</style>
<div id='news'><span class='titlenews'>Latest Post</span>
<div id='ltsposts'>Loading...</div>
<ul class='shsocial'>
<li class='fb'>
<a href='#' rel='nofollow' target='_blank' title='facebook'>
</a></li>
<li class='tw'>
<a href='#' rel='nofollow' target='_blank' title='twitter'>
</a></li>
<li class='rs'>
<a href='http://feeds.feedburner.com/Feed-Blog-Sobat' rel='nofollow' target='_blank' title='rss'>
</a></li>
</ul>
</div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'https://www.penyaircoding.com/', // Ganti dengan URL BLOG sobat
numpostx     = 20; // Maximum Post
$.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>';
            $('#ltsposts').html(skeleton);
            function tick(){
            $('#ltsposts li:first').slideUp( function () { $(this).appendTo($('#ltsposts ul')).slideDown(); });
            }
        setInterval(function(){ tick () }, 5000);
        } else {
            $('#ltsposts').html('<span>No result!</span>');
        }
    },
    error: function() {
            $('#ltsposts').html('<strong>Error Loading Feed!</strong>');
       }
});
});
//]]>
</script>

Ganti https://www.penyaircoding.com/ menjadi Url Blog kalian.
Simpan lalu lihat perubahan Blog kalian.

Baca Juga--> Membuat Tabel Responsive Pada Blog

Untuk meletakan kode diatas, bisa di bawah menu header, atau footer sesuai keinginan sobat.

Perhatikan kode diatas, untuk merubah sesuai keinginan sobat, cari kode dibawah ini, kemudian sesuaikan dengan keinginan sobat.

background:#e6e630 Untuk merubah warna background sobat
numpostx     = 20  Untuk menampilkan link pada Blog sobat
<a href='URL FACEBOOK ' rel='nofollow' target='_blank' title='facebook'>
</script><a href='URL TWITTER' rel='nofollow' target='_blank' title='twitter'>

Demikian cara membuat Headline breaking news pada halaman sobat.


    Choose :
  • OR
    To comment
1 komentar:
Write comments