Anime Gosip Auto Index Part 2

Post kali ini aku akan membagikan tutorial Cara menciptakan Anime Informasi Auto Index Part 2, gosip anime auto index ini hampir sama dengan gosip anime awsubs, post ini juga hampir sama dengan artikel yang aku buat ialah Anime Informasi Auto Index DiBlogger Part 1, cuma beda dilist episodenya.

Informasi anime auto index ini sudah aku buat responsive jadi kalian tidak perlu khawatir lagi versi mobilenya, kalian dapat lihat pola atau sample yang sudah jadi dibawah ini.

Demo

Cara Membuat Anime Informasi Auto Index Part 2

1. Buka Blogger > Tema > Edit HTML, Cek javascript berikut diatas ,jika sudah ada abagikan.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>



2. 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}}



3. Lalu simpan Javascript ini diatas </head>

<b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'> <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+'" sasaran ="_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+"' sasaran ='_blank'>Download</a></span></li>")}}; //]]></script> </b:if>



4. jika sudah Save Tema.
5. Buatlah Postingan memakai HTML berikut dengan Mode HTML bukan Compose,
   jangan lupa edit bab 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="Anime Informasi Auto Index Part 2" alt="Post kali ini aku akan membagikan tutorial  Anime Informasi Auto Index Part 2">          </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&amp;alt=json-in-script&amp;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, biar bermanfaat & tetap kunjungi blog Arlethdesign untuk artikel menarik lainnya, terima kasih.

Bagikan Artikel ini