?

Followers

×

Tentang Blog Ini×

Blog ini wadah merupakan media pembelajaran otodidak secara online bagi kalangan newbie seperti Andmin ini, akan tetapi belajar dan berusaha secara otodidak inilah yang membuat saya bisa berkreasi dengan ala kadarnya.

Salam pembuka dari Admin sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Jawa Timur.

Bagi para pembaca yang mungkin juga ingin menghubungi saya, bisa melihat alamat juga kontak saya yang disediakan dibawah ini.

Nama :  Admin
Email :  admin[at]gmail[dot]com

by Admin

Sidebar Blog×

Daftar Blog Bacaanku×

Bagikan kepada teman!
Close Info

LINK FRIEND

Sampaikan pesan anda jika ingin memajang link blog anda di Id Tutor Plus pada  (Link Friend)

NAMA BLOGURL BLOGDESCRIPSI BLOG
KOD Bloghttp://kang-onk.blogspot.com/Konsep Blogging Sederhana
KOD Sharehttp://onk-shared.blogspot.comShare something beautiful for you
Klik Templatehttp://klik-template.blogspot.com/Beauty Premium Teamplate for You

Membuat Recent Post With Navigation

Mungkin tulisan ini kali pertama ditahun 2013, ternyata sudah lama gak update blog disebabkan dengan numpuknya kerjaan, ini aja Admin sempatkan walau terkesan buru-buru. Langsung saja pada pembahasan tutorial selanjutnya yakni pembahasan cara membuat recent post pada blog yang dilengkapi dengan navigasi halaman.

Tips ini bisa Anda terapkan dalam blog baik pada gadget/widget ataupun langsung diterapkan pada template blog, tergantung dari Anda sendiri mau diletakkan dimana. Yang pasti hasil yang didapatkan akan mengoptimasi blog Anda pada pagerank.

Pemasangannya dan penerapnnya :

CSS

Biasanya kode ini dipasang di atas ]]></b:skin> atau </style> pada template Anda.

#itp-recentss {
  border:1px solid #585858;
  width:100%;
  margin:0 auto;
}

#recentss {
  margin:0;
}

.itp-elemen {
  border:1px solid #ccc;
  margin:5px 0;
  padding:5px;
  height:79px;
}

.itp-elemen img {
  background:#999;
  padding:4px;
  float:left;
  height:70px;
  margin-right:8px;
  width:70px;
}

.itp-elemen h6,
.itp-elemen h6 a {
  font-size:12px!important;
  font-weight:700!important;
  margin:0;
  color:#111;
}

.itp-elemen:hover {
  background-color:#c3c3c3;
}

.itp-elemen p {
  font:14px Tahoma;
  text-align:justify;
  color:#555;
  line-height:14px;
  margin:5px 0;
}

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

#itp-navigationfeed {
  border:1px solid #c3c3c3;
  color:#bbb;
  font-family:Verdana;
  font-size:12px;
  text-align:center;
  margin:0;
}

#itp-navigationfeed:hover {
  background-color:#c3c3c3;
}

#itp-navigationfeed a {
  color:#141414!important;
  font-family:Tahoma!important;
  font-size:12px!important;
  font-weight:400!important;
  display:block;
  padding:5px 10px;
}

#itp-navigationfeed span {
  padding:5px 10px;
}

#itp-navigationfeed .next {
  float:right;
}

#itp-navigationfeed .previous {
  float:left;
}

#itp-navigationfeed .home {
  text-align:center;
}

#itp-navigationfeed a:hover,
#itp-navigationfeed span.noactived {
  color:transparant!important;
}

JavaScript

Pasang diatas </head>

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://nama-blog-anda.blogspot.com/";
var charac = 150;
var urlprevious, urlnext;

function idtutorplufeed(idtutor,mantap){
var showfeed = idtutor.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,mantap-1);
return showfeed;
}
function showrecentss(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://1.bp.blogspot.com/-f4iRT1f64kI/UOkpC7CGQRI/AAAAAAAAASQ/uVVCRPumAR0/s1600/idtp.png";
}
showblogfeed += "<div class='itp-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + idtutorplufeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("recentss").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigationfeed(-1);' class='previous'>&#9668; Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigationfeed(1);' class='next'>Next &#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
}
showblogfeed += "<a href='javascript:navigationfeed(0);' class='home'>Home</a>";
document.getElementById("itp-navigationfeed").innerHTML = showblogfeed;
}

function navigationfeed(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=showrecentss";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("recentss").innerHTML = "<div id='itp-loading'></div>";
document.getElementById("itp-navigationfeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var recentss = document.createElement('script');
recentss.setAttribute('type', 'text/javascript');
recentss.setAttribute('src', archievefeed);
recentss.setAttribute('id', 'ITPLABEL');
document.getElementsByTagName('head')[0].appendChild(recentss);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("ITPLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigationfeed(0); }
//]]>
</script>

Penerapan HTML

<div id="recentss"></div>
<div id="itp-navigationfeed"></div>
Atur bagian JavaScript diatas sesuai dengan kemauan Anda, tapi jangan sampai salah penulisannya
var numfeed = 5; Jumlah label yang ditampilkan
var urlblog = "http://nama-blog-anda.blogspot.com/"; Nama blog Anda.
var charac = 150; Banyaknya karakter.

Semoga bermanfaat.

Terakhir Diperbaharui

    2 comments

    28 April 2013 23.30 Permalink
    Thanks gan infonya. Gue coba dl ya gan.
    8 September 2013 03.51 Permalink
    manatf gan ,:)
    saya coba dulu

    Catatan :
    Link hidup dalam komentar akan terhapus secara otomatis.
    Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
    Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
    Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
    Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
    Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
    Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

    Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
    :):(^_^:D;):-bd:'(:\:pB):Q:Ozz7:(\o/**p<30:):-a7:O*fck*x@X@~x(:yaya:=p*Klik untuk melihat kode!

    Konversi Kode di Sini  Pasang Link Gratis  Daftar Member Aktif

    Batal

    Ke atas!Ke bawah!