--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
my profile FaCeBoK

Name : Riyan Yazid M.A
Birthday : 14 Desember 1998
Blood   : gak tau
Horoscope : Sagitarius
Tinggi Badan : gak tau
Sekolah :Smk Letris Indonesia 2 , Tanggerang selatan


Julukan : Riyan
Twitter :  Click 

Facebook :   Click 

[Created By Sank Jawara Cheater ]
Buku Tamu
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
[     Created : Sank Jawara Cheater     ]

-->

Minggu, 11 Agustus 2013

0 Cara Membuat Recent Post Dengan Fungsi Next Dan Previous

Cara Membuat Recent Post Dengan Fungsi Next Dan Previous
Saya - 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 :
  1. Masuk Tata Letak.
  2. Tambahkan Gadget.
  3. HTML/JavaScript
  4. Masukan kode dibawah ini
  5. 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/AVvXsEhoLMoivjmqBSn1hGOwwGqtxUVOMHB1wYS_iEIe362Yjix_n1H7vweZJethFRQ8siAOaB-Hr9QHaSpbWkk5nyhBUi_KnrY3O2zL9mpVGochg3tBE8VOg9THqi80lWEFRAoW-l8ozr_GftE/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'>&#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("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 :
Cara Membuat Recent Post Dengan Fungsi Next Dan Previous
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.

Ditulis Oleh : ksknf ~ Tips dan Trik Blogspot

> Sobat Hacking-Cheat sedang membaca artikel tentang Cara Membuat Recent Post Dengan Fungsi Next Dan Previous. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

:: Get this widget ! ::

0 Comments

Bagaimana Pendapat Anda ?