Cara Memasang Tombol Like Dan Dislike Pada Postingan Blog




Cara  Memasang Tombol Like Dan Dislike Pada Postingan Blog
Cara  Memasang Tombol Like Dan Dislike Pada Postingan Blog Ala Youtube


Pada saat anda membuka youtube pada saat ingin melihat video kesukaan anda, Pasti anda akan melihat tombol like maupun dislike di bagian bawah judul youtube kan. Nah fungsi dari tombol tersebut adalah untuk mengetahui seberapa banyak pengunjung yang telah menyukai dan tidak menyukai sebuah video tersebut.

Jadi pada penjelasan ini saya akan sahare mengenai cara memasang tombol like dan dislike di blog, yang tujuannya sama seperti yang telah di jelaskan di atas, hanya saja kita memasang tombol like dan dislike pada postingan blog seberapa banyak pengunjung yang suka dan tidak suka dengan blog kita.

Nah untuk lebih jelasanya anda bisa mengikuti langkah-langkah carapemasangannya di bawah ini.

Cara Membuat Tombol Like and Dislike di Blog
  1. Seperti biasa silahkan anda login ke dasbhor blog sobat terlebih dahulu atau klik Disini
  2. Selanjutnya anda menuju ke bagian Tata Letak ==> Tambahkan Widget ==> Html/Java Script
  3. Lalu anda Copy dan Tempelkan semua kode dibawah ini pada kolom yang telah di sediakan Html/JavaScript tadi.
    <div class="bi-thumb-rating-css">
    <style type="text/css">
    .bi-thumb-rating{margin:10px 0 1.5em 0}
    .bi-thumb-rating-wrapper button{margin:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border:1px solid #AAA;color:#555;text-shadow:0 1px 0 white;background-color:#E0E0E0;-moz-box-shadow:inset 0 0 1px #fff;-ms-box-shadow:inset 0 0 1px #fff;-webkit-box-shadow:inset 0 0 1px white;box-shadow:inset 0 0 1px white;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fffafafa,EndColorStr=#ffdcdcdc);background-image:-moz-linear-gradient(top,#FAFAFA 0,gainsboro 100%);background-image:-ms-linear-gradient(top,#FAFAFA 0,gainsboro 100%);background-image:-o-linear-gradient(top,#FAFAFA 0,gainsboro 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#FAFAFA),color-stop(100%,gainsboro));background-image:-webkit-linear-gradient(top,#FAFAFA 0,gainsboro 100%);background-image:linear-gradient(to bottom,#FAFAFA 0,gainsboro 100%);height:2.95em;padding:0 .91em;outline:0;font-weight:bold;font-size:13px;white-space:nowrap;word-wrap:normal;vertical-align:middle;cursor:pointer}
    .bi-thumb-rating-up{-webkit-border-top-left-radius:3px!important;-webkit-border-bottom-left-radius:3px!important;-moz-border-radius-topleft:3px!important;-moz-border-radius-bottomleft:3px!important;border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}
    .bi-thumb-rating-down{-webkit-border-top-right-radius:3px!important;-webkit-border-bottom-right-radius:3px!important;-moz-border-radius-topright:3px!important;-moz-border-radius-bottomright:3px!important;border-top-right-radius:3px!important;border-bottom-right-radius:3px!important;border-left:1px solid #DDD}
    .bi-thumb-rating-wrapper button:hover{moz-box-shadow:0 0 3px #AAA;-ms-box-shadow:0 0 3px #AAA;-webkit-box-shadow:0 0 3px #AAA;box-shadow:0 0 3px #AAA}
    .bi-thumb-rating-function-wrapper-disable{float:left;margin-right:10px}
    .bi-thumb-rating-info-wrapper{float:left;width:60%}
    .bi-thumb-rating-bar{height:10px;margin:5px 0 5px 0;background:#CCC;width:50%}
    .bi-thumb-rating-function-wrapper,.bi-thumb-rating-function-wrapper-disable{float:left;margin:0 10px 0 0}
    .bi-thumb-rating-bar div{float:left;height:10px}
    .bi-thumb-rating-bar-like{background:green}
    .bi-thumb-rating-bar-unlike{background:darkRed}
    .bi-thumb-rating-label{padding:0 0 0 5px}
    .bi-thumb-rating-wrapper button.disable{background:#EEE;border:1px solid #DDD}
    </style> </div> <script> if (typeof (jQuery) == 'undefined') {  //output the script (load it from google api)  document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>"); } </script>
    <script src='https://googledrive.com/host/0BxH5pEKXqBWUVUNPMlJibkJkcGM/like-and-dislike-masyadi-com.js'></script>
  4. Nah jika sudah anda masukan kodenya, maka silahkan anda klik Save
  5. Untuk tutorial selanjutnya anda pasangkan kode htmlnya supaya kode diatas bisa berfungsi, Silahkan anda pasang copy kode di bawah ini di letakan tepat dibawah kode <data:post.body/> (cara cepat pencarian tekan CTRL+F)
    <div class='bi-thumb-rating' expr:url='data:post.url'/>
  6. Dan jangan lupa anda klik Simpan Template langsung lihat hasilnya di blog anda.
Bagaimana mudah bukan untuk membuat tombol like dan dislike nya di blog anda ? dengan anda membuat tombol like dan dislike maka anda akan mengetahui seberapa banyak jumlah pengunjung yang suka ataupun tidak suka dengan postingan anda, dengan begitu tentu anda akan bisa memperbaiki dimana letak postingan anda yang kurang bagus di mata pengunjung sehingga bisa menjadi orang yang bisa termotivasi diri. 

Demikian pula penjelasan pada malam ini semoga bermanfaat untuk anda selamat mencoba, terimaksih sudah berkunjung di blog mizipedia.com. salam blogger

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect