/

Membuat Widget Artikel Terbaru Dengan Fungsi Next Dan Previous

Edit
Membuat Widget Artikel Terbaru Dengan Fungsi Next dan Previous Membuat Widget Artikel Terbaru Dengan Fungsi Next dan Previous

Membuat Widget Artikel Terbaru Dengan Fungsi Next dan Previous - Sudah banyak widget yang sudah saya bagikan kepada anda semua, namun tidak ada salahnya kalau saya akan kembali menunjukkan sebuah pilihan widget yang mungkin sudah tidak gila lagi dan sering dipakai oleh banyak blogger, widget ini ialah Widget Recent Pots (Artikel Terbaru).

Widget Recent Post ini ialah salah satu widget yang wajib anda pasang pada blog saudara, dengan widget ini pengunjung akan mengetahui daftar artikel-artikel yang gres 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 mempunyai fungsi unik dan khusus di bandingkan dengan widget artikel terbaru lainnya. fungsi tersebut ialah fungsi Next dan Previous. Widget ini sendiri ialah widget yang saya sanggup 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 instruksi ]]></b:skin> dan letakan instruksi di bawah ini sempurna di atas instruksi ]]></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/AVvXsEgB8zIvixM_T72wo8R6JLhDZDADwdBjuXfioeLOfmHMbnHelZdnjDiTcgEUsSxJeHqVcye4J4J74O40TWXoobCJhYqXQRMX1Z-NT4BKTnBctsGLhZUYLlzSsJuoguv447Wvc1IkJ69sL_4/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 sanggup mengubahnya sesuai selera anda. Setelah itu, masukan instruksi berikut ini di atas instruksi </head>

<script type='text/javascript'> //<![CDATA[ var numfeed = 5; var startfeed = 0; var urlblog = "https://gratistutorialonline.blogspot.co.id/"; 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/AVvXsEgl1wDxmoUTkCC_amfojY88M115UrMfEjzVxLwlv3K-VGYKwiR7boZ-s0-o47GeqFOOQeh-wTAJukJXCRtU69suftfdLivA0QU9xF3pKBL4P_vM0BEZaijokXY5HoS3-eEK-y7d4pBt5KM/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 = https://gratistutorialonline.blogspot.co.id/; >> ganti dengan URL blog Anda. 
  • var charac = 100;>> Jumlah karakter atau abjad pada setiap post.

Setelah itu SIMPAN template  untuk menyimpan perubahannya.

lalu masuk ke sajian TATA LETAK ,pilih kotak yang ingin anda tambahkan dengan widget ini. Kemudian klik add gadget -->> HTML/javascript masukan instruksi berikut ini ke dalamnya.

<div id="terbaru"></div> <div id="mas-navigasifeed">

Jika sudah jangan lupa klik SIMPAN atau SAVE.Semoga Bermanfaat...

Sumber https://www.gratistutorial.me/

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel