Cara Memasang Widget BREAKING NEWS atau RUNNING TEXT Pada Blog Responsive

 

Cara Memasang Widget BREAKING NEWS atau RUNNING TEXT Pada Blog

Breaking News atau Headline News (tulisan berjalan) biasa kita lihat di televisi, terutama pada saat acara berita atau sejenisnya. Breaking News berfungsi untuk menampilkan judul berita atau artikel secara sekilas tanpa menampilkan Thumbnail (gambar). Tentu akan berdampak sangat baik jika fitur yang satu ini  dapat dipasang di blog kalian. Karena secara tidak langsung akan memberitahukan kepada para pengunjung blog bahwa ada artikel lainnya yang menarik untuk dibaca.

Ada dua contoh tampilan BREAKING NEWS atau RUNNING TEXT yang akan saya sampaikan. Tentu kedua tampilan tersebut memiliki kelebihan dan kekurangannya. Tergantung kebutuhan kalian masing-masing. Untuk penempatannya sendiri, saya sarankan widget ini ditempatkan dibagian atas (Header). Untuk mempermudah para pengunjung blog melihatnya.

Tampilan 1 :

BREAKING NEWS :

• Cara Memasang Tombol Share Media Sosial di Blog
• Apa Itu Blog? Pengertian, Sejarah, Tujuan, dan Bagian-Bagian Blog.
• Cara Memasang Widget BREAKING NEWS atau RUNNING TEXT Pada Blog
• Cara Mengatasi Thumbnail Blog Buram Atau Pecah
• Cara Membuat Tombol Copy/Select All Pada TEXT AREA
• Cara Menambahkan Tampilan Persentase Pada Scrollbar
• Cara Mudah Merubah Format Video ke MP4 Dengan Aplikasi Format Factory
• Cara mengetahui spesifikasi RAM PC Desktop maupun Laptop
• Cara Mudah Membuat Bootable Flashdisk Menggunakan RUFUS
• Cara Membuat Menu Daftar Isi Pada Postingan di Blog

Tampilan 2 :

BREAKING NEWS

Cara Mudah Merubah Format Video ke MP4 Dengan Aplikasi Format Factory | Cara mengetahui spesifikasi RAM PC Desktop maupun Laptop | Cara Mudah Membuat Bootable Flashdisk Menggunakan RUFUS | Cara Membuat Menu Daftar Isi Pada Postingan di Blog | Cara Memasang Tombol Share Media Sosial di Blog | Apa Itu Blog? Pengertian, Sejarah, Tujuan, dan Bagian-Bagian Blog. | Cara Memasang Widget BREAKING NEWS atau RUNNING TEXT Pada Blog

Cara Memasang Widget BREAKING NEWS Tampilan 1 :

1. Masuk ke akun Blogger > Tema/Template > Edit HTML.
2. Tekan tombol CTRL + F pad

a keyboard, lalu cari kode </body>
3. Copy All kode dibawah.

  <!-- Breaking News -->

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

#news { background:#49505a; border-bottom: 4px solid #1194f2; border-top: 0px solid #333; display: block; float: left; height: 25px; line-height: 25px; overflow: hidden; padding: 8px 0 0 0px; width: 100%; }

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

#ltsposts {float: left;margin: -2px 0px 0px 150px;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; }

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXI2LUwoxjZDS9lt-5yTpVwY2ecfDpX4StMpsWMHoVtfYF7Um1s4crHyC6WYufeG2BXDhkT_v6dLM7yqbSAGaI36MscSFj8Rnd3OOIBRxt0e-rNHnZ4EOzExM8SkMJz7ucXjW1aKr3uzAT/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>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

var url_blog = 'https://www.gaptekini.com/', // Ganti dengan URL blog agan

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>

<!-- Breaking News -->

4. Lalu paste tepat diatas kode kode </body>

Keterangan :

#49505a untuk Warna Back

ground.

#1194f2 untuk Warna Garis Bawah.

Ganti URL https://www.gaptekini.com/ dengan URL blog kalian.

Ganti angka 10 pada kode numpostx     = 10; dengan batas maksimal judul artikel yang ingin ditampilkan.

Ganti angka 3000 untuk mengatur kecepatan yang diinginkan.

5. Copy All kode dibawah.

 <div id='news'><span class='titlenews'><i aria-hidden='true' class='fa fa-newspaper-o fa-lg'/> BREAKING <span style='color:#ff4f4f;'>NEWS</span> :</span>

<div id='ltsposts'>Loading...</div>

</div>

6. Lalu paste kode diatas pada bagian yang ingin ditampilkan.

7. Simpan Template/Tema.

Contoh 1 : 

Jika ingin menapilan  BREAKING NEWS dibagian paling atas (Header), maka cari kode </header> Lalu paste tepat ditas kode tersebut.

Contoh 2 :

Jika ingin menapilan  BREAKING NEWS dibagian bawah, maka cari kode </body> Lalu paste tepat ditas kode tersebut.

Contoh 3 :

Bisa juga ditaruh atau ditampilkan pada bagian menu Tata Letak > Tambahkan Gadget > HTML/JavaScript.

Cara Memasang Widget RUNNING TEXT (Tulisan Berjalan) Tampilan 2 :

1. Masuk ke akun Blogger > Tema/Template > Edit HTML.
2. Tekan tombol CTRL + F pada keyboard, lalu cari kode ]]></b:skin>
3. Copy All kode dibawah.

4. Lalu paste tepat diatas kode kode ]]></b:skin>

5. Copy All kode dibawah.

6. Lalu paste tepat diatas kode kode </head>

Keterangan :

Ganti URL https://pshtkabsemarang.blogspot.com/ dengan URL blog kalian.

Ganti angka 4; dengan batas maksimal judul artikel yang ingin ditampilkan.

Ganti angka "5"; untuk mengatur kecepatan yang diinginkan.

7. Copy All kode dibawah.

8. Lalu paste kode diatas pada bagian yang ingin ditampilkan.

9. Simpan Template/Tema.

Contoh 1 : 

Jika ingin menapilan  RUNNING TEXT dibagian paling atas (Header), maka cari kode </header> Lalu paste tepat ditas kode tersebut.

Contoh 2 :

Jika ingin menapilan  RUNNING TEXT dibagian bawah, maka cari kode </body> Lalu paste tepat ditas kode tersebut.

Contoh 3 :

Bisa juga ditaruh atau ditampilkan pada bagian menu Tata Letak > Tambahkan Gadget > HTML/JavaScript.

PERHATIAN!

Admin mengingatkan, sebelum merubah Template/Tema apapun itu diusahakan untuk BackUp data terlebih dahulu.

sumber : https://www.gaptekini.com/