Creat post pagination blogger - beberapa waktu kemudian aku telah menulis cara menciptakan page navigasi dan kali ini aku akan bebagi cara membuat navigasi untuk post blogger, mungkin anda pernah melihat artikel yang di beri navigasi (post pagination) sehingga artikel tersebut terlihat ibarat lembaran buku. Post pagination sangat berbeda dengan page navigasi, post pagination berfungsi untuk menampilkan artike yang panjang menjadi lembaran lembaran pendek sehingga pembaca tidak merasa penat melihat goresan pena yang sangat panjang.
Pertama-tama install terlebih dahulu jquery/2.0.0 pada template anda, bila pada template anda sudah tersedia jquery/2.0.0 maka lewati saja langkah ini. namun bila belum tersedia silahkan pasang jquery berikut ini di bab bawah <head>. tempatkan di mana saja di bawah <head> atau di atas </head> juga bisa
Membuat navigasi pada post blogger juga sanggup meningkatkan traffik pengunjung blog anda, alasannya yakni beberapa style navigasi pada artikel meload 3 hingga 4 kali untuk satu judul artikel, namun post pagination yang akan kita buat kali ini tidak di lengkapi dengan load pada setiap laman artikel alasannya untuk menghemat waktu pembaca.
 |
| Cara Membuat Navigasi Untuk Post Blogger |
Cara Memasang Navigasi Untuk Post Blogger.
Pertama-tama install terlebih dahulu jquery/2.0.0 pada template anda, bila pada template anda sudah tersedia jquery/2.0.0 maka lewati saja langkah ini. namun bila belum tersedia silahkan pasang jquery berikut ini di bab bawah <head>. tempatkan di mana saja di bawah <head> atau di atas </head> juga bisa
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Langkah seanjutnya tambahkan jquery berikut ini di bab bawah tag </head>.
<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>
Langkah selanjutnya memasang syle css navigasi post blogger. Tambahkan isyarat css berikut ini sempurna di atas kode ]]></b:skin>.
.post-pagination {
margin: 40px auto;
text-align: center;
width: 100%;
float:left;
}
.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;
}
Terakhir save template anda. untuk menerapkannya pada artikel mana saja yang ingin ada beri navigasi (post pagination) silahkan ikuti langkah ini.
Pergi ke laman daerah menulis artikel click New Post (tulis artikel baru) dan pilih mode EDIT HTML. Tambahkan isyarat html di bawah ini.
<div class="content_1">
Tambahkan Paragraf Artikel di sini
</div>
<div class="content_2" style="display: none;">
Tambahkan Paragraf Artikel di sini
</div>
<div class="content_3" style="display: none;">
Tambahkan Paragraf Artikel di sini
</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>
Ganti goresan pena "Tambahkan Paragraf Artikel di sini" dengan isi artikel anda. tidak ada batasan untuk menambahkan paragraf artikel. post pagination ini untuk membagi satu artikel menjadi tiga lembar saja. bila ingin membuatnya lebih banyak silahkan di coret coret (di edit lagi) isyarat script post pagination nya. Demikian saja cara menciptakan navigasi untuk post blogger. Silahkan lihat nya.
Comments
Post a Comment