Cara Membuat Widget Headline News Posting Terbaru

Ketika kita membuka blog/website tertentu, sering kita lihat headline yang memuat daftar artikel terbaru. Pada postingan kali ini saya mencoba memberikan gambaran bagaimana cara membuat widget tersebut.

Widget Headline News Posting Terbaru. Banyak sekali cara untuk membuat widget ini. Namun kali ini saya akan membuatnya dari hasil pengembangan posting sebelumnya cara membuat widget posting terbaru.

Dengan menambahkan script di bawah ini sobat bisa membuatnya, tentunya dengan beberapa penyesuaian yang harus dilakukan.

// http://www.dte.web.id/2012/07/animasi-blog-roll.html

var $ul = $('#elemen'),
    roll = function() {
        $ul.find('li').first().slideUp('slow', function() {
            $(this).appendTo($(this).parent()).fadeIn();
        });
    }, anim = setInterval(roll, 3000);

// Pause on hover...
$ul.hover(function() {
    clearInterval(anim);
}, function() {
    anim = setInterval(roll, 3000);
});
Sehingga penerapannya menjadi seperti ini
.................................
                var title = e[i].title.$t;
                content += '<li class="recent-posts"><strong><a href="' + link + '" title="' + title + '" target="_blank">' + title + '</a></strong></li>'
            }
            ct.innerHTML = content
        }
    }
var $ul = $('#headline-posts'),
    roll = function () {
        $ul.find('li').first().slideUp('slow', function () {
            $(this).appendTo($(this).parent()).fadeIn();
        });
    }, anim = setInterval(roll, 3000);
$ul.hover(function () {
    clearInterval(anim);
}, function () {
    anim = setInterval(roll, 3000);
});
var you_script = document.createElement('script');
..................................... 

Untuk menambahkan pada blog sobat silahkan ikuti metode di bawah ini

  1. Pada akun blogger sobat pilih tata letak
  2. Kemudian cary gadget HTML dan JavaScript kemudian tambahkan
  3. Masukkan kode berikut pada formulir gadget yang ditambahkan tadi.

<div id="headline">
    <stong class="headl">Headline News :</stong>
    <ul id="headline-posts" />
</div>
<style>
    #headline {
        height: 20px;
        clear: both;
    }
    .headl {
        float:left
    }
    #headline-posts {
        display: inline;
        position: absolute;
        margin: 0;
        height: 20px;
        overflow: hidden;
    }
    #headline-posts li {
        list-style:none;
        overflow:hidden;
        text-decoration:none;
        margin: 0;
    }
</style>
<script type="text/javascript">
// Headline news widget for Blogger
// Dikombinasikan dengan Animasi Blogroll http://www.dte.web.id/2012/07/animasi-blog-roll.html 
// Author: yOu w4hyOu
// https://plus.google.com/106933633716411881896/about

var homePage = "http://info-kmu.blogspot.com/",
    numPosts = 5

    function headlinePosts(a) {
        if (document.getElementById("headline-posts")) {
            var e = a.feed.entry,
                title, link, content = "",
                ct = document.getElementById("headline-posts");
            for (var i = 0; i < numPosts; i++) {
                for (var j = 0; j < numPosts; j++) {
                    if (e[i].link[j].rel == "alternate") {
                        link = e[i].link[j].href;
                        break
                    }
                }
                var title = e[i].title.$t;
                content += '<li class="recent-posts"><strong><a href="' + link + '" title="' + title + '" target="_blank">' + title + '</a></strong></li>'
            }
            ct.innerHTML = content
        }
    }
var $ul = $('#headline-posts'),
    roll = function () {
        $ul.find('li').first().slideUp('slow', function () {
            $(this).appendTo($(this).parent()).fadeIn();
        });
    }, anim = setInterval(roll, 3000);
$ul.hover(function () {
    clearInterval(anim);
}, function () {
    anim = setInterval(roll, 3000);
});
var you_script = document.createElement('script');
you_script.src = homePage + '/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=' + numPosts + '&callback=headlinePosts';
    document.getElementsByTagName('head')[0].appendChild(you_script);
</script>

4. Simpan

Konfigurasi Widget

OpsiKeterangan
homePageGanti dengan URL blog Anda.
numPostsDigunakan untuk menentukan jumlah posting yang akan ditampilkan.

Untuk gaya dan desain tampilannya silahkan edit CSS nya sesuai dengan keinginan dan kreasi anda

11 Responses to "Cara Membuat Widget Headline News Posting Terbaru"

  1. Headline News yang ini paling keren soalnya loadingya lebih cepat dibanding yang lain.

    BalasHapus
    Balasan
    1. mas bisa bantu saya mengatasi masalah pada Komentar, Js onclik pada emotiko tidak jalan sama halnya dengan js yang lainnya pada saat reply komentar.
      Mohon bantuannya mas.
      cek http://kang-mousir.blogspot.com/

      Hapus
    2. coba pada var emoRange = "#comments p, div.post-body, div.emoWrap",
      tambahkan .comment-form

      Hapus
    3. Komentar ini telah dihapus oleh pengarang.

      Hapus
    4. coba pada var emoRange tambahkan .comment_reply_form tepat seperti ini
      var emoRange = ".comment_reply_form,.div.comment-form,#comments p, div.post-body, div.emoWrap",

      Saya coba berhasil.. coba lihat tautan gambar ini https://googledrive.com/host/0B3p31o3sU30FaGFUZ3Z3ZFdwRUU

      Hapus
    5. masih belum mas, tapi gpp kok. Mungkin ada js yang bentrok atau salah penempatan jsnya.
      Terima kasih atas bantuannya mas. :D

      Hapus
    6. mungkin sebaiknya jangan menggunakan versi yang itu pake versi lainnya masih di dtre.web.id coba cari paket manifulasi comentar.

      Hapus
  2. wah.. keren.. pengen coba, tapi nanti aja deh :)

    BalasHapus

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel