Sedikit Info Seputar
Membagi Artikel Jadi Tiga Bagian Dalam Satu Laman
Terbaru 2017
- Hay gaes kali ini team Android Media, kali ini akan membahas artikel dengan judul Membagi Artikel Jadi Tiga Bagian Dalam Satu Laman, kami selaku Team Android Media telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Android Media. semoga isi postingan tentang
Artikel Tutorial Blogspot, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Membagi Artikel Jadi Tiga Bagian Dalam Satu Laman
Terbaru
link: Membagi Artikel Jadi Tiga Bagian Dalam Satu Laman
Berbagi Membagi Artikel Jadi Tiga Bagian Dalam Satu Laman Terbaru dan Terlengkap 2017
Cara membagi konten atau artikel ke dalam tiga bagian dalam satu halaman - Teman blogger kali ini saya akan membuat tutorial untuk membuat posting ke dalam beberapa bagian, cara kerja script ini sebenarnya mirip dengan Tabviews yang kita kenal namun jika dilihat dari layout jauh berbeda.
Jika pada tabview konten dipisahkan bertujuan untuk mengelompokkan dalam kategori atau label khusus akan tetapi pada tutorial ini bertujuan untuk memisahkan artikel karna jumlah artikel yang cukup banyak jadi kita tidak perlu meng-scroll terlalu panjang kebawah cukup mengklik tombol untuk beralih ke konten selanjutnya.
View Live Demo
Berikut tutorialnya :
Pastikan template blogger teman blogger sudah terdapat Jquery :
Berikut tutorialnya :
Pastikan template blogger teman blogger sudah terdapat Jquery :
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Jika sudah abaikan saja,,,,dan jika belum ada silahkan tambahkan sebelum atau diatas <head>. Untuk membuat artikel posting teman blogger tebagi 3 silahkan gunakan kode di bawah ini. Simpan kode dalam post atau page pada mode HTML.
<style>
.post-pagination {
margin: 20px auto;
text-align: center;
width: 100%;
}
.button_1, .button_2, .button_3 {
border: 2px solid #f4655f;
font-weight: 900;
padding: 6px 36px;
color:#f4655f;
transition:ease 0.69s !important;
}
.button_1:hover, .button_2:hover, .button_3:hover {
background: none repeat scroll 0 0 #f4655f;
color: #fff;
text-decoration: none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.button_1').click(function(){
jQuery('.content_1').fadeIn('slow');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_2').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeIn('slow');
jQuery('.content_3').fadeOut('fast');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_3').css('background','#fff');
jQuery('.button_3').css('color','#F4655F');
return false;
});
jQuery('.button_3').click(function(){
jQuery('.content_1').fadeOut('fast');
jQuery('.content_2').fadeOut('fast');
jQuery('.content_3').fadeIn('slow');
jQuery(this).css('background','#F4655F');
jQuery(this).css('color','#fff');
jQuery('.button_1').css('background','#fff');
jQuery('.button_1').css('color','#F4655F');
jQuery('.button_2').css('background','#fff');
jQuery('.button_2').css('color','#F4655F');
return false;
});
});
</script>
<div class="content_1">
Add Content Here
</div>
<div class="content_2" style="display: none;">
Add Content Here
</div>
<div class="content_3" style="display: none;">
Add Content Here
</div>
<div class="post-pagination">
<a class="button_1" href="#">1</a>
<a class="button_2" href="#">2</a>
<a class="button_3" href="#">3</a>
</div>Silahkan ganti text Add Content Here dengan konten yang anda inginkan, baik itu text, gambar video dan lain-lain...
Itulah sedikit Artikel Membagi Artikel Jadi Tiga Bagian Dalam Satu Laman terbaru dari kami
Semoga artikel Membagi Artikel Jadi Tiga Bagian Dalam Satu Laman yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Android Media. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Membagi Artikel Jadi Tiga Bagian Dalam Satu Laman
