Artikel menarikCara Mudah Membuat Headline/Breaking News Keren di Blog - Black Exotic - Hallo friend Black Exotic, Pada kesempatan ini, friend akan membaca Artikel yang dengan judul Artikel menarikCara Mudah Membuat Headline/Breaking News Keren di Blog - Black Exotic, tim kami telah mengemas artikel ini dengan baik untuk anda simak dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Artikel menarikCara Mudah Membuat Headline/Breaking News Keren di Blog - Black Exotic
link : Artikel menarikCara Mudah Membuat Headline/Breaking News Keren di Blog - Black Exotic

Artikel menarikCara Mudah Membuat Headline/Breaking News Keren di Blog - Black Exotic

Saat mengunjungi website atau blog dengan kategori seperti berita, biasanya kita akan menjumpai tampilan berupa cuplikan judul-judul postingan terbaru, terhangat atau teraktual di web atau blog tersebut. Tampilan bergerak tersebut biasa juga disebut dengan istilah headline atau breaking news. 

Breaking news merupakan widget yang biasa dipasang di web atau blog dengan tujuan memperindah tampilan, melengkapi navigasi dan meningkatkan pageview blog. Jika diperhatikan, fungsi seperti ini sebenarnya sama dengan widget recent post atau artikel terbaru, hanya saja tampilan pada fitur breaking news ini hanya berupa judul artikelnya saja. 

Meski begitu, cuplikan judul-judul postingan tersebut ditampilkan secara bergantian sehingga selalu bergerak untuk menampilkan postingan-postingan terhangat tersebut. Biasanya, fitur headline atau breaking news berbentuk horizontal ini ada yang diletakkan di atas header blog atau ada juga yang diletakkan di bawah menu navigasi. 

Pada postingan kali ini, saya ingin berbagi script tentang cara membuat fitur breaking news sederhana di blog dengan mudah. Saya juga sudah mencobanya di blog ini dan scriptnya berfungsi dengan baik. Namun karena blog saya ini sudah terlalu banyak widget jadinya saya copot kembali. Tampilan screenshotnya seperti di bawah ini:

Tertarik untuk memasangnya di blog anda?, silahkan ikuti tutorial berikut ini. 

Cara Memasang Breaking News di Blog

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Jika anda ingin meletakkan fitur ini di atas header, silahkan cari kode seperti berikut ini:

<div id='header-wrapper'>

Atau jika anda ingin meletakkan fitur ini di bawah menu navigasi atau di atas isi konten, cari kode seperti berikut ini:

<div id='content-wrapper'>

Perlu diketahui bahwa setiap template memiliki kode berbeda sehingga anda bisa cari kode yang mirip seperti di atas. Setelah kode yang dicari sudah ketemu, salin script berikut ini dan letakkan di atas kode tersebut. 

<!-- Breaking News -->

<style scoped='scoped' type='text/css'>

#news { background:#333; border-bottom: 3px solid #f00; border-top: 0px solid #333; display: block; float: left; height: 30px; line-height: 25px; overflow: hidden; padding: 4px 0 0 0px; width: 100%; }

.titlenews {color: #fff; display: block; float: left; font: bold 12px/22px Tahoma; padding: 6px 0 0 6px;margin: -7px 0 0 0; position: absolute; }

#ltsposts {float: left;margin: -3px 0px 0px 137px;text-align: left;}

#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; }

</style>

<div id='news'><span class='titlenews'><i aria-hidden='true' class='fa fa-bookmark'/> BREAKING <span style='color:#f00;'><i>NEWS</i></span> :</span> <div id='ltsposts'>Loading...</div> </div>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

var url_blog = 'https://massan7.blogspot.co.id/', // Ganti dengan URL blog sobat

numpostx     = 10; // Maximum berita yang akan muncul

$.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 () }, 3000); // kecepatan yang diinginkan

        } else {

            $('#ltsposts').html('<span>No result!</span>');

        }

    },

    error: function() {

            $('#ltsposts').html('<strong>Error Loading Feed!</strong>');

       }

});

});

//]]>

</script>

Keterangan:

• Ganti link berwarna merah di atas dengan link Url blog anda. 
• Anda juga bisa ganti/sesuaikan warna background, margin, dll. 

4. Simpan kembali template dan lihat hasilnya. 

Selain masuk edit html template, cara mudah lainnya anda juga bisa masukkan kode di atas lewat menu tata letak (layout) ➡ tambahkan gadget ➡ html/javascript. Pilih penempatan yang sesuai agar kemunculannya seperti yang diinginkan.

Jika sudah diatur semua yang diperlukan, silahkan simpan kembali widget dan anda bisa lihat hasilnya. 

Demikianlah Cara Mudah Membuat Headline/Breaking News di Blog. Semoga bermanfaat.

Demikianlah Artikel Artikel menarikCara Mudah Membuat Headline/Breaking News Keren di Blog - Black Exotic

Cukup sampai disini artikel Artikel menarikCara Mudah Membuat Headline/Breaking News Keren di Blog - Black Exotic kali ini, semoga dapat memberi manfaat untuk friend semua. baiklah, jangan lupa membaca artikel lainnya.

Artikel yang sedang anda baca Artikel menarikCara Mudah Membuat Headline/Breaking News Keren di Blog - Black Exotic dengan alamat link https://blackexotic.blogspot.com/2020/10/artikel-menarikcara-mudah-membuat.html

Share this post