Membuat Widget 'DAFTAR ARTIKEL' BerScroll di Blog dan Manfaatnya

Solusi Tepat Bagi Blogger Pemula Untuk Membuat Widget Random Post Ber-Scroll di Blog serta Benefitnya.

Widget Post tipe scroll

Perhatikan gambar disamping ? Keren kan tampilan Widget Random Post-nya ?  \^.^/> 

Khusus bagi Blogger pemula (kayak saya juga), cocok sekali untuk menampilkan daftar postingan atau artikel secara dinamis dan sebanyak mungkin tanpa harus memakan banyak tempat di Blog Anda.

Simak panduan dan cara membuat Random Artikel BerScroll di Blog Sobat Plus keuntungan lebih yang akan Sobat dapatkan di mata Search Engine (SEO). Berikut caranya :

• 1. Silahkan sobat login ke akun Blog Sobat.

• 2. Masuk ke dashboard,

• 3. Pilih dan Klik 'Tata Letak'

• 4. Klik "Add Gadget",

• 5. Akan muncul jendela baru.

• 6. Klik HTML/JacaScript.

• 7. Akan muncul jendela widget baru.

• 8. Copy kode di bawah ini lalu pastekan pada kolom 'Konten', kemudian Simpan.

<style>
#random-posts img {
    border-radius: 3px;
    float: left;
    margin-right: 3px;
    width: 350;
    height: 75px;
    background-color: #F5F5F5;
    padding: 2px;
    transition: all 0.2s linear 0s;
}

#random-posts img:hover {
    opacity: 0.6;
}

ul#random-posts {
    list-style-type: none;
    padding: 0px;
}

#random-posts a {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: bold;
    padding: 0px auto 5px;
}

#random-posts a:hover {
    text-decoration: none;
}

.random-summary {
    font-size: 11px;
    background: none;
    padding: 3px;
    margin-right: 8px;
}

#random-posts li {
    margin-bottom: 10px;
    border-bottom: 1px solid #EEEEEE;
    padding: 4px;
}
</style>
<div style="overflow:auto; width:ancho; height:550px;">
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 35;
var randomposts_chars = 200;
var randomposts_details = 'no';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);

function randomposts(json) {
    total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');

function getvalue() {
    for (var i = 0; i < randomposts_number; i++) {
        var found = false;
        var rndValue = get_random();
        for (var j = 0; j < randomposts_current.length; j++) {
            if (randomposts_current[j] == rndValue) {
                found = true;
                break
            }
        };
        if (found) {
            i--
        } else {
            randomposts_current[i] = rndValue
        }
    }
};

function get_random() {
    var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
    return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
    for (var i = 0; i < randomposts_number; i++) {
        var entry = json.feed.entry[i];
        var randompoststitle = entry.title.$t;
        if ('content' in entry) {
            var randompostsnippet = entry.content.$t
        } else {
            if ('summary' in entry) {
                var randompostsnippet = entry.summary.$t
            } else {
                var randompostsnippet = "";
            }
        };
        randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
        if (randompostsnippet.length < randomposts_chars) {
            var randomposts_snippet = randompostsnippet
        } else {
            randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
            var whitespace = randompostsnippet.lastIndexOf(" ");
            randomposts_snippet = randompostsnippet.substring(0, whitespace) + "&#133;";
        };
        for (var j = 0; j < entry.link.length; j++) {
            if ('thr$total' in entry) {
                var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
            } else {
                randomposts_commentsnum = randomposts_commentsd
            }; if (entry.link[j].rel == 'alternate') {
                var randompostsurl = entry.link[j].href;
                var randomposts_date = entry.published.$t;
                if ('media$thumbnail' in entry) {
                    var randompoststhumb = entry.media$thumbnail.url
                } else {
                    randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNK5o0Seqg-i37u-OUFqhmIRHsDMWIGoF7gviNxLwgm2wddK1ToVn16qA-81ZIzi5GHErXWEVpcmOMJ1C9A-6pTpTPvG1abdfsraAa27mag0ec3n-omutMWkG8cR9CVxj1h4fDncgSgyE/s1600/no_thumb.png"
                }
            }
        };
        document.write('<li>');
        document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
        if (randomposts_details == 'yes') {
            document.write('<span><div  class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
        };
        document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')
    }
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
    document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul></div>

Perhatikan penjelasan pengaturan di bawah ini Sob, untuk kode di atas :

• var randomposts_number = 35; (untuk menampilkan jumlah artikel)

• var randomposts_chars = 200; (menambahkan/memendekkan hasil tampilan deskripsi artikel yang ada di bawah judul)

• var randomposts_details = 'no'   (untuk menampilkan/menyembunyikan tanggal dan jumlah komentar pada setiap Artikel. Ganti dengan 'yes' jika Sobat ingin menampilkan detail tersebut)

• height:550px (merubah ukuran tinggi tampilan scroll widget)

• Jika Sobat tidak ingin menyembunyikan image, tamabahkan kode di bawah ini dan letakkan di bawah kode #random-posts img {

 display: none;

Lalu bagaimana dengan Sobat yang sudah punya widget Random Post tapi tampilannya masih static ?  :D ...

Caranya gampang Sob. Tambahkan saja kode di bawah ini pada bagian atas/bawah (sebelum/sesudah) dari kode <script type='text/javaScript'>. Jika struktur kode widget Sobat berbeda, cari dan tambahkan pada bagian atas/bawah (sebelum/sesudah) dari kode ini. <div id=......>

<div style="overflow:auto; width:ancho; height:550px;">

Oke Sob. Mudah-mudahan sukses percobaannya. Bay the way, dengan tampilan widget Random Post berscroll, sobat bisa sesuka hati menampilkan jumlah postingan pada widget Random Entri tersebut.

Semakin banyak semakin baik Sob. Karena akan memudahkan bagi para Pembaca untuk menjelajah artikel-artikel yang ada di Blog sobat. Namun harus diperhatikan tata letak ya biar rapi dan mudah bagi pembaca dalam menavigasi Blog sobat.

Selain itu, dari segi SEO, maka  CTR semakin baik, Bounce Rate semakin turun dan Search Engine semakin suka. Lalu peluang rating di Search Engine untuk masuk di-10 besar pencarian teratas juga akan semakin berpeluang besar.  :-)

Semoga Bermanfaat. Apabila ada hal yang kurang berkenan mohon dimaafkan.  ~\^.^?...