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
BalasHapusmaaf koment aku banyak...soalnya aq lagi kerjain sambil tenya ini.
BalasHapusbagaimana bila tombol twitter nya di ubah menjadi tombol follow untuk twitter aq
mkasih gan...
BalasHapusit's work.
aq ada pertanyaan banyak nih gan, kalo bisa tolong di jawab?
BalasHapus1> 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???
mana jawabanya gak nyambung
Hapus:w:
Hapusmenyorot 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.
Hapuscontoh 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.
Hapussekalian 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
Hapuscontoh:
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
BalasHapussudah saya coba gan gak bisa makanya saya tanya sini. kalau edit manual di html templte bisa?
BalasHapusbisa gak ngubah kursor seperti di situs ini
BalasHapushttp://www.cursors-4u.com/sets/
gan ngubah tombol share twit nya mrnjadi follow my twit gimana
BalasHapustolong di like gann FansPage Kamii.. http://www.facebook.com/Citertasik
BalasHapusThanks All... :D
selamt berakitivias
BalasHapuskunjungi kami di ?! www.fansclub48.co.cc
thanks gan info nya, langsung bisa di blog ane :y:
BalasHapusjangan lupa kunjungan balik gan
gan punya ane kok ngak nambah" walau pun dah di klik berkali"
BalasHapusgiman gan ??? :p: ane bingung :j: mohon pencerahanya :ab:
yg gk nambah facebook, google atau twitter?
Hapustwitter ma fb
Hapuskok 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.
BalasHapuslihat blog gan, jelek banget jadinya.
maksudnya apaan gan, ane blom ngerti..
Hapusgan mau tanya bikin kaya teks area tuh gimana yg kaya punya nya agan ni
BalasHapusedit bagian quote, coba kesini http://www.mainbom.com/2012/04/membuat-warna-background-block-quote.html
Hapuswah komentarnya rame,.... hehehehe
BalasHapuswahhh makasihhhhh gan ini yang aku cari - cari...
BalasHapus:o: klo ada waktu mampir ya ke blog sederhana ku
http://www.lomoid.com
gan, mau tanya ni.....
BalasHapuspunya 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?
Hapusatau kalo di klik angkanya gk nambah gitu?
mantap gan, sdah saya pasang di blog saya,.
BalasHapustapi kenapa tombol share facebook nggak ada,,??
wahhh nice info,, makasih banyak.. it's work!! ;)
BalasHapuskeren....
BalasHapusmakasih gan' ini sangat membantu saya :D
BalasHapusgan boleh minta template yg agan pke ..??
BalasHapushttp://www.savetemplate.com/2012/04/gamefusion.html
Hapusthanks om keren dah blognya salam kenal :)
BalasHapusmantap. ini dia yg ane cari. thanks gan.
BalasHapusAlhamdulillah akhirnya dapat juga, maksih sob sharenya..saya udah coba di blog saya dan berhasil, sekali lagi makasih banyak atas sharenya..
BalasHapusmakasih tutorialnya, punya saya juga barusa dipasang fb like :D
BalasHapusMantab sob..
BalasHapusmakasih...
di tempat ane kdg2 muncul kdg2 ngak tombolnya... :(
kebetulan nih ane juga mau pasang itu. hehe..
BalasHapusthanks 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
BalasHapusMantap sob, patut di praktekkan.
BalasHapusKalo dibawah postingan di wordpress gimana mas?
BalasHapusartikel yg menarik nih.... wajib di coba.... :) thanks atas info menariknya....
BalasHapusmantap...
BalasHapussudah saya pasang diblog saya gan :-bd
Thanks gan tutorialnya, sudah saya pasang di blog saya
BalasHapuskang...., kalo aku like tombol FB di artikel blog ku kok harus konfirmasi dulu ya...??
BalasHapustrus 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)
Woyo..... makasih mastah....., langsung praktek.......,
HapusTerima kasih infonya..
BalasHapusSangat bermanfaat..
bgus ni bisa memudahkan orang lain untuk share tulisan kita di jejaring sosial
BalasHapusmantap...tapi-tetap-aja-gagal-pas-masang-di-Blog-saya..:(
BalasHapusinvestasi-pc.blogspot.com
Sangat membantu, makasih banyak ya!
BalasHapusgood post :) thanks
BalasHapuswah..
BalasHapuslangsung terpasang bagus di blog ane..
cek aja gan
http://www.rangga-atmajaya.com/
keren bangat gan..
Tulisannya bermanfaat gan. apalagi untuk saya yang sedang masa labil untuk merbah tampilan blog :D
BalasHapusmantapp, mampir juga http://roufhacker.blogspot.com/
BalasHapusmakasih infonya gan bisa saya pasang diblogku
BalasHapusWahh ini yang saya cari-cari, terimakasih gan atas ilmunya
BalasHapusmampir juga http://kebal-online.blogspot.com
coba dulu...
BalasHapus