Cara membuat list pada halaman blog
Mungkin masih banyak yang bingung cara membuat list pada halaman blog atau juga wordpress. Bagaimana cara membuatnya?
Tenang cara membuatnya gampang dan mudah untuk di praktekkan, ok ada beberapa langkah cara membuat list pada halaman blog yaitu :
1. Buka blogger yang telah anda buat sebelumnya dan pilih menu halaman, kemudian buat halaman baru.
2. Setelah itu pilih HTML pada pojok kiri paling atas ada dua pilihan antara Compose dan HTML, selanjutnya salin kode yang di bawah ini dan tempelkan pada halaman tersebut.
<style>
.listanim-wrapper{max-width:1060px;margin:auto}
.abjad{padding:1px 0;text-align:center;margin:0 0 5px 0}
.abjad a{padding:5px 0;width:27px;float:left;display:block;background:#424242;font-weight:500;color:#FFFFFF;text-decoration:none;}
.abjad a:hover{background: #dc2525;text-decoration: none;}
.clear{clear:both}
.grup-judul{font-family:segoe ui;font-weight:bold;color:#333;font-size:13px;border-bottom:2px solid #dc2525;margin-bottom:5px;background:none;padding:5px;text-transform:uppercase;position:relative;clear: both;}
.grup ul li{width:50%;float:left;}
@media screen and (max-width:900px){.grup ul li{width:100%;float:none;clear:both;}.abjad a{}}
</style>
.listanim-wrapper{max-width:1060px;margin:auto}
.abjad{padding:1px 0;text-align:center;margin:0 0 5px 0}
.abjad a{padding:5px 0;width:27px;float:left;display:block;background:#424242;font-weight:500;color:#FFFFFF;text-decoration:none;}
.abjad a:hover{background: #dc2525;text-decoration: none;}
.clear{clear:both}
.grup-judul{font-family:segoe ui;font-weight:bold;color:#333;font-size:13px;border-bottom:2px solid #dc2525;margin-bottom:5px;background:none;padding:5px;text-transform:uppercase;position:relative;clear: both;}
.grup ul li{width:50%;float:left;}
@media screen and (max-width:900px){.grup ul li{width:100%;float:none;clear:both;}.abjad a{}}
</style>
Kemudian salin kode ini juga di bawahnya.
<div class='listanim-wrapper'>
<script type="text/javascript">
var numposts = 999;
var standardstyling = true;
function showrecentposts(json){
for(var i = 0; i < numposts; i++){
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length)
break;
for(var k = 0; k < entry.link.length; k++){
if(entry.link[k].rel == 'alternate'){
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
if(standardstyling)
document.write('<li>');
document.write(posttitle);
}
if(standardstyling)
document.write('</li>');
}
</script>
<div class='abjad'><a href="##">#</a> <a href="#A">A</a> <a href="#B">B</a> <a href="#C">C</a> <a href="#D">D</a> <a href="#E">E</a> <a href="#F">F</a> <a href="#G">G</a> <a href="#H">H</a> <a href="#I">I</a> <a href="#J">J</a> <a href="#K">K</a> <a href="#L">L</a> <a href="#M">M</a> <a href="#N">N</a> <a href="#O">O</a> <a href="#P">P</a> <a href="#Q">Q</a> <a href="#R">R</a> <a href="#S">S</a> <a href="#T">T</a> <a href="#U">U</a> <a href="#V">V</a> <a href="#W">W</a> <a href="#X">X</a> <a href="#Y">Y</a> <a href="#Z">Z</a><div class="clear"></div></div>
<div class='content-list'>
<div class='grup'><div class='grup-judul'><a name="#">#</a></div>
<ul>
<script src="/feeds/posts/default/-/0?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="A">A</a></div>
<ul>
<script src="/feeds/posts/default/-/A?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="B">B</a></div>
<ul>
<script src="/feeds/posts/default/-/B?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="C">C</a></div>
<ul>
<script src="/feeds/posts/default/-/C?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="D">D</a></div>
<ul>
<script src="/feeds/posts/default/-/D?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="E">E</a></div>
<ul>
<script src="/feeds/posts/default/-/E?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="F">F</a></div>
<ul>
<script src="/feeds/posts/default/-/F?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="G">G</a></div>
<ul>
<script src="/feeds/posts/default/-/G?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="H">H</a></div>
<ul>
<script src="/feeds/posts/default/-/H?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="I">I</a></div>
<ul>
<script src="/feeds/posts/default/-/I?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="J">J</a></div>
<ul>
<script src="/feeds/posts/default/-/J?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="K">K</a></div>
<ul>
<script src="/feeds/posts/default/-/K?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="L">L</a></div>
<ul>
<script src="/feeds/posts/default/-/L?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="M">M</a></div>
<ul>
<script src="/feeds/posts/default/-/M?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="N">N</a></div>
<ul>
<script src="/feeds/posts/default/-/N?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="O">O</a></div>
<ul>
<script src="/feeds/posts/default/-/O?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="P">P</a></div>
<ul>
<script src="/feeds/posts/default/-/P?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="Q">Q</a></div>
<ul>
<script src="/feeds/posts/default/-/Q?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="R">R</a></div>
<ul>
<script src="/feeds/posts/default/-/R?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="S">S</a></div>
<ul>
<script src="/feeds/posts/default/-/S?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="T">T</a></div>
<ul>
<script src="/feeds/posts/default/-/T?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="U">U</a></div>
<ul>
<script src="/feeds/posts/default/-/U?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="V">V</a></div>
<ul>
<script src="/feeds/posts/default/-/V?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="W">W</a></div>
<ul>
<script src="/feeds/posts/default/-/W?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="X">X</a></div>
<ul>
<script src="/feeds/posts/default/-/X?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="Y">Y</a></div>
<ul>
<script src="/feeds/posts/default/-/Y?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="Z">Z</a></div>
<ul>
<script src="/feeds/posts/default/-/Z?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var numposts = 999;
var standardstyling = true;
function showrecentposts(json){
for(var i = 0; i < numposts; i++){
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length)
break;
for(var k = 0; k < entry.link.length; k++){
if(entry.link[k].rel == 'alternate'){
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
if(standardstyling)
document.write('<li>');
document.write(posttitle);
}
if(standardstyling)
document.write('</li>');
}
</script>
<div class='abjad'><a href="##">#</a> <a href="#A">A</a> <a href="#B">B</a> <a href="#C">C</a> <a href="#D">D</a> <a href="#E">E</a> <a href="#F">F</a> <a href="#G">G</a> <a href="#H">H</a> <a href="#I">I</a> <a href="#J">J</a> <a href="#K">K</a> <a href="#L">L</a> <a href="#M">M</a> <a href="#N">N</a> <a href="#O">O</a> <a href="#P">P</a> <a href="#Q">Q</a> <a href="#R">R</a> <a href="#S">S</a> <a href="#T">T</a> <a href="#U">U</a> <a href="#V">V</a> <a href="#W">W</a> <a href="#X">X</a> <a href="#Y">Y</a> <a href="#Z">Z</a><div class="clear"></div></div>
<div class='content-list'>
<div class='grup'><div class='grup-judul'><a name="#">#</a></div>
<ul>
<script src="/feeds/posts/default/-/0?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="A">A</a></div>
<ul>
<script src="/feeds/posts/default/-/A?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="B">B</a></div>
<ul>
<script src="/feeds/posts/default/-/B?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="C">C</a></div>
<ul>
<script src="/feeds/posts/default/-/C?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="D">D</a></div>
<ul>
<script src="/feeds/posts/default/-/D?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="E">E</a></div>
<ul>
<script src="/feeds/posts/default/-/E?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="F">F</a></div>
<ul>
<script src="/feeds/posts/default/-/F?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="G">G</a></div>
<ul>
<script src="/feeds/posts/default/-/G?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="H">H</a></div>
<ul>
<script src="/feeds/posts/default/-/H?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="I">I</a></div>
<ul>
<script src="/feeds/posts/default/-/I?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="J">J</a></div>
<ul>
<script src="/feeds/posts/default/-/J?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="K">K</a></div>
<ul>
<script src="/feeds/posts/default/-/K?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="L">L</a></div>
<ul>
<script src="/feeds/posts/default/-/L?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="M">M</a></div>
<ul>
<script src="/feeds/posts/default/-/M?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="N">N</a></div>
<ul>
<script src="/feeds/posts/default/-/N?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="O">O</a></div>
<ul>
<script src="/feeds/posts/default/-/O?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="P">P</a></div>
<ul>
<script src="/feeds/posts/default/-/P?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="Q">Q</a></div>
<ul>
<script src="/feeds/posts/default/-/Q?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="R">R</a></div>
<ul>
<script src="/feeds/posts/default/-/R?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="S">S</a></div>
<ul>
<script src="/feeds/posts/default/-/S?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="T">T</a></div>
<ul>
<script src="/feeds/posts/default/-/T?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="U">U</a></div>
<ul>
<script src="/feeds/posts/default/-/U?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="V">V</a></div>
<ul>
<script src="/feeds/posts/default/-/V?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="W">W</a></div>
<ul>
<script src="/feeds/posts/default/-/W?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="X">X</a></div>
<ul>
<script src="/feeds/posts/default/-/X?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="Y">Y</a></div>
<ul>
<script src="/feeds/posts/default/-/Y?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
<div class='grup'><div class='grup-judul'><a name="Z">Z</a></div>
<ul>
<script src="/feeds/posts/default/-/Z?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul>
</div>
</div>
</div>
3. Simpan dan perbarui kode yang tadi disalin pada halaman yang kita buat, terakhir buat postingan dan beri label huruf dan otomatis muncul pada halaman yang tadi kita buat.
LIVE | DEMO
Sumber : https://ex10sionlabs.blogspot.com/2017/04/membuat-auto-index-anime-list-di-blogger.html
Post a Comment