Z-T Blog - kali saya mau
menjawab kembali dari seorang pengunjung yang menrequest "cara buat
Recent Post kayak blog mas gimana ya?" oke kali saya akan share tutorial
kembali cara membuat widget recent post dengan fungsi next dan previous
yang ada di blog ini ( Z-T Blog), apa manfaat recent post..? ya
pastinya membantu pengunjung untuk melihat artikel terbaru saat membaca
artikel lainnya tanpa mengunjungi beranda/home blog tersebut, dan di
tambah lagi dengan fitur menarik dari widget ini yaitu di tambahkannya
tombol next dan Provious, kenapa bisa di bilang menarik..? karena bisa
membantu pengunjung melihat artikel terbaru dan artikel terlama dengan
memakai tombol Previous, ini seperti halnya di homepage hanya saja ini
lebih simple.. dan pastinya sangat menguntungkan.. okee berikut cara
pembuatannya :
- Masuk Tata Letak.
- Tambahkan Gadget.
- HTML/JavaScript
- Masukan kode dibawah ini
- Simpan.
<script type='text/javascript'>
//<![CDATA[
var numfeed = 2; /* Jumlah Postingan */
var startfeed = 0;
var urlblog = "http://zhalltrozans.blogspot.com/";
var charac = 50;
var urlprevious, urlnext;
function akaUTkolisfeed(ir,banget){
var showfeed = ir.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/AVvXsEifro34aLknXBuh2l660p7zgZlZzb98Tdxt51Fyv5nxpJRBkHPkaz7t5dowg0icuMf9tuS9ftmYldMjRWCzQyNCE9_tMzFK498CYyS-YziNNHEki9oS7XvqhXkI3Lu_I2YL41F4ivAY6NU/s1600/no+image.jpg";
}
showblogfeed += "<div class='akaUT-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + akaUTkolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("akaterbaru").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("akaUT-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("akaterbaru").innerHTML = "<div id='akaUT-loading'></div>";
document.getElementById("akaUT-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var akaterbaru = document.createElement('script');
akaterbaru.setAttribute('type', 'text/javascript');
akaterbaru.setAttribute('src', archievefeed);
akaterbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(akaterbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>
<div id="akaterbaru"></div>
<div id="akaUT-navigasifeed"></div>
<style>
#aka-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#akaterbaru{margin:0px}
.akaUT-elemen{background-color:#fff;border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.akaUT-elemen img{background:#eee;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.akaUT-elemen h6,.akaUT-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.akaUT-elemen:hover{background-color:#ecf3fb}
.akaUT-elemen p{text-align:justify;color:#555;line-height:14px;margin:5px 0}
#akaUT-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px
0 1px #444;background:#ffffff
url(http://www.westmarine.com/wcsstore/MadisonsStorefrontAssetStore/images/colors/color1/loading.gif)
no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#akaUT-navigasifeed{background-color:#fff;border:1px
solid
#c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#akaUT-navigasifeed:hover{background-color:#ecf3fb}
#akaUT-navigasifeed
a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px
10px}
#akaUT-navigasifeed span{padding:5px 10px}
#akaUT-navigasifeed .next{float:right}
#akaUT-navigasifeed .previous{float:left}
#akaUT-navigasifeed .home{text-align:center}
#akaUT-navigasifeed a:hover,#akaUT-navigasifeed span.noactived{color:transparant!important}
</style>
hasilnya akan seperti ini :
Keterangan :
- Kode yang berwarna Merah adalah jumlah posting/artikel yang akan di tampilkan. anda bisa ubah sesuai keinginan.
- Kode yang berwarna Orange anda ganti dengan URL blog anda.
- Kode yang berwarna Hijau adalah jumlah karakter huruf setiap artikel anda bisa ubah sesuai keinginan.
bagaimana dengan hasilnya..? cukup memuaskan..? :D demikian untuk
tutorial kali ini dan terima kasih untuk yang request artikel ini
akhirnya saya tidak kehabisan ide untuk blogging :) ,semoga bermanfaat
untuk anda. jangan lupa tinggalkan jejak. terima kasih.
Komentar
Posting Komentar