8/04/2016T8/04/2016

Cara Membagi Postingan Menjadi Beberapa Halaman

/* kode iklan */
/* kode iklan */
Cara Membagi Postingan Menjadi Beberapa Halaman
Mau Postingan anda dibuat beberapa halaman seperti contoh disamping seperti ini.. jika mau simak tutorial berikut ini
Sebenarnya jika anda menggunakan website wordprees tidak usah susah payah mengikuti tutorial ini..!! tapi jika anda menggunakan website blogger dan anda ingin membagi postingan menjadi beberapa halaman silahkan cermati tutorial ini.


Dengan adanya fitur ini page view blog anda pasti lebih tinggi, karena untuk 1 postingan bisa memiliki 2 atau 3 pegeview dalam 1 postingan. Tak mengherankan website dengan platfrom wordpress mendapat ranking alexa yang tinggi karena website dengan platfrom wordpress sudah memiliki fasiitas yang satu ini. Lalu untuk website dengan Platfrom Blogger Gemana min ?? Ya mau gemana lagi website dengan Platfrom Blogger ini tidak ada fasilitas ini. Loh kok gak ada min?? Ya namanya juga gratis kalo mau yang komplit ente tinggal ganti platfrom aja ke wordpress, tapi ya kalo ente punya banyak duit.....

Yang pertama Tambahkan ode dibawah ini pada template blog diatas </body>

//add jQuery library

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

<script style='text/javascript'>
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').show('slow');
jQuery('.content_1').top;('#')
jQuery('.content_2').hide('slow');
jQuery('.content_3').hide('slow');
return false;
}); 

jQuery('.button_2').click(function(){
jQuery('.content_1').hide('slow');
jQuery('.content_2').show('slow');
jQuery('.content_2').top('#');
jQuery('.content_3').hide('slow');
return false;
}); 

jQuery('.button_3').click(function(){
jQuery('.content_1').hide('slow');
jQuery('.content_2').hide('slow');
jQuery('.content_3').show('slow');
jQuery('.content_3').top('#');
return false;
});
});
</script> 

jika tidak work silahkan coba dengan ini:

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

<script style='text/javascript'>
jQuery(document).ready(function(){
jQuery(&#39;.button_1&#39;).click(function(){
jQuery(&#39;.content_1&#39;).show(&#39;slow&#39;);
jQuery(&#39;.content_1&#39;).top;(&#39;#&#39;)
jQuery(&#39;.content_2&#39;).hide(&#39;slow&#39;);
jQuery(&#39;.content_3&#39;).hide(&#39;slow&#39;);
return false;
});
jQuery(&#39;.button_2&#39;).click(function(){
jQuery(&#39;.content_1&#39;).hide(&#39;slow&#39;);
jQuery(&#39;.content_2&#39;).show(&#39;slow&#39;);
jQuery(&#39;.content_2&#39;).top(&#39;#&#39;);
jQuery(&#39;.content_3&#39;).hide(&#39;slow&#39;);
return false;
});
jQuery(&#39;.button_3&#39;).click(function(){
jQuery(&#39;.content_1&#39;).hide(&#39;slow&#39;);
jQuery(&#39;.content_2&#39;).hide(&#39;slow&#39;);
jQuery(&#39;.content_3&#39;).show(&#39;slow&#39;);
jQuery(&#39;.content_3&#39;).top(&#39;#&#39;);
return false;
});
});
</script>

Perhatikan tulisan yang berwarna biru, jika blog sudah memiliki script sejenis, maka code itu tidak usah dipakai..

Pastekan,save tamplate

Kedua: Buat postingan dulu, atau bisa edit postingan yang sudah ada..Pada halaman postingan pilih menu HTML kemudian bagilah postingan dengan menambah DIV atau SPAN dengan menambah atribut CLASS 

Berikut Contohnya:

<div class="content_1">
DISINI POSTING HALAMAN PERTAMA
</div>

<div class="content_2" style="display:none;">
DISINI POSTING HALAMAN KEDUA
</div>

<div class="content_3" style="display:none;">
DISINI POSTING HALAMAN KETIKA
</div>

Ketiga: Untuk menampilkan Button halaman nya, masih dalam mode HTML, tambahkan lagi kode berikut dibawah postingan tadi, berikut kode nya :

<p style="font-weight:bold;">Pages: 
<a href="#" class="button_1"> 1</a>
<a href="#" class="button_2"> 2</a> 
<a href="#" class="button_3"> 3</a></p> 

Jika ingin menampilkan button dalam bentuk gambar, berikut kode nya ;

<p style="font-weight:bold;font-size:22px">Pages: 
<a href="#" class="button_1"><img src="http://2.bp.blogspot.com/-uw7bKltgMkQ/VLDn7xNDOuI/AAAAAAAACnw/njkt_4kOMm0/s1600/1.png"/></a>

<a href="#" class="button_2"><img src="http://2.bp.blogspot.com/-6awTr_uIiy8/VLDn8DXAVlI/AAAAAAAACn4/e5vpCol4vhk/s1600/2.png" /></a> 

<a href="#" class="button_3"><img src="http://4.bp.blogspot.com/-x7TFtw7YNK0/VLDn8H_xs3I/AAAAAAAACn0/681_f2L8gOA/s1600/3.png" /></a>
</p> 

Jika Ingin 4 halaman

1. Script diatas memang disiapkan untuk 3 halaman, sedangkan kalau ingin 4 halaman maka ganti script 1 dengan berikut 


<script style="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').show('slow');
jQuery('.content_2').hide('slow');
jQuery('.content_3').hide('slow');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').hide('slow');
jQuery('.content_2').show('slow');
jQuery('.content_3').hide('slow');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').hide('slow');
jQuery('.content_2').hide('slow');
jQuery('.content_3').show('slow');
return false;
});
jQuery('.button_4').click(function(){
jQuery('.content_1').hide('slow');
jQuery('.content_2').hide('slow');
jQuery('.content_3').hide('slow');
jQuery('.content_4').show('slow');
return false;
});
});
</script>


2. Pada Konten postingan tambahkan lagi 

<div class="content_4" style="display:none;">
DISINI POSTING HALAMAN KEEMPAT
</div>

3. Untuk button dengan angka tambahkan kode 

<a href="#" class="button_4"> 4</a> Sebelum kode </P>

4. Jika ingin button dengan gambar tambahkan kode berikut sebelum kode </P>

<a href="#" class="button_4"><img src="https://2.bp.blogspot.com/-bTZOqmoT2_E/VZVkndipwLI/AAAAAAAAC7Y/V6obeyw_1H4/s1600/4.png" /></a>

Setelah semuanya selesai simpan atau publikasikan Semoga berhasil ya....
/* kode iklan */

jangan lupa iklannya diklik ya, to "Cara Membagi Postingan Menjadi Beberapa Halaman"

Post a Comment