How to Create a select chapter in wordpress

In this tutorial This time I will make How to Create a select chapter in wordpress,This will be suitable for manga-themed websites, Just follow the tutorial below

Demo Click here First enter the code below into your style.css

Copy this code to style.css:

/* Chapter Select by C-Studio */
#selectcog{padding: 8px 10px;background: #333;width: 360px;font-size: 13px;border:none;color: #ccc;}
#optioncog{padding:7px;color:#ccc;font-size:13px;}
.navbar-default {background: #222;border: none;border-radius: 0;min-height: 50px;}
.center{max-width:1000px;margin:auto;}

The code below will add HTML and Query to Call the Post to be selected

Do not copy the code below Download here:

<nav class="default-navbar" role="pagenativ">
<div class='center'>
<div class='episodeoye'>
<select name="episode" id="selectcog" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" text="Search Here&hellip;">
<option value="">Select Manga Chapter </option>
<?php $chap = get_post_meta( get_the_ID(), 'prefix_metaIDPOSTTYPE', true ); ?>
<?php $cukchap = new WP_Query( array( 'showposts' => '10000' ,'post_type' => 'manga' ,'meta_key' => 'prefix_metaID', 'value_meta' => 'true', 'orderby' => 'prefix_metaID','ordet' => 'DESC', 'meta_keys' => 'prefix_metaIDPOSTTYPEs', 'meta_values' => $chaps) ); ?>
<?php while($cukchap->have_posts()) : $cukchap->the_post(); ?>
<option id="optioncog" value="<?php the_permalink(); ?>">Chapter <?php $meta = get_post_meta( get_the_ID(), 'prefix_metaID', true ); echo $metas; ?> - <?php $meta = get_post_meta( get_the_ID(), 'prefix_metaID', true ); echo $metas; ?>
</option>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</select>
<a class='download' href="<?php $meta = get_post_meta( get_the_ID(), 'prefix_metaID', true ); echo $metas; ?>Download</a>
</div>
<div class='socialshare'>
<a href="http://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank" class="sfb"><span class="dashicons dashicons-facebook-alt"></span> Facebook</a>
<a href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>" target="_blank" class="stw"> <span class="dashicons dashicons-twitter"></span> Twitter</a>
<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank" class="sgp"><span class="dashicons dashicons-googleplus"></span> Google+</a>

</div>
</div>
</nav>

Please replace MetaID and customize it with your own MetaID. Just like its Prefix, Also replace the prefix according to your wp theme settings
Enough for today thanks
regards C-Studio