Cara Terbaru Membuat dan Memasang Tombol Share di Blog seperti Template Blog Evo Magz Mas Sugeng - Ada banyak sekali cara untuk membuat tombol share button yang dapat kita pasang di blog kita , ada yang menggunakan java script dan ada yang tidak menggunakan java script .
Kali ini saya akan bagikan bagaimana cara tuk membuat tombol share button di blog yang letaknya dibawah postingan , tombol share ini merupakan tombol share karya mas sugeng yang sudah ada sebelumnya di template evo magz dan brosense . tombol share ini sangat unik sekali , dimana tombol share ini disertai dengan box_count , untuk lebih jelasnya anda bisa lihat demo gambar dibawah ini , ataipun di tombol share saya
Berikut Cara Membuat Tombol Share Keren Ala Evo Magz
- Seperti biasanya , masuk dulu ke editor template html
- Pasang kode css berikut tepat di atas
]]</b:skin> atau </style>
.share-buttons-box {height: 67px;background: url(http://3.bp.blogspot.com/-moj4-jk-UB0/U1qCkCPaGQI/AAAAAAAADTY/tixmak8NHV8/s1600/share.png) no-repeat 330px 10px;margin:20px 0 15px;overflow:hidden;}
.share-buttons{margin:0 0;height:67px;float:left}
.share-buttons .share{float:left;margin-right:10px;display:inline-block}
Kemudian carai lagi kode <data:post.body/> ( biasanya kode tersebut lebih dari 2 , sobat pilih aja yang terakhir atau di coba satu persatu )
- Setelah ketemu kode diatas kemudian pasang script dibawah ini tepat dibawah kode
<data:post.body/>
<div class='share-buttons-box'>
<div class='share-buttons'>
<div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
<div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
<div class='share fbshare'><div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div>
<div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
<div class='share linkedin'><script src='//platform.linkedin.com/in.js' type='text/javascript'>
lang: en_US </script><script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/></div>
</div>
</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
- Terkhir Simpan Template dan Lihat Hasilnya
Jika Berhasil maka tombol share tadi akan seperti pada gambar diatas , atau pada share button yang saya pasang ( bila masih saya pasang ) hehheheheh , gimana ? ada kesulitan gak cara bikin share button ala mas sugeng evo magz ? jika ada silahkan komen dibawah .
59 Komen Cara Membuat Tombol Share di Blog seperti Evo Magz
Wahh keren yaa gan...
saya pengen deh punya template kayak evo magz itu, tapi muahal :D
Sama gan , saya juga pengen template keren evo magz itu , tapi saya lebih suka dengan template design sendiri , meskipun jelek tapi memuaskan , hehhehe ^_^
Ijin pasang di blog saya ya mas yadi
Tombol sharenya keren banget
apa ini mempengaruhi loading blog mas? takutnya makin berat ,mohon bimbingannya mas yadi
monggo di pasang
Kalau memperngaruhi sih iya , tapi gak begitu memberatkan loading blog kok :D
siippp mantep ahh
salam kenal mas, , bagus ini langsung praktek dan sukses
http://animesubindoterlengkap.blogspot.com/2014/09/one-piece-episode-662-subtitle-indonesia.html
ko facebook like sama facebok sharenya gak mau muncul ya :-(
Iya share and likenya ga muncul nih om...
mungkin di template sobat belom ada javascript facebook , solusinya silahkan pasang kode dibawah ini tepat dibawah kode </head>
nih kodenya
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;js.async=true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
gan, gue ucapin terima kasih bangat, gue 7 hari 7 malam cari cara pasang tombol share fb, baru di blog ini ketemu caranya, makasih bangat gan
Keren mas Yadi, langsung praktek dan nemuin kendala tombol share gak muncul. setelah scroll ke bawah akhirnya nemu solusi ini. Kalo bisa, saran aja,scriptnya edit juga di post mas biar yg lain terbantu.
Ijin nitip link jika diijinkan, masih belajar ngeblog BeritaSitu.blogspot.com :D
thanks mas
Berhasil gan, Thanks .
makasih infonya
jangan lupa mampir ya
http://adutburza.blogspot.com/
www.giribig.com
Sudah bisa mas.. tapi kok loadingnya berat ini lapak ane gan rahmatfirdaus-pgsd.info
sangat membantu jangan lupa mampir ya http://asepstbandlangit.blogspot.com
Izin Praktekin gan :D
btw blognya dah ane follow jika berkenan follback ya http://www.secret-team.com
Follow done bro
http://template-simpel.blogspot.com/2014/09/download-template-evo-magz-responsive.html
template evo magz nih
mas kalo misal script diatas ditambah kode script share button facebook bisa ngga ? , dan boleh minta kode scriptnya ? :v maaf mengganggu
thanks mas sedot dlu hehehe :D
makasih mas Yadi tutorialnya,
saya coba dulu mas tutornya, semoga aja berhasil hehehe
bro kok saya jadinya Vertikal gak Horisontal bisa cek www.bsukses.com
Saya gak bisa mas,
FB nya mas yadi apa ya? mau saya tanyakan lewat fb?
Makasih mas... :D
tombol G+ ane koq gak muncul ya gan?
mantab
template kita sama om, haha
silahkan bermain ke kisahpedia.blogspot.com
saya coba dulu mas, soalnya saya tertaring dengan tomol share ini.
kok punya saya tetep gk nongol ya ? ada yang bisa bantu ?
FB nya g mncul gan..
punyaku juga gak muncul gan, gimana nich
javascript twitter gak muncul, mas. gimana cara munculinnya?
mungkin karena di template agan belom ada javascript twitter jadi , silahkan pasang kode dibawah ini kode
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
pasang kode tersebut diatas kode </body> gan
Untuk widget fb yang tidak muncul , itu disebabkan di template agan belom ada javascript facebook , solusinya pasang javascript facebook berikut diatas kode </body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;js.async=true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Makasih min, sudah ke TKP berhasil ngikuti petunjuk Mas Yadi. Fb,twit,g+.likeind tampil.
Tapi kok tombol sharenya saya, ke bawah iya min, ngga ke samping tampilananya. Solusinya gimana min hee
Nih blog saya -------->>>>> http://heru-setianto.blogspot.com/
Silaturahmi, mampir blog saya seaklian ngasih solusinya min :)
makasih gan, tambah ganteng aja blog ane hehehe
gak ada om,gmana ya?
mohon info ^^
tanks gan infonya berguna banget buat saya
mas yadi, artikel anda luar biasa manfaat,, mohon izin pakai ya
kalau boleh saya jg mau nanya, bisa ga font please sharenya kita edit sendiri stylenya??
bisa mas, anda tinggal merubah link gambarnya :D
Trimakasih Mas Yadi tutorialnya,,
Google+ dan blog sudah saya Follow, Jika berkenan Follback ya mas,
mas yadi kalo jadinya bentuk nya menurun horizontal bukan vertikal mendatar yang dirubah apanya ya
kalo membuat share button yang kaya masyadi diatas gimana bro???yang dirubah apanya???
terimah kasih gan, jadi terlihat keren nih blog saya :D
knpa yah jdi ke atas bukan ke samping...
terimakasih gan infonya membantu
Kok Horizontal hasilnya ya. Kebawah gitu, bukan menyamping.
Apa yang salah ya
MAs Yadi kok punya saya cari kode malah ga ada ya ?
mas yadi...di blog saya kok tetap gak muncul yah?semua script udah dipasang tapi hasilnya tombol fb belum muncul juga
Mas saya juga sebelimnya Ga ada tombol LIKE & SHARE trus ikutin cara yg di komen ini.... nah kok LIKE & SHARE nya KEPOTONG ya ?
http://s28.postimg.org/hh8s829al/kok.png
mohon dibalas secepatnya
Mas kok tombol share gak berfungsi ya, munculnya aplikasi terjadi kesalahan?
Thankz Agan Mas Yadi atas infonya,, saya mau nambahin dikit nih, kalau pada blog saya pasang css nya diatas kode ini
]]> bukan kode ini ]] karena pada blog saya ga ada kode ini ]] tapi adanya kode ini
]]> beda kan?
Sekedar info aja barangkali ada yang mengalami hal yg sama seperti saya, biar gak bingung.
keren
Artikelnya bermanfaat sekali, agan. Ada pertanyaan dikit agan?, waktu mau ngesher pake aplikasi uc, gak bisa disher, kira2 apa penyebabnya, gan?.
Mas itu yang tombol twitter ga ada kotak counter diatasnya, bagaimana cara memperbaikinya yaa? atau ada cara buat ngilangin counter boxnya sekalian biar g keliatan ganjil.
thankyu sebelumnya
= > Silahkan berkomentar sesuai artikel diatas
= > Berkomentar dengan url ( mati / hidup ) tidak akan di publish