Laborblog

Category: Split

  • Cara Membagi Halaman di Postingan dengan Nomor Navigasi

    www.laborblog.my.id - Mungkin sahabat pernah mengunjungi situs gosip atau situs baca komik yang di setiap isi postingannya dibagi menjadi beberapa halaman, biasanya pada postingan tersebut terdapat tombol Next yang ketika kita menekan tombol tersebut akan mengarah ke halaman selanjutnya.

    ilustrasi
    – Mungkin sahabat pernah mengunjungi situs gosip atau situs baca komik yang di setiap isi postingannya dibagi menjadi beberapa halaman, biasanya pada postingan tersebut terdapat tombol Next yang ketika kita menekan tombol tersebut akan mengarah ke halaman selanjutnya.


    Begitupun dengan tips yang akan aku berikan ini, cara kerjanya yaitu membagi beberapa paragraf dari isi postingan menjadi beberapa bab sesuai harapan sobat. Beberapa manfaat yang di sanggup kalau menerapkan tips ini antara lain:
    Halaman akan terasa lebih rapi cocok untuk sahabat yang mempunyai artikel dengan isi yang panjang dan menghemat daerah semoga pengunjung tidak capek menggulir halaman
    Cocok untuk situs gosip dan situs baca komik
    Bisa dijadikan penanda untuk pengunjung di halaman mana akan melanjutkan membaca nantinya
    Menambah jumlah Pageviews alasannya yaitu terdapat fungsi refresh halaman ketika menekan tombol navigasi ke halaman berikutnya.
    Nah, bagi sahabat yang ingin menambahkan cara ini di blognya, silakan ikuti langkah-langkah berikut ini.
    Membagi Halaman di Postingan dengan Nomor Navigasi
    Seperti biasa, buka halaman Blogger > Klik sajian Tema dan klik tombol Edit HTML > Tambahkan instruksi CSS ini sebelum </head>

    <b:if cond=’data:view.isSingleItem’>
    <style>
    /* Membagi Halaman di Postingan */
    .post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{margin:30px auto;text-align:center;padding:0;overflow:hidden}.pagearl .buttonar{background:#fff;font-weight:400;display:inline-block;color:#222;text-decoration:none;text-align:center;border:1px solid rgba(0,0,0,0.1);border-right:0;margin:auto;font-size:14px;padding:.4rem .75rem;transition:all .1s}.pagearl .buttonar:last-child{border-right:1px solid rgba(0,0,0,0.1)}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:#fafafa;color:#222}.buttonar.arlinapage{background:#3498DB;border-color:#3498DB;color:#fff;transition:all .1s}.buttonar.arlinapage:hover{background:#2980B9;border-color:#2980B9;color:#fff}
    </style>
    </b:if>

    Tambahkan instruksi berikut sebelum </body>

    <b:if cond=’data:view.isSingleItem’>
    <script>
    //<![CDATA[
    function get_n(halaman){var o,t,e=decodeURIComponent(window.location.search.substring(1)).split(“&”);for(t=0;t<e.length;t++)if((o=e[t].split(“=”))[0]===halaman)return void 0===o[1]||o[1]}$(document).ready(function(){var halaman=get_n(“halaman”);$(“.post-content”).hide(),void 0===halaman?$(“.content_1”).show():$(“.content_”+halaman).show();var o=$(“.post-content”).length;if(0!=o)for(i=1;i<=o;i++){var t=window.location.pathname;$(“.pagearl”).append($(‘<a href=”‘+t+”?halaman=”+i+’” class=”buttonar n’+i+’”> ‘+i+” </a>”))}else $(“.pagearl”).hide();void 0==halaman&&$(“.buttonar.n1”).toggleClass(“arlinapage”),halaman==halaman&&$(“.buttonar.n”+halaman).toggleClass(“arlinapage”)});
    //]]>
    </script>
    </b:if>

    Kemudian klik tombol Simpan tema.
    Selanjutnya untuk instruksi pemanggilnya, silakan buka editor postingan dan tambahkan markup berikut pada tab HTML (Bukan Compose)

    <div class=”post-content content_1″>
    ISI ARTIKEL DI SINI
    </div>
    <div class=”post-content content_2″>
    ISI ARTIKEL DI SINI
    </div>
    <div class=”post-content content_3″>
    ISI ARTIKEL DI SINI
    </div>
    <div class=”post-content content_4″>
    ISI ARTIKEL DI SINI
    </div>
    <div class=”post-content content_5″>
    ISI ARTIKEL DI SINI
    </div>

    Note: Untuk ISI ARTIKEL DI SINI diganti dengan isi konten postingan dan untuk content_1 hingga content_5 mengambarkan nomor navigasi dari isi postingan yang ingin dibagi. Untuk menambahkan halaman yang ingin dibagi, cukup ganti angka dari content_5 menjadi content_6 dan seterusnya.
    Contohnya menyerupai ini:

    <div class=”post-content content_4″>
    ISI ARTIKEL DI SINI
    </div>
    <div class=”post-content content_5″>
    ISI ARTIKEL DI SINI
    </div>
    <div class=”post-content content_6″>
    ISI ARTIKEL DI SINI
    </div>
    <div class=”post-content content_7″>
    ISI ARTIKEL DI SINI
    </div>
    <div class=”post-content content_8″>
    ISI ARTIKEL DI SINI
    </div>

    Kemudian tambahkan instruksi navigasi di bawah ini di final postingan.

    <div class=”arlinapage”>
    </div>
    <div class=”pagearl”>
    </div>

    Namun kalau sahabat ingin memunculkan instruksi navigasi di setiap postingan secara otomatis, soba sanggup tambahkan instruksi di atas di bawah instruksi <data:post.body/> (Post body khusus halaman postingan). Contoh penerapannya menyerupai ini:

    <data:post.body/>
    <div class=’arlinapage’/>
    <div class=’pagearl’/>

    Selesai dan lihat akhirnya di blog sobat. Jika berhasil akan berfungsi seperti demo dibawah ini.
    Dibawah ini hanya contoh tombolnya saja
    Ganti instruksi CSS kalau ingin menambahkannya dengan tampilan minimalis

    <style type=’text/css’>
    /* Membagi Halaman di Postingan */

    .post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{position:relative;background:#fff;margin:0 auto 20px auto;text-align:center;padding:20px;font-size:14px}.pagearl .buttonar{background:#e74c3c;font-weight:bold;display:inline-block;color:#fff;text-decoration:none;text-align:center;border-right:0;font-size:14px;padding:.4rem .8rem;border:0;margin:0 4px 0 0;border-radius:3px;transition:all .2s}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:#c0392b;color:#fff}.buttonar.arlinapage,.buttonar.arlinapage:hover{background:#333;color:#fff}

    </style>

    Atau ganti dengan instruksi CSS ini kalau ingin menambahkannya dengan tampilan animasi Gradient

    <style>
    /* Membagi Halaman di Postingan */
    @keyframes Gradients{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
    .post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{background:#517aef;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;margin:30px auto;text-align:center;padding:10px;border-radius:3px;overflow:hidden;box-shadow:0 10px 10px -5px rgba(0,0,0,0.15);animation:Gradients 15s ease infinite}.pagearl .buttonar{background:rgba(255,255,255,.2);font-weight:bold;display:inline-block;color:#fff;text-decoration:none;text-align:center;border-right:0;font-size:14px;padding:.4rem .8rem;border:0;margin:0 5px 0 0;border-radius:3px;box-shadow:0 1px 5px rgba(0,0,0,0.1);transition:all .6s}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:rgba(255,255,255,.45);color:#fff;box-shadow:0 1px 10px rgba(0,0,0,0.1)}.buttonar.arlinapage,.buttonar.arlinapage:hover{background:rgba(255,255,255,.95);color:#0984e3}
    </style>


    Oke, sekian dari wacana cara Membagi Halaman di Postingan dengan Nomor Navigasi. Semoga bermanfaat bagi sahabat dan wassalam.[arlina]

  • Splitting a Long Blog Post in Blogger Into Multiple Pages

    www.laborblog.my.id - Splitting posts in wordpress is very simple and there are many plugins to achieve this, but how it’s done in Blogger.
    illustration
    – Splitting posts in wordpress is very simple and there are many plugins to achieve this, but how it’s done in Blogger. In Blogger there is no build in feature to split posts or pages and there are no widgets to paginate, but by using a simple jQuery function you can paginate your blog posts.
    So why to split a blog post? We have already discussed all the benefits of adding pagination to blog posts in this article. Here we will show you how to split long blog post in Blogger into multiple pages.
    Don’t panic, the code below is simple and easy to understand. Assume that you are about to publish a long blog post and would like to split that into 4 pages. Here is how you do that in just 3 simple steps.
    How to split long blog post in Blogger into multiple pages
    Step 1: Usually you will edit your post in compose mode, but this time you are going to do this in HTML mode. Switch to HTML editor, add the span element that you see below and add your blog content in each element respectively.
    From the below lines you can see that only 1st page content is visible and the remaining 2nd, 3rd and 4th pages are hidden. So the remaining pages will be visible only if the visitor navigates.

    <span class=”content1″>
    Add your first page content here
    </span>
    <span class=”content2″ style=”display:none”>
    Add your second page content here
    </span>
    <span class=”content3″ style=”display:none”>
    Add your third page content here
    </span>
    <span class=”content4″ style=”display:none”>
    Add your final page content here
    </span>

    Step 2: Hope you have added your content. Now you have to create page links so when a user clicks on that page he or she should get that particular content. Just below to the above code add this one which adds Pages: 1 2 3 4 links below your post content.

    <p><b>Pages: <span style=”color: #3d85c6;”>
    <a href=”#” class=”page1″>1</a>
    <a href=”#” class=”page2″>2</a>
    <a href=”#” class=”page3″>3</a>
    <a href=”#” class=”page4″>4</a></span></b></p>

    Step 3: Next to make this links to work add the following script just below the pagination links.

    <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
    <script style=”text/javascript”>
    jQuery(document).ready(function(){
    jQuery(‘.page1’).click(function(){
    jQuery(‘.content1’).show();
    jQuery(‘.content2’).hide();
    jQuery(‘.content3’).hide();
    jQuery(‘.content4’).hide();
    return false;
    });
    jQuery(‘.page2’).click(function(){
    jQuery(‘.content1’).hide();
    jQuery(‘.content2’).show();
    jQuery(‘.content3’).hide();
    jQuery(‘.content4’).hide();
    return false;
    });
    jQuery(‘.page3’).click(function(){
    jQuery(‘.content1’).hide();
    jQuery(‘.content2’).hide();
    jQuery(‘.content3’).show();
    jQuery(‘.content4’).hide();
    return false;
    });
    jQuery(‘.page4’).click(function(){
    jQuery(‘.content1’).hide();
    jQuery(‘.content2’).hide();
    jQuery(‘.content3’).hide();
    jQuery(‘.content4’).show();
    return false;
    });
    });
    </script>



    That’s it! When everything is done publish your article and view it where you will see page links below the content. Just click on the links to see how it works. Hope that helped you to split long blog posts in Blogger into multiple pages. Got any questions? Feel free to ask below in comments section.[source]

  • Cara Membuat Postingan Blog Menjadi Beberapa Halaman

    www.laborblog.my.id - Beberapa blogger bertanya kepada laborblog.my.id yaitu tentang membagi posting blog yang panjang menjadi beberapa halaman di blogger. Memisahkan posting di wordpress sangat sederhana dan ada banyak plugin untuk mencapai ini, tetapi bagaimana hal itu dilakukan di Blogger.

    Ilustrasi
    Beberapa blogger bertanya kepada laborblog.my.id yaitu tentang membagi posting blog yang panjang menjadi beberapa halaman di blogger. Memisahkan posting di wordpress sangat sederhana dan ada banyak plugin untuk mencapai ini, tetapi bagaimana hal itu dilakukan di Blogger.


    Di Blogger tidak ada fitur bawaan untuk membagi posting atau halaman dan tidak ada widget untuk membuat paginasi, tetapi dengan menggunakan fungsi jQuery sederhana Anda dapat membuat paginasi posting blog Anda.
    Jadi mengapa membagi posting blog?
    laborblog.my.id telah membahas semua manfaat menambahkan pagination ke posting blog di artikel ini. Di sini laborblog.my.id akan menunjukkan cara membagi posting blog panjang di Blogger menjadi beberapa halaman.
    Jangan panik, kode di bawah ini sederhana dan mudah dipahami. Asumsikan bahwa Anda akan menerbitkan posting blog yang panjang dan ingin membaginya menjadi beberapa halaman. Inilah cara Anda melakukannya hanya dalam 3 langkah sederhana.
    Cara membagi posting blog panjang di Blogger menjadi beberapa halaman
    Langkah 1:
    Biasanya Anda akan mengedit posting Anda dalam mode penulisan, tetapi kali ini Anda akan melakukannya dalam mode HTML. Beralih ke editor HTML, tambahkan elemen span yang Anda lihat di bawah dan tambahkan konten blog Anda di setiap elemen masing-masing.
    Dari baris di bawah ini Anda dapat melihat bahwa hanya konten halaman pertama yang terlihat dan halaman ke-2, ke-3, dan ke-4 yang tersisa disembunyikan. Jadi halaman yang tersisa hanya akan terlihat jika pengunjung menavigasi.

    <span class=”content1″>
    Add your first page content here
    </span>
    <span class=”content2″ style=”display:none”>
    Add your second page content here
    </span>
    <span class=”content3″ style=”display:none”>
    Add your third page content here
    </span>
    <span class=”content4″ style=”display:none”>
    Add your final page content here
    </span>

    Langkah 2:
    Selanjutnya sekarang Anda harus membuat tautan halaman sehingga ketika pengguna mengklik halaman itu, dia akan mendapatkan konten tertentu. Tepat di bawah kode di atas tambahkan kode berikut yang menambahkan Halaman: 1 2 3 4 tautan di bawah konten posting Anda.

    <p><b>Pages: <span style=”color: #3d85c6;”>
    <a href=”#” class=”page1″>1</a>
    <a href=”#” class=”page2″>2</a>
    <a href=”#” class=”page3″>3</a>
    <a href=”#” class=”page4″>4</a></span></b></p>

    Langkah 3:
    Selanjutnya untuk membuat tautan ini berfungsi, tambahkan skrip berikut tepat di bawah tautan pagination.

    <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
    <script style=”text/javascript”>
    jQuery(document).ready(function(){
    jQuery(‘.page1’).click(function(){
    jQuery(‘.content1’).show();
    jQuery(‘.content2’).hide();
    jQuery(‘.content3’).hide();
    jQuery(‘.content4’).hide();
    return false;
    });
    jQuery(‘.page2’).click(function(){
    jQuery(‘.content1’).hide();
    jQuery(‘.content2’).show();
    jQuery(‘.content3’).hide();
    jQuery(‘.content4’).hide();
    return false;
    });
    jQuery(‘.page3’).click(function(){
    jQuery(‘.content1’).hide();
    jQuery(‘.content2’).hide();
    jQuery(‘.content3’).show();
    jQuery(‘.content4’).hide();
    return false;
    });
    jQuery(‘.page4’).click(function(){
    jQuery(‘.content1’).hide();
    jQuery(‘.content2’).hide();
    jQuery(‘.content3’).hide();
    jQuery(‘.content4’).show();
    return false;
    });
    });
    </script>




    Itu dia! Setelah semuanya selesai, publikasikan artikel Anda dan lihat di mana Anda akan melihat tautan halaman di bawah konten. Cukup klik tautan untuk melihat cara kerjanya.
    Semoga tutorial ini membantu Anda untuk membagi posting blog panjang di Blogger menjadi beberapa halaman. Ada pertanyaan? Jangan ragu untuk bertanya di bawah di bagian komentar.