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/AVvXsEicBnDXf8WfBfrss5wBpqSJZejKNMXNilSA-JeS7dirKdOBKcsaSNzgzS8GRy6Lgtk_nacFJVw6ttl5uq6EZFFoAscUrFdyDuYjitMXBtoqsQFfKNC6xk64xqdaJ3PWx5z1vvKt80P97hI/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/AVvXsEgLM1PLALtjV2zB3aSGUiBAZJt59G7FCa2PAUz-rwmpCrgw95fJkxIZD39lGezmbLpRzXJI7ypzhZsrSgtA9bRK-2tpmutraAq3iRIT9VJ6nG6ZdzrX6jiGHzSyr4DsbK0L0BWvzGa_SY0/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'>◄ Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>◄
Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);'
class='next'>Next ►</a>";
} else {
showblogfeed += "<span class='noactived next'>Next
►</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
Tidak ada komentar:
Posting Komentar