Cara Membuat Info Anime Seperti Kurogaze [Wordpress]

Hallo, Gimana kabarnya , masih jones apa udah punya ,Wkwkwk :D

Yups, Ketemu lagi ama ane Gin-san

Kali ini saya mau berbagi cara membuat info anime seperti kurogaze untuk wordpress
Yoosshh !!! langsung aja nih kode nya :D

Ini Untuk PHP Info anime nya , taruh di single-anime.php atau di tempatnya info anime

HTML<?php if (have_posts()) : while (have_posts()) : the_post(); ?>



<div class="fpost">



<div class="embed">

<?php echo get_post_meta($post->ID, "anime", true); ?>

<div class="data">
<div class="rightnime">
<div class="imgnime"><?php if (has_post_thumbnail() ) { the_post_thumbnail ();}?></div>
<div class="navinime">
<div class="navibolz"><a href="#details">Details</a></div>
<div class="navibolz"><a href="#sinopsis">Synopsis</a></div>
<div class="navibolz"><a href="#download">Download Link</a></div>
<div class="navibolz"><a href="#recommendations">Recommendations</a></div>
</div>
<div class="nimestats">
<div class="ohyes rate"><strong>Score</strong><span><?php echo get_post_meta($post->ID, 'skor', true);?></span><i class="icon-star"></i> <i class="icon-star"></i> <i class="icon-star"></i> </div>
<div class="ohyes detyp">
<span class="ohtype"><?php echo get_post_meta($post->ID, 'type', true);?></span>
<span class="ohtype"><?php echo get_post_meta($post->ID, 'studio', true);?></span>
<span class="ohtype" style="border-right:none;"><?php echo get_post_meta($post->ID, 'eps', true);?> Episodes</span>
</div>
</div>
<div class="nimestatz">
<p class="infostats">Informasi selengkapnya mengenai <b><?php the_title(); ?></b> beserta link download dapat ditemukan dibawah ini.</p>
</div>
<div class="leftnime">
<div class="datanime">
<div id="details"></div>
<div class="datatitit">Information</div>
<div class="infonime"><b>Title</b>: <?php the_title(); ?></div>
<div class="infonime"><b>Type</b>: <?php echo get_post_meta($post->ID, 'type', true);?></div>
<div class="infonime"><b>Episode</b>: <?php echo get_post_meta($post->ID, 'eps', true);?></div>
<div class="infonime"><b>Status</b>: <?php echo get_post_meta($post->ID, 'status', true);?></div>
<div class="infonime"><b>Studios</b>: <?php echo get_post_meta($post->ID, 'studio', true);?></div>
<div class="infonime"><b>Genre</b>: <?php echo get_post_meta($post->ID, 'genre', true);?></div>
<div class="infonime"><b>Duration</b>: <?php echo get_post_meta($post->ID, 'durasi', true);?></div>
<div class="infonime"><b>Score</b>: <?php echo get_post_meta($post->ID, 'skor', true);?></div>
</div>
<div class="descnime">
<div id="sinopsis"></div>
<div class="datatitit">Sinopsis</div>
<h2 class="dat5"><?php echo get_post_meta($post->ID, 'sinopss', true);?></h2>
</div>
</div>
</div>
</div>
<div class="judulanime">List Episode "<?php the_title(); ?>" <div class="pdate">Download</div></div>

<?php endwhile;endif ?>

<?php global $post; ?>
<? $slug = get_post( $post->ID, "anime", true )->post_name; ?>
<? $recent = new WP_Query("category_name=$slug&showposts=100"); while($recent->have_posts()) : $recent->the_post(); ?>
<li class="anilist"><div class="tautan"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div></div><div class="ldate"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">Download</a></div></li>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</div>



</div>

</div>

Note: Untuk kalian jika menggunakan Metabox kodenya menggunakan get_post_meta , jika kalian menggunakan Taxonomy ganti dengan get_the_term_list :D


Dan ini untuk kode CSS nya

css.rightnime{overflow:hidden;font-family:"Open sans",sans-serif;}
.imgnime{float:left;margin-right:10px;}
.imgnime img{padding:3px;border:1px solid #ddd;background:#FFF none repeat scroll 0% 0%;width:185px;height:260px;}
.navinime{overflow:hidden;border-bottom:2px solid #ddd;margin:0 0 15px 0;font-size:13px;color:#fff;}
.navibolz{float:left;margin-right:15px;padding:5px;}
.navibolz a{text-decoration:none;color:#fff;}
.nimestats{background:#f5f5f5;border:1px solid #dfdfdf;border-radius:2px;overflow:hidden;display:block;padding:10px 15px;}
.ohyes{float:left;text-align:center;}
.ohyes.rate{border-right:1px solid #ccc;padding-right:20px;}
.rate strong{display:block;background:#123F8F;color:#fff;padding:2px 15px;border-radius:3px;font-weight:normal;font-size:12px;text-transform:uppercase;}
.rate span{font-size:25px;font-weight:bold;display:block;}
.rate i{color:#D4C310;font-size:12px;}
.ohyes.detyp{font-weight:bold;font-size:13px;border-left:1px solid #fcfcfc;top:30px;position:relative;}
.ohtype{padding:0 10px;border-right:1px solid #ccc;display:block;overflow:hidden;float:left;text-overflow:ellipsis;max-width:110px;white-space:nowrap;}
.infostats{text-align:justify;background:#f6f6f6;padding:5px 10px;height:60px!important;display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;border:1px solid #ebebeb;border-radius:1px;line-height:21px;}
.leftnime{margin:15px 0;display:block;clear:both;}
.datanime{position:relative;padding:5px;}
.datatitit{font-weight:bold;font-size:15px;border-bottom:1px solid #aaa;padding:5px;margin-bottom:5px;color:#fff;}
.dat5{color:#fff;font-size:12px;}
.infonime{font-size:13px;line-height:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px;color:#fff;}
.infonime b{display:block;float:left;width:70px;color:#fff;}
.descnime{text-align:justify;font-size:14px;margin:5px 0;line-height:21px;padding:5px;}
.sinopsis{color:#3f3f3f;font-size:13px;font-family:"Open sans",sans-serif;padding:0 5px;}
.judulanime{position:relative;padding:6px 5px;color:#FFF;font-weight:bold;font-size:13px;font-family:helvetica,sans-serif;border-bottom:1px solid #FFF;background:#333;}
.pdate{position:absolute;top:0;line-height:26px;right:0;padding:0 6px;text-align:center;border-left:1px solid #555;width:120px;}
.anilist:nth-child(odd){background:#FAFAFA;}
.anilist{list-style:none;padding:3px 5px;border-bottom:1px solid #ccc;line-height:25px;height:25px;border-left:1px solid #ccc;border-right:1px solid #ccc;}
.tautan{width:467px;font-size:13px;float:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-size:14px;background-position:0;}
.tautan a{color:#505050;}
.ldate{float:right;font-size:13px;text-align:center;color:#505050;font-family:'Open sans',sans-serif;border-left:1px solid #FFFFFF;background:#E5E8F0;margin-top:-32px;width:135px;height:32px;}
.ldate a{color:#555;}

Ok silahkan mencoba :D

Jika ada Error silahkan comment
Jangan lupa di Share :D

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest