Tutorial kali ini menjawab pertanyaan dari teman blogger Haz Issac pada artikel membuat widget label tertentu dengan thumbnail satu, mengenai membuat recent Post atau artikel terbaru dengan fungsi Previous dan next seperti yang Anda lihat di single post blog Johny Template. Langsung saja karena hari sudah malam dan besok pagi mesti sahur, bisa-bisa nggak bisa bangun. Dibawah ini screenshotnya dan silahkan klik demo untuk melihat lebih jelas.
Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
<script type='text/javascript'> //<![CDATA[ var numfeed = 5; var startfeed = 0; var urlblog = "http://johny-gantengbanget.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/AVvXsEiH-Wcf8ZCrg80d6UvnV7shYnw96QY0xG2p-Ax24j1cRLDMG7N5AHoMCTGsikPhxEXwaq-6k4TC_VUhJfsM4UDaqegfG-tbfGUJ0dWlSZGCQQF_d-Vh_MUB72RdflwWwTto68n2KEk6hWA/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 var urlblog = "http://johny-gantengbanget.blogspot.com/"; >> ganti dengan URL blog Anda var charac = 100; >> Jumlah karakter atau huruf pada setiap post.
Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :
Sekian tutorial membuat widget artikel terbaru dengan fungsi previous dan next kali ini, jika masih ada yang kurang jelas silahkan tinggalkan komentar di bawah. Selamat mencoba dan semoga bermanfaat..... zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
S atu lagi tutorial blog yang gampang sekali untuk teman-teman praktikkan di blog masing-masing. Yaitu membuat tulisan berkedip atau blink text. Ini bukan sulap atau trik yang luar biasa, tapi saya sangat tertarik dengan blog yang ada tulisan berkedip-kedip di dalamnya. Setelah mempelajari triknya, saya pun posting artikel cara membuat teks berkedip atau bahasa inggris bilang blink text . Sebenarnya ada gunanya juga membuat blink text ini. Yang pasti, pengunjung blog akan terbawa dan terpancing untuk mengklik teks tersebut. Atau paling tidak semakin terfokus ke arah tulisan yang berkedip itu. Di bawah ini adalah contoh dari blink text : "Jangan diklik, karena ini sangat berbahaya bagi kesehatan anda" Jika temen-temen tertarik ingin membuatnya, atau mungkin ada yang sudah tahu malah. Baiklah bagi teman-teman yang belum tahu dapat mengikuti cara ini. Saya bilang ini sangat gampang tidak perlu edit HTML <blink> Tulis kalimat temen-temen di sini </blink> Nan...
Tips Seo Untuk Blogger. Solusi Seo Agar Blog Selalu Update - Pada saat kita mengalami stuck atau hilang ide menulis kita masih punya beberapa pilihan untuk tetap mengupdate blog. Bagi yang blognya cuman satu sih kaga apa tapi kalau blognya lebih dari satu itu yang membuat terkadang kita kehabisan ide menulis. Contohnya saya yang memiliki lebih dari satu blog jadi harus pintar-pintarlah dalam mencari ide menulis. Kalau saya pribadi biasanya sering baca buku atau melihat-lihat tayangan televisi atau membaca berita di media sosial kesemuannya tersebut bisa kita bikin ide untuk menulis. Nah lalu Bagaimana Cara Agar Blog Selalu Update ? atau Bagaimana Mengatasi Kekurangan Ide Menulis Pada Blogger ?. Berikut ini adalah beberapa alternatif yang bisa kita gunakan untuk mengatasi kejenuhan dalam ngeblog karena kekurangan ide menulis atau faktor kesibukan.Sebelumnya kalian semua bisa membuka artikel-artikel saya terdahulu sebagai sarana perbandingan: Apa Manfaat Blog Dummy Bagi S...
S etelah kita membuat reply pada kotak komentar , langkah selanjutnya adalah membedakan komentar pemilik blog dengan komentar pengunjung. Untuk membedakan komentar pemilik blog dengan komentar pengunjung bisa dengan latar belakang warna, latar belakang gambar, garis pembatas komentar, membedakan jenis huruf atau kotak komentar yang dibuat agak menjorok ke dalam. Istilah yang sering dipakai oleh orang Inggris sana adalah Highlight author comments , artinya menyorot komentar pemilik blog, kalau orang Indonesia bilang membedakan tampilan komentar pemilik blog , kira-kira begitulah. Manfaatnya tentu saja ada, membedakan komentar pemilik blog dan pengunjung pasti membantu pembaca mengetahui bahwa anda telah memberi tanggapan atas komentar yang masuk dari pengunjung blog anda. Secara default pada template blogger kita tidak dapat melihat perbedaan antara komentar pengunjung serta tanggapan dari yang punya blog. Semuanya disama ratakan oleh blogger. Agar lebih jelas apa itu Highlig...
Comments
Post a Comment