Cara Memasang Script Recentpost di blogspot
| Cara Memasang Script Recentpost di blogspot |
|---|
Recentpost script
Untuk menampilkan halaman posting terbaru dengan memasang recentpost script akan mempermudah pengunjung dan pembaca untuk mengetahui bagaian-bagian yang terbaru dari posting adapun script recent post ini juga bermacam-macam variasi adapun script yang ada di posting kali ini akan membuat mudah pengunjung dan pengaturan postingan terbaru dapat di sesuikan dengan kebutuhan template blog sahabat.Script yang akan kita pasang merupakan script yang di copas dari www.tipstrikblogging.comCara Memasang Script Recentpost :
- Masuk halaman dasboard
- Pilih template , edit html
- Centang expand untuk keamanan
- Cari kode : ]]></b:skin>
- Copy script berikut ini
- #uji-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.uji-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.uji-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.uji-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.uji-elemen:hover{background-color:transperents}
.uji-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#uji-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:transperents url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm0h65XEuLylgjmZss4kEPN3F1hE8VINEGKde5mmr-gLUyB4OvPi5ost5szflwQuBCR_sL2LDciq83e_3-q98eS9exahWJYp68F1bPFdqeeDw3GBQhm9xhjXXc5kuvYL3NnmMCiYH07XQ/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#uji-navigasifeed:hover{background-color:transperents}
#uji-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#uji-navigasifeed span{padding:5px 10px}
#uji-navigasifeed .next{float:right}
#uji-navigasifeed .previous{float:left}
#uji-navigasifeed .home{text-align:center}
#uji-navigasifeed a:hover,#uji-navigasifeed span.noactived{color:transparant!important} - cari kode </head> dan copy script di bawah ini
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = http://agusaji8-caramembuatblog.blogspot.com/;
var charac = 100;
var urlprevious, urlnext;
function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMVF0XQI5spA9FMM7NO_c5C2rZvlQJ8X2wOImIBDgP5IVkrG_QHaLRKWuYRreCJG67B9l34XUhGbVecL8gX7usvtvOYN4DmV8kyeNrhO9DIB7WaTu7fF0H1HM4R0H8tWP9pDh6RbWD2BI/s1600/no+image.jpg";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>◄ Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>◄ Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next ►</a>";
} else {
showblogfeed += "<span class='noactived next'>Next ►</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}
function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'ujiLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("ujiLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>
Perhatikan untuk tulisan yang berwarna biru :
var charac = 100; >> Jumlah karakter huruf pada setiap post.
var numfeed = 5; >> Jumlah Artikel baru yang tampil di widget
var urlblog = http://agusaji8-caramembuatblog.blogspot.com/; >> ganti dengan URL blog Andavar charac = 100; >> Jumlah karakter huruf pada setiap post.
8. Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :
<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>
<div id="mas-navigasifeed"></div>
save dan lihat hasilnya.Semoga dengan Script Recentpost ini tampilan blog sahabat menjadi lebih menawan lagi.
