Memasang Butang Perkongsian Sosial Pada Blogspot

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='http://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='http://platform.twitter.com/widgets.js' type='text/javascript'/>


Seterusnya masukkan kod berikut antara <b:skin> dan </b:skin> :

/* Butang Sosial by Ahmad Rushdi http://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(http://goo.gl/9oxyW) no-repeat right bottom;
border: 1px solid #9DACCE;
padding: 6.5px;
border-radius: 4px;
width: 180px;
}

.gpone{
background: #F9F9F9 url(http://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(http://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.


  • Thanks for info! Gud Job bro!

    • admin

      ur welcome. dah cuba buat? jgn lupa share. 😀

  • tengok coding2 ni rindunya dengan zaman dulu kala…nak bookmark nak menerai buat kat blog

    • admin

      ce kembalikan nostalgia itu. hehe.. kalo ada masalah bgtau ya. 🙂

  • Tutorial yg sgt berguna..thanks

  • salam,

    mantap bro … thanks for the tips …

    biasanya guna plugin jer 😀

  • Izuddin

    Inilah yg ku cari selama ini! Terima kasih bro!! mmg cntik nk letak kt blog aku 😛 hehe

  • 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

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

  • boleh tahan pening jgk ak tgk code2 ni..

  • Comel gak tgk bookmark tu (“,)

  • Tq bro utk info berguna ini…

  • Rad

    Tutorial yg berguna…

  • thanks utk tuto ini.. nak test kat blog baru saya ni…

  • Tutorial yg bagus bagi newbie..bagus!

  • Hello admin,

    wah ha ha ha lepas ni lagi cantik la blogspot saya,teriam kasih banyak banyak

    Cheers,
    Apple iPhone 4

  • Memang menarik info nie.. nanti saya try kat blog saya….blog bro nie memang menarikla…..simple but informatif…

  • info yang sungguh bagus!!…terima kasih , teruskan usaha anda update utk akan datang… Terima kasih utk code ini 🙂

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

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