Home  ·  About  ·  Privacy  ·  Contact  ·  Cbox

Membuat Artikel Terbaru disertai Tombol Home, Previous dan Next


Widget Artikel terbaru merupakan widget yang berisi postingan terbaru dari sebuah blog. Banyak widget artikel terbaru yang telah dimodifikasi agar menjadi lebih menarik, salah satunya adalah yang akan kita bahas ini nanti yaitu widget artikel terbaru disertai dengan tombol home, previous dan next.
Berikut langkah cara membuat artikel terbaru disertai tombol home, previous dan next :

1. Login akun blogger Anda.
2. Pilih menu tab Template > Edit HTML > letakkan kursor pada area kode HTML.
3. Cari kode ]]></b:skin> tekan tombol Ctrl + F untuk melakukan pencarian.
4. Letakkan kode berikut diatas kode ]]></b:skin>
#pemula-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.pemula-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.pemula-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.pemula-elemen h6,.pemula-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.pemula-elemen:hover{background-color:#c3c3c3}
.pemula-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#pemula-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#pemula-navigasifeed:hover{background-color:#c3c3c3}
#pemula-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#pemula-navigasifeed span{padding:5px 10px}
#pemula-navigasifeed .next{float:right}
#pemula-navigasifeed .previous{float:left}
#pemula-navigasifeed .home{text-align:center}
#pemula-navigasifeed a:hover,#pemula-navigasifeed span.noactived{color:transparant!important}
Keterangan:
Tulisan yang berwarna biru adalah ukuran lebar dan tinggi gambar/thumbnail.
5. Kemudian cari kode </head>, letakkan kode berikut diatas kode </head>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 3;
var startfeed = 0;
var urlblog = "http://id-pemula.blogspot.com/";
var charac = 100;
var urlprevious, urlnext;

function pemulakolisfeed(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 = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
}
showblogfeed += "<div class='pemula-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + pemulakolisfeed(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("pemula-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='pemula-loading'></div>";
document.getElementById("pemula-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', 'pemulaLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("pemulaLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>
Keterangan:
var numfeed=3; yaitu jumlah artikel yang akan ditampilkan.
var charac=100; yaitu jumlah karakter atau huruf pada artikel yang ditampilkan.
varurlblog=”URL BLOG ANDA” ganti dengan URL blog Anda.
6. Simpan template.

Setelah selesai menambahkan kode diatas pada template blog Anda, berikutnya memasang pada widget blog Anda :
1. Pilih menu tab Tata Letak > Tambahkan Gadget > HTML/JavaScript.
2. Letakkan kode berikut pada HTML/JavaScript.
<div id="terbaru"></div>
<div id="pemula-navigasifeed"></div>
3. Terakhir Simpan.

Nah, sekian cara membuat artikel terbaru disertai dengan tombol home, previous dan next. Semoga dapat membantu!

4 komentar:

  1. kalu mau nunjukin artikel jadi kotak kotak seperti di gambar itu gimana ya caranya ? trims

    ReplyDelete
  2. Disini kami menjual Obat Sipilis herbal Gang Jie dan Gho Siah dari De Nature Indonesia yang diformulasikan kusus dengan kandungan herbal alami yang berkasiat, mampu mengobati penyakit sipilis, gonore, dan keputihan berlebih secara efektif tanpa menimbulkan efek samping. Selain terbuat dari bahan herbal, obat tersebut juga telah terdaftar dan teruji klinis oleh BPOM Ri jadi sudah terbukti ampuh. Dijamin dalam waktu 3-5 hari penyakit sipilis yang anda alami dapat disembuhkan.

    ReplyDelete
  3. Obat Sipilis De Nature Gang Jie Gho Siah adalah obat yang sangat ampuh untuk mengobati penyakit sipilis tanpa efek samping. Karena obat ini menggunakan bahan herbal alami tanpa campuran bahan kimia. Seperti yang kita ketahui bahwa bahan alami sangat baik untuk menjaga kesehatan kita dan aman untuk di konsumsi. Obat Sipilis Gang Jie Gho Siah dibuat dari bahan alami pilihan yang sangat bermanfaat membantu untuk penyembuhan sipilis.

    ReplyDelete

  4. SELAMAT DATANG DI WEBSITE KAMI WWW(dot)MEDIAQQ(Dot)COM

    Semuanya hanya ada di MEDIAQQ

    Kami menyediakan 7 jenis permainan ni:
    1. PLAY AduQ
    2. BANDAR POKER
    3. PLAY BANDARQ
    4. CAPSA SUSUN
    5. PLAY DOMINO 99
    6. PLAY POKER
    7. SAKONG

    Untuk masalah deposite dan withdraw kami minimal 15.000 ribu saja.
    Dengan 15.000 ribu saja sudah bisa bermain 7 game tersebut
    dan mencoba hoki masing-masing lo.
    Dan kami akan memproses Deposite dan Withdraw
    cuma dengan waktu kurang dari 5 menit, bagaimana cepat kan bosku.

    MEDIAQQ juga menyediakan layanan live chat 24 jam nonstop.
    Jika bosku mengalami kesulitan dalam mendaftar atau kurang mengerti.
    Anda dapat menghubungi kami melalui livechat,BBM,SKYPE atau pun Facebook.
    Kami akan siap 24 jam bosku untuk melayani anda
    dan mengatasi semua keluhan anda.

    Kami juga mempunyai macem-macem bonus bosku:
    1. BONUS TURN OVER 0.3%
    2. BONUS REFFERAL 20%

    yuk buruan daftarkan diri anda ke website kami di www(Dot)MEDIAQQ(Dot)com


    ReplyDelete

 
Copyright © . Info Blog Indonesia · Powered by Blogger