Untuk memasang pada wordpress telah siap, kali ini kita cuba untuk pengguna blogspot pula. Caranya mudah.
Butang Perkongsian Pada Blogspot
Pertama, di Dashboard Blogger sila ke Edit Html
Sebelum membuat sebarang perubahan, sila muat turun dan simpan tema lama anda. Apabila sudah selesai muat turun, ikut langkah berikut.
Pertama, masukkan kod dibawah ini antara <head> dan </head> :
<script src='https://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/> <script src='https://apis.google.com/js/plusone.js' type='text/javascript'/> <script src='https://platform.twitter.com/widgets.js' type='text/javascript'/>
Seterusnya masukkan kod berikut antara <b:skin> dan </b:skin> :
/* Butang Sosial by Ahmad Rushdi https://www.ahmadrushdi.com */
.kotak-butang-sosial {
width: 510px;
height: 40px;
margin-top: 20px;
}
.butang-sosial{
float:left;
width:100%;
position:relative;
}
.butang-sosial ul {
left:50%;
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
}
.butang-sosial ul li {
display:block;
right:50%;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
}
.fb {
background: #ECEEF5 url(https://goo.gl/9oxyW) no-repeat right bottom;
border: 1px solid #9DACCE;
padding: 6.5px;
border-radius: 4px;
width: 180px;
}
.gpone{
background: #F9F9F9 url(https://goo.gl/2UdHt) no-repeat right bottom;
border: 1px solid #CCCCCC;
margin: 0 0 0 6px;
width: 80px;
border-radius: 4px;
padding: 5px;
}
.tweet {
background: #E8F3F9 url(https://goo.gl/dtXTI) no-repeat right bottom;
border: 1px solid #A4CCE5;
margin: 0 0 0 6px;
width: 120px;
border-radius: 4px;
padding: 5px;
}
Seterusnya untuk memaparkan butang-butang tersebut, masukkan kod berikut di bawah selepas <data:post.body/> dan sebelum <div class=’post-footer’>
<div class='kotak-butang-sosial'> <div class='butang-sosial'> <ul> <li><div class='fb'><div class='fb-like'><div id='fb-root'/><fb:like action='recommend' expr:href='data:post.url' layout='button_count' send='true' show_faces='false'/></div></div></li> <li><div class='gpone'><g:plusone size='medium'/></div></li> <li><div class='tweet'><a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/></div></li> </ul> </div> </div>
Aku tidak pasti sama ada tema blogspot berlainan. Sebab aku jarang menulis kod untuk pengguna blogspot. Cuma, anda boleh mencuba terlebih dahulu. Dan hasil yang aku dapat ada seperti disini. http://rushdye.blogspot.com/
Semoga berjaya.