Cara Membuat Bar Select Chapter WordPress

Posted By Admin 4 months ago
Halo Sobat Blogger , Sudah 3 Hari tidak Update Tutorial hahah .. Maaf admin sedang banyak kesibukan , tidak sempat buat update . di Tutorial Kali ini saya akan membuat Cara Membuat Select Chapter WordPress , tapi karna ada permintaan Visitor buat sekalian Bar nya , ya sudah saya buat juga hahah. Langsung saja disimak tutorial berikut Contoh Demo : Click Demo Here Note : Tutorial kali ini hanya support untuk kalian yang menggunakan Theme memakai Meta Box saja

1. Memasang CSS di Style.css

Silahkan kalian masukkan di style.css theme kalian masing-masing
/* Select Chap 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;}
Jika sudah , silahkan kalian Save.

2. HTML & Query

Dikode kali ini saya akan menambahkan HTML dan Query nya buat Memanggil Postingan agar bisa dipilih
<nav class="navbar navbar-default" role="navigation">
<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 Chapter Manga</option>
<?php $chap = get_post_meta( get_the_ID(), 'prefix_metaIDPOSTTYPE', true ); ?>
<?php $cukchap = new WP_Query( array( 'showposts' => '1000' ,'post_type' => 'post' ,'meta_key' => 'prefix_metaID', 'meta_value' => 'true', 'orderby' => 'prefix_metaID','order' => 'DESC', 'meta_key' => 'prefix_metaIDPOSTTYPE', 'meta_value' => $chap) ); ?>
<?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 $meta; ?> - <?php $meta = get_post_meta( get_the_ID(), 'prefix_metaID', true ); echo $meta; ?>
</option>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</select>
<a class='download' href="<?php $meta = get_post_meta( get_the_ID(), 'prefix_metaID', true ); echo $meta; ?>">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>
Jika kalian menemukan Banyak metaID disitu , maksudnya adalah ID Meta yang kalian pakai di theme kalian masing-masing. Sama seperti Prefix nya , sesuaikan juga dengan prefix yang kalian pakai di Theme kalian masing-masing. Selamat Mencoba 😀

Cukstudio adalah Website dimana kami membagikan Project Theme Anime WordPress dan Bermacam – macam Tutorial Trik Tips dari seputar dunia Blogging.