Skip to main content

Cara Menciptakan Navigasi Untuk Post Blogger

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.

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.
beberapa waktu kemudian aku telah menulis Cara Membuat Navigasi Untuk Post Blogger
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.
Labels:

Comments

Post a Comment

Popular posts from this blog

Cara Melihat Jumlah Followers Blog Sendiri

Cara Melihat Jumlah Followers Blog Sendiri - Situs blog yang terkenal tentu sudah memiki jumlah followers (pengikut) situs yang cukup banyak, ratusan atau mungkin ribuan followers. Taukah kau followers situs blogger yang gotong royong yaitu followers yang di sanggup dari feedburner atau lebih dikenal dengan istilah Follow by E-mail atau RSS Feed . Pertanyaan nya berapakah jumlah followers atau pengikut situs blog anda ketika ini? Untuk mengetahui nya mari kita simak cara melihat jumlah followers situs blogger yang diperoleh dari feedburner google (widget follow by e-mail) berikut ini; Cara Mengetahui Jumlah Pengikut RSS Feed Pertama Login ke Akun G-mail, kemudian Kunjungi laman Dashboard Feedburner Anda akan diarahkan ke dashboard RSS Feed (Laman kawasan melihat statistik dan jumlah followers situs blog) Seperti yang ditunjukkan pada pola berikut ini. Cara melihat atau mengetahui jumlah followers blog Keterangan : Gambar sebelah kiri mengatakan daftar feedburner s...
1 comment
Read more

Cara Buat Tombol Share Sticky Bottom (Melayang Dibawah)

Cara Membuat Share Button Sticky Bottom Blogger - Akhir-akhir ini berbagai variasi tombol share muncul ke pasaran dunia cyber " website & blog " tentunya, dan yang paling terkenal ialah tombol share sticky bottom dan sidebar . Gaya yang lainnya tombol share drop-down. Pada artikel ini aku akan membahas Cara menciptakan tombol share sticky bottom (melayang di bawah) pada perangkat mobile (Handphone) dan tombol share sticky sidebar "melayang di samping jikalau di lihat melalui PC. Adapun tombol share yang akan kita buat merupakan tombol share (share button) yang ringan "sticky bottom" dengan sedikit script namun sangat responsive pada perangkat seluler. Sehingga tidak memberi efek jelek pada loading situs anda. Langsung saja simak langkah-langkah cara menciptakan tombol share sticky bottom berikut ini. Kunjungi laman penyedia tombol share yaitu www.addthis.com Silahkan login dengan dengan e-mail atau facebook anda untuk masuk ke dashboard add...
Post a Comment
Read more

Mengenal Input Dan Output Unit Mcb

MCB (Miniature Circuit Breaker) - Assalamualikum para tekhnisi listrik beberapa waktu kemudian ada yang menanyakan " kenapa jumper (incoming) mcb dari bawah kenapa tidak dari atas? " oleh alasannya itu aku akan menjelaskan mengenai input (incoming) mcb dan output (outgoing) mcb . Mungkin masih ada para instalatir listrik yang resah mana input dan yang mana output mcb yang benar. Pada setiap unit mcb umum nya telah di beri petunjuk berupa  simbol mcb & toggle switch dengan tanda  angka 1 sebagai incoming dan angka 2 sebagai outgoing , namun hanya sedikit elektrikal yang membaca symbol mcb tersebut. Padahal symbol pada mcb tersebut merupakan petunjuk cara penggunaan/ pemasangan mcb tersebut. Mungkin anda telah sering melihat rangkaian mcb pada box/ panel listrik dan beberapa rangkaian memakai alat jumper mcb (Busbar) di bab atas mcm dan beberapa rangkaian lain menjumper mcb dari posisi bawah. Sekarang mari kita kenali Input dan Output unit MCB yang sebenarnya. ...
Post a Comment
Read more