Anime Informasi Awsubs Part 2

Cara menciptakan Anime informasi menyerupai awsubs, Cara menciptakan Anime informasi menyerupai awsubs 2018 artikel kali ini sama menyerupai tutorial yang sebelumnya adalah Anime Info Auto Index Part 1, yang membedakan hanya stylenya saja, anime informasi kali ini menyerupai dengan anime informasi awsubs 2018 ini.

Kalian dapat cek demo atau pratinjau nya dibawah ini.

Demo

Cara Membuat Anime Info Awsubs [Part 2]

1. Buka Blogger > tema > Edit HTML
2. Simpan CSS berikut di dalam <style> ... </style>

/* Anime Info Awsubs - Arlethdesign    ================================ */ @import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i'); #--info-statistik{overflow:hidden;clear:both} #--info-statistik .--left{float:left;overflow:hidden;max-width:190px;margin-right:10px} #--info-statistik .--right{line-height:normal;list-style:none;overflow:hidden;margin:auto;padding:0} #--info-statistik .--right li{margin:0 auto 1px;padding:8px 10px;line-height:normal} #--info-statistik .--right li:nth-child(even){background:#f5f5f5} #--info-statistik .--right li:nth-child(odd){background:#fafafa} #--info-statistik .--right li>b{min-width:100px;display:inline-block;float:left} #--sinopsis-info{padding:10px;border:1px solid #e1eaf0;line-height:21px;overflow:hidden;clear:both;margin:10px auto} #--sinopsis-info>h3{margin:0;font-weight:500i;font-size:16px;font-family:"Roboto",sans-serif} #--sinopsis-info>p{text-align:justify;line-height:20px;font-size:13px;margin:1.5em 0} #--box-list>h3{margin:0;padding:7px 12px;color:#fff;background:#7598e3;border-radius:5px;font-size:14px} .--wrap{margin:auto;padding:0;overflow:hidden;clear:both;list-style:none} .--wrap .--post{display:block;margin:auto;line-height:20px;border-bottom:1px solid #eee;} .--wrap .--post span{display:inline-block;padding:5px;margin:auto;} .--wrap .--post .--item a{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .--wrap .--post .--update{float:right;color:#999;font-size:12px;} @media screen and (max-width:600px){ .--wrap .--post .--update{display:none} }



3. Jika sudah, tambahkan Javascript berikut ke atas </head>

<b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'> <script type='text/javascript'>//<![CDATA[ var posts_no=9999;var post_rilis=true;function post_latest(e){document.write('<ul class="--wrap">');for(var l=0;l<posts_no;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]="Jan",i[2]="Feb",i[3]="Mar",i[4]="Apr",i[5]="May",i[6]="Jun",i[7]="Jul",i[8]="Agu",i[9]="Sep",i[10]="Okt",i[11]="Nov",i[12]="Des",document.write('<li class="--post">'),document.write('<span class="--item"><a href="'+d+'" >'+p+"</a></span>"),1==post_rilis&&document.write('<span class="--update">'+i[parseInt(k,10)]+" "+g+", "+m+"</span>");var n="",a=0;document.write("</li>")}document.write("</ul>")}; //]]></script> </b:if>

4. Jika Sudah Save tema
5. Lalu Buatlah Post atau Page!! Untuk Anime Info nya
6. Tambahkan HTML & Javascript berikut ke dalam post/page tersebut.

<div id='--info-statistik'> <div class='--left'><img src='LINK GAMBAR' alt='TITLE' title='TITLE'/></div> <ul class='--right'>  <li><b>Japanese</b>: Nama Lain / Nama Jepang Anime</li>  <li><b>Producer</b>: Produser Anime</li>  <li><b>Type</b>: Tipe Anime</li>  <li><b>Status</b>: Status Anime</li>     <li><b>Genres</b>:       <a href="#">Genre Anime</a>,       <a href="#">Genre Anime</a>,       <a href="#">Genre Anime</a>     </li>  <li><b>Durasi</b>: Durasi Anime</li>  <li><b>Episode</b>: Episode Anime</li>  <li><b>Rating</b>: Rating Anime</li>  <li><b>Added On</b>: Tanggal Rilis Anime</li> </ul> </div>  <div id='--sinopsis-info'> <h3>Synopsis ANIME TITLE </h3> <p>SINOPSIS ANIME</p> <center> <iframe width="560" height="315" src="https://www.youtube.com/embed/ku7XxxXpIKI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </center> </div>   <div id='--box-list'> <h3>Episode TITLE ANIME</h3> <script src='/feeds/posts/default/-/LABEL ANIME?orderby=published&amp;alt=json-in-script&amp;callback=post_latest'></script> <noscript>Opps, Javascript No Load, Please Reload Again</noscript> </div> 



7. Silahkan edit bab yang sudah di tandai.

Sekian tutorial kali ini wacana Cara Membuat Anime Info Awsubs [Part 2], kalau masih resah silahkan tinggalkan komentar dibawah ini, & hingga jumpa di artikel berikutnya. Terima kasih.

Bagikan Artikel ini