Widget Recent Post/Posting Terbaru Hanya Judul Saja

Widget Recent Post/Posting Terbaru Hanya Judul Saja

Widget Recent Post/Posting Terbaru Hanya Judul Saja

Widget recent post/posting terbaru yang saya share kali ini adalah widget yang berisi posting terbaru hanya judul saja tanpa gambar thumbnail. Widget ini dapat ditambahkan dengan mudah. Widget ini saya buat dengan sangat sederhana dan simple sehingga tidak akan memberatkan blog anda.

Demo

Cara Membuat Widget Recent Post/Posting Terbaru Hanya Judul Saja

1. Pada Dasboard akun blogger sobat pilih tata letak
Pilih Tata Letak

2. Tambahkan gadget HTML/JavaScript

3. Salin kode ini dan letakan pada formulir / gadget yang anda tambahkan tadi.

<ol id="recent-posts"></ol>
<style>
    .recent-posts a {
        text-decoration:none;
        overflow:hidden
    }
    .recent-posts a:hover {
        color:orange;
        text-decoration:underline;
    }
    .author {
        display:block;
        opacity: 0.7;
    }
</style>
<script>
    //<![CDATA[
    var homePage = "http://alamat blog/", // Your blog homepage
        numPosts = 5 ; //Jumlah Posting Yang Ingin ditampilkan
        //]]>
</script>

<script>
// Recent Post widget for Blogger
// Author: yOu w4hyOu 
// http://www.infokmoe.id

function recentPosts(a) {
    if (document.getElementById("recent-posts")) {
        var e = a.feed.entry,
            title, link, content = "",
            ct = document.getElementById("recent-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,
                postAuthor = e[i].author[0].name.$t,
                pd = e[i].published.$t.substring(0, 10).split("-"),
                o = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
            content += '<li class="recent-posts"><strong><a href="' + link + '" title="' + title + '" target="_blank">' + title + '</a></strong>';
            content += '<span class="author"><time datetime=' + pd.join("-") + '>' + (pd[2] + " " + o[(parseInt(pd[1], 10) - 1)] + " " + pd[0]) + '</time> | <span>' + postAuthor + '</span></span></li>'
        }
        ct.innerHTML = content
    }
}
var you_script = document.createElement('script');
you_script.src = homePage + '/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=' + numPosts + '&callback=recentPosts';
document.getElementsByTagName('head')[0].appendChild(you_script);
</script>

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

10 Responses to "Widget Recent Post/Posting Terbaru Hanya Judul Saja"

  1. Terima kasih, sangat membantu sekali

    BalasHapus
  2. Mantap, kalau dibuat headline news soalnya yang ni loadingnya cepet

    BalasHapus
  3. sepertinya sangat cocok buat blog saya mas :)

    BalasHapus
    Balasan
    1. terima kasih sudah berkunjung kesini... semoga bermanfaat

      Hapus
  4. Mas, Saya sedang modfikasi recent post by tag, namun Saya terkendala dengan jumlah post.
    Saya ingin penulisan kodenya jadi lebih singkat seperti halnya widget terakhir diperbaharui milik mas. Misalnya hanya menuliskan tag SEO pada widget.
    Juga Saya ingin menghilangkan ini
    var numposts = 6;
    var showpostthumbnails = true;
    var showpostdate = true;

    Jadi hanya dalam 1 js, jumlah pos otomatis, tanggal ditampilkan dan gambar juga. Maksudnya tidak ada pengaturan seperti diatas.

    Ini sampelnya mas, error mulu saya modifikasinya. :D
    http://jsfiddle.net/Anonymousir/6Sr4f/1/

    BalasHapus
    Balasan
    1. iya mas nanti saya coba dulu ya...

      Hapus
    2. Komentar ini telah dihapus oleh pengarang.

      Hapus
    3. Coba opsi ini http://jsfiddle.net/w4hyou/6Sr4f/5/

      Hapus
  5. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel