السلام عليكم ورحمت الله وبركاته ----------------------------------------------->
Camera is a responsive/adaptive slideshow. Try to resize the browser window
It uses a light version of jQuery mobile, navigate the slides by swiping with your fingers
It's completely free (even though a donation is appreciated)
Camera slideshow provides many options to customize your project as more as possible
It supports captions, HTML elements and videos.
Tampilkan postingan dengan label Update Jquery. Tampilkan semua postingan
Tampilkan postingan dengan label Update Jquery. Tampilkan semua postingan

Rabu, 05 Maret 2014

Memasang slider responsive di Blogger


Pernahkah anda ingin memasang slider di blog anda ? Lalu bagaimana perasaan anda jika anda harus memperbauri secara manual slider yang anda gunakan. Sekarang saya akan mengajari anda cara memasang widget itu dan hebatnya widget ini Responsive
Demo dapat dilihat dibawah ini
Featured Posts





Pertama-tama anda buka Blogger >>> Layout / Tata Letak.
Lalu masukkan widget sebagai Javascript/HTML
Masukkan kode berikut
<center>
<div id="headerbox">Featured Posts</div>
<div id="featuredpostside"></div>
<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sidebar-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://www.trikblogger.net",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'/>
<style scoped="" type="text/css">
/*
Dibuat oleh AllBloggerTricks.com
*/
ul.abt-sidebar-slider * {
-moz-box-sizing: border-box;
}
ul.abt-sidebar-slider {
font: 11px Verdana,Geneva,sans-serif;
}
ul.abt-sidebar-slider, ul.abt-sidebar-slider li {
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
ul.abt-sidebar-slider {
height: 500px;
width: 100%;
}
ul.abt-sidebar-slider li {
display: none;
float: left;
height: 24.5%;
overflow: hidden;
padding: 0;
position: absolute;
width: 100%;
}
ul.abt-sidebar-slider li:nth-child(1), ul.abt-sidebar-slider li:nth-child(2), ul.abt-sidebar-slider li:nth-child(3), ul.abt-sidebar-slider li:nth-child(4) {
display: block;
}
ul.abt-sidebar-slider li:nth-child(2) {
left: 0;
top: 50%;
}
ul.abt-sidebar-slider img {
border: 0 none;
height: 100%;
width: 100%;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider li {
transition: all 0.4s ease-in-out 0s;
}
ul.abt-sidebar-slider li:nth-child(4) {
left: 0;
top: 75%;
width: 100%;
}
ul.abt-sidebar-slider li:nth-child(3) {
left: 0;
top: 25%;
}
ul.abt-sidebar-slider .overlayx {
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider img {
border: 4px solid #2E8DCE;
border-radius: 3px 3px 3px 3px;
}
ul.abt-sidebar-slider .overlayx:hover {
opacity: 0.1;
}
ul.abt-sidebar-slider h4 {
color: white;
font-family: Oswald;
font-size: 25px;
font-weight: 100;
line-height: 1.5em;
margin: 0;
padding: 0 10px;
position: absolute;
top: 25px;
width: 100%;
z-index: 2;
}
ul.abt-sidebar-slider .label_text {
bottom: 10px;
color: white;
font-size: 90%;
left: 10px;
position: absolute;
z-index: 2;
}
ul.abt-sidebar-slider li:nth-child(2) .autname, ul.abt-sidebar-slider li:nth-child(3) .autname {
display: none;
}
.buttons {
margin: 5px 0 0;
}
.buttons a {
display: inline-block;
height: 25px;
position: relative;
text-indent: -9999px;
width: 15px;
}
.buttons a:before {
border-color: transparent #535353 transparent transparent;
border-style: solid;
border-width: 8px 7px;
content: "";
height: 0;
left: 50%;
margin-left: -10px;
margin-top: -8px;
position: absolute;
top: 50%;
width: 0;
}
.buttons a.nextx:before {
border-color: transparent transparent transparent #535353;
margin-left: -3px;
}
.date {
background: none repeat scroll 0 0 rgba(32, 122, 161, 0.84);
bottom: 93px;
padding: 8px;
position: relative;
right: 6px;
}
#headerbox {
background: #8FB93D;
font-family: Oswald;
padding: 4px;
}
</style>
</center>
Ganti URL yang bewarna biru menjadi URL anda
Ingat anda harus memasang jQuerry dulu di Blog anda
NOTE : Tampilan demo di template saya agak error karena bertabrakan dengan CSS di template saya, tapi setelah dicoba dengan template lain bisa normal.

Update tombol like di blogger


Saya sudah share tentang Memasang tombol Like di bawah Artikel , yang saya berikan adalah update dari kode itu . Berbeda dari kode sebelumnya , kode sekarang telah memperbaiki beberapa kekurangan yang muncul.

Perbaikan saya buat

Tentu perubahan yang saya buat tidak hanya gambarnya , tetapi juga kodenya
Berikut perubahan yang saya buat
1. Pergantian gambar suka / like dengan tidak suka / dislike
2. Pergantian tombol share menjadi lebih baik
3. Link copyright berubah menjadi rel='nofollow'
4. Sebelumnya gambar yang digunakan adalah 60 kb sekarang hanya - 10 kb
Baiklah langsung aja

Pemasangan Javascript tombol like dan peletakannya

Buka Blogger > Template > Edit HTML
1. Cari kode berikut dengan menggunakan Ctrl + F
<data:post.body/>
2. Lalu dibawahnya , letakkan kode berikut
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='idbloggertrick-blogspot-com-likedislike'/>
</b:if>
Jika terdapat lebih dari 3 kode yang cari ( umumnya blog yang menggunakan javascript auto readmore ), maka letakkan juga dibawahnya
3. Pasang Jquery seperti yang telah dijelaskan sebelumnya dengan meletakkan javascript ini diatas </head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
4. Lalu diatas </body> , letakkan kode berikut
<script>//kode ini dibuat oleh idbloggertrick.blogspot.com
//<![CDATA[
var default_share_description='Love it';var default_share_title='This is it';var text_likes='Likes';var text_dislikes='Dislikes';
var _0x342e=["\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x23","\x69\x6E\x64\x65\x78\x4F\x66","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","\x3F","","\x25\x32\x36\x6E\x62\x73\x70\x25\x33\x42","\x3C\x69\x66\x72\x61\x6D\x65\x20\x66\x72\x61\x6D\x65\x62\x6F\x72\x64\x65\x72\x3D\x22\x30\x22\x20\x61\x6C\x6C\x6F\x77\x74\x72\x61\x6E\x73\x70\x61\x72\x65\x6E\x63\x79\x3D\x22\x74\x72\x75\x65\x22\x20\x73\x63\x72\x6F\x6C\x6C\x69\x6E\x67\x3D\x22\x6E\x6F\x22\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x62\x6C\x6F\x67\x67\x65\x72\x2E\x63\x6F\x6D\x2F\x62\x6C\x6F\x67\x2D\x70\x6F\x73\x74\x2D\x72\x65\x61\x63\x74\x69\x6F\x6E\x73\x2E\x67\x3F\x6F\x70\x74\x69\x6F\x6E\x73\x3D\x25\x35\x42\x61","\x25\x35\x44\x26\x74\x65\x78\x74\x43\x6F\x6C\x6F\x72\x3D\x25\x32\x33\x30\x30\x30\x30\x30\x30\x23","\x22\x3E\x3C\x2F\x69\x66\x72\x61\x6D\x65\x3E","\x23\x69\x64\x62\x6C\x6F\x67\x67\x65\x72\x74\x72\x69\x63\x6B\x2D\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2D\x63\x6F\x6D\x2D\x6C\x69\x6B\x65\x64\x69\x73\x6C\x69\x6B\x65","\x74\x65\x78\x74","\x74\x69\x74\x6C\x65","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x68\x31","\x63\x6F\x6E\x74\x65\x6E\x74","\x61\x74\x74\x72","\x6D\x65\x74\x61\x5B\x6E\x61\x6D\x65\x3D\x22\x64\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x22\x5D","\x6D\x65\x74\x61\x5B\x6E\x61\x6D\x65\x3D\x22\x44\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x22\x5D","\x77\x69\x64\x74\x68","\x68\x65\x69\x67\x68\x74","\x73\x72\x63","\x65\x61\x63\x68","\x69\x6D\x67","\x68\x74\x74\x70\x3A\x2F\x2F","\x68\x6F\x73\x74\x6E\x61\x6D\x65","\x2F\x66\x61\x76\x69\x63\x6F\x6E\x2E\x69\x63\x6F","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x66\x61\x63\x65\x62\x6F\x6F\x6B\x2E\x63\x6F\x6D\x2F\x73\x68\x61\x72\x65\x72\x2F\x73\x68\x61\x72\x65\x72\x2E\x70\x68\x70\x3F\x75\x3D","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x74\x77\x69\x74\x74\x65\x72\x2E\x63\x6F\x6D\x2F\x69\x6E\x74\x65\x6E\x74\x2F\x74\x77\x65\x65\x74\x3F\x75\x72\x6C\x3D","\x26\x74\x65\x78\x74\x3D","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x70\x6C\x75\x73\x2E\x67\x6F\x6F\x67\x6C\x65\x2E\x63\x6F\x6D\x2F\x75\x2F\x30\x2F\x73\x68\x61\x72\x65\x3F\x75\x72\x6C\x3D","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x74\x75\x6D\x62\x6C\x72\x2E\x63\x6F\x6D\x2F\x73\x68\x61\x72\x65\x3F\x76\x3D\x33\x26\x74\x3D","\x26\x75\x3D","\x68\x74\x74\x70\x3A\x2F\x2F\x70\x69\x6E\x74\x65\x72\x65\x73\x74\x2E\x63\x6F\x6D\x2F\x70\x69\x6E\x2F\x63\x72\x65\x61\x74\x65\x2F\x62\x6F\x6F\x6B\x6D\x61\x72\x6B\x6C\x65\x74\x2F\x3F\x75\x72\x6C\x3D","\x26\x74\x69\x74\x6C\x65\x3D","\x26\x64\x65\x73\x63\x72\x69\x70\x74\x69\x6F\x6E\x3D","\x26\x6D\x65\x64\x69\x61\x3D","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x62\x6C\x6F\x67\x67\x65\x72\x2E\x63\x6F\x6D\x2F\x62\x6C\x6F\x67\x2D\x74\x68\x69\x73\x2E\x67\x3F\x6E\x3D","\x26\x62\x3D\x25\x33\x43\x61\x2B\x68\x72\x65\x66\x25\x33\x44\x25\x32\x32","\x25\x32\x32\x2B\x25\x33\x45","\x25\x33\x43\x25\x32\x46\x61\x25\x33\x45\x26\x65\x75\x72\x6C\x3D","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6C\x69\x6B\x65\x20\x62\x75\x74\x74\x6F\x6E\x22\x3E\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x69\x63\x6F\x6E\x22\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6C\x61\x62\x65\x6C\x22\x3E","\x3C\x2F\x64\x69\x76\x3E","\x30\x32\x30\x31","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x64\x69\x73\x6C\x69\x6B\x65\x20\x62\x75\x74\x74\x6F\x6E\x22\x3E\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x69\x63\x6F\x6E\x22\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x6C\x61\x62\x65\x6C\x22\x3E","\x30\x32\x30\x32","\x3C\x61\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x68\x61\x72\x65\x20\x62\x75\x74\x74\x6F\x6E\x22\x20\x68\x72\x65\x66\x3D\x22\x23\x73\x68\x61\x72\x65\x74\x68\x69\x73\x22\x3E\x53\x68\x61\x72\x65\x3C\x2F\x61\x3E","\x3C\x64\x69\x76\x20\x73\x74\x79\x6C\x65\x3D\x22\x63\x6C\x65\x61\x72\x3A\x62\x6F\x74\x68\x3B\x66\x6C\x6F\x61\x74\x3A\x6E\x6F\x6E\x65\x3B\x22\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x68\x61\x72\x65\x2D\x62\x6F\x78\x22\x3E","\x3C\x69\x6E\x70\x75\x74\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x68\x61\x72\x65\x2D\x75\x72\x6C\x22\x20\x76\x61\x6C\x75\x65\x3D\x22","\x22\x2F\x3E","\x3C\x61\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x63\x6C\x61\x73\x73\x3D\x22\x62\x69\x2D\x73\x68\x61\x72\x65\x2D\x66\x61\x63\x65\x62\x6F\x6F\x6B\x20\x62\x69\x2D\x73\x68\x61\x72\x65\x2D\x62\x75\x74\x74\x6F\x6E\x22\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E\x3C\x2F\x61\x3E","\x3C\x61\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x63\x6C\x61\x73\x73\x3D\x22\x62\x69\x2D\x73\x68\x61\x72\x65\x2D\x74\x77\x69\x74\x74\x65\x72\x20\x62\x69\x2D\x73\x68\x61\x72\x65\x2D\x62\x75\x74\x74\x6F\x6E\x22\x20\x68\x72\x65\x66\x3D\x22","\x3C\x61\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x63\x6C\x61\x73\x73\x3D\x22\x62\x69\x2D\x73\x68\x61\x72\x65\x2D\x67\x70\x6C\x75\x73\x20\x62\x69\x2D\x73\x68\x61\x72\x65\x2D\x62\x75\x74\x74\x6F\x6E\x22\x20\x68\x72\x65\x66\x3D\x22","\x3C\x61\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x63\x6C\x61\x73\x73\x3D\x22\x62\x69\x2D\x73\x68\x61\x72\x65\x2D\x74\x75\x6D\x62\x6C\x72\x20\x62\x69\x2D\x73\x68\x61\x72\x65\x2D\x62\x75\x74\x74\x6F\x6E\x22\x20\x68\x72\x65\x66\x3D\x22","\x3C\x61\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x63\x6C\x61\x73\x73\x3D\x22\x62\x69\x2D\x73\x68\x61\x72\x65\x2D\x70\x69\x6E\x74\x65\x72\x65\x73\x74\x20\x62\x69\x2D\x73\x68\x61\x72\x65\x2D\x62\x75\x74\x74\x6F\x6E\x22\x20\x68\x72\x65\x66\x3D\x22","\x3C\x61\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x63\x6C\x61\x73\x73\x3D\x22\x62\x69\x2D\x73\x68\x61\x72\x65\x2D\x62\x6C\x6F\x67\x67\x65\x72\x20\x62\x69\x2D\x73\x68\x61\x72\x65\x2D\x62\x75\x74\x74\x6F\x6E\x22\x20\x68\x72\x65\x66\x3D\x22","\x3C\x61\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x72\x65\x6C\x3D\x22\x6E\x6F\x66\x6F\x6C\x6C\x6F\x77\x22\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x6F\x70\x79\x72\x69\x67\x68\x74\x2D\x62\x75\x74\x74\x6F\x6E\x22\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x69\x64\x62\x6C\x6F\x67\x67\x65\x72\x74\x72\x69\x63\x6B\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x32\x30\x31\x33\x2F\x30\x37\x2F\x6D\x65\x6D\x61\x73\x61\x6E\x67\x2D\x74\x6F\x6D\x62\x6F\x6C\x2D\x6C\x69\x6B\x65\x2D\x64\x69\x2D\x62\x61\x77\x61\x68\x2D\x61\x72\x74\x69\x6B\x65\x6C\x2E\x68\x74\x6D\x6C\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x64\x69\x73\x70\x6C\x61\x79\x3A\x20\x62\x6C\x6F\x63\x6B\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x3B\x66\x6C\x6F\x61\x74\x3A\x20\x6C\x65\x66\x74\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x3B\x77\x69\x64\x74\x68\x3A\x20\x31\x65\x6D\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x3B\x68\x65\x69\x67\x68\x74\x3A\x20\x31\x65\x6D\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x3B\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64\x3A\x20\x72\x65\x64\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x3B\x63\x6F\x6C\x6F\x72\x3A\x20\x77\x68\x69\x74\x65\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x3B\x74\x65\x78\x74\x2D\x61\x6C\x69\x67\x6E\x3A\x20\x63\x65\x6E\x74\x65\x72\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x3B\x63\x6F\x6C\x6F\x72\x3A\x20\x77\x68\x69\x74\x65\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x3B\x70\x61\x64\x64\x69\x6E\x67\x3A\x20\x30\x2E\x32\x65\x6D\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x3B\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65\x3A\x20\x31\x30\x70\x78\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x3B\x66\x6F\x6E\x74\x2D\x77\x65\x69\x67\x68\x74\x3A\x20\x62\x6F\x6C\x64\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x3B\x6D\x61\x72\x67\x69\x6E\x3A\x20\x33\x25\x20\x30\x20\x30\x20\x30\x3B\x66\x69\x6C\x74\x65\x72\x3A\x20\x61\x6C\x70\x68\x61\x28\x6F\x70\x61\x63\x69\x74\x79\x3D\x31\x30\x30\x29\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x3B\x6F\x70\x61\x63\x69\x74\x79\x3A\x20\x31\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x3B\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79\x3A\x76\x69\x73\x69\x62\x6C\x65\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x3B\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x73\x74\x61\x74\x69\x63\x21\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x22\x20\x74\x69\x74\x6C\x65\x3D\x22\x57\x61\x6E\x74\x20\x6F\x6E\x65\x20\x6C\x69\x6B\x65\x20\x74\x68\x69\x73\x3F\x22\x3E\x3F\x3C\x2F\x61\x3E","\x3C\x64\x69\x76\x20\x73\x74\x79\x6C\x65\x3D\x22\x63\x6C\x65\x61\x72\x3A\x62\x6F\x74\x68\x3B\x66\x6C\x6F\x61\x74\x3A\x6E\x6F\x6E\x65\x3B\x22\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x2F\x64\x69\x76\x3E","\x68\x74\x6D\x6C","\x66\x61\x73\x74","\x74\x6F\x67\x67\x6C\x65","\x23\x69\x64\x62\x6C\x6F\x67\x67\x65\x72\x74\x72\x69\x63\x6B\x2D\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2D\x63\x6F\x6D\x2D\x6C\x69\x6B\x65\x64\x69\x73\x6C\x69\x6B\x65\x20\x2E\x73\x68\x61\x72\x65\x2D\x62\x6F\x78","\x63\x6C\x69\x63\x6B","\x23\x69\x64\x62\x6C\x6F\x67\x67\x65\x72\x74\x72\x69\x63\x6B\x2D\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2D\x63\x6F\x6D\x2D\x6C\x69\x6B\x65\x64\x69\x73\x6C\x69\x6B\x65\x20\x2E\x73\x68\x61\x72\x65\x2E\x62\x75\x74\x74\x6F\x6E"];var nake_url=window[_0x342e[1]][_0x342e[0]];index=nake_url[_0x342e[3]](_0x342e[2]);if(index!=-1){nake_url=nake_url[_0x342e[4]](0,index);} ;index=nake_url[_0x342e[3]](_0x342e[5]);if(index!=-1){nake_url=nake_url[_0x342e[4]](0,index);} ;var label_space=_0x342e[6];for(i=0;i<29;i++){label_space+=_0x342e[7];} ;function rate_item_html(_0x5a05x4){html=_0x342e[8]+label_space+_0x342e[9]+nake_url+_0x5a05x4+_0x342e[10];return html;} ;var holder=_0x342e[11];var title=$(_0x342e[13])[_0x342e[12]]();if((title==_0x342e[6])|| typeof (title)==_0x342e[14]){title=$(_0x342e[15])[_0x342e[12]]();} ;if((title==_0x342e[6])|| typeof (title)==_0x342e[14]){title=default_share_title;} ;var description=$(_0x342e[18])[_0x342e[17]](_0x342e[16]);if(description==_0x342e[6]|| typeof (description)==_0x342e[14]){description=$(_0x342e[19])[_0x342e[17]](_0x342e[16]);} ;if(description==_0x342e[6]|| typeof (description)==_0x342e[14]){description=default_share_description;} ;var media_url=_0x342e[6];var cw=0;var ch=0;$(_0x342e[24])[_0x342e[23]](function (){w=$(this)[_0x342e[20]]();h=$(this)[_0x342e[21]]();if(media_url==_0x342e[6]){media_url==$(this)[_0x342e[17]](_0x342e[22]);} ;if(w>=cw&&h>=ch){cw=w;ch=h;media_url==$(this)[_0x342e[17]](_0x342e[22]);} ;} );if(media_url==_0x342e[6]|| typeof (media_url)==_0x342e[14]){media_url=_0x342e[25]+window[_0x342e[1]][_0x342e[26]]+_0x342e[27];} ;var encode_url=encodeURIComponent(nake_url);var encode_title=encodeURIComponent(title);var encode_description=encodeURIComponent(description);var encode_media_url=encodeURIComponent(media_url);var sl_facebook=_0x342e[28]+encode_url;var sl_twitter=_0x342e[29]+encode_url+_0x342e[30]+encode_title;var sl_gplus=_0x342e[31]+encode_url;var sl_tumblr=_0x342e[32]+encode_title+_0x342e[33]+encode_url;var sl_pinterest=_0x342e[34]+encode_url+_0x342e[35]+encode_title+_0x342e[36]+encode_description+_0x342e[37]+encode_media_url;var sl_blogger=_0x342e[38]+encode_title+_0x342e[39]+encode_url+_0x342e[40]+encode_title+_0x342e[41]+encode_media_url;var html=_0x342e[6];html+=_0x342e[42]+text_likes+_0x342e[43]+rate_item_html(_0x342e[44])+_0x342e[43];html+=_0x342e[45]+text_dislikes+_0x342e[43]+rate_item_html(_0x342e[46])+_0x342e[43];html+=_0x342e[47];html+=_0x342e[48];html+=_0x342e[49]+nake_url+_0x342e[50];html+=_0x342e[51]+sl_facebook+_0x342e[52];html+=_0x342e[53]+sl_twitter+_0x342e[52];html+=_0x342e[54]+sl_gplus+_0x342e[52];html+=_0x342e[55]+sl_tumblr+_0x342e[52];html+=_0x342e[56]+sl_pinterest+_0x342e[52];html+=_0x342e[57]+sl_blogger+_0x342e[52];html+=_0x342e[58];html+=_0x342e[59];$(holder)[_0x342e[60]](html);$(_0x342e[65])[_0x342e[64]](function (){$(_0x342e[63])[_0x342e[62]](_0x342e[61],function (){} );} );
//]]>
</script>

Memasang CSS 

Pasang kode css berikut diatas ]]></b:skin>
#idbloggertrick-blogspot-com-likedislike {
margin: 0.5em 0;
font-size: 12px!important;
}
#idbloggertrick-blogspot-com-likedislike * {
line-height: 1.3em!important;
}
#idbloggertrick-blogspot-com-likedislike .button {
float: left;
width: 95px;
overflow: hidden;
border: 1px solid #C6C6C6;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff8f8f8,EndColorStr=#ffeeeeee);
background-image: -moz-linear-gradient(top,#F8F8F8 0,#EEE 100%);
background-image: -ms-linear-gradient(top,#F8F8F8 0,#EEE 100%);
background-image: -o-linear-gradient(top,#F8F8F8 0,#EEE 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F8F8F8),color-stop(100%,#EEE));
background-image: -webkit-linear-gradient(top,#F8F8F8 0,#EEE 100%);
background-image: linear-gradient(to bottom,#F8F8F8 0,#EEE 100%);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin: 0 0.5em 0 0;
padding: 2px 0;
filter: alpha(opacity=60);
opacity: 0.6;
}
#idbloggertrick-blogspot-com-likedislike .button:hover {
filter: alpha(opacity=100);
opacity: 1;
}
#idbloggertrick-blogspot-com-likedislike .button iframe {
height: 20px;
margin: 1px 0 0 0;
position: relative;
z-index: 9999;
}
#idbloggertrick-blogspot-com-likedislike .like.button iframe {
margin-left: -104px;
}
#idbloggertrick-blogspot-com-likedislike .dislike.button iframe {
margin-left: -92px;
}
#idbloggertrick-blogspot-com-likedislike .button div.icon {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrWaNumaTyXlt2wIL3HTEqgLZd8R4KNypZf7PhutH2XfMvVxK0eHLB3sbV2zxAtk2Er4-tYIxrve_B_UawGgtD_K0-sTU1hBkeqGOVD3foPI8R_vNVL33x6MF1UGw39m2cRQTY2SGHpZk/s1600/sprite-vote.png);
background-repeat: no-repeat;
height: 20px;
width: 20px;
position: absolute;
z-index: 1;
}
#idbloggertrick-blogspot-com-likedislike .like.button div.icon {
background-position: 0 -21px; width: 20px; height: 20px; }
#idbloggertrick-blogspot-com-likedislike .dislike.button div.icon {
background-position: 0 0; width: 20px; height: 20px; }
#idbloggertrick-blogspot-com-likedislike .like.button {
width: 85px;
}
#idbloggertrick-blogspot-com-likedislike .share.button {
width: 50px;
text-align: center;
padding: 8px;
color: black;
font-weight: bold;
font-size: 12px;
line-height: 12px!important;
}
#idbloggertrick-blogspot-com-likedislike .button div.label {
position: absolute;
margin: 4px 0 0 22px;
color: black;
font-size: 12px;
z-index:1;
}
#idbloggertrick-blogspot-com-likedislike .button:active {
border-color: #C6C6C6;
background-color: #E9E9E9;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
#idbloggertrick-blogspot-com-likedislike .share-box {
margin: 0.5em 0;
display: none;
}
#idbloggertrick-blogspot-com-likedislike input.share-url {
display:block;
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);
-ms-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #ccc;
padding: 5px;
width: 50%;
}
#idbloggertrick-blogspot-com-likedislike input.share-url:hover {
-moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,.15);
-ms-box-shadow: inset 0px 1px 2px rgba(0,0,0,.15);
-webkit-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, .15);
box-shadow: inset 0px 1px 2px rgba(0, 0, 0, .15);
}
#idbloggertrick-blogspot-com-likedislike .bi-share-button:hover {
filter: alpha(opacity=90);
opacity: 0.9;
}
#idbloggertrick-blogspot-com-likedislike .bi-share-button {
display: block;
float: left;
width: 32px;
height: 32px;
margin: 1% 3% 0 0;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtf5m1te08d3zAacSSxY3BvNyPBzODSYxZp2oXzUSXsu7lsssn5KoVOqorGub_Vjv_tV0WAIb4_mJ6AHRqZ25_UsUbbUsXqxzBMruLCYTDIl4WKD3VCRhXXHpVf6J3voV_MBurxAvbjQQ/s1600/Sprite.png);
background-repeat: no-repeat;
}
#idbloggertrick-blogspot-com-likedislike .bi-share-facebook {background-position: 0 -99px;width: 32px; height: 32px; }
#idbloggertrick-blogspot-com-likedislike .bi-share-twitter {background-position: 0 -165px;width: 32px; height: 32px; }
#idbloggertrick-blogspot-com-likedislike .bi-share-gplus {background-position: 0 -33px;width: 32px; height: 32px; }
#idbloggertrick-blogspot-com-likedislike .bi-share-tumblr {background-position: 0 -132px;width: 32px; height: 32px; }
#idbloggertrick-blogspot-com-likedislike .bi-share-pinterest {background-position: 0 -66px;width: 32px; height: 32px; }
#idbloggertrick-blogspot-com-likedislike .bi-share-blogger {background-position: 0 0;width: 32px; height: 32px; }