Post kali ini saya akan membagikan tutorial Cara membuat Anime Informasi Auto Index Part 2, informasi anime auto index ini hampir sama dengan informasi anime awsubs, post ini juga hampir sama dengan artikel yang saya buat yaitu Anime Informasi Auto Index DiBlogger Part 1, cuma beda dilist episodenya.
Informasi anime auto index ini sudah saya buat responsive jadi kalian tidak perlu khawatir lagi versi mobilenya, kalian bisa lihat contoh atau sample yang sudah jadi dibawah ini.
Cara Membuat Anime Informasi Auto Index Part 2
- Buka Blogger > Tema > Edit HTML, Cek javascript berikut diatas </head>, jika sudah ada abaikan.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>
- Simpan CSS ini diatas </style>
/* Informastion Anime Auto Index Part 2 - Arlethdesign
==================================================== */
#bungkus-inspect{overflow:hidden;position:relative;clear:both}
#bungkus-inspect .cover-image{float:left;margin-right:5px}
#bungkus-inspect .cover-image img{width:165px;height:230px;border:1px solid #E7E7E7;margin-top:0;border-radius:0;background:#FFF}
#bungkus-inspect h3.line-titles {font-size:15px;margin:0 auto 5px;display:block;border-bottom:4px solid #222;padding-bottom:5px;}
#bungkus-inspect h3.line-titles span {padding-bottom:5px;border-bottom:4px solid #848484;}
#bungkus-inspect .docs-anime {padding:10px;background:#f5f5f5;border:1px solid #ccc;}
#bungkus-inspect .yuu-inf{font-family:"Open sans",sans-serif;font-size:12px;line-height:25px;padding:0 5px;border-bottom:1px solid #FFF;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bungkus-inspect .yuu-inf:nth-child(2n+1){background:none repeat scroll 0% 0% #E5E5E5}
#bungkus-inspect .yuu-inf b{display:block;float:left;width:95px}
#bungkus-inspect .yuu-inf a{color:#333}
#animeinfos{clear:both}
#animeinfos .episodelist .tit{text-align:center;margin-bottom:10px;font-weight:bold;line-height:20px;font-size:14px;color:rgba(13,44,134,0.7)}
#animeinfos .episodelist ul{margin:auto;list-style:none;}
#animeinfos .episodelist ul li:hover,#animeinfos .episodelist ul li:nth-child(odd):hover{background-color:#e5e5e5;transition:all .5s;}
#animeinfos .episodelist ul li:nth-child(odd){background-color:#f7f7f7}
#animeinfos .episodelist ul li{display:block;border-bottom:1px solid #E8E8E8;margin:auto;font-size:11px;position:relative;overflow:hidden;clear:both;transition:all .5s;}
#animeinfos .episodelist ul .top span{margin:auto;background:linear-gradient(0deg,rgb(71,97,173) 30%,rgb(85,107,170) 70%);color:#FFF}
#animeinfos .episodelist ul li .t1{width:65.97%;padding:0 0 0 7px;}
#animeinfos .episodelist ul li .t2{width:17%;text-align:center;padding:0 2px;}
#animeinfos .episodelist ul li .t3{width:15%;text-align:center;border-right:0;}
#animeinfos .episodelist ul li span{display:block;padding:0;margin:auto;color:rgba(0,0,0,0.8);float:left;border-right:1px solid #E8E8E8;height:30px;line-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#animeinfos .episodelist ul li a{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media screen and (max-width:767px){#bungkus-inspect .cover-image{float:none;margin:0 auto 4px;text-align:center}#bungkus-inspect h3.line-titles span{border:none}#animeinfos .episodelist ul li .t1{width:100%;padding:0 5px}#animeinfos .episodelist ul li .t2,#animeinfos .episodelist ul li .t3{display:none}}
- Lalu simpan Javascript ini diatas </head>
<b:if cond='data:blog.pageType in {"static_page","item"}'>
<script type='text/javascript'>//<![CDATA[
var post_numb=9999;var posts_upto=true;function post_infoanime(e){for(var l=0;l<post_numb;l++){var d,f=e.feed.entry[l],p=f.title.$t;if(l==e.feed.entry.length){break}for(var h=0;h<f.link.length;h++){if("replies"==f.link[h].rel&&"text/html"==f.link[h].type){var b=f.link[h].title,c=f.link[h].href}if("alternate"==f.link[h].rel){d=f.link[h].href;break}}var o=f.published.$t,m=o.substring(0,4),k=o.substring(5,7),g=o.substring(8,10),i=new Array;i[1]="January",i[2]="February",i[3]="March",i[4]="April",i[5]="May",i[6]="June",i[7]="July",i[8]="August",i[9]="September",i[10]="October",i[11]="November",i[12]="December",document.write('<li class="last-post-item">'),document.write('<span class="t1"><a href="'+d+'" target ="_top">'+p+"</a></span>"),1==posts_upto&&document.write('<span class="t2">'+i[parseInt(k,10)]+" "+g+", "+m+"</span>");var n="",a=0;document.write("<span class='t3'><a href='"+d+"' target ='_blank'>Download</a></span></li>")}};
//]]></script>
</b:if>
- jika sudah Save Tema.
- Buatlah Postingan menggunakan HTML berikut dengan Mode HTML bukan
Compose,
jangan lupa edit bagian yang sudah ditandai <div id='bungkus-inspect'>
<h3 class="line-titles"><span>TITLE ANIME</span></h3>
<div class="kantong-kresek">
<div class="kiri">
<div class="cover-image">
<img height='235' width="165" src="LINK IMAGE" title="TITLE ANIME" alt="TITLE ANIME">
</div>
</div>
<div class="kanan">
<div class="data">
<div class="yuu-inf"><b>Japanese</b>: TEXT</div>
<div class="yuu-inf"><b>Premiered</b>: TEXT</div>
<div class="yuu-inf"><b>Status</b>: TEXT</div>
<div class="yuu-inf"><b>Genre</b>: TEXT</div>
<div class="yuu-inf"><b>Durasi</b>: TEXT</div>
<div class="yuu-inf"><b>Episode</b>: TEXT</div>
<div class="yuu-inf"><b>Rating</b>: TEXT</div>
<div class="yuu-inf"><b>Aired</b>: TEXT</div>
<div class="yuu-inf"><b>Credit</b>: TEXT</div>
</div>
</div>
</div>
<br/>
<div class='docs-anime'>
<h3 class="line-titles"><span>Sinopsis</span></h3>
<div style="text-align:center;margin:10px auto;">
Description ANIME HERE
</div>
</div>
</div>
<br/>
<div id='animeinfos'>
<div class="episodelist">
<div class="tit"><strong>LIST TITLE ANIME</strong></div>
<ul>
<li class="top"> <span class="t1">List Episode</span> <span class="t2">Release Date</span> <span class="t3">Download</span></li>
<script src='/feeds/posts/default/-/LABEL POST?orderby=published&alt=json-in-script&callback=post_infoanime'></script>
</ul>
</div>
</div>
| Tag | Keterangan |
|---|
| LABEL POST | Ganti Dengan Label post |
| LINK IMAGE | Ganti Dengan Gambar Cover Anime |
| TITLE ANIME | Ganti dengan Judul anime |
| TEXT | Ganti Sesuai Dengan Deskripsi anime |
| Description ANIME HERE | Ganti Dengan Deskripsi anime |
Sekian tutorial Cara Membuat Anime Informasi Auto Index Part 2 Diblogger, semoga bermanfaat & tetap kunjungi blog Arlethdesign untuk artikel menarik lainnya, terima kasih.
Comments
Post a Comment