oleh

Cara Mudah Membuat Widget Breaking News Pada Website

Cara Mudah Membuat Widget Breaking News pada Website

Kali ini kita membagikan cara atau tips mudah membuat “breaking news” pada website atau blog atau situs, kegunaannya pokoknya adalah memberitahukan kepada pengunnjung, bahwa ada beberapa artikel postingan yang baru kita buat pada website atau blog kita, kalau menurut saya ini cukup penting dan bukanlah hanya sekedar accesories pelengkap pada penampilan utama homepage website atau blog atau situs kita saja, ya memang menarik kalau widget jenis ini di pasang, walaupun secara umum widget ini hanya yang menggunakan website-website atau situs yang bertemakan atau konten berita saja, namun jika kita pasang pada website atau blog atau situs kita juga bagus kok.

Seperti terlihat pada gambar di bawah ini, ini adalah tampilan utama website atau blog atau situs ini, terkadang saya pasang terkadang juga tidak, tapi perlu di ingat, widget breaking news ini script-nya hanya untuk yang berplatform blogger.com, bukan untuk wordpress.com atau platform blog lainnya.

https://www.rokanhulublogger.id
Breaking News


Seperti terlihat pada gambar di atas, pada garis merah itulah widget breaking news yang akan di pasang, widget ini mudah di modifikasi, baik panjangnya pada template, bisa di letakkann di mana saja karena ia menggunakan fasilitas HTML/JavaScript pada dashboard blog.


Sekarang mari kita ikuti langkah-langkah pemasangan membuat widget breaking news pada website, berikut caranya :

1. Login pada akun blog kita.
2. Masuk Klik “Tata Letak”.



https://www.rokanhulublogger.id

3. Lalu Klik Tambahkan Gadget.

https://www.rokanhulublogger.id

4. Klik HTML/JavaScript atau bisa juga Klik + Pada Kiri Kanan.

https://www.rokanhulublogger.id

5. Lalu muncul kolom HTML/JavaScript, isikan kode atau script widget breaking news di bawah pada bagian “Konten”, pada judul sebaiknya di kosongkan saja.

https://www.rokanhulublogger.id

6. Berikut tampilannya setelah di isi kode script widget breaking news.

https://www.rokanhulublogger.id

7. Terakhir Klik “Simpan”.
8. Selanjutnya tempatkan widget tersebut sesuai keinginan.

Berikut Script Widget Breaking News : 

<style type=’text/css’ scoped=”scoped”>
#news { background:#fff; border-bottom: 3px solid #36d1dc; border-top: 5px solid #5b86e5; display: block; float: left; height: 25px; line-height: 25px; overflow: hidden; padding: 5px 5px; width: 665px; }
.titlenews { background:#5b86e5; color: #fff; display: block; float: left; font: bold 12px/23px 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:#333 !important; font: bold 12px/25px Tahoma; text-decoration: none; }
ul.shsocial { background:#5b86e5; 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:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.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’>BACA JUGA</span>
<div id=’ltsposts’>Loading…</div>
</div>
<script type=’text/javascript’>
//<![CDATA[
$(document).ready(function () {
var url_blog = ‘https://www.rokanhulublogger.id’, // 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>’;
            $(‘#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>

Catatan : 
width: 665px ini adalah untuk merubah panjang widget.
‘https://www.rokanhulublogger.id’ ini adalah alamat URL, silakan ganti dengan alamat URL website atau blog anda.
– Untuk mengganti warna bordir-nya, maka ganti saja pada bagian “color”, misalnya untuk mengganti warna bordir bottom widget, ganti yang berwarna merah border-bottom: 3px solid #36d1dc;,
untuk yang lainnya silakan utak-atik saja sampai sesuai dengan selera.
<div id=’news’><span class=’titlenews’>BACA JUGA</span> padda tulisan merah baca juga bisa anda ganti sesuka hati, misalnya di ganti dengan “Breaking News”.

Demikianlah Cara Mudah Membuat Widget Breaking News pada Website dengan mudah, semoga bermanfaat, Salam Blogger!!!

Komentar

Tinggalkan Balasan Anda dan Terima Kasih Atas Kunjungannya...

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Artikel Terbaru