Cara memasang random post with tumbnail

Cara memasang random post with tumbnail | Support Dark Mode

Cara memasang random post with tumbnail | Support Dark Mode. Pada postingan ini Anda akan belajar bagaimana Cara membuat widget random post with tuhmbnail (dengan gambar) di blog.

widget random post ini sudah di update dengan mengikuti tren Dark Mode, Salah Satu fitur yang saat ini sedang populer di dunia blogger.

meskipun demikian, jika template blog Kamu tidak support Dark Mode, Widget Randompost ini tetap dapat berjalan dengan baik.

Random post adalah salah satu widget yang dapat dipasang di blog untuk menarik pengunjung untuk membaca koleksi artikal yang disajikan di situs Kamu

Fungsi Widget Random Post

Widget random post ini berfungsi menampilkan postingan atau artikel pada suatu blog dengan cara acak.

Fungsi lain dari widget ini adalah untuk menarik pengunjung untuk membaca artikel - artikel lain dalam blog kita sehingga pengunjung lebih lama stay di blog kita.

Fungsi widget random post ini Kurang lebih sama seperti widget Popular Post, hanya saja widget popular post menampilkan artikel yang paling sering dibaca.

Sementara widget random post akan menampilkan postingan secara acak, baik itu postingan yang populer, terbaru dan terlama sekalipun, dalam jumlah yang sudah ditentukan pada konfigurasi widget tersebut.

Widget random post with dengan gambar yang akan dibagikan pada artikel kali sudah disesuaikan dengan optimize image, yang akan memperbaiki skor specify image dimensions baik itu di gtmetrix.com dan Google PageSpeed Insights. Sehingga blog tampak lebih SEO friendly.

Perbedaan Widget Random Post & Widget Random Post with Tumbnail

Perbedaan yang paling mencolok pada keduanya adalah Widget Random Post with tumbnail menyertakan gambar postingan, sehingga lebih menarik dimata pembaca.

Karena efek Visualnya dapat menumbuhkan minat baca pengunjung.

Sementara Widget Ramdom post hanya menampilkan judul postingan, kurang menarik dimata pengunjung. Apalagi jika judul artikelnya tidak menarik, maka pengunjung akan keluar dari situs Anda.

Manfaat Widget Random Post With Tumbnail

Widget random post untuk blogger dapat menurunkan tingkat bouncing untuk sebuah blog, selain itu juga, itu dapat meningkatkan keterlibatan pengguna dengan menampilkan beberapa postingan secara acak ke pengunjung kamu.

Dengan menggunakan widget posting acak di blog , kamu dapat memberikan pembaca dan pengunjung blog kebebasan untuk menavigasi blog lebih efisien seperti widget kotak pencarian.

Pada kenyataannya, sebuah widget random post bisa menampilkan postingan blog lama hidup dengan membawa mereka kembali di depan audiens.

Selain itu, kamu akan mengumpulkan beberapa tampilan halaman tambahan dan tarik-menarik pembaca juga, luar biasa untuk meningkatkan nilai dari blog kamu.

Cara memasang widget Random post with tumbnail di Blog

1. Masuk ke Dashboar Blogger.
2. Klik menu tata letak lalu pilih tambahkan Widget.
3. Pada jendela pop Up yang muncul klik " HTML/Javascript.
4. Kamu akan meilhat kotak kosong pada layar komputer Kamu, Langkah selanjutnya copy kode dibawah ini, lalu pastekan pada kotak kosong di dashboard blog Anda.

<style type='text/css'>

#random-posts img{display:block;margin:0;margin-right:10px;padding:0;width:72px;height:72px;border:1px solid #f5f5f5;overflow:hidden;float:left}

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

ul#random-posts{background:#fff;list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none;}

#random-posts a{color:#64707a;transition:all .3s;display:block}

#random-posts li:hover a,#random-posts a:hover{color:#4285f4;}

.random-summary{font-size:10px;color:999}

#random-posts li{background-color:#fff;margin:0;padding:10px;min-height:65px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;}

body.darkmode #random-posts li a{ background-color:#2f2f2f; color:#eee}body.darkmode #random-posts li{background-color:#2f2f2f; border-bottom:2px solid #2f2f2f}body.darkmode #random-posts ul{background:#323232}

</style>

<ul id='random-posts'>

<script type='text/javaScript'>

var randomposts_number = 7;

var randomposts_chars = 0;

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 = "";

            }

        };

        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/AVvXsEiCaDClCsKQ6bjpyrKv-RXRtXmjgPyKn7jY6cuLryNtb5dJYZDieT_kxDl4P5OUO-QFRDXmjfFePmQEJ0dVJ-j6Pga8oLfbiCzd8Mwc2mzRUIdtbe6z8RvvynVNFQm2jvw0-GTFeumVGKc/s1600/bungfrangki_no_image_100.png"

                }

            }

        };

        document.write('<li>');

        document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '" width="' + 72 + '" height="' + 72 + '"/></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 class='clear'/>

</div>

Demo

Angka 7 dengan background merah adalah kode untuk mengatur jumlah postingan yang ingin Anda tampilkan pada widget random post with tumbnail ini.

atur sesuai dengan selera masing - masing.

Atau Kamu juga ingin menggunakan randompost tanpa gambar?

Berikut Kodenya,

<style scoped='' type="text/css">
#akses-random ul{list-style:none;margin:0;padding:0 15px;background:#ffffff}#akses-random li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:2px solid #f8fafa;font-weight:700;word-break:break-word;padding:10px 0;margin:0}#akses-random li:last-child{border-bottom:0}#akses-random li a{color:#575a5f}#akses-random li a:hover{color:#2675A6;text-decoration:none}body.darkmode #akses-random li a{color:#eee}body.darkmode #akses-random li{border-bottom:2px solid #2f2f2f}body.darkmode #akses-random ul{background:#323232}
</style>
<div id='akses-random'>Memuat...</div>
<script>
//<![CDATA[
// Random Post Widget
var homePage='https://www.linkmagz.com',maxResults=5,containerId='akses-random';function getRandomInt(min,max){return Math.floor(Math.random()*(max-min+1))+min}
function shuffleArray(arr){var i=arr.length,j,temp;if(i===0)return!1;while(--i){j=Math.floor(Math.random()*(i+1));temp=arr[i];arr[i]=arr[j];arr[j]=temp}
return arr}
function AksesRandomPost(json){var startIndex=getRandomInt(1,(json.feed.openSearch$totalResults.$t-maxResults));document.write('<scr'+'ipt src="'+homePage+'/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index='+startIndex+'&max-results='+maxResults+'&callback=randomPosts"></scr'+'ipt>')}
function randomPosts(json){var link,ct=document.getElementById(containerId),entry=shuffleArray(json.feed.entry),skeleton="<ul>";for(var i=0,len=entry.length;i<len;i++){for(var j=0,jen=entry[i].link.length;j<jen;j++){link=(entry[i].link[j].rel=="alternate")?entry[i].link[j].href:'#'}
skeleton+='<li><a href="'+link+'">'+entry[i].title.$t+'</a></li>'}
ct.innerHTML=skeleton+'</ul>'}
document.write('<scr'+'ipt src="'+homePage+'/feeds/posts/summary?alt=json-in-script&max-results=0&callback=AksesRandomPost"></scr'+'ipt>')
 //]]>
</script>

Ganti link dengan link blog Kamu, dan jumlah post yang ingin kalian tampilakn

demikian tutorial membuat random post dengan tumbnail, mudah - mudah an bermanfaat.

Untuk panduan lengkap setting template linkmagz, Klik Disini

Template Linkmagz