Menampilkan Tombol Like Pada Postingan Blogger Seperti Pada Youtube

Memasang Tombol Like Maupun Dislike Pada Postingan Blogger ( Youtube ) - Sahabat blogger pasti sering nemui tombol like dan dislike di youtube kan? tombol tersebut berfungsi untuk mengetahui berapa pengunjung yang menyukai video atau tidak menyukai video tersebut

Dari situlah saya punya ide untuk menerapkan ke blog, kali ini saya akan share kepada sahabat blogger tentang bagaimana sih cara memasang sekaligus membuat tombol  like dan dislike di artikel blog, yang bertujuan untuk mengetahui berapa banyak pengunjung blog anda yang suka maupun tidak suka dengan postingan anda.

Panduan Cara Membuat Tombol Like and Dislike Dengan Mudah di Blog

1. Pertama silahkan sobat login ke dasbhor blog sobat terlebih dahuluKemudian pergi ke bagian Tata Letak => Tambahkan Widget => Html/Java Script
2.  Copy dan Tempelkan semua kode dibawah ini pada kolom Html/JavaScript tadi

3. <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. Jika sudah silahkan klik SaveNah untuk tutorial selanjutnya kita pasang htmlnya supaya kode diatas bekerja, caranya silahkan sobat pasang html berikut tepat dibawah kode <data:post.body/> yang terkahir.
5. <div class='bi-thumb-rating' expr:url='data:post.url'/>
   Yang Terkahir Simpan Template dan lihathasilnya.

Penutup

Terima kasih atas kunjungan anda di LingkaranDunia, serta membaca artikel yang mengenai Menampilkan Tombol Like Pada Postingan Blogger Seperti Pada Youtube. Jika ada yang kurang di mengerti silahkan ajukan pertanyaan lewat Email, FacabookLingkaranDunia dan lewat kolom komentar yang kami sediakan di bawah artikel ini. Lihah Juga - ( Membuat dan Memasang Headline Breaking News PadaBlogspot dengan Benar ).