Membuat Artikel Terbaru dengan Fungsi Previous dan Next

Membuat Artikel Terbaru dengan Fungsi Previous dan Next - Modifikasi widget artikel terbaru / Recent Posts dengan disertai tombol fungsi P...

Membuat Artikel Terbaru dengan Fungsi Previous dan Next - Modifikasi widget artikel terbaru / Recent Posts dengan disertai tombol fungsi Previous, Next dan Home serta gambar/thumbnail merupakan hasil karya Creating Website. Saya cukup tertarik dengan widget artikel terbaru/recent posts karena bagus sekali, oleh karena itu saya akan share ulang kode-kode widget artikel terbaru kepada anda semua. Untuk screenshotnya dari artikel terbaru seperti dibawah ini. Yuk sekarang simak tutorial blog mengenai cara membuat widget artikel terbaru/ recent posts di blogspot. Simak dulu modifikasi popular posts blogger keren di postingan sebelumnya.

Membuat Artikel Terbaru dengan Fungsi Previous dan Next

Modifikasi Artikel Terbaru dengan Fungsi Previous dan Next :

1. Buka blog anda di blogger
2. Pada dashboard, pilih Template => Edit HTML
3. Centang Expand Widget Templates
4. Backup template anda
5. Tekan F3, cari kode ]]></b:skin> dan letakkan kode berikut diatasnya

#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-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}

Untuk teks warna merah merupakan lebar dan tinggi gambar / thumbnail

6. Berikutnya cari kode </head> dan letakkan kode berikut diatasnya :

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://bloggerbondowoso24.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/AVvXsEgIAFAI7nZMwEw2O-aJJ3nsEWW7DbLB6Fzz8u3AB1Hab3ulAxkCjKe55B4re-ETxiVO007mit3nPAD5QKWPd7E5h65ni9xTSZyHTXdAPIGSwWnd4NestWZhVrA4WkJLFIcBddq0XpzUyOE/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; adalah jumlah artikel yang ditampilkan
- var charac = 100; adalah jumlah karakter atau huruf pada setiap post
- silahkan ganti Url Blogger Bondowoso dengan URL blog anda

7. Simpan Template

8. Berikutnya klik Tata Letak => Tambah Gadget => HTML/Javascript dan masukkan kode berikut ini kedalamnya :

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

9. Simpan

Demikianlah tutorial blog mengenai Cara Membuat Artikel Terbaru dengan Fungsi Previous dan Next, silahkan dicoba dan semoga bermanfaat, happy blogging.

COMMENTS

Name

Activator,3,Adobe,1,aneka resep,35,AntiVairus,1,coreldraw,22,Data Recovery,1,Driver,3,education,6,IDM,1,kesehatan,21,komputer,22,Multimedia,1,news,7,photoshop,42,relegius,19,seo,27,Serial Key,4,tips wanita,10,tutorial blog,117,
ltr
item
Full Version Download: Membuat Artikel Terbaru dengan Fungsi Previous dan Next
Membuat Artikel Terbaru dengan Fungsi Previous dan Next
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJGiVErZ7Mlwg3rFemGvwNq2SeC1VZpc7Qt9QUQ9xodl2GG7owuK7g6FNyXfxyYkccA_vmJI-Bvyh7MUW5C-Khyphenhyphen8rMppt2HYfuM5a2-zhQsierg06lIphcKCK1jSHIb4gKwISz_nj8Qqc/s1600/artikel+terbaru.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJGiVErZ7Mlwg3rFemGvwNq2SeC1VZpc7Qt9QUQ9xodl2GG7owuK7g6FNyXfxyYkccA_vmJI-Bvyh7MUW5C-Khyphenhyphen8rMppt2HYfuM5a2-zhQsierg06lIphcKCK1jSHIb4gKwISz_nj8Qqc/s72-c/artikel+terbaru.jpg
Full Version Download
https://bloggerbondowoso24.blogspot.com/2013/03/membuat-artikel-terbaru-dengan-fungsi.html
https://bloggerbondowoso24.blogspot.com/
https://bloggerbondowoso24.blogspot.com/
https://bloggerbondowoso24.blogspot.com/2013/03/membuat-artikel-terbaru-dengan-fungsi.html
true
7143853511036504925
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy