Pagi semuanya, kali ini saya akan membagikan tutorial Cara Membuat Auto Index Anime List. Pasti kamu pernah merasa malas & lelah mengurus Anime list/ Daftar Isi blog kalian dikarenakan konten atau postingan blog tersebut terlalu banyak, makanya dari itu saya disini akan membagikannya tips agar kalian tidak perlu mengedit atau mengisi Anime Listnya lagi, jadi kalian tidak kerepotan mengisi daftar isi setiap kali posting.
Ok kita mulai saja tutorialnya
- Pertama Buka Blogger > Buat Postingan Berlabel dari A sampai Z berdasarkan Huruf Awal Judul Postingan Tersebut
- Kedua, Buat Halaman/Page baru atau yang sudah ada silahkan kalian edit, Lalu Salin CSS dibawah ini masukkan ke Halaman blog kamu
<style>
/* CSS By Arleth98 */
.listanim-wrapper{max-width:1060px;margin:auto}
.abjad{padding:1px 0;text-align:center;margin:0 0 5px 0}
.abjad a{display:block;padding:5px 0;width:26.7px;float:left;background:#424242;font-weight:500;color:#FFFFFF;text-decoration:none;}
.abjad a:hover{background: #2977BE;text-decoration: none;}
.clear{clear:both}
.grup-judul{font-family:segoe ui;font-weight:bold;color:#333;font-size:13px;border-bottom:2px solid #2977BE;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>
<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="#0">0</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="0">0</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>
Beri Label di Post dengan Huruf Kapital (Sesuai Abjad dari Huruf depan judul post)
Contoh : Death Note > Label nya D
Sekian tutorial dari saya, semoga bermanfaat buat kalian para blogger, Terima kasih.
0 Response to "Auto Index Anime list Responsive Blogger"
Post a Comment