Sebelumnya ada teman yang menanyakan cara memasang tombol like di postingan, nah kali ini saya memiliki kesempatan untuk membuat tutorial cara membuat tombol Tweet, Google + dan tombol like Facebook tanpa menggunakan plugin pihak ketiga. Jadi disini kita tidak menggunakan plugin pihak ketiga agar loading blog tidak menjadi berat apabila di tambahkan tombol Tweet, Google + dan tombol Like.
Cara membuat tombol Tweet, Google + dan like tanpa plugin pihak ketiga:
1. Login ke Blogger > Template > Edit HTML
2. Sebelum mengubah kode HTML sebaiknya cadangkan dulu template anda untuk menghindari hal-hal yang tidak diinginkan.
3. Centang
4. Cari kode <data:post.body/> jika di Blog anda ada banyak kode seperti itu, pilih kode yang kedua.
5. Simpan kode berikut ini setelah kode <data:post.body/> atau jika anda ingin memasang tombol Tweet, Google + dan tombol like Facebook di atas postingan, simpan kodenya sebelum <data:post.body/>
<div style='float:left;width:80px'>6. Save template dan lihat hasilnya.
<a class='twitter-share-button' href='https://twitter.com/share'>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div style='float:left;padding-left:10px;width:60px'>
<g:plusone size='medium'/>
</div>
<div style='float:left;padding-left:10px;width:90px'>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=90&action=like&font=arial&colorscheme=light"' frameborder='0' height='20' scrolling='no' style='border:none;overflow:hidden; '/>
</div>
Note:
- Jika tombol Google + tidak muncul, copy kode <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> di atas kode </head>
- Jika tombol Tweet, Google + dan Like tidak ingin ditampilkan di halaman Home atau hanya ingin ditampilkan di halaman postingan saja, cukup tambahkan kode <b:if cond='data:blog.pageType == "item"'> dan </b:if> diantara kode tombol tadi. menjadi seperti ini:
Sekian, semoga bermanfaat..<b:if cond='data:blog.pageType == "item"'>< Kode tombol Tweet, Google + dan Like... >
</b:if>
oke gan nice infonya
ReplyDeletemaaf koment aku banyak...soalnya aq lagi kerjain sambil tenya ini.
ReplyDeletebagaimana bila tombol twitter nya di ubah menjadi tombol follow untuk twitter aq
mkasih gan...
ReplyDeleteit's work.
aq ada pertanyaan banyak nih gan, kalo bisa tolong di jawab?
ReplyDelete1> pernah liat di blog arang mouse nya berbentuk segitiga berwarna merah, namun saat menyorot link berganti warna biru. nah bagaimna cara membuat nya?
2> gimana ganti logo blog biar bisa bergerak, ya kayak .gif aq dah ganti pakai file .gif tetep gak bergerak
3> cara bikin teks berjalan di bawah blog (gak ngaruh scroll mouse) kaya di berita kecil tv
bila berkenan tolong jawab pertanyaan saya ini, kalau bisa sekalian artikelnya???
Liat aja nih ada carannya disini ,,,http://habibcommunity.blogspot.com
Deletehttp://www.krtutorplus.com
Jangan lupa liat juga blog ini ya ...
http://java-gaib.blogspot.com/
http://purworejo-cheat.blogspot.com/
mana jawabanya gak nyambung
Delete:w:
Deletemenyorot link berganti warna: cari kode a:hover trus bagian color tinggal ganti aja warnanya contoh untuk link berubah warna menjadi merah saat di sorot kode warnanya color: #FF0000.
Deletecontoh seperti ini:
a:hover {
text-decoration: none;
color: #FF0000;
}
untuk kode warna yg lain bisa cari di mari http://www.w3schools.com/tags/ref_colorpicker.asp
ganti logo dan teks berjalan terlalu panjang kalau dijelaskan disini, so tunggu postingan berikutnya.
bukan link nya gan, namun mouse nya yang berubah warna gimana tuh. kalo link aq dah tau.
Deletesekalian tanya mengubah warna font artikel di blog gimana?
owh kalo itu tinggal tambahin aja kode cursor:url(http://i1162.photobucket.com/albums/q539/komarking/JmKKursorgif-5.png),wait; di bagian a:hover tadi
Deletecontoh:
a:hover {
text-decoration: none;
color: #FF0000;
cursor:url(http://i1162.photobucket.com/albums/q539/komarking/JmKKursorgif-5.png),wait;
}
untuk model kursor yg lain cari aja dimari http://photobucket.com/images/cursor
untuk ganti warna font artikel: login ke blog > template > ubahsuaian > Tingkat Lanjut, lalu edit bagian warna text
ReplyDeletesudah saya coba gan gak bisa makanya saya tanya sini. kalau edit manual di html templte bisa?
ReplyDeletebisa gak ngubah kursor seperti di situs ini
ReplyDeletehttp://www.cursors-4u.com/sets/
gan ngubah tombol share twit nya mrnjadi follow my twit gimana
ReplyDeletemksih gan info.na sangat berguna sekali,.,.
ReplyDeleteliat blog que yg newbie eaa sob http://anakgedongan10.blogspot.com/
sekali lagie mksih...
tolong di like gann FansPage Kamii.. http://www.facebook.com/Citertasik
ReplyDeleteThanks All... :D
selamt berakitivias
ReplyDeletekunjungi kami di ?! www.fansclub48.co.cc
thanks gan info nya, langsung bisa di blog ane :y:
ReplyDeletejangan lupa kunjungan balik gan
gan punya ane kok ngak nambah" walau pun dah di klik berkali"
ReplyDeletegiman gan ??? :p: ane bingung :j: mohon pencerahanya :ab:
yg gk nambah facebook, google atau twitter?
Deletetwitter ma fb
Deletekok bisa gimana ya ?
Minta tolong ni gan, kenapa ya saat aq pasang kode itu di blogku, nyambung dengan baris pertama postingannya. padahal sudah aq ikuti petunjuknya.
ReplyDeletelihat blog gan, jelek banget jadinya.
maksudnya apaan gan, ane blom ngerti..
Deletegan mau tanya bikin kaya teks area tuh gimana yg kaya punya nya agan ni
ReplyDeleteedit bagian quote, coba kesini http://www.mainbom.com/2012/04/membuat-warna-background-block-quote.html
Deletewah komentarnya rame,.... hehehehe
ReplyDeletewahhh makasihhhhh gan ini yang aku cari - cari...
ReplyDelete:o: klo ada waktu mampir ya ke blog sederhana ku
http://www.lomoid.com
gan, mau tanya ni.....
ReplyDeletepunya ku dah muncul google, tweet & FB.....
TAPI KOQ GAK DISA DI KLIK ya...........????
:j:
tu code aku paste di atas
:z:
HELP ME....................................
gk bisa di klik maksudnya?
Deleteatau kalo di klik angkanya gk nambah gitu?
mantap gan, sdah saya pasang di blog saya,.
ReplyDeletetapi kenapa tombol share facebook nggak ada,,??
wahhh nice info,, makasih banyak.. it's work!! ;)
ReplyDeletekeren....
ReplyDeletemakasih gan' ini sangat membantu saya :D
ReplyDeletegan boleh minta template yg agan pke ..??
ReplyDeletehttp://www.savetemplate.com/2012/04/gamefusion.html
Deletethanks om keren dah blognya salam kenal :)
ReplyDeletemantap. ini dia yg ane cari. thanks gan.
ReplyDeleteAlhamdulillah akhirnya dapat juga, maksih sob sharenya..saya udah coba di blog saya dan berhasil, sekali lagi makasih banyak atas sharenya..
ReplyDeletemakasih tutorialnya, punya saya juga barusa dipasang fb like :D
ReplyDeleteMantab sob..
ReplyDeletemakasih...
di tempat ane kdg2 muncul kdg2 ngak tombolnya... :(
kebetulan nih ane juga mau pasang itu. hehe..
ReplyDeletethanks atas infonya.
kapan-kapan mampir ya ke blog ane http://nusanadaft.blogspot.com
ane msh bingung gan,lg coba tapi blm berhasil,mampir gan ke blog ane www.kumpulanjamuherbal.blogspot.com
ReplyDeleteMantap sob, patut di praktekkan.
ReplyDeleteKalo dibawah postingan di wordpress gimana mas?
ReplyDeleteartikel yg menarik nih.... wajib di coba.... :) thanks atas info menariknya....
ReplyDeletemantap...
ReplyDeletesudah saya pasang diblog saya gan :-bd
Thanks gan tutorialnya, sudah saya pasang di blog saya
ReplyDeletekang...., kalo aku like tombol FB di artikel blog ku kok harus konfirmasi dulu ya...??
ReplyDeletetrus urlnya itu : https://facebppk.com/plugin/eror/bla..bla..bla...
and ndak muncul ke wall facebook...
yang eror kira2 apanya ya...???
mudah2an terjawab kang..., ni ane borkmark nunggu jawabannya
blog ane : http://www.geliatjogja.tk ( maaf baru nata kontent masih copasiana semua)
coba buka url ini http://tny.cz/7591b3b7
DeleteWoyo..... makasih mastah....., langsung praktek.......,
DeleteTerima kasih infonya..
ReplyDeleteSangat bermanfaat..
bgus ni bisa memudahkan orang lain untuk share tulisan kita di jejaring sosial
ReplyDeletemantap...tapi-tetap-aja-gagal-pas-masang-di-Blog-saya..:(
ReplyDeleteinvestasi-pc.blogspot.com
Sangat membantu, makasih banyak ya!
ReplyDeletegood post :) thanks
ReplyDeleteterima kasih atas.. share nya.
ReplyDeletemantap..
semoga sukses selalu
salam ayobangkitindonesia
wah..
ReplyDeletelangsung terpasang bagus di blog ane..
cek aja gan
http://www.rangga-atmajaya.com/
keren bangat gan..