Beranda / tutorial

Cara Membuat Breaking News Di Atas Header

Oleh Bahas Tutorial Posting Komentar

Cara Membuat Breaking News Di Atas Header - Di Tutorial Kali Ini Kita Akan Membahas Cara Membuat Widget Breaking News Di Blogger. Breaking News Yang Kita Bahas Kali Ini Adalah Breaking News Yang Sangat Ringan Namun Sangat Bagus Untuk Dilihat Bisa Di Bilang Elegant Dan Salah Satu Kelebihan Breaking News Yang Akan Kita Bahas Ini Adalah Breaking News Yang Berfungsi Menampilkan Semua Artikel Terbaru Dan Kegunaan Nya Untuk Mempermudah Para Pengunjung Blogger Kita Mendapatkan Informasi Terbaru Di Blogger Kita Dan Tidak Perlu Membuka Home Page Terlebih Dahulu Untuk Melihat Post Terbaru Cukup Melihat Breaking News Bisa Melihat Artikel Terbaru Di Blogger Kita Lalu Bagaimana Cara Membuat Nya .. Mari Kita Bahas Di Website Mafsyah Ikuti Langkah Demi Langkah Agar Tidak Terjadi Error ..


  • Ada 2 Cara Untuk Untuk Memasang Breaking News Kali Ini  
  1.  Memasang Lewat Tambah Gadget
  2.  Memasang Lewat Edit Html Blogger (Recomondasi Admin Mafsyah)
Langsung Saja Ke Tutorial Cara Membuat Breaking News Keren Di Blogger

  • Cara Memasang Breaking News Di Tambah Gadget
  1. Masuk Ke Blogger >Tata Letak>Tambah Gadget > Html/Javasciprt > Copykan Code Di Bawah Ini ...
    2. <style type='text/css'>

#beakingnews {
    border-bottom: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    height: 31px;
    line-height: 25px;
    margin: 20px 30px 0;
    overflow: hidden;
    padding: 2px;
}

#recentpostbreaking li a {
    font-family: sans-serif;
    font-weight: bold;
    color: #333;
}


#beakingnews .tulisbreaking {
    background: none repeat scroll 0 0 #ffffff;
    border-bottom: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    color: #191919;
    display: block;
    float: left;
    font-family: sans-serif;
    font-weight: bold;
    margin: -3px 5px 0 0;
    padding: 2px 7px;
    position: absolute;
}

#recentpostbreaking {
    float: left;
    margin-left: 110px;
}

#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
</style>


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

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.mafsyah.com/', // Replace With your Blog Url
    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>';
            $('#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>');
       }
});
    Ganti Kode www.mafsyah.com Dengan Domain Blogger Anda

  • Cara Memasang Breaking News Lewat Edit Html
  1. Masuk Ke Blogger > Template > Edit Html
  2. Letakan Kode Di Bawah Ini Sebeluk  Kode ]]></b:skin> Atau </style>
    3. #beakingnews {
    border-bottom: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    height: 31px;
    line-height: 25px;
    margin: 20px 30px 0;
    overflow: hidden;
    padding: 2px;
}

#recentpostbreaking li a {
    font-family: sans-serif;
    font-weight: bold;
    color: #333;
}


#beakingnews .tulisbreaking {
    background: none repeat scroll 0 0 #ffffff;
    border-bottom: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    color: #191919;
    display: block;
    float: left;
    font-family: sans-serif;
    font-weight: bold;
    margin: -3px 5px 0 0;
    padding: 2px 7px;
    position: absolute;
}

#recentpostbreaking {
    float: left;
    margin-left: 110px;
}

#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}

  3. Selanjutnya Masukan Sciprt Di Bawah Ini Sebelum kode <header>
    4. <div id='beakingnews'><span class='tulisbreaking'>Breaking</span>
<div id='recentpostbreaking'>Loading...</div>
</div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.mafsyah.com/', // Replace With your Blog Url
    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>';
            $('#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>
    Ganti Kode www.mafsyah.com Dengan Domain Blogger Anda ... Sekian Tutorial Cara Membuat Breaking News Di Blogger Semoga Bermanfaat
Demo


Posting Komentar untuk "Cara Membuat Breaking News Di Atas Header"