Membuat Artikel Terbaru disertai Tombol Home, Previous dan Next - Hallo sahabat Rumah Musafir Ilmu, Pada Artikel yang anda baca kali ini dengan judul Membuat Artikel Terbaru disertai Tombol Home, Previous dan Next , kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Widget, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Artikel Terbaru disertai Tombol Home, Previous dan Next
link : Membuat Artikel Terbaru disertai Tombol Home, Previous dan Next

Membuat Artikel Terbaru disertai Tombol Home, Previous dan Next

Banyak widget artikel terbaru yang telah dimodifikasi agar menjadi lebih menarik, salah satunya adalah yang akan kita bahas ini nanti yaitu widget artikel terbaru disertai dengan tombol home, previous dan next.

Berikut langkah cara membuat artikel terbaru disertai tombol home, previous dan next :

1. Login akun blogger Anda.

2. Pilih menu tab Template > Edit HTML > letakkan kursor pada area kode HTML.

3. Cari kode ]]></b:skin> tekan tombol Ctrl + F untuk melakukan pencarian.

4. Letakkan kode berikut diatas kode ]]></b:skin>

#pemula-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.pemula-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.pemula-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.pemula-elemen h6,.pemula-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.pemula-elemen:hover{background-color:#c3c3c3}
.pemula-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#pemula-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#pemula-navigasifeed:hover{background-color:#c3c3c3}
#pemula-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#pemula-navigasifeed span{padding:5px 10px}
#pemula-navigasifeed .next{float:right}
#pemula-navigasifeed .previous{float:left}
#pemula-navigasifeed .home{text-align:center}
#pemula-navigasifeed a:hover,#pemula-navigasifeed span.noactived{color:transparant!important} 

Keterangan:
Tulisan yang berwarna biru adalah ukuran lebar dan tinggi gambar/thumbnail.

5. Kemudian cari kode </head>, letakkan kode berikut diatas kode </head>

<script type='text/javascript'>
//<![CDATA[

var numfeed = 3;

var startfeed = 0;

var urlblog = "http://id-pemula.blogspot.com/";

var charac = 100;

var urlprevious, urlnext;

function pemulakolisfeed(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/AVvXsEiQL3HoQWfpegqrKkGsKoeO8NyqvARHPfsG0u_whAEfwpkw9j4d6kbw82ujlrh_Kj9tob3DZhW6iYz0Gm0CLIREFgUwnpFQoTowuFkRkL1-H7Gj10TjRo5jQ3CnyDTMJBm20DrvyyEu2jQ/s1600/no+image.jpg";
}
showblogfeed += "<div class='pemula-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + pemulakolisfeed(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("pemula-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='pemula-loading'></div>";
document.getElementById("pemula-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', 'pemulaLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("pemulaLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script> 

Keterangan:
var numfeed=3; yaitu jumlah artikel yang akan ditampilkan.
var charac=100; yaitu jumlah karakter atau huruf pada artikel yang ditampilkan.
varurlblog=”URL BLOG ANDA” ganti dengan URL blog Anda.

6. Simpan template.

Setelah selesai menambahkan kode diatas pada template blog Anda, berikutnya memasang pada widget blog Anda :

1. Pilih menu tab Tata Letak > Tambahkan Gadget > HTML/JavaScript.
2. Letakkan kode berikut pada HTML/JavaScript.

<div id="terbaru"></div>
<div id="pemula-navigasifeed"></div>

3. Terakhir Simpan.

Nah, sekian cara membuat artikel terbaru disertai dengan tombol home, previous dan next. Semoga dapat membantu!

Demikianlah Artikel Membuat Artikel Terbaru disertai Tombol Home, Previous dan Next

Sekianlah artikel Membuat Artikel Terbaru disertai Tombol Home, Previous dan Next kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Artikel Terbaru disertai Tombol Home, Previous dan Next dengan alamat link http://bismillah-go.blogspot.com/2018/04/membuat-artikel-terbaru-disertai-tombol.html