√ Menciptakan Artikel Terbaru Disertai Tombol Home, Previous Dan Next

Widget Artikel terbaru merupakan widget yang berisi postingan terbaru dari sebuah blog. Banyak widget artikel terbaru yang telah dimodifikasi semoga menjadi lebih menarik, salah satunya ialah yang akan kita bahas ini nanti yaitu widget artikel terbaru disertai dengan tombol home, previous dan next.

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

1. Login akun blogger Anda.
2. Pilih sajian tab Template > Edit HTML > letakkan kursor pada area arahan HTML.
3. Cari arahan ]]></b:skin> tekan tombol Ctrl + F untuk melaksanakan pencarian.
4. Letakkan arahan berikut diatas arahan ]]></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 ialah ukuran lebar dan tinggi gambar/thumbnail.
5. Kemudian cari arahan </head>, letakkan arahan berikut diatas arahan </head>

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

var numfeed = 3;

var startfeed = 0;

var urlblog = "aciknadzirah.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/AVvXsEgMgRceAyhlvO733zYN1XrPa0AY9oWxWsX2J6Dh-TWkaSyFAY2EfXZ6jlzmnmG7XkWnzJQ9zcg6Xy8l8-YJgjyDQ4SOd_PZr2q99_Wlm0QvOkz0bKDJkhNnDhixNlAYeOsZqBJHD6NVJtI/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='j4vascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='j4vascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
}
showblogfeed += "<a href='j4vascript: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/j4vascript');
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 karakter pada artikel yang ditampilkan.
varurlblog=”URL BLOG ANDA” ganti dengan URL blog Anda.
6. Simpan template.

Setelah selesai menambahkan arahan diatas pada template blog Anda, berikutnya memasang pada widget blog Anda :
1. Pilih sajian tab Tata Letak > Tambahkan Gadget > HTML/JavaScript.
2. Letakkan arahan berikut pada HTML/JavaScript.

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

3. Terakhir Simpan.

Nah, sekian cara menciptakan artikel terbaru disertai dengan tombol home, previous dan next. Semoga sanggup membantu!
Sumber http://id-pemula.blogspot.com