Cara Membagi Konten Blog Dengan Efek Slide

Cara Membagi Konten Blog Dengan Efek Slide
Pada Kesempatan Kali Ini Cybertips Akan memberikan sebuah tutorial Cara Membagi Konten Artikel Menjadi Beberapa Halaman Dengan Efek Slide kalian hanya perlu menambahkan kode HTML ini di postingan yang nantinya akan muncul di blog kalian masing-masing. Tutorial ini sangat cocok untuk anda yang memiliki artikel panjang di blog nya, sehingga akan menghemat ruang di halaman posting. Simak Caranya Sebagai Berikut:
  • 1.Login Ke Blogger.com > Buka Template lalu Salin Kode Dibawah Ini Sebelum </style>
  • CSS
    
        /* Multiple Page Slide */
    a.movepg.nexter,a.movepg.prever{color:#fff}
    .separator{overflow:hidden;max-height:240px;margin:0 0 20px}.separator img{background:#eee;max-width:100%;vertical-align:middle;background-position:middle;border:0;height:auto;width:100%}.next-wrap img,.next-wrap video,.next-wrap object{max-width:100% }.next-wrap{position:relative;padding:0 0 0 40px;line-height:normal;}.instruction{display:block;height:100%;width:100%;overflow:hidden}.slidecontentWrap{width:1000%}.slidecontent{float:left;width:10%;line-height:161%;overflow:hidden}.movepg{display:none;position:absolute;bottom:20px;background:#e74c3c;color:#fff;font-weight:700;text-transform:uppercase;padding:6px 12px;cursor:pointer;font-size:80%;outline:none;border-radius:3px;transition:background .6s}.movepg:hover{background:#c0392b}.movepg.prever{left:20px}.movepg.nexter{right:20px}
    
    2. Kemudian Salin Kode Dibawah Ini Sebelum </body>
    JavaScript
    
          <script type='text/javascript'>
    //<![CDATA[
    function updateBtnState(){0==index?$(".prever").hide():$(".prever").show(),index==maxIndex?$(".nexter").hide():$(".nexter").show()}var index=0,maxIndex=4;$(".nexter").on("click",function(e){if(index++,index>maxIndex)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),$(".prever").on("click",function(e){if(index--,0>index)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),updateBtnState();
    //]]>
    </script>
    Note: Untuk Menambahkan Halaman, Kalian Cukup Ganti MaxIndex=4 / tulisan yang berwarna merah Lalu Kalian Klik Simpan Template
  • 3. Tambahkan Kode Dibawah Di postingan Yang Ingin Dibagi Halaman Nya Di Tab Html
  • HTML
    
      <div class="next-wrap">
      <div id="photocons" class="instruction">
        <div class="slidecontentWrap">
          <div class="slidecontent">
            <-- ISI KONTEN DI SINI -->
          </div>
          <div class="slidecontent">
            <-- ISI KONTEN DI SINI -->
          </div>
          <div class="slidecontent">
            <-- ISI KONTEN DI SINI -->
          </div>
          <div class="slidecontent">
            <-- ISI KONTEN DI SINI -->
          </div>
          <div class="slidecontent">
            <-- ISI KONTEN DI SINI -->
          </div>
          </div>
          </div>
          <a class="movepg prever">prev</a>
          <a class="movepg nexter">next</a>
    </div>
  • 5. Publish Artikel nya Dan Lihat Hasilnya.
Berikut Adalah Cara Membuat Isi konten Menjadi Beberapa Halaman Dengan Efek Slide.
Semoga Bermanfaat.

Berkomentar Lah Dengan Sopan, Bijak Dan BerEtika, Karena Setiap Komentar Menjadi Tanggung Jawab Komentator

Post a Comment (0)
Previous Post Next Post