Cara Membuat Recent Post Dengan Fungsi Previous, Next, Dan Gambar

Oleh Ahmad Sofyan

Friday, 9 December 2016

Cara Membuat Recent Post Dengan Fungsi Previous, Next, Dan Gambar. Pada Kesempatan kalin Sofyan Web akan membagikan tutorial tentang cara membuat recent post dengan fungsi previous dan next yang sangat responsive dan SEO friendly. Widget recent post yang keren akan membuat blog yang anda miliki menjadi lebih menarik dan bagus.

Widget recent post dengan gambar berguna untuk menampilkan daftar artikel atau postingan terbaru dalam satu label. baca juga cara membuat widget label menjadi lebih menarik dan seo friendly. Blog yang bagus adalah blog yang memiliki banyak artikel bermanfaat dan menarik sehingga para pengunjung bisa selalu mengunjungi blog kita.

Untuk blog memiliki artikel atau postingan yang banyak, harus memiliki widget recent post ini. Karena dengan memasang widget recent post dengan gambar ini maka pengunjung akan tahu artikel atau postingan apa saja yang telah anda buat, Sehingga menambah minat pembaca untuk melihatnya.

Jika anda sudah penasaran seperti apa widget recent post ini silahkan coba di blog anda, dan simak tutorial membuat widget recent post dengan gambar yang responsive. Sebelum membuat recent post, saya sarankan untuk membackup script html anda dulu agar mudah di kembalikan saat terjadi kesalahan.

Cara Membuat Recent Post Dengan Fungsi Previous, Next, Dan Gambar

• Buka Blog anda.
• klik template dan pilih edit html
• Cari kode ]]></b:skin> dengan cara tekan CTRL+F.
• Letakan kode berikut ini dan letakan di atas ]]></b:skin>.

mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcjPG7XNM9_dlqtYMZGvaeB5oPd2kEp_67phmgxcXGwQ9-BFcULVmAE0Cfmd17u3WcQ6OSlVqseEMnOH2ELtZjxVqStYLD1_qZp5BX6ZuiHRVjT1iGIln_REa0TMkOLfg6pf_FHZEXW9c/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}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}

Selanjutnya cari kode </head> dan letakan kode berikut ini di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = “http://sofyan-setya.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/AVvXsEjJjSPNtRF0SWS6uYUqp2X-W48q_IUWjpmFgipa4cFrUURgxRTr0zCQtlW1LTDq7rYyD3Ba7_-_LHzApCkZSsnp19m1XFwFKN7hshiOLjZqzfRzlpjp7Cejcx5CK3_dPZ686gdND1sqr3o/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'>&#9668; Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>Next &#9658;</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', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>

Keterangan kode di atas :

var numfeed = 5; Jumlah Artikel terbaru yang ditampilkan pada widget
var urlblog = http://sofyan-setya.blogspot.com/; >> ganti dengan URL blog Anda
var charac = 100; Jumlah karakter atau huruf pada setiap post.

• Setelah selesai anda ganti, selanjutnya klik save template.
• Buka menu Layout pilih salah satu kotak yang ingin dipasangkan widget recent post. "klik add gadget" dan pilih "HTML/JavaScript" dan masukan kode berikut ini
• Selanjutnya Save dan lihat hasilnya pada blog anda

Demikianlah cara membuat recent post dengan fungsi prvious, next, dan gambar. Semoga artikel ini dapat membantu dan bermanfaat. Jangan lupa like, comment, dan subscibe Sofyan Web untuk mendapatkan artikel menarik lainnya dari Sofyan Web.

Tag : Blog