Cara memasang widget artikel terbaru berdasarkan label di blogger - kali ini TrikSonic akan share tutorial cara membuat atau memasang widget artikel terbaru berdasarkan label.
Tutorial yang saya bagikan kali ini hanya menampilkan judul artikel saja tanpa gambar atau image, jadi akan mengurangi beban pada saat loading page.
Javascript dan html :
Copy dan pastekan kode berikut pada template atau widget html/javascript, disesuikan dengan keperluan
<div id="artikel-terbaru">
<ol>
<script>
var jumlahnewpost = 5; //jumlah post yang ingin ditampilkan
var create = true;
</script>
<script>
//<![CDATA[
function showrecentposts(e) {
for (var t = 0; t < jumlahnewpost; t++) {
var r, n = e.feed.entry[t],
i = n.title.$t;
if (t == e.feed.entry.length) break;
for (var l = 0; l < n.link.length; l++)
if ("alternate" == n.link[l].rel) {
r = n.link[l].href;
break
}
i = i.link(r), create && document.write("<li>"), document.write(i)
}
create && document.write("</li>");
}
//]]>
</script>
<script src="//triksonic.blogspot.com/feeds/posts/default/-/Tutorial?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500"></script>
</ol>
</div>
Perhatikan tanda yang saya beri tanda dibawah ini:
<script src="//triksonic.blogspot.com/feeds/posts/default/-/Tutorial?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500"></script>
Untuk yang berwarna merah ganti dengan url agan agan semua, dan untuk yang berwarna biru ganti dengan nama label yang digunakan.
Catatan : Dalam Penulisan nama label harus sama besar kecil hurufnya termasuk karakter
Jika nama label yang digunakan mengandung dua kata atau lebih gunakan tanda
%20 sebagai pengganti space, misal jika nama labelnya Tutorial HTML maka penulisannya menjadi Tutorial%20HTMLCSS :
Silahkan copy dan pastekan css berikut kedalam element
<b:skin>...</b:skin> atau <style>...</style>. Silahkan modifikasi kembali agar sesuai dengan keperluan.#artikel-terbaru {
background : #ffffff;
padding: 10px;
font-family: sans-serif;
font-size: 14px;
line-height: 1.42857;
border: 1px solid #efefef;
margin: 15px 0;
box-shadow: 1px 1px 3px 0px #989898;
-moz-box-shadow: 1px 1px 3px 0px #989898;
-webkit-box-shadow: 1px 1px 3px 0px #989898;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#artikel-terbaru ol, #artikel-terbaru ul {
position:relative;
list-style-type: none;
margin: 0;
padding: 0;
counter-reset: line;
}
#artikel-terbaru li {
position: relative;
list-style-type: none;
padding: 6px 10px;
border: 1px solid #b9b9b9;
margin: 3px 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#artikel-terbaru li:hover {
background: #ecfbf9;
}
#artikel-terbaru a {
text-decoration: none;
color: #292626;
font-weight: bold;
margin-left: 40px;
display: block;
padding: 10px;
}
#artikel-terbaru a:hover {
color: #26669e;
}
#artikel-terbaru li:before {
margin-right: 10px;
background-color: #2088a0;
border-radius: 5px;
color: #fff;
text-align: center;
counter-increment: line;
content: counter(line);
padding: 13px;
position: absolute;
top: 4px;
left: 4px;
bottom: 4px;
max-width: 15px;
min-width: 20px;
word-wrap: break-word;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>
<p>
klik tombol <button>CSS</button> untuk membuka panel editor css
</p>
<div id="artikel-terbaru">
<ol>
<script>
var jumlahnewpost = 5; //jumlah post yang ingin ditampilkan
var create = true;
</script>
<script>
//<![CDATA[
function showrecentposts(e) {
for (var t = 0; t < jumlahnewpost; t++) {
var r, n = e.feed.entry[t],
i = n.title.$t;
if (t == e.feed.entry.length) break;
for (var l = 0; l < n.link.length; l++)
if ("alternate" == n.link[l].rel) {
r = n.link[l].href;
break
}
i = i.link(r), create && document.write("<li>"), document.write(i)
}
create && document.write("</li>");
}
//]]>
</script>
<script src="https://triksonic.blogspot.com/feeds/posts/default/-/Tutorial?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500"></script>
</ol>
</div>
</body>
</html>
#artikel-terbaru {
background : #ffffff;
padding: 10px;
font-family: sans-serif;
font-size: 14px;
line-height: 1.42857;
border: 1px solid #efefef;
margin: 15px 0;
box-shadow: 1px 1px 3px 0px #989898;
-moz-box-shadow: 1px 1px 3px 0px #989898;
-webkit-box-shadow: 1px 1px 3px 0px #989898;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
#artikel-terbaru ol, #artikel-terbaru ul {
position:relative;
list-style-type: none;
margin: 0;
padding: 0;
counter-reset: line;
}
#artikel-terbaru li {
position: relative;
list-style-type: none;
padding: 6px 10px;
border: 1px solid #b9b9b9;
margin: 3px 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#artikel-terbaru li:hover {
background: #ecfbf9;
}
#artikel-terbaru a {
text-decoration: none;
color: #292626;
font-weight: bold;
margin-left: 40px;
display: block;
padding: 10px;
}
#artikel-terbaru a:hover {
color: #26669e;
}
#artikel-terbaru li:before {
margin-right: 10px;
background-color: #2088a0;
border-radius: 5px;
color: #fff;
text-align: center;
counter-increment: line;
content: counter(line);
padding: 13px;
position: absolute;
top: 4px;
left: 4px;
bottom: 4px;
max-width: 15px;
min-width: 20px;
word-wrap: break-word;
vertical-align: middle;
}
//javascript
Perhatian :
Karena editor live ini bersifat iframe, jika nantinya anda tidak bisa mengklik link hasil demo ini, hal tersebut dikarenakan anda mengunjungi halaman ini melalui jalur https://, element iframe menolak perbedaan antara https:// dan http://.Saran edit url halaman ini ganti
https://triksonic.blogspot.com/2017/05/artikel-terbaru-berdasarkan-label.htmlmenjadi
http://triksonic.blogspot.com/2017/05/artikel-terbaru-berdasarkan-label.html.Ini hanya untuk didalam iframe secara normal hal ini normal dan bekerja dengan baik.