Berbagi Untuk Semua
  • Home
  • Tutorial Blog
  • Games
  • Templates
  • Disclaimer
  • Privacy Policy
  • Tips Tricks
Home » Tutorial Blog » Cara Memasang Widget Recent Post Dengan Fungsi Previous Dan Next

Rabu, 03 Juni 2015

Cara Memasang Widget Recent Post Dengan Fungsi Previous Dan Next

Ini Adalah Salah Satu Widget Yang Penting Untuk Blog Anda, Yaitu Widget RECENT POST/POST TERBARU Dengan Fungsi Previous Dan Next, Widget Ini Berfungsi Sebagai Alat Agar Pengunjung Blog Kita Tahu Mengenai Perkembangan Terkini Dari Blog Kita Di Bagian Artikel/Post


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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgzZNicQMHRgAIAHACmL7GyG8UlWbL30Mh2wAA6z0UV40FaIN64zMzSuOdniYS_92sduWNbBhDzIL3ad4RPKRLFdwMYQlJKr3qBkD_h8N_uYPrOOrTGztZ-D5py9Mk367xXK0PBVEowAQ/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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgltGua5M1-Mdr_jK8o0U2ShncPNHECQM6DWsiun_GeA-bKt-UyOgYGq7NGY2t01noKi0mDsJjPsitP3skrnqGWCxBkjyAdCufZD92XcxOAI_UDPs_gURgA17mvE-E0kOVnpiFEUlDo7Y/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 Artikel Kali Ini Berguna Bagi Kalian Dan Orang Lain... Salam Blogger Indonesia
f
Share
t
Tweet
g+
Share
?
Unknown
23.31

Belum ada komentar untuk "Cara Memasang Widget Recent Post Dengan Fungsi Previous Dan Next"

Posting Komentar

Posting Lebih Baru Posting Lama Beranda
Langganan: Posting Komentar (Atom)
Find Us :

Translate

English German Spain Russian Japanese Arabic Chinese Simplified
Bet365 review

Entri Populer

  • Street Artist Indonesia
    Adabanyak artist - artist jalanan yang ada di indonesia. Tetapi kalian pasti penasarankan tentang artis - artis jalanan yang terbaik / yang...
  • Cara Bermain Pudge War Dota 2
    Kalau kamu bingung bagaimana cara bermain pudge war di dota 2, mungkin pos kali ini bisa bantu kamu. Selain pudge war, kamau bisa juga be...
  • Build Guide Pudge Standard Mid Build DOTA 2 Indonesia
    PUDGE - THE BUTCHER Halo Gamers Indonesia Kali Ini Saya Akan Memberi/Berbagi Tetang Games, Yaitu Games DOTA 2. Game Strategy Ini S...
  • Cara Memasang Lagu/Mp3 Di Blog
    Banyak orang yang ingin memperbagus blog nya dan membuat nyaman pengunjungnya nya dengan menambahkan widget-widget yang memperindah atau me...
  • Perbedaan Antara Dota 2 Dan Dota 2 Reborn
    Halo gamers, sudah tau kalau steam telah mengeluarkan dota 2 new reborn? Sedikit info bahwa dota 2 new reborn adalah dota 2 yang di rem...

Label

Bacaan Seru Dota 2 Games Templates Tips Tricks Tutorial Blog

Recent Post

Arsip Blog

  • September (3)
  • Agustus (1)
  • Juli (1)
  • Juni (35)

Page Info

Flag Counter DMCA.com Protection Status

About Me

Unknown
Lihat profil lengkapku
Copyright 2013 Berbagi Untuk Semua - All Rights Reserved
Design by Mas Sugeng - Published by Evo Templates