Home Template Tutorial Cara Membuat Widget Random Post Dengan Thumbnail dan Snippets

Cara Membuat Widget Random Post Dengan Thumbnail dan Snippets

Advertisemen 300x250

Di dalam blog yang anda kelola pasti memiliki puluhan, ratusan bahkan ribuan posting yang terdapat di dalamnya. mungkin anda sendiri juga sudah lupa dengan apa saja isi posting yang sudah pernah dibuat. nah.. yang menjadi permasalahan adalah bagaimana seorang visitor blog anda dapat mengetahui isi posting apa saja yang telah di buat tanpa harus mengubek-ubek isi dari archieve posting blog anda.

Untuk itu dalam artikel singkat ini saya akan mencoba memberikan sedkit tips tentang bagaimana cara menambahkan widget ke dalam halaman blog anda, dalam hal ini saya menggunakan blogger. dimana widget tersebut berisi beberapa random post yang muncul secara random tentunya dan disertai dengan gambar thumbnail serta keterangan isi di dalam posting yang telah anda buat.

widget random post

Widget random Post

Langkah 1 : Log in ke dalam akun blogger anda dan langsung menuju ke layout
Langkah 2 : Tambahkan widget baru dengan cara klik Add a Gadget, kemudian anda cariHTML/Java Script dari pop up window yang muncul.
Langkah 3 : setelah itu akan muncul jendela widget html editor, silahkan copy dan paste text dibawah ini.

<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/AVvXsEi6Z2R8bHZNXKJv45CBlOJSWviOIIUTI6jvg9G_b3-c1tY6anphLPSiipzkskaJRROmVinh0RIKt7hgRKkj9YcFal4BEUjpxo4jl3z2GIXrZz0oiKGAZfaWL6-5YgqxClT3LIINodBxtDc/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>

Langkah 5 : Pengaturan Widget Random Post

Ukuran Thumbnail gambar : Untuk merubah ukuran preview thumbnail pada gambar silahkan ganti angka 75 px. pada height dan width sesuai dengan keinginan anda
Preview Post : Anda dapat mengatur berapa karakter yang akan ditampilkan pada artikel yang anda tulis pada blog tersebut. silahkan ubah var randomposts_chars = 110; sesuai keinginan.
Post Info : Disini berfungsi untuk menampilkan atau menyembunyikan comment dan tanggal posting pada blog. secara default pada var randomposts_details = 'yes'; anda dapat merubahnya menjadi "no"
Ukuran Font Untuk Judul pos dan Snippet : Untuk merubahnya anda dapat mengatur pada font size 12px dan 11px
Jumlah Random Post : anda juga dapat mengatur berapa banyaknya jumlah random post yang tampil pada ,var randomposts_number = 5;

Selamat mencoba semoga berhasil dan bermanfaat.

Advertisemen 336x280

Disqus Comments