Cara Mudah Membuat Random Post Keren Dengan Gambar Thumbnail

Saat blog anda memiliki banyak postingan, pasti visitor tidak akan melihat postingan lain terkait artikel yang berbeda saat mereka berkunjung ke blog kita. Misalkan saat visitor membaca informasi tentang Google Adsense di blog kita, maka dia hanya akan berfokus untuk menemukan informasi tentang google adsense melalaui link-link yang kita selipkan pada artikel terkait.

Nah, agar visitor tidak hanya membaca postingan yang terkesan itu-itu saja maka kali ini saya akan membahas tentang bagaimana caranya untuk membuat Random Post Keren dengan Gambar Thumbnail yang SEO Friendly.

Contoh bisa dilihat pada sidebar blog ini yang memang disengajakan judulnya menjadi Popular Post.

Agar tidak terlalu lama, mari kita lihat step stepnya

Step 1
Masuk Ke blogger dan pilih -> tata letak -> tambah gadget

Step 2
Pilih HTML/Javascript

Step 3

Copy dan paste Script berikut pada content box,

<style>
#random-posts img {
border-radius: 10px;
float: left;
margin-right: 5px;
width: 75px;
height: 75px;
background-color: #F5F5F5;
padding: 3px;
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: 12px;
text-transform: uppercase;
padding: 0px auto 5px;
}

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

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

#random-posts li {
margin-bottom: 10px;
border-bottom: 1px solid #EEEEEE;
padding: 4px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 110;
var randomposts_details = 'yes';
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) + "";
};
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/AVvXsEilRuCTmPEr_Z2AGCF2X6R3vew7NuEINGFqGg0nJXKMYVKt3zhh4sF34UiuXaP8Poruj_xSntFRyNhZXk-9WKdcqpYDWm3mWecGMDAr0G8Yl1iT7LUuS34gxzkXFiODKJwJfGSBzXtxbpI/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>

Keterangan untuk pengaturan:

Thumbnail Dimensi : untuk merubah dimensi , gantilah nilai 75px
Summary Length : untuk merubah panjang dari ringkasan dalam karakter ubahlah nilai 110 pada var_randompost_chars =110px.
Post Info : Jika ingin menyembunyikan info postingan, dari tanggal dan komentar, ubah nilai yes ke no di randomposts_details='yes' -> randomposts_details='no'
Ukuran Font judul dan ringkasan ubah ukuran pada random-posts a untuk judul, sedangkan untuk ringkasan ubah nilai pada .random-summary .

Mudah bukan ? mudah-mudahan cara ini bias bermanfaat :)

Cara Mudah Membuat Random Post Keren Dengan Gambar Thumbnail

Share this

Author : zenhuzaini

Related Posts