Alhamdulillah, baru habis midterm statistics Isnin lepas. Harap-harap markah pun baik. Dah lama rasanya tak berkongsi tutorial blogspot. Rasanya last tutorial blogspot dulu ada tulis pasal Floating Navigation Widget. Kali ni ingat nak berkongsi tutorial membuat sosial sharing button mashable style. Widget ini adalah penting kerana fungsinya yang memudahkan pelawat / pembaca berkongsi entry di facebook, tweet di twitter ataupun berkongsi dengan google Buzz. Kadang-kadang bila singgah di blog yang takde kemudahan macam ni, susah jugak ye nak tolong tweetkan? Sebelum tu kalau sesiapa ada twitter, boleh follow twitter saya, baru je lagi tu. Ok, berbalik kepada Mashable Style Social Sharing button ni. Sebelum tu kalau taktau, boleh tengok screenshot kat bawah ni, widget ni memang nampak kemas dan simple!
Sebelum tu, kredit kepada kolmewan yang telah bersusah payah cari balik tutorial ni dari blog lama die, setelah berpindah ke wordpress. Tutorial ini saya dah cuba sendiri di template minimalist, dan telah dicuba di Google Chrome dan Mozilla Firefox. Makluman tambahan, widget ini hanya akan muncul di post page, kiranya di homepage takkan muncul. Bila tekan permalik post page je baru muncul. Harap maklum.
1. Pergi ke bahagian EDIT HTML
2. Cari ]]></b:skin> (Guna CTRL + C)
3. Gantikan dengan kod berikut:
.center {
margin:0px auto!important;
}
.float-sharer {
background-color:#FFF;
border:1px solid #C1CDCD;
margin-top:18px;
width:50px;
padding:5px 5px 3px;
}
.kolmewan-blogspot-com {
height:118px;
width:61px;
}
.FBConnectButton_Text {
font-size:8px;
padding:2px 4px 3px!important;
}
]]></b:skin>
<script src=’http://irwanamit.webs.com/jquery-1.2.6.min.js’ type=’text/javascript‘/>
4. Kemudian, cari <body> dan letak kod berikut selepas <body> tadi
<div align=’center’ class=’center’>
<table cellpadding=’0′ cellspacing=’0′>
<tr>
<b:if cond=’data:blog.pageType == "item"’>
<td valign=’top’>
<div class=’kolmewan-blogspot-com’/>
<div class=’float-sharer’>
<script src=’http://tweetmeme.com/i/scripts/button.js’ type=’text/javascript’/>
<div class=’clear’/>
<a href=’http://www.facebook.com/sharer.php’ name=’fb_share’ type=’box_count’>Share</a><script src=’http://static.ak.fbcdn.net/connect.php/js/FB.Share’ type=’text/javascript’/>
<div class=’clear’/>
<a class=’google-buzz-button’ data-button-style=’normal-count’ href=’http://www.google.com/buzz/post’ title=’Post on Google Buzz’/>
<script src=’http://www.google.com/buzz/api/button.js’ type=’text/javascript’/>
<div class=’clear’/>
<script src=’http://www.stumbleupon.com/hostedbadge.php?s=5’/>
</div>
</td>
</b:if>
<td>
5. Cari </body> dan paste kod berikut sebelum </body>
</td>
</tr>
</table>
</div>
6. Ok, sekarang dah boleh save. Harap-harap menjadi.
Kalau ada masalah atau tak reti buat, sila komen di bahagian bawah.
suffer8zine
wahhh nice tuto la bro!
anif
Terima kasih kerana berkongsi 🙂
Affan Ruslan
sama2 bro.
saja berkongsi, sebab jarang nampak tutor ni + rasa sgt berguna untuk memudahkan pelawat. kalau untuk WP, pakai plugin je
dnoBiz
kalau ada lagi kongsila lagi Fan
kuman
ilmu menarik.. nka kena try nih…
iKaH
tq 4 sharing.
Affan Ruslan
u’r welcome iKaH
etomyam
wah menarik ni sudah boleh diguna untk blogspot
Affan Ruslan
yup bro, aku ingat wp je blh. nice benda ni, satu widget untuk 4 function
Affan
Update! Tutorial Blogspot – Mashable Style Social Sharing Button http://goo.gl/fb/W0kzO
naem
nice share 🙂 nnti law rajin maw try..huhu
Affan Ruslan
try jgn tak try bro, serius sng.
hazrul mamat
Tutorial Blogspot – Mashable Style Social Sharing Button http://bit.ly/csEFRy
syahrilhafiz
wooot3..
kolmewan dah tukar dah ke..
adoi aku tak taw…hehe
thanks 4 this..
Affan Ruslan
tu lah hang. mentang2 dah popular, blogger macam kitorang dilupakan. hahah
syahrilhafiz
cerk..asal la..
aku pijak dibumi yang nyata lagi la..
sob3 sedih lah aku macam ni..haha
Hadi Rofiee
Alamak, blog blogspot dah ditinggalkan. Huhu. 🙂
Fitrihadi
style mashable tu memang best ar..heh
Affan Ruslan
betul tu bro.
satu 4 widget, tp byk kegunaan. mmg berbaloi2
rockinsudu
nice sharing bro 🙂
Affan Ruslan
😀
aku dah reply soalan ko pasal comluv tu kat fanpage
nadey
waahhhhh tutorial yg clear huhhuh nk wat la
Affan Ruslan
hohoh. rasanya pun mmg clear dah mudah.
harap2 takde masalah
tiefazatie
wah..stylo la bro….=)
Affan Ruslan
hehe. simple je mnde ni, tapi fungsi byk, tu yg best tu
nadey
aik….nadey mcm salah buat je…xde pon ape2 kt page blog huhuhuhuh
Affan Ruslan
die hanya akan muncul kt entry page, kat main page takde.
cuba tekan tajuk entry
nadey
huhuhuhu phm2 hahahah tq2
Affan Ruslan
ok, no prob
wazy
cun gak style mashable ni
nanti aku nk buat satu kat blogspot
tq for sharing bro
Affan Ruslan
sama2 bro. haah, kemas dan simple
Nine
Salam bro Affan..wah mantap tuts dari bro..power coding…nice2 hehe..
Unutuk blogspot pun ada ek..senang camnih..thanks berkongsi..kalo wp plugin jer ..
pasal tweet button tu aku try tak support theme aku..hehe dulu try boleh..tu yg letak google buzz jer..
kena guna satu lagi tweet button plugin putih tu kut..nanti aku try hehe..
Affan Ruslan
takde lah power mananya. tgk2 sikit pandai lah. hehe
RedBoys
nice sharing bro.. kolmewan dh berpindah erk? taktahu plak aku.. bila dia pindah? nak gi terjah jap blog dia..
Affan Ruslan
sudah bro. tapi die tgh edit theme jugak rasanya
syahrilhafiz
kosong lagi..
tapi themes dia aku suka..
plain white gitu…
dnoBiz
heheh Thank Fan,
Boleh pasang kat blog aku yang satu lagi ni heheheh.
PS :akhirnya dapat jugak aku tinggal coment kat blog kau
Affan Ruslan
hoho. dah agak, mesti masalah ngn plugin haritu
nash
teringin nak cuba tapi cukuplah da ader facebook likes,share ngan retweet..hu3
Salam..minta maaf kerana menyiarkan entri yang salah publish. Ini kerana entri itu cuma letakkan tajuk,kemudian save as draft sebelum ada masa nak taip. tapi terpublish tanpa sengaja. Maaf kerana susahpayah memberi komen..hu3
ini entri yang terbaru dari saya:
http://nash121.blogspot.com/2010/10/apabila-karya-photoshop-serba-tak.html
Affan Ruslan
ok, takdehal. aku cuma bg idea je kat “entry” tu
izulman
tgok html codes terus trauma. Biase la computers n me are the eternal enemy..Trauma sejak ambik C++ programming, Anyway, kalau rase dh free n ade mase ‘nak pahamkan’ bende tu, then Ill give a try haha. sah2x aku buta computer
Affan Ruslan
hahaha. adoi ko ni.
hehe. sng je kot.
btw, this is for blogspot user. kalau wordpress, search plugin je bro, takyah sentuh kod pun.:D
pawaka19
oo..pernah pakai dulu..berat la plak blog..so pakai yg simple2 jer
Affan Ruslan
berat ke? hoho. taktau lah pulak
gnesop.com
nice sharing Affan 🙂
Affan Ruslan
harap2 ada yang guna bro. blog bro takyah kot, dah ada sharing button kat bawah tu
Mus
menarik.. tapi untuk blogspot jer..
Affan Ruslan
utk wp ada plugin bro
Affan
Tutorial Blogspot – Mashable Style Social Sharing Button http://selangorbloggers.com/read/2744
zik
menarik2… tapi dah berat loading blogspot aku tuh..hehe..
donny
widget tu untuk dipasang di blogspot ker bro?…tq for sharing
Affan Ruslan
haah, ye bro. tapi kalau kat wp pun ada plugin rasanya, etomyam pnh pakai rasanya. takpun macam ohtidak.com
Izulman
RT @affanruslan: Tutorial Blogspot – Mashable Style Social Sharing Button http://selangorbloggers.com/read/2744
Faarihin
macam nak buat.. tapi tunggu mood datang lah.. huhuhu..
berkaitan dengan readmore tu.. saya ikut tutorial di sini..
http://adysyam.blogspot.com/2009/06/tutorial-ini-bertujuan-untuk.html
Faarihin
aik.. ada sesuatu yang tak kena pada komen tu lah.. apa2 pun awak cuba ajelah dulu tutorial tu yer.. yang letak tajuk entry pada read more tu… kemudian la yer..
sibutiz
nice post friend…..
RedBoys
wow.. bravo2.. rajin bro buat tutorial erk.. haha.. aku skrg makin malas nak updated tmbh2 kalau nak buat tutorial lagi la malas.. erk? apa motif aku bgtahu semua ini? entahler labu..
Sir Marcello
harapan aku dari tutorial hang nie…semoga ramai kawan2 blogger kita mengamalkan prinsip retweet-sharing-etc…
samanosuke_04
byk sgt social network punye button kekadang tak kemas gak.. pastue aku pun bukan yang jenis aktif sangat, hohohhoo.. tapi bagi aku.. yang kat blog ko punye kemas! hehehe..
Affan Ruslan
haha. dan2 lah ko kemas. betul, kalau byk sgt serabut, bukan pakai sume pun. letak nak sampai 20, pakai 2 3 je pun
suri
klu cam tuh pakai yang mana perlu jerlah heee..
Jom ke blog suri.link dia ada kat shoutmix =)
dnoBiz
ambil yang perlu je jangan ambil yang berkenan dihati, nanti takde tempat nak letak 😀
tehr
aku pun setuju ambil yang popular je
tak perlu ambil banyak sangat, nanti lambat pula loading blog
akakcomey
Akak datang cari info baru
suri
apa sahaja info suri terima sahaja..sebab ilmu tu manfaat di kemudian hari kelak
Affan Ruslan
🙂
dnoBiz
banyak ni kak TT dia bagi free je..
tapi kalau nak bayar boleh bagi saya 😀
aried
huhuhu…mmg tutorial yg best..tapi dlm blog kdg2 ade byk sgt plak..ehhehe
Affan Ruslan
haha. betul. saja share bro, kalau dah byk, ambil yg patut je lah. hehe
suri
salam..
pagi, wah makin bertambahlah aksesori begini..
suri ada blogspot tapi jarang bodek2 sana sini.guna pun sebab di mesra pengguna..dan sekarang pun masih setia padanya lagi walaupaun ia part time lover hee..
Affan Ruslan
hhehe. biasalah tu, rasanya mmg ramai org yang berpindah ke wp, masih ada lagi blog blogspot. saja simpan dan godek2 agaknya
// wan
muga dgn adanya widget macam ni harap rakan2 blogger kita amalkan sikap suka me-RETWEET, me-SHARE, me-LIKE dan sebagainya.. buhehehehee 🙂
Affan Ruslan
hahah. hampeh lah ko ni. padahal tutor sendiri..
syahrilhafiz
gyahahaha…kena rajin like2 la..
ini masuk =_=
dedoku
siapa2 yang tak pasang lagi social button leh r try tutorial ni. mmg berguna 🙂
Affan Ruslan
😀 harap2 berguna. hoh
ProfHariz
Nice One!
Pejuang Kesenian Extreme
Bersyukur pakai WP..jadi just pasang je plugin..Tak yah susah2 nak edit ..hihi
Affan Ruslan
hehe. betul tu bro ;D
syahrilhafiz
dari dulu aku suruh pakai tak mau..
nak pikir dulu la..tengok dulu la..muahaha
hanz
wah terbaik lah entry nie bagus sharing ape yang kita ada,hanz nak wat tutorial pasal platfrom worpress lah pasni bersemangat kot bace nie
Affan Ruslan
haha. buat2. aku nak tgk tutor wp pulak.
nak buat, aku blm byk explore lagi. huhu
suri
buat masa ni suri guna blogspot dulu heee.. cik cahaya cinta dah merajuk huhu..
Affan Ruslan
mna cahaya cinta?
taktau pulak suri ada blog blogspot. hehe
dnoBiz
aku rasa berkenan gak dengan benda ni tapi masa tak berapa mengizinkan untuk godek script
Affan Ruslan
hehe. guna wordpress takyah godek2 sgt. pakai plugin je blh
ARC
punnn nice jugeeee haha.
bro aku nak gune wordpress tp xreti gne. korg blaja ktne ar?
Affan Ruslan
aku mintak org ajar. tak berapa susah bro.
ko betul2 nka guna wp ke? aku blh forwardkan kat org.
mumumeow
wah…thanks 4 da info…..
tpi takot nk try…nnti x mnjadi…
hafizmd
tutorial yg cukup bagus ni…tapi utk aku..jarang sgt gune yg sosial tuh..tu malas nk tempek kat blog…heheh
tapi blog ni punye..yg kat atas tuh…mmg cantik..
Affan Ruslan
kena letak gak bro. at least twitter ngn fb, sng org nak share. kadang2 bukan sume entry aku berguna, tapi bila ada yg berinfo tu, rasa bgs gak diorg share,
Faisal
Aku pun nak try jgk tutorial ni.mcm menarik je
acapz
kt blog lme aku de pkai. kolmewan pnya jgk. haha. smart. dh buat review dlm draft je. huhu. btw nice bro 😀
suri
pakai mana yang perlu sahaja
fendidahada
kat wordpress ok tak bro?boleh function tak?
Affan Ruslan
kat WP, cari plugin je bro 😀
yo0p7fold
tak boleh lah. macam mane ye?
yo0p7fold
salam. dah jadi.. hehe. terime kasih. tapi kenapa time view home xade, kalau satu2 baru ade?
Affan Ruslan
haah. mmg sengaja di hide kan. nak bg ringan. sebab ada blog sampai 10 entry kat main page, kalau ada kat main page, widget ni akan show up 10 kali, jadi memberatkan blog.
Faham tak?
yo0p7fold
nak adjust macam mana nak suh duduk bawah sikit? atas sangat tuu… hehehe. terime kasih sudi balas pertanyaan budak sekolah nie.. hehe.
Affan Ruslan
adjust bhgn ni
margin-top:18px;
baguslah bertanya, saya dulu pun tanya2 blogger lain jugak. hehe
Affan Ruslan
tukat lah 18 tu jadi 40 ke, ikut kesesuaian
yo0p7fold
Trimas untuk balasan itu. Hehe. Sangat2 berguna. Ada tutor nak edit guna adobe photoshop x?
Affan Ruslan
sorry takdelah, saya pun baru ada photoshop, jadi baru juga nak belajar.
*dah smart dah widget tu, kalau nak lagi smart, kebawahkan sikit agar die tak overlap dengan header
De Mois
Thanks bro..dah buat dah..tapi kenapa tulisan jadi center lepas 2. Aishh..follow me at twitter senang2.. di @de_mois
Revolusikan hidup dengan SuaraSendiri
PutraRocker
tak jadi la bro..sigh
paihujey
bro,nak tanya..
yang like,tweet,+1 dalam box kat akhir entry tu ko pakai plugin ke guna kod?