 |
| widget random post dengan tampilan thumbnail bergambar blogger |
Ketika blog Anda memiliki terlalu banyak posting, pengunjung tidak selalu memiliki waktu atau keinginan untuk membaca semua posting yang ditulis di sana dengan membuat sedikit terlihat menarik berupa gambaran tentang isi blog ini. Dengan demikian, sebuah posting acak widget yang akan memungkinkan pengunjung untuk menemukan konten yang lebih mudah bisa benar-benar berguna. Tutorial ini akan menunjukkan cara untuk menambahkan random posts widget untuk menampilkan daftar posting secara acak dengan thumbnail dan kutipan.
Menambahkan Random Posts dengan Thumbnail dan Posting Ringkasan Blogger
Langkah 1. Login ke akun blogger Anda, pilih blog Anda dan pergi ke Layout.
Langkah 2. Tambahkan widget baru dengan mengklik tautan Tambahkan gadget dan pilih
Html / JavaScript dari jendela popup.
 |
| Dasboard Blogger |
Langkah 3. Setelah menambahkan HTML / JavaScript Anda perlu menyalin script berikut dan paste di kotak Konten.
Klik Untuk Melihat Code
<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/AVvXsEiKpa61OzEghV8qqGEEinOWyHX8Ik3WgbQj6N-c14vbXEhXT6bWIoY-Rfi8M6gAqq3RgMacBPN3st-N9cwkwI_4f4bi_tIM1ibxb3zGUVZy3Sc5L0Ppvzb0QH5rAu_XoRI_VrJPVXppsaU/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>
Penyesuaian Random Posts
- Dimensi Thumbnail: untuk mengubah ukuran thumbnail dalam piksel, mengganti nilai
75px.
- Ringkasan panjang: Anda dapat mengontrol panjang ringkasan (dalam karakter) dengan mengubah
110 nilai dari var randomposts_chars =
110;
- Pasang Info: jika Anda ingin menyembunyikan tanggal posting dan jumlah komentar perubahan '
ya' dari var randomposts_details = '
ya'; untuk '
tidak';
- Ukuran Font untuk Posting Judul dan Ringkasan: untuk mengubah ukuran font potongan posting mengubah nilai
11px dan untuk judul posting, nilai
12px;
Klik tombol Save dan Lihat blog Anda. sidebar akan menampilkan posting acak widget pada setiap halaman blog Anda.
EmoticonEmoticon