Memasang Butang Perkongsian Sosial Pada Blogspot

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”

  1. 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

    1. 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.

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

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

Leave a Reply to Ruzlan Cancel Reply

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.