panduan blogger jasa seting blog ganti domain dan lain-lain, Tujuan membuat Random post adalah untuk menampilkan cuplikan judul-judul artikel yang telah di publikasikan dengan menampilkan random post juga membantu bagi pengguna untuk menelusuri artikel dalam website yang di kunjunginya
jenis random post sendiri sangat banyak tampilan variasinya misalnya random post hanya menampilkan judul-judul posting saja, ada juga yang menampilkan judul dan gambar saja dan ada juga yang tampilan random postnya diam / tidak berganti-ganti judulnya.
dan pada Tutorial ini saya akan membuat random post berjalan lengkap dengan judul posting dan cuplika posting diserta gambar posting , untuk lebih jelasnya bisa di lihat tampilanya pada gambar di bawah ini
yang di maksud dengan random post berjalan adalah sebuah tampilan yang di hasilkan oleh widged random post tersebut susunan judul-judul posting nya berjalan dari atas kebawah ( saling berganti memunculkan judul-judul postingan ) seperti yang terlihat pada gambar di atas atau bisa di lihat pada widged blog ini
untuk cara pembuatan random post berjalan silahkan ikuti caranya di bawah ini :
1.buka blog anda lalu login akun masing-masing
2.klik desain
3.pada dashboard blog silahkan pilih tata letah
4.lalu klik tambahkan gadged dan pilih gadged HTML/javaScript
5.selanjutnya copi kode di bawah ini dan pastekan kedalam gadged HTML/javascript
<div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:370px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function rpthumbnt(json) {
document.write('<ul class="rp_plus_img">');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break
}
}
var thumburl;
try {
thumburl = entry.media$thumbnail.url
} catch(error) {
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
thumburl = d
} else thumburl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifCwb-lr-AtAsuCE8gdobh3mTmllDGz6lz7TJWBs6KwX82-EYikVH5XAPMhygTpgEvMoXyVk_xTzck3AJWIDAsr5aVuz3rj184UOG4vgonM5W1yG5McBELA5nTemc8LhoHTVgLUk7bOXA/s1600/no+image.200.jpg'
}
document.write('<li class="news-title clearfix">');
document.write('<a href="http://www.seocips.com/" target="_blank"><img src="' + thumburl + '"/></a>');
document.write('<a href="' + posturl + '" target ="_top">' + posttitle + '</a><br>');
if ("content" in entry) {
var postcontent = entry.content.$t
} else if ("summary" in entry) {
var postcontent = entry.summary.$t
} else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (postcontent.length < numchars) {
document.write('<span class="news-text">');
document.write(postcontent);
document.write('</span>')
} else {
document.write('<span class="news-text">');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0, quoteEnd);
document.write(postcontent + '...');
document.write('</span>')
}
document.write('</li>')
}
document.write('</ul>')
}
function rpnewsticker() {
last = $('ul#rp_plus_img li:last').hide().remove();
$('ul#rp_plus_img').prepend(last);
$('ul#rp_plus_img li:first').slideDown("slow")
}
</script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 20;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>
6.simpan gadged nya
7.selesai
lalu silahkan cek hasil pembuatan random post berjalan nya dengan cara membuka salah satu postingan anda
sampai disini jika mengalami kesulitan silahkan untuk berkomentar saja , artikel cara membuat random post berjalan ini di persembahkan oleh jasa pembuatan website dan agen pulsa dan ppob
jenis random post sendiri sangat banyak tampilan variasinya misalnya random post hanya menampilkan judul-judul posting saja, ada juga yang menampilkan judul dan gambar saja dan ada juga yang tampilan random postnya diam / tidak berganti-ganti judulnya.
dan pada Tutorial ini saya akan membuat random post berjalan lengkap dengan judul posting dan cuplika posting diserta gambar posting , untuk lebih jelasnya bisa di lihat tampilanya pada gambar di bawah ini
yang di maksud dengan random post berjalan adalah sebuah tampilan yang di hasilkan oleh widged random post tersebut susunan judul-judul posting nya berjalan dari atas kebawah ( saling berganti memunculkan judul-judul postingan ) seperti yang terlihat pada gambar di atas atau bisa di lihat pada widged blog ini
untuk cara pembuatan random post berjalan silahkan ikuti caranya di bawah ini :
1.buka blog anda lalu login akun masing-masing
2.klik desain
3.pada dashboard blog silahkan pilih tata letah
4.lalu klik tambahkan gadged dan pilih gadged HTML/javaScript
5.selanjutnya copi kode di bawah ini dan pastekan kedalam gadged HTML/javascript
<div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:370px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function rpthumbnt(json) {
document.write('<ul class="rp_plus_img">');
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break
}
}
var thumburl;
try {
thumburl = entry.media$thumbnail.url
} catch(error) {
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
thumburl = d
} else thumburl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifCwb-lr-AtAsuCE8gdobh3mTmllDGz6lz7TJWBs6KwX82-EYikVH5XAPMhygTpgEvMoXyVk_xTzck3AJWIDAsr5aVuz3rj184UOG4vgonM5W1yG5McBELA5nTemc8LhoHTVgLUk7bOXA/s1600/no+image.200.jpg'
}
document.write('<li class="news-title clearfix">');
document.write('<a href="http://www.seocips.com/" target="_blank"><img src="' + thumburl + '"/></a>');
document.write('<a href="' + posturl + '" target ="_top">' + posttitle + '</a><br>');
if ("content" in entry) {
var postcontent = entry.content.$t
} else if ("summary" in entry) {
var postcontent = entry.summary.$t
} else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (postcontent.length < numchars) {
document.write('<span class="news-text">');
document.write(postcontent);
document.write('</span>')
} else {
document.write('<span class="news-text">');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0, quoteEnd);
document.write(postcontent + '...');
document.write('</span>')
}
document.write('</li>')
}
document.write('</ul>')
}
function rpnewsticker() {
last = $('ul#rp_plus_img li:last').hide().remove();
$('ul#rp_plus_img').prepend(last);
$('ul#rp_plus_img li:first').slideDown("slow")
}
</script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 20;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>
6.simpan gadged nya
7.selesai
lalu silahkan cek hasil pembuatan random post berjalan nya dengan cara membuka salah satu postingan anda
sampai disini jika mengalami kesulitan silahkan untuk berkomentar saja , artikel cara membuat random post berjalan ini di persembahkan oleh jasa pembuatan website dan agen pulsa dan ppob