Memasang Butang Perkongsian Sosial Pada Blogspot

21 Comments / By /

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.

21 thoughts on “Memasang Butang Perkongsian Sosial Pada Blogspot”

  6. n00b

    bro, aku n00b. so, step yg pertama aku dah tak paham. apa maksud bro ‘masukkan kod dibawah ini antara dan ? nape xbagitau paste selepas kod ni ker, paste sebelum code ni ker. huhu. penign2 xpaham

    Reply
    1. admin

      ooo ye eh tak faham, ingat org boleh faham. haha.

      maksud antara tu, selepas < head > dan < / head > sebelum.. untuk mudah, letak je sebelum < / head > sori naa. kalo ada apa2 komen bgtau je, nak share lagi kot org lain tak faham.

      Reply
  16. Ruzlan

    perghh pening aku tengok.tapi takpe, aku cuba asimilasikan dalam otak untuk diaplikasikan dalam blogspot aku..tq 4 sharing bro

    Reply
  17. iridz

    tutorial yg bagus. terima kasih. harap dapat bagi lagi tuturial yang lain. cth : post guna email. twitter trus update ke website…

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.