Cara Membagi Konten Artikel dengan Efek Slide

Selamat datang kembali di Demo IdBoegis, Blog yang membahas seputar Tips Adsense, Tips Komputer, Tutorial Blog, SSH Gratis, Tips Youtube, Tips Smartphone dan informasi internet lainnya.

Pada Artikel kali ini kita akan membahas Cara Membagi Konten Artikel dengan Efek Slide, Postingan ini masih berhubungan dengan Artikel Widget.

Baca juga:

Cara Membagi Konten Artikel dengan Efek Slide

Advertisement

Cara membagi konten artikel - Baiklah kawan, kali ini saya akan membagikan tutorial mengenai cara membagi halaman artikel dengan efek slide, cara kerjanya hampir sama dengan ketika kita sedang membaca halaman buku buku selanjutnya, namun pada cara yang akan saya bagikan ini menggunakan efek slide yang di sertai tombol next atau preview. Dimana dalam satu judul artikel namun isi artikelnya di bagi dalam beberapa halaman.

Fungsi dari penggunaan pembagian konten artikel ini yakni untuk meringankan loading halaman artikel sobat. Metode ini biasanya di gunakan oleh blog-blog yang memiliki isi artikel yang cukup panjang dan di dalam postingan itu sendiri terdapat banyak gambar. Maka dengan menerapkan cara ini sobat dapat mengakali kecepatan loadingnya agar halaman artikel tersebut tidak lelet saat di buka. Okelah, bagi anda yang ingin memasangnya silahkan ikuti langkah langkah di bawah ini :

Cara Membagi Konten Artikel dengan Efek Slide

1. Pertama silahkan sobat masuk terlebih dahulu pada halaman blogger sobat.
2. Selanjutnya, silahkan anda masuk pada menu Template -> edit HTML.
3. Setelah itu, cari kode ]]></b:skin> atau </style> , gunakan CTRL+F untuk memudahkan pencarian tersebut. Apabila kode tersebut sudah anda temukan, selanjutnya letakkan kode di bawah ini tepat sebelum kode ]]></b:skin> atau </style>.

/* 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}

4. Langkah berikutnya, silahkan cari kode </body> dan letakkan kode di bawah ini tepat di atas kode tersebut.

<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>

5. Selanjutnya silahkan simpan template sobat.
6. Kemudian, silahkan sobat masuk pada halaman dimana sobat membuat artikel/ halaman posting kemudian silahkan masuk pada mode HTML dan pastekan kode di bawah ini ke dalamnya.

<div class="next-wrap">
  <div id="photocons" class="instruction">
    <div class="slidecontentWrap">
      <div class="slidecontent">
        <-- KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- KONTEN DI SINI -->
      </div>
      </div>
      </div>
      <a class="movepg prever">prev</a>
      <a class="movepg nexter">next</a>
</div>

Keterangan :
Ganti tulisan "konten di sini" dengan isi artikel-artikel anda.

7. Silahkan publikasikan artikel anda.

Cara di atas biasanya di gunakan oleh situs-situs media berita, mungkin sobat sudah sering menjumpainya di beberapa situs berita, namun biasanya pada situs-situs tersebut menggunakan pagination sedangkan cara yang sudah saya bagikan di atas hanya menggunakan tombol next dan preview seperti layaknya slider manual pada halaman homepage blog. Cukup menarik bukan :)

Jadi, apabila anda ingin memposting sebuah artikel yang isinya cukup panjang dan juga menggunakan banyak konten gambar di dalamnya, sobat bisa mencoba untuk menerapkan cara di atas. Cara tersebut sangat cocok untuk anda yang memiliki blog dengan Niche tutorial. Karena memang tidak bisa di pungkiri lagi kalau konten tutorial cukup banyak menggunakan gambar untuk memudahkan pengunjung dalam memahami cara-cara yang telah anda bagikan.

Oiya, jangan lupa juga untuk membaca artikel saya yang berjudul cara membuat artikel berkualitas SEO Friendly. Di dalam artikel tersebut telah saya bahas mengenai panduan-panduan dasar optimasi SEO onpage dan juga offpage. Namun apabila sobat memiliki masukan dan saran mengenai artikel saya tersebut jangan segan-segan ya untuk menambahkan ataupun memberikan kritik dan saran yang membangun :)

Demikianlah artikel kali ini mengenai cara membagi konten artikel ke beberapa halaman dengan efek slide, apabila anda masih menemukan kesulitan dalam memasangya. silahkan sobat meninggalkan komentar sobat dalam kotak komentar. Terimakasih telah membaca artikel di halaman ini. Selamat mencoba :)