Cara Memasang Random Post di Blog

Ketika blog and sudah banyak sekali postingan, visitor atau pengunjung blogspot anda tidak selalu mempunyai waktu untuk mencari satu persatu artikel yang anda posting, dengan Random post itu memungkinkan bagi para pengunjung blog anda untuk bisa mengikuti artikel-artikel yang ada pada blog, tutorial kali ini akan memperlihatkan kepada anda bagaimana cara menambahkan random post/Artikel acak.

Menambahkan Random Posts Dengan Thumbnails dan Singkatan Posts di blogger

Step 1 : Login keblog anda, pilih blog anda dan masuk kebagian layout

Step 2 : Tambahkan widget baru dengan menklik link Add a gadget dan pilih Html/Java Script di popup window

Step 3 : setelah widget sudah ditambahkan anda butuh menambahkan script dibawah ini didalam gadget tersebut

<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 = "http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

<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>

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

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 = ; i < randomposts_number; i++) {

var found = false;

var rndValue = get_random();

for (var j = ; 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>

function random_posts(json) {

for (var i = ; 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(, randomposts_chars);

var whitespace = randompostsnippet.lastIndexOf(" ");

randomposts_snippet = randompostsnippet.substring(, whitespace) + "…";

};

for (var j = ; 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 = "http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/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(, 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 = ; 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>

Opsi Random Post

#Ukuran Thumbnails : untuk mengubah ukuran pixel, ganti nilai 75px

#Banyaknya karakter : anda bisa mengontrolnya (dalam karakter) dengan mengubah nilai 110 dari variabel var randomposts_chars =110;

#Post Info : Jika anda ingin tanggal dan jumlah commentar didak muncul, bisa dengan jumlah komentar ‘yes‘ dari variabel var randompots_details=’yes‘; ke ‘no‘;

#Ukuran Font post judul dan summary : Jika anda ingin mengubah ukuran font size summary silahkan ubah nilai 11px, dan untuk ukuran judul ubah nilai 12px;

Klik tombol simpan kemudian jalankan blog anda.Di Sidebar akan tampil Random Posts dari masing-masing halaman blog.

Butuh bantuan, tinggalkan komentar dibawah. terimakasih, semoga bermanfaat.

Tags:Blogger