Twig NextWapBlog Blog Rate

Eza Anandharizky 12 Feb 2018 - 21:59 0 Komentar
Twig NextWapBlog Blog Rate

Cara merubah post hit dan comment count menjadi blog rating.

Seperti blog-blog lain yang menyediakan blog rate pada singlepostnya untuk memberi rating pada artikelnya. Kita pengguna NextWapBlog juga dapat membuatnya sendiri dengan sedikit Trik Twig Code NextWapBlog menggunakan fungsi kondisi "if/else".

Membuat Blog Rate dengan Total Post Hit

Cara pertama kita akan memanfaatkan {{ post.hits_total }} untuk membuat Blog Rate pada postingan NextWapBlog, lihat sintaks HTML dibawah ini :


    <div class="rating">
{% if post.hits_total < 10 %}
       <div class="worse">Jelek</div>
{% elseif post.hits_total < 50 %}
       <div class="notbad">Lumayan</div>
{% elseif post.hits_total > 100 %}
       <div class="good">Bagus</div>
{% elseif post.hits_total > 1000 %}
       <div class="very-good">Sangat bagus</div>
{% elseif post.hits_total > 10000 %}
       <div class="awesome">Menakjubkan</div>
{% endif %}
     </div>


Salin kode

Membuat Blog Rate dengan Total Post Comments

Untuk cara kedua kita akan memanfaatkan {{ post.total_comments }} untuk membuat Blog Rate pada NextWapBlog. Lihat sintaks highlighter dibawah ini :


    <div class="rating">
{% if post.total_comments == 0  %}
       <div class="worse">Jelek</div>
{% elseif post.total_comments < 5 %}
       <div class="notbad">Lumayan</div>
{% elseif post.total_comments > 5 %}
       <div class="good">Bagus</div>
{% elseif post.total_comments > 10 %}
       <div class="very-good">Sangat bagus</div>
{% elseif post.total_comments > 30 %}
       <div class="awesome">Menakjubkan</div>
{% endif %}
     </div>


Salin kode

Memberi Sentuhan CSS untuk Memperindah Tampilan

Sekarang kita lanjutkan membuat stylesheet nya, kita buat stylesheet sederhana saja. Yang dapat anda kustomisasi sesuai selera. Namun jika anda malas untuk mengkustomisasinya stylesheet ini juga tidak masalah untuk anda gunakan. mari kita simak sintaksis nya berikut ini :



   .rating {
      display: block;
      padding: 3px;
      margin: 5px auto;
      max-width: 100%;
   }
   .rating > div {
      display: block;
      padding: 8px 5px;
      color: #fff;
      margin: 0 auto;
      text-align: center;
      font-weight: bold;
      font-size: 22px;
      width: 180px;
      position: relative;
      border-radius: 4px 4px 0 0;
   }
   .rating > div:before {
      display: block;
      width: 0;
      height: 0;
      content: '';
      border: 12px solid transparent;
      border-left-color: transparent !important;
      position: absolute;
      bottom: 0;
      left: -24px;
   }
   .rating > div:after {
      display: block;
      width: 0;
      height: 0;
      content: '';
      border: 12px solid transparent;
      border-right-color: transparent !important;
      position: absolute;
      bottom: 0;
      right: -24px;
   }
   .rating .worse {
      background-color: #e64c65;
   }
   .rating .worse:before {
      border-color: #ca2540;
   }
   .rating .worse:after {
      border-color: #ca2540;
   }
   .rating .notbad {
      background-color: #f1c40f;
   }
   .rating .notbad:before {
      border-color: #f39c12;
   }
   .rating .notbad:after {
      border-color: #f39c12;
   }
  .rating .good {
      background-color: #22cc71;
   }
   .rating .good:before {
      border-color: #27ae60;
   }
   .rating .good:after {
      border-color: #27ae60;
   }
   .rating .very-good {
      background-color: #9b59b6;
   }
   .rating .very-good:before {
      border-color: #8e44ad;
   }
   .rating .very-good:after {
      border-color: #8e44ad;
   }
   .rating .awesome {
      background-color: #3498db;
   }
   .rating .awesome:before {
      border-color: #3468af;
   }
   .rating .awesome:after {
      border-color: #3468af;
   }
   

Salin kode

Cara Pemasangan

Cara pemasanganya cukup mudah untuk HTML sintaks anda pertama harus masuk ke akun anda masing-masing kemudian arahkan ke Dasbor » Tema » Template Editor » Mobile/Desktop » post.html salin kode html dalam textarea lalu cari sintaks {{ post.content|raw }} tempelkan tepat dibawah nya kemudian simpan. lanjut dengan memasang stylesheet. Anda cukup arahkan ke Dasbor » Tema » CSS Editor » Mobile/Desktop. Salin CSS dalam textarea kemudian tempelkan dan simpan. Untuk tampilanya akan seperti gambar dibawah ini

Twig NextWapBlog Blog Rate

Komentar

0 Tanggapan dari "Twig NextWapBlog Blog Rate"

Komentar baru hanya diperbolehkan untuk pengguna terdaftar saja. Silahkan Masuk atau Mendaftar untuk berkomentar.