Cara Menambahkan Rating Bintang di Setiap Postingan Blog

Cara Menambahkan Rating Bintang di Setiap Postingan Blog


Pada kesempatan kali ini Bloggerin ID akan share kepada kalian bagaimana Cara Menambahkan Rating Bintang di Setiap Postingan Blog


Menggunakan rating bintang pada postingan blog sangat berdampak pada artikel yang kita buat di search engine google dan juga itu adalah teknik SEO untuk meningkatkan pengunjung, dikarenakan pengunjung melihat rating bintang tersebut. Jika rating bintang tersebut tinggi itu point plus untuk postingan agan.


Pihak blogger sendiri tidak memberikan fitur rating bintang ini pada platformnya, oke jika agan berminat untuk memasang rating bintang pada postingan artikel agan silahkan simak tutorial dibawah ini.


Cara Menambahkan Rating Bintang di Setiap Postingan Blog


Pada tutorial berikut ini saya menggunakan platform Rating Widget. Rating Widget adalah platform penyedia rating bintang yang dapat digunakan secara gratis, minimalis dan tentunya keren.


pertama agan akses terlebih dahulu ke Rating Bintang, jika agan belum mempunyai akun silahkan mendaftar terlebih dahulu.


Cara Menambahkan Rating Bintang di Setiap Postingan Blog

Klik menu Show Source Code, dan copy kode tersebut dan pastekan tepat diats kode </body> pada tema agan. Kodenya seperti dibawah ini:


<script type="text/javascript">(function(d, t, e, m){
    window._rws = window._rws || [{
        huid: "417497",
        uid: "04a91b109758a3bbabb0c2306a1de5b0",
        source: "blogger",
        options: {
            "advanced": {
                "layout": {},
                "font": {}
            },
            "size": "",
            "style": "oxygen",
            "isDummy": false
        } 
    }];

        
    // Append Rating-Widget JavaScript library.
    var rw, s = d.getElementsByTagName(e)[0], id = "rw-blogger-js",
        p = d.location.protocol, a = ("https:" == p ? "secure." + 
        m + "js/platform/" : "js." + m + "platform/"), 
        ck = "Y" + t.getFullYear() + "M" + t.getMonth() + "D" + t.getDate();
    if (d.getElementById(id)) return;              
    rw = d.createElement(e);
    rw.id = id; rw.async = true; rw.type = "text/javascript";
    rw.src = p + "//" + a + "blogger.js?ck=" + ck;
    s.parentNode.insertBefore(rw, s);
}(document, new Date(), "script", "rating-widget.com/"));</script>

Agar lebih rapi bisa copy kode dibawah ini:


<script type='text/javascript'>
//<![CDATA[
!function(e,t,n,i){window.RW_Async_Init=function(){RW.init({huid:"417497",uid:"04a91b109758a3bbabb0c2306a1de5b0",source:"website",options:{style:"oxygen",isDummy:!1}}),RW.render()};var s,a=e.getElementsByTagName(n)[0],c="rw-js",r=e.location,o="Y"+t.getFullYear()+"M"+t.getMonth()+"D"+t.getDate(),d=r.protocol,g=r.search.indexOf("DBG=")>-1?"":".min",l="https:"==d?"secure."+i+"js/":"js."+i;e.getElementById(c)||((s=e.createElement(n)).id=c,s.async=!0,s.type="text/javascript",s.src=d+"//"+l+"external"+g+".js?ck="+o,a.parentNode.insertBefore(s,a))}(document,new Date,"script","rating-widget.com/");
//]]>
</script>

Ganti yang bertanda dengan ID agan sendiri ya.


Cara Penerapkan disetiap postingan blog

Untuk penerapan di postingan blog masih sama di edit HTML, copy kode dibawah ini dan pastekan tepat diatas kode <data:post.body/> untuk diatas postingan.


Note: Kode tersebut ada banyak di dalam template kirasan 3 kode yang sama

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="rw-ui-wrap">
<div class="rw-ui-container"></div>
</div>
</b:if>

Agar tampilan lebih rapi tambahkan css dibawah ini:


.rw-ui-wrap {margin:0 auto 20px auto}

Jika serasa sudah semua lalu klik Simpan Tema.


Oke sekian yang bisa saya sampaikan tentang Cara Menambahkan Rating Bintang di Setiap Postingan Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Membuat Tabel Harga Responsive pada Blog

Cara Membuat Tabel Harga Responsive pada Blog


Pada kesempatan kali ini Bloggerin ID akan share kepada kalian bagaimana Cara Membuat Tabel Harga Responsive pada Blog


Tabel harga ini sangat cocok untuk blog yang menjual produk seperti hosting maupun berjualan domain dll. Tabel ini juga cocok untuk blog yang tidak memiliki sidebar dikarenakan tabel ini memiliki ukuran yang besar.


Jika agan mengerti tentang CSS, agan bisa mengatur sendiri dan disesuaikan dengan blog agan.


Cara Membuat Tabel Harga Responsive pada Blog


Pertama agan masuk terlebih dahulu ke Blogger > Klik menu Tema > Klik Edit HTML kemudian copy kode CSS dibawah ini dan pastekan tepat diatas kode ]]></b:skin> atau </style>


/* CSS Tabel Harga */
.tabel-paket{font-family:'Source Sans Pro',Arial,sans-serif;color:#ffffff;text-align:left;font-size:16px;width:100%;max-width:1000px;margin:30px 10px}
.tabel-paket img{position:absolute;left:0;top:0;height:100%;z-index:-1}
.tabel-paket .daftar-paket{margin:0 0.5%;width:24%;padding-top:10px;position:relative;float:left;overflow:hidden;background-color:#222f3d;border-radius:8px}
.tabel-paket .daftar-paket:hover i,.tabel-paket .daftar-paket.hover i{-webkit-transform:scale(1.2);transform:scale(1.2)}
.tabel-paket *{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.25s ease-out;transition:all 0.25s ease-out}
.tabel-paket header{color:#ffffff}
.tabel-paket .nama-paket{line-height:60px;position:relative;margin:0;padding:0 20px;font-size:1.6em;letter-spacing:2px;font-weight:700}
.tabel-paket .nama-paket:after{position:absolute;content:'';top:100%;left:20px;width:30px;height:3px;background-color:#fff}
.tabel-paket .harga-paket{padding:0 20px;margin:0}
.tabel-paket .biaya-paket{font-weight:400;font-size:2.8em;margin:10px 0;display:inline-block}
.tabel-paket .tipe-paket{opacity:0.8;font-size:0.7em;text-transform:uppercase}
.tabel-paket .fitur-paket{padding:0 0 20px;margin:0;list-style:outside none none;font-size:0.9em}
.tabel-paket .fitur-paket li{padding:8px 20px}
.tabel-paket .fitur-paket i{margin-right:8px;color:rgba(255,255,255,0.5)}
.tabel-paket .pilih-paket{border-top:1px solid rgba(0,0,0,0.2);padding:20px;text-align:center}
.tabel-paket .pilih-paket a{background-color:#156dab;color:#ffffff;text-decoration:none;padding:12px 20px;font-size:0.75em;font-weight:600;border-radius:8px;text-transform:uppercase;letter-spacing:4px;display:inline-block}
.tabel-paket .pilih-paket a:hover{background-color:#1b8ad8!important}
.tabel-paket .featured{margin-top:-10px;z-index:1;border-radius:8px;border:2px solid #156dab;background-color:#156dab}
.tabel-paket .featured .pilih-paket{padding:30px 20px}
.tabel-paket .featured .pilih-paket a{background-color:#10507e}
@media only screen and (max-width:767px){.tabel-paket .daftar-paket{width:49%;margin:0.5%}.tabel-paket .nama-paket,.tabel-paket .pilih-paket a{-webkit-transform:translateY(0);transform:translateY(0)}.tabel-paket .pilih-paket,.tabel-paket .featured .pilih-paket{padding:20px}.tabel-paket .featured{margin-top:0}.tabel-paket .featured header{line-height:70px}}
@media only screen and (max-width:440px){.tabel-paket .daftar-paket{margin:0.5% 0;width:100%}}

Jika sudah klik Simpan Tema.


Mau mengganti warna? Klik menu ini Color Picker


Cara Memasang Tabel Harga di Halaman Statis


Pergi ke menu Halaman > Buat Halaman Baru > Copy kode dibawah ini dan pastekan pada mode Tampil HTML bukan Tampil Menulis.


<div class="tabel-paket">
   <div class="daftar-paket">
      <header>
         <h4 class="nama-paket">
            Starter
         </h4>
         <div class="harga-paket"><span class="biaya-paket">$9</span><span class="tipe-paket">/month</span></div>
      </header>
      <ul class="fitur-paket">
         <li><i class="fa fa-check"> </i>5GB Linux Web Space</li>
         <li><i class="fa fa-check"> </i>5 MySQL Databases</li>
         <li><i class="fa fa-check"> </i>Unlimited Email</li>
         <li><i class="fa fa-check"> </i>250Gb mo Transfer</li>
         <li><i class="fa fa-check"> </i>24/7 Tech Support</li>
         <li><i class="fa fa-check"> </i>Daily Backups</li>
      </ul>
      <div class="pilih-paket"><a href="">Select Plan</a></div>
   </div>
   <div class="daftar-paket">
      <header>
         <h4 class="nama-paket">
            Basic
         </h4>
         <div class="harga-paket"><span class="biaya-paket">$29</span><span class="tipe-paket">/month</span></div>
      </header>
      <ul class="fitur-paket">
         <li><i class="fa fa-check"> </i>10GB Linux Web Space</li>
         <li><i class="fa fa-check"> </i>10 MySQL Databases</li>
         <li><i class="fa fa-check"> </i>Unlimited Email</li>
         <li><i class="fa fa-check"> </i>500Gb mo Transfer</li>
         <li><i class="fa fa-check"> </i>24/7 Tech Support</li>
         <li><i class="fa fa-check"> </i>Daily Backups</li>
      </ul>
      <div class="pilih-paket"><a href="">Select Plan</a></div>
   </div>
   <div class="daftar-paket featured">
      <header>
         <h4 class="nama-paket">
            Professional
         </h4>
         <div class="harga-paket"><span class="biaya-paket">$49</span><span class="tipe-paket">/month</span></div>
      </header>
      <ul class="fitur-paket">
         <li><i class="fa fa-check"> </i>25GB Linux Web Space</li>
         <li><i class="fa fa-check"> </i>25 MySQL Databases</li>
         <li><i class="fa fa-check"> </i>Unlimited Email</li>
         <li><i class="fa fa-check"> </i>2000Gb mo Transfer</li>
         <li><i class="fa fa-check"> </i>24/7 Tech Support</li>
         <li><i class="fa fa-check"> </i>Daily Backups</li>
      </ul>
      <div class="pilih-paket"><a href="">Select Plan</a></div>
   </div>
   <div class="daftar-paket">
      <header>
         <h4 class="nama-paket">
            Ultra
         </h4>
         <div class="harga-paket"><span class="biaya-paket">$99</span><span class="tipe-paket">/month</span></div>
      </header>
      <ul class="fitur-paket">
         <li><i class="fa fa-check"> </i>100GB Linux Web Space</li>
         <li><i class="fa fa-check"> </i>Unlimited MySQL Databases</li>
         <li><i class="fa fa-check"> </i>Unlimited Email</li>
         <li><i class="fa fa-check"> </i>10000Gb mo Transfer</li>
         <li><i class="fa fa-check"> </i>24/7 Tech Support</li>
         <li><i class="fa fa-check"> </i>Daily Backups</li>
      </ul>
      <div class="pilih-paket"><a href="">Select Plan</a></div>
   </div>
</div>

Catatan: kode <div class="daftar-paket featured"> untuk plan yang akan diunggulkan


Jika icon ceklis tidak muncul maka tambahkan kode dibawah ini tepat diatas kode </body>


<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Kemudian Simpan dan Publikasikan dan lihat hasilnya.


Oke sekian yang bisa saya sampaikan tentang Cara Membuat Tabel Harga Responsive pada Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.