Senin, 21 Januari 2013

Cara Mudah Memasang Rating Bintang Di Postingan

Cara Mudah Memasang Rating Bintang Di Postingan - Pada artikel sebelumnya saya sudah menjelaskan cara memasang rating bintang di artikel postingan yang setelah saya cermati ternyata masih ada beberapa teman blogger yang kesulitan dalam menerapkan cara tersebut, seperti yang dialami Menghilangkan Bau Mulut dan juga yang dialami oleh Klik Disini. Menanggapi beberapa keluhan dari artikel sebelumnya tersebut, maka dari itulah artikel Cara Mudah Memasang Rating Bintang Di Postingan ini saya buat khusus untuk anda yang menginginkan rating bintang tampil di artikel blog anda.

Berbeda dengan cara sebelumnya yang harus merubah tampilan blogger ke draft.blogger dan menambahkan beberapa kode kedalam template dan hasilnya juga belum tampak yang kemungkinan karena pengaruh koneksi atau karena kode rating merupakan dari old versionnya blogger sehingga untuk menampilkan rating bintang di artikel cukup memakan waktu loading yang lama dan pada artikel ini saya akan memberikan solusi terbaik dan termudah dalam memasang rating bintang di artikel postingan blog tapi cara ini tidak berlaku untuk menampilkan rating bintang di Google dan cara ini juga telah saya terapkan di blog saya yang lain, seperti terlihat pada gambar berikut ini

Cara Mudah Memasang Rating Bintang Di Postingan

Seperti terlihat pada gambar diatas, memasang rating bintang di postingan kali ini bukan hanya menampilkan banyaknya bintang yang terklik sebagai vote oleh pengunjung blog anda tapi juga menampilkan banyaknya view artikel yang terlihat atau yang telah dibaca oleh pengunjung blog anda,,, keren bukan dan widget ini hampir sama dengan milikinya wordpress bahkan ada beberapa plugin rating bintang yang mirip dengan tampilan seperti gambar diatas. Lalu bagaimana cara memasang rating bintang di postingan tersebut?

Berikut Cara Mudah Memasang Rating Bintang Di Postingan
  1. Buka situs layanan rating bintang terlebih dahulu di Graddit.com seperti yang terlihat pada gambar berikut ini
    Cara Mudah Memasang Rating Bintang Di Postingan
  2. Selanjutnya klik pada menu Rating widgets atau gambar Ratings, bukan yang Polls
  3. Setelah mengkilk menu Rating widgets, maka akan muncul halaman seperti gambar berikut ini
    Cara Mudah Memasang Rating Bintang Di Postingan
    dan ikuti tahapan memasang rating bintang sesuai nomer yang telah saya berikan pada gambar dengan penjelasan sebagai berikut
    1. Pasang kode link CSS di antara kode <head> .... </head> (lihat gambar di no.1) ditemplate blog anda
    2. Pilih widget tampilan rating bintang yang ingin anda tampilkan di postingan blog anda (lihat gambar di no.2)
    3. Pilih platform blog anda yaitu Blogger (lihat gambar di no.3)
    4. Salin kode script rating bintang kedalam template blog anda (lihat gambar di no.4)
      Untuk menyalin kodenya dan agar tampilan rating bintang berada dibawah judul artikel blog, silahkan ikuti caranya sebagai berikut;
      • Buka laman pengeditan Template blog anda
      • Centang Expand Template Widget
      • Cari kode <data:post.body/>
      • Salin kode script rating bintang sebelum kode <data:post.body/> yang kedua, lihat contoh berikut yang telah saya terapkan diblog saya yang lain

        <div class='post-body entry-content'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
        <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
        <span class='rmlink' style='float:left'><b>Readmore</b><a expr:href='data:post.url' rel='nofollow'><data:post.title/></a></span>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
        <div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
        <b:if cond='data:post.labels'>
        <b:loop values='data:post.labels' var='label'>
        <data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[[&quot;&#9734;&quot;,&quot;&#9733;&quot;]]}</div>
        <div expr:id='&quot;ffbs_stats_&quot; + data:post.id' class='ffbs_stats'></div>
        <script type='text/javascript' expr:src='&quot;http://www.graddit.com/rate/eng/5/&quot; + data:post.id + &quot;?id=&quot; + data:post.id + &quot;&amp;stats=ffbs_stats_&quot; + data:post.id + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;url=&quot; + data:post.url + &quot;&amp;views=yes&amp;average=yes&amp;votes=yes&quot;'></script></b:if>
        <div style='clear: both;'/>
        <data:post.body/>
        </b:if>
        <div style='clear: both;'/> <!-- clear for photos floats -->
        </div>
  4. Selesai dan klik Simpan Template. Silahkan lihat hasilnya...
Tambahan:
Rate this posting: adalah tulisan yang terdapat didalam kode script rating bintang, silahkan dihapus agar tidak ikut tampil
<div style='clear: both;'/> adalah kode tambahan untuk memutus paragraph

Semoga dengan adanya salah satu artikel tentang memasang rating bintang di postingan ini bisa memudahkan anda untuk menampilkan rating bintang di blog anda. Jika ada pertanyaan, silahkan tinggalkan komentar anda di artikel ini, Cara Mudah Memasang Rating Bintang Di Postingan

Cara Mudah Memasang Rating Bintang Di Postingan Rating: 4.5 Diposkan Oleh: ana sriwahyuni

47 komentar:

  1. Balasan
    1. Pengen berkunjung ke blogmu tapi "Maaf, blog di limitpost.blogspot.com telah dihapus. Alamat ini tidak tersedia untuk blog baru" he he he

      Hapus
  2. @Achmad Muharya Silahkan mas, memang ini yang lebih mudah... :)

    BalasHapus
    Balasan
    1. mbak mau tanya, gimana caranya mengatasi masalah " Kesalahan: The name of reviewed item is not supplied by "item" field.".. mohon bantuannya mbak.

      Hapus
    2. kalau yang seperti itu saya masih belum menemukan mas.. :)

      Hapus
  3. oke mbak ane sukses menerapkan di blog ane
    makasih tutorialnya sangat jelas.

    request "membuat posting 2 kolom di hompage dong" :)

    BalasHapus
  4. @Ibnu Syamsun makasih juga mas Ibnu, semoga bermanfaat

    BalasHapus
  5. terima kasih banyak mas postingannya

    BalasHapus
  6. Mantapp mas , thanks
    kunjungi juga yah dickysahabat.blogspot.com

    BalasHapus
  7. ini yg sy cri terìmakasih..
    inf0nya sangat bermanfaat..

    request : cara membuat scr0ll pada widget..

    BalasHapus
  8. @sedot wc cibubur sama-sama ya, semoga sukses buat anda, amin..

    BalasHapus
  9. @Sahabat Blanco hmm, mosok rek wuakeh sing bilang sy ini mas? sy cewek tulen bro n sist semua :)
    okey, setiap yg berkunjung n komen sllu sy kunjungi n dapet Follower gratis dari saya :D
    makasih ya..

    BalasHapus
  10. @Rizky Bagas Agustio sudah mampir mas Rizky, di follow juga sudah :)
    makasih atas kunjungan, salam kenal

    BalasHapus
  11. Wah Ini Ane pernah Lihat Di Template barunya Maskolis.. Terimakasih Mas.. udah share caranya..

    BalasHapus
  12. @ilmu dan wawasan saya menemukan graddit melalui pencarian di Google.com kalau memang ada yang sudah mempublishnya, mungkin kebetulan saja, hanya makasih banget buat Maskolis atas templatenya ini dan terimakasih juga buat Ilmu dan Wawasan atas kunjungan serta komentarnya

    BalasHapus
  13. Klo mu cari kode html yang head to head nya d mn mba?mohon pencerahannya terimakasih sebelumnya

    BalasHapus
  14. @abun gip masuk ke menu pengeditan Template >> Edit Html >> centang Expands Widget Template >> tekan tombol Ctrl+F di keyboard, maka dibagian bawah atau di diatas menu bar layar akan muncul kolom pencarian, silahkan gunakan kolom tersebut untuk mencari kode-kode yang ada didalam template blog anda, termasuk kode Head

    BalasHapus
  15. saya coba dulu sob,terimakasih sudah di share.salam kenal aja

    BalasHapus
  16. maaf mbak masih bingung (maklum newbie).. kalo bisa tampilkan screen shoot edit HTML.

    oh ya, makasih udah berkunjung dan berkomentar di blog saya ^_^

    BalasHapus
  17. untuk langkah nomor 1 diatas, masih bingung mbak dimana mau diposisikan kodenya... mohon pencerahan mbak, trimakasih...

    BalasHapus
  18. gan.kodenya
    ko susah banget di cari si??
    :(
    kira2 ada di posisi atas,tengah apa bawah ya??

    BalasHapus
  19. @randy aditya pasang dibawah <head> saja mas Randy

    BalasHapus
  20. @agus satrio kode apa yang mau di cari mas Agus?

    BalasHapus
  21. haduh ga ngerti sama sekali mas...

    BalasHapus
  22. Kode yg ada di template mmg lumayan bnyk, klo g pake klik ctrl bingung hehe,,, tp kdg g smua template bs akur dgn tag yg kta sisipi, apa itu betul mbak??

    BalasHapus
  23. rate bintang 5 ini yang membuat profile kita di google ada bintang 5 gitu kah mbak ?
    tapi saya coba dulu tips dari mbak e ini...

    tq... boleh mbak maen2 ke tempat saya

    BalasHapus
    Balasan
    1. iya betul sekali, silahkan di coba..
      blognya keren..

      Hapus
  24. Salam,,

    To the point aja nih Mba..
    Di artikel ini sendiri kok saya tdk lihat rate bintangnya ya?
    Mohon pencerahanya,,

    Terima kasih
    http://priyonulis.blogspot.com

    BalasHapus
    Balasan
    1. memang sudah tidak ada mas Priyawan karena blog ini sudah mengalami 3x ganti template dan rate bintang sempat terpasang pada 2 template sebelumnya. kenapa saya tidak memasangnya kembali pada template yg ke3 ini?, karena sudah banyak kode-kode script yg lebih penting yg terpasang pada template blog ini
      terimakasih atas perhatiannya

      Hapus
  25. xixixixi, nyasar lagi masuk ke sini 2 kali yah...

    BalasHapus
  26. Sukses, bisa saya terapkan di blog ane. Thanks ya

    BalasHapus
  27. kira2 ada di posisi atas,tengah apa bawah ya??

    BalasHapus
  28. follback ya mba blog saya :)

    BalasHapus
  29. kak, kok punya saya gak ada ya yang disuruh centang" itu,, jadi bingung..

    BalasHapus
    Balasan
    1. Blogger sudah merubah tampilan menu Edit HTMLnya dan tanda Centang sudah ditiadakan, sehingga untuk mengedit kode template langsung saja cari kodenya dengan cara klik pada area kode dan tekan CTRL+F maka akan muncul kolom pencarian didalam area kode template, gunakan kolom tersebut untuk mencari kode template yang diinginkan

      Hapus
  30. sip mbak follback ya mbak
    dan minta pendapat blog ane dari mbak ...

    BalasHapus
  31. ini mantep nih,,jadi nanati artikel kita ada ratingnya ya..:)
    thanks

    BalasHapus
  32. keren gan, makasih atas pencerahannya

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia