Membuat Widget Artikel Terbaru Dengan Fungsi Next dan Previous

|| || || 2 komentar
Membuat Widget Artikel Terbaru Dengan Fungsi Next dan Previous - Sudah banyak widget yang sudah saya bagikan kepada anda semua, namun tidak ada salahnya jika saya akan kembali memberikan sebuah pilihan widget yang mungkin sudah tidak asing lagi dan sering digunakan oleh banyak blogger, widget ini adalah Widget Recent Pots (Artikel Terbaru).


Widget Recent Post ini adalah salah satu widget yang wajib anda pasang pada blog saudara, dengan widget ini pengunjung akan mengetahui daftar artikel-artikel yang baru anda publikasikan. Sehingga akan meningkatkan jumlah page view blog saudara apabila ada pengunjung yang meng-klik atau mengunjungi artikel terakhir yang sudah anda publikasikan.

Memasang Widget Recent Post Dengan Fungsi Previous dan Fungsi Next

Widget recent post atau artikel terbaru yang akan saya bagikan kali ini memiliki fungsi unik dan khusus di bandingkan dengan widget artikel terbaru lainnya. fungsi tersebut adalah fungsi Next dan Previous. Widget ini sendiri adalah widget yang saya dapat dari blog CREATING WEBSITE dengan url blog maskolis.com .

Bagi anda yang tertarik ingin memasang Widget Artikel Terbaru ini, anda hanya perlu mengikuti langkah-langkah sederhana di bawah ini :
  • Login dengan akun blog saudara
  • Pilih blog yang ingin anda tambahkan widget ini.
  • Kemudian Pilih Menu TEMPLATE dan klik EDIT HTML
  • Cari kode ]]></b:skin> dan letakan kode di bawah ini tepat di atas kode ]]></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(http://1.bp.blogspot.com/-vBDcLG_CXzU/UBqEMTknKcI/AAAAAAAAIHE/pZTfBZLbPwY/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}

 - Kode berwarna biru itu untuk pengaturan Tinggi dan Lebar widget nantinya, anda bisa mengubahnya sesuai selera anda.
  • Setelah itu, masukan kode berikut ini di atas kode </head>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://ngeblog07.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 = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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 : 
- var numfeed = 5; >> Jumlah Artikel terbaru yang ditampilkan pada widget.    
- urlblog = http://ngeblog07.blogspot.com/; >> ganti dengan URL blog Anda. 
- var charac = 100;>> Jumlah karakter atau huruf pada setiap post.
  • Setelah itu SIMPAN template  untuk menyimpan perubahannya.
  • lalu masuk ke menu TATA LETAK ,pilih kotak yang ingin anda tambahkan dengan widget ini. Kemudian klik add gadget -->> HTML/javascript masukan kode berikut ini ke dalamnya. 
<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>
  • Jika sudah jangan lupa klik SIMPAN atau SAVE
Semoga Bermanfaat...

Terima Kasih Atas Kunjungan Anda
Judul: Membuat Widget Artikel Terbaru Dengan Fungsi Next dan Previous
Ditulis Oleh Riki Junizar
Artikel ini dipatenkan pada www.myfreecopyright.com, Jika mengutip harap berikan link balik yang menuju artikel Membuat Widget Artikel Terbaru Dengan Fungsi Next dan Previous ini. Jika tidak akan diproses secara DMCA Takedown yang tentu saja tidak baik akibatnya bagi blog saudara. Terima kasih atas perhatiannya

/[2 komentar Untuk Artikel Membuat Widget Artikel Terbaru Dengan Fungsi Next dan Previous]\
Catatan Sukiman mengatakan...

wow... Recent Post-nya jadi lebih mantap sob...

Riki Junizar mengatakan...

@Catatan Sukiman
Iya, terima kasih sudah mau berkunjung di artikel saya ini tentang . . .

Membuat Artikel Terbaru Dengan FUngsi Next dan Previous

Posting Komentar

Terima kasih telah membaca artikel di atas, kalau boleh dibantu tolong berikan komentar yang relevan sesuai dengan topik pembahasan artikel di atas. Anda diperbolehkan berkomentar dengan memperhatikan hal-hal berikut:
1. Komentar jangan mengandung SARA dan PORNO.
2. Jangan berkomentar dengan menggunakan LINK MATI apalagi LINK AKTIF.
3. Jika anda orang Indonesia yang cinta tanah air, maka berkomentarlah dengan bahasa baku dan sopan.
Jika komentar anda melanggar syarat di atas, maka komentar anda tidak akan saya publish dan akan saya tandai sebagai SPAMER.

Terima kasih atas kunjunganya ^_&