Hallo semua, ini sebenarnya kumpulan pertanyaan pengguna nextwap yang berhasil saya himpun dan saya jadikan postingan sebagai panduan penggunaan nextwapblog. Seperti :

  • Bagaimana cara mengatur jumlah popular post ?
  • Bagaimana cara memasang emoticon dipostingan Nextwapblog ?
  • Bagaimana mengatur breadcrumb agar tampil di search engine ?

    • Dan berikut ini adalah beberapa trik yang saat ini dapat anda semua coba :

      Mengatur jumlah post
      Secara teknis, jumlah popular post akan terus bertambah sesuai post yang ada namun urutanya sesuai post yang sedang populer pada blog tersebut, jika posting blog anda berjumlah 10 (draft tidak ikut dihitung) maka popular post juga akan menjadi 10 berikut juga seterusnya. Nah bagaimana cara mengatur jumlahnya agar tidak terus bertambah yang mengakibatkan konten blog semakin panjang ? Jawabanya sederhana yaitu menggunakan css ataupun jQuery yang tentunya dengan template yang sudah disesuaikan, cek terlebih dahulu template yang akan anda akan pasangi trik ini, sunting template bila tidak sama pada footer.html setelah semantik tag html widget/sidebar(jika template default yang dipakai).

      a. Menggunakan CSS
      Saya akan gunakan sintaks html seperti dibawah sebagai awal memulai trik ini :

      <div class="popular-post">
      {% for post in popular_post %}
      <div class="post">
      {{ site.settings.display_thumbnail == 'yes' ? post.thumbnail|raw : '' }}
      <h3 class="title">
      <a href="/{{ post.link }}.html">{{ post.title }}</a>
      </h3>
      <div class="post-content">
      <p>{{ post.content|striptags|slice(0,300) }}<p/>
      </div>
      {% endfor %}
      </div>

      • Salin sintaks html didalam textarea.
      • Pergi ke dasbor » Tema » Mobile/Desktop (pilih template mobile atau desktop yang akan dipasangi trik) » Template Editor » footer.html.
      • Cari semantik tag sidebar / widget(sesuaikan dengan template yang dipakai).
      • Tempel sintaks yang tadi sobat salin didalam textarea.
      • Simpan.

      Kemudian akan berlaku kode css seperti dibawah ini :

      .popular-post {
      max-width: 100%;
      margin:0 auto;
      padding: 0;
      line-height: 1.2;
      }
      .popular-post .post {
      margin: 5px 0;
      padding: 0 0 10px;
      position: relative;
      border-bottom: 1pt solid #1d1d1d;
      }
      .popular-post .thumbnail {
      width: 50px;
      height: 50px;
      float: left;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      margin:18px 5px 5px 0;
      }
      .popular-post h3 {
      color: #666;
      overflow: hidden;
      white-space: nowrap;
      }
      .popular-post h3 a {
      color: #ca2540;
      padding: 0;
      text-decoration: none;
      }
      .popular-post .post-content {
      padding: 5px 0;
      margin: 0;
      }
      .popular-post .post-content p{
      height: 30px;
      overflow: hidden;
      color: #666;
      padding: 0 0 0 5px;
      margin: 0;
      }
      .popular-post > .post:nth-child(n) {
      display: block;
      }
      .popular-post > .post:nth-child(2n+9),
      .popular-post > .post:nth-child(2n+10),
      .popular-post > .post:nth-child(2n+11),
      .popular-post > .post:nth-child(2n+12),
      .popular-post > .post:nth-child(2n+13),
      .popular-post > .post:nth-child(2n+14),
      .popular-post > .post:nth-child(2n+15),
      .popular-post > .post:last-child {
      display: none !important;
      }

      • Salin sintaks html didalam textarea.
      • Pergi ke dasbor » Tema » Mobile/Desktop (pilih template mobile atau desktop yang akan dipasangi trik) » CSS Editor.
      • Tempel sintaks yang tadi sobat salin didalam textarea dipaling atas ataupun paling bawah kode css anda.
      • Simpan.

      Anda dapat merubah nilai pseudo-class css ke berapapun nilai yang diinginkan, tergantung banyaknya jumlah popular post yang ingin ditampilkan misal jumlah popular post yang ingin ditampilkan adalah 8 dan post blog ada 20 berarti sobat mulai dengan .popular-post:nth-child(9) sampai pada post terakhir yaitu :nth-child(20). atau bisa membuat rumus pseudo-class anda sendiri supaya dapat otomatis menghilangkan popular post saat post blog bertambah.

      b. Menggunakan Ajax jQuery Sebenernya secara pemrograman sih tujuanya sama cuman yang membedakan hanya bahasa programan yang digunakan saja.

      <script>
      document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>');
      </script>
      // Lewati memasang syntax diatas jika anda telah memasang jQuery sebelumnya

      <script>
      $(".popular-post").find(".post").eq(9).hide();
      $(".popular-post").find(".post").eq(10).hide();
      $(".popular-post").find(".post").eq(11).hide();
      $(".popular-post").find(".post").eq(12).hide();
      $(".popular-post").find(".post").eq(13).hide();
      $(".popular-post").find(".post").eq(14).hide();
      $(".popular-post").find(".post").eq(15).hide();
      // dan seterusnya atau bisa menggunakan $('.popular-post .post:nth-child(9)').hide() dan seterusnya ... </script>
      • Lakukan cara memasang sintaks html seperti pada cara pertama yang menggunakan css skip jika sudah.
      • Salin kode dalam textarea diatas.
      • Pergi ke Dasbor » Tema » Mobile/Desktop » Template Editor » footer.html
      • Tempelkan diantar end tag body dan end tag html "</body>"Disini..."</html>"
      • Simpan.
      Anda dapat merubah nilai pseudo-class css dengan jQuery ke berapapun nilai yang diinginkan, tergantung banyaknya jumlah popular post yang ingin ditampilkan misal jumlah popular post yang ingin ditampilkan adalah 8 dan post blog ada 20 berarti sobat mulai dengan $(".popular-post").find(".post").eq(8).hide(); sampai pada post terakhir yaitu $(".popular-post").find(".post").eq(20).hide();. atau bisa membuat rumus pseudo-class anda sendiri supaya dapat otomatis menghilangkan popular post saat post blog bertambah.

      Memasang emoticon pada postingan
      Kalau anda mencari hal seperti ini disearch engine pasti akan muncul banyak sekali saran untuk cara memasang emoticon pada postingan blog. Namun anda hanya akan menemakan cara memasang emoticon pada postingan blog pada wordpress dan blogspot dan tidak menemukan cara apapun tentang hal ini sebelum postingan ini dibuat. Jadi sekarang simaklah dengan seksama.
      Pada dasarnya emoticon bisa dipasang dengan mudah pada client-side atau menggunakan bahasa pemrograman php namun karena ini sebuah blog bukan website tentunya hanya admin yang mempunyai hak akses untuk melakukan hal yang demikian jadi apa salahnya mencoba alternatif untuk membuat semuanya menjadi mungkin selagi bisa dilakukan. Baiklah pertama-tama sobat bisa menggunakan syntax jquery seperti ini :

      <script>
      document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>');
      </script>
      // lewati memasang syntax diatas komen ini jika blog sobat sudah memakai jQuery

      <script>
      twemoji.parse(document.body);
      </script>

      <script>
      $(document).ready(function () {
      $('img').each(function () {
      var $img = $(this);
      var filename = $img.attr('src')
      $("img:not([alt])").attr('title', filename.substring((filename.las tIndexOf('/')) +1,filename.lastIndexOf('.')));
      $("img:not([alt])").attr('alt', filename.substring((filename.lastIndexOf('/')) +1, filename.lastIndexOf('.')));
      </script>
      • Salin kode dalam textarea diatas
      • Pergi ke Dasbor » Tema » Mobile/Desktop » Template Editor » footer.html
      • Tempelkan diantar end tag body dan end tag html "</body>"Disini..."</html>"
      • Simpan.

      Setelah sintaks pemanggil emoticon terpasng anda harus lakukan untuk menambahkan html entity tag untuk menampilkan emojinya seperti ini 😀 untuk daftar lengkap emoji dan sintaknya anda bisa mengunjungi List Twitter Emoji

      Mengatur breadcrumb agar tampil di search engine
      Perkara susah ketika harus mengatur breadcrumb menggunakan client-side scripting, tapi ya namanya juga coder pasti bisa dan sudah biasa dengan hal-hal seperti ini. Hapus dahulu twig code {{ breadcrumbs }} pada template editor post.html namun untuk menyelipkan category/tag/label setelah home pada breadcrumb itu tidak mungkin. lanjut menuju baris sintaks :

      <!-- Untuk blog posting -->
      <ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="breadcrumb">
      <li itemscope="" itemtype="http://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="http://LINKBLOGSOBAT">
      <span itemprop="name">Home</span> </a>
      </li>
      <li itemscope="" itemtype="http://schema.org/ListItem" itemprop="itemListElement" class="divider">
      <a itemprop="item" href="#">
      <span itemprop="name">&ra quo;</span>
      </a>
      </li>
      <li itemscope="" itemtype="http://schema.org/ListItem" itemprop="itemListElement" class="active">
      <a itemprop="item" href="{{ post.link }}">
      <span itemprop="name">{{ post.title }}</span>
      </a>
      </li>
      </ol>
      • Salin kode dalam textarea diatas
      • Pergi ke Dasbor » Tema » Mobile/Desktop » Template Editor » post.html(post blog) / view_apk.html, view_video.html, view_mp3.apk(blog AGC)
      • Cari {{ breadcrumbs|raw }} dan hapus
      • Tempelkan
      • Simpan.
      Untuk blog AGC ganti /{{ post.link }}.html dengan /{{ view.link }} dan {{ post.title }} dengan {{ view.name }} sebelum menempelkan sintaks

      Selamat mencoba dan memodifikasi ria :D