Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Tombol Share di Bawah Posting Blog

Tombol Share Blogger Valid HTML5 Membuat Tombol Share di Bawah Posting Blog – tentu sudah tidak asing lagi dengan tombol share yang biasa terlihat di bawah posting blog, fungsi dari tombol share tersebut agar lebih memudahkan visitor untuk membagikan artikel yang sudah kita posting ke dalam beberapa media sosial seperti facebok, twitter, google+, lintasme dan jejaring sosial lainnya. Tanpa memasang tombol share ini sebenarnya blogger juga sudah menyediakan widget tombol share, namun apa daya karena tombol share default blogger tersebut tidak valid HTML5 jadi ada baiknya apabila kita modifikasi agar tombol share yang terletak di bawah posting blog agar bisa lolos dari validator W3C dan bisa valid HTML5. Untuk membuat tombol share ini hanya menggunakan CSS saja tanpa menggunakan gambar, sehingga tampilan dari tombol share ini lebih sederhana dan minimalis dengan di sertai warna-warna yang menarik. Untuk memasang tombol share di bawah posting blog juga cukup mudah, hanya dengan menambahkan sedikit kode saja yang terdapat dibawah ke dalam Edit HTML template blog maka hasilnya seperti yang tertera pada gambar di atas. Untuk itu berikut tutorial untuk Membuat Tombol Share di Bawah Posting Blog agar valid HTML5 dan full color.

1. Login ke akun blogger.
2. Masuk ke Template lalu pilih Edit HTML.
3. Copy kode berikut ini lalu taruh di atas kode ]]></b:skin>
.widgetshare {font:bold 12px/20px Tahoma !important; background: #333;border: 1px solid #444; padding: 5px 4px; color: #fff !important; margin-top: 10px;}
.widgetshare a{font:bold 12px/20px Tahoma !important; text-decoration: none !important; padding: 5px 4px; color: #fff !important; border: 1px solid #222; transition: all 1s ease;}
.widgetshare a:hover {box-shadow: 0 0 5px #00ff00; border: 1px solid #e9fbe9;}
.fcbok { background: #3B5999; }
.twitt { background: #01BBF6; }
.gplus { background: #D54135; }
.digg { background: #5b88af; }
.lkdin { background: #005a87; }
.tchno { background: #008000; }
.ltsme { background: #fb8938; }
4. Selanjutnya copy kode berikut ini, lalu taruh di bawah kode <data:post.body/> atau bisa juga <div class='post-footer'>
<div class='widgetshare'>
Share artikel ke:
<a class='fcbok' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a>
<a class='twitt' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a>
<a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a>
<a class='lkdin' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Linkedin</a>
<a class='tchno' expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' rel='nofollow' target='_blank'>Technorati</a>
<a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Digg</a>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' class='ltsme'>Lintasme</a>");
//]]>
</script>
</div>
5. Langkah terakhir tinggal Simpan template lalu lihat hasilnya.

Demikian tutorial untuk Membuat Tombol Share di Bawah Posting Blog. Perlu diperhatikan dalam langkah pemasangannya, biasanya didalam template blog terdapat beberapa kode <data:post.body/> dan <div class='post-footer'> maka dari itu silahkan sesuaikan dengan template blog yang anda gunakan.

Berlangganan artikel via email

272 Response to "Membuat Tombol Share di Bawah Posting Blog"

«Oldest   ‹Older   201 – 272 of 272   Newer›   Newest»

Itu artinya kalau internetan harus ngirit mas kalau pakai internet kuota hehe :D

Balas

Full colour. Keren sob..
Saya ambil scriptnya sob buat koleksi. siapa tau suatu sat perlu :)

Balas
avatar
Anonymous

Sama-sama Mas Wahyu Kang Ucup dan sobat semua
Sealamat dan sehat selalu setiap Hari,,. kalau idhul adha nya
Sudah lewat sih..?

Balas

Selamat Jelang Tahun Baru 2014 Buat sobat blogging semua
Tapi sayang yah, di blogging gak kaya di Radio ada jumpa Fans
nya, seandai aja di blogging ada jumpa fans nya mantap tuh

Balas
avatar
Anonymous

Enakan yah Mas dengan widget share ini, saat kita
Posting gak ribet langsung klik beres dah. sukses deh Mas Andes

Balas
avatar
Anonymous

Sudah saya praktekan, makasih mas andes sudah mau berbagi :D

Balas

kalo cuma buat facebook, twitter dan G+ aja bisa gak tu gan ?

Balas

http://mas-andes.blogspot.com/2013/10/membuat-tombol-share-di-bawah-posting-blog.html?showComment=1382109277257#c5193676311775945529

Balas

kodenya simple dan keren abis.. makasih mas...

Balas
avatar
Anonymous

makasih mas, kebetulan saya lagi nyari tombol lintas me :D

Balas

Ikutan nimbrung walau telat, tidak buat loading lambat kah mas?

Balas

emm bisa nih kayaknya di jadiin referensi :D

Balas

thankz bro. . .sangat membantu. . .

Balas

diaku nggak muncul :(
gimana nih ??

Balas

Mantap Pak Bos Hatur Nuhun ahh :D
Kunjungin EA GAMES Official, Bisa dilihat bukan game biasa GAME EA asli Gratis Download, kalo di EA asli pasti beli kalo sama guwa gratis broo

http://ea-gamesofficial.blogspot.com

Balas

timakasih bisa juga ahirnya

Balas

Saya sudah pasang thank atas panduan nya :)

Balas

Makasih gan postingannya sangat membantu

www.ghoeszt-x.com

Balas

hihiii ijin coba sob

Balas

Bagus Sekali artikelnya mas, oya tempaltenya juga menarik ni, sudah responsive kan template ini, boleh saya tahu tempat downloadnya, terima kasih

Balas

thanks bro, mantabs

Balas

terima kasih bang.. sudah saya terapkan diblog saya
http://rezkyjoe.blogspot.com

Balas
avatar
Anonymous

terimakasih tutorialnya :)

Balas
avatar
Anonymous

blogwalking gan

salam kenal

Balas

cara bikin blog kode program bisa berwarna warni kayak agan tu gimana caranya ya..
Tolong dishare dong..
Terimakasih..

Balas

terimakasih gan,sudah saya pasang,silahkan dilihat

Balas

Mantab kali beguna untuk blog saya Solusi-Kita1.blogspot.com

Balas

Makasih berat mas broo,, langsung deeh di praktekin

Balas

Mas mau tanya bagi HTML dong yang Next previous , @vjoy10 ini twitter saya mas

Balas

Wah Pertamax,z GaN tutorialnya memang ini yang saya cari :D Udah berhasil tk praktekin tanpa kendala lagi N hasilnya memuaskan OK OK OK

Balas
avatar
Anonymous

makasih mas widgetnya tp yang lintas me nya gag target blank

Balas

gan, mau nanya. kok udah dicoba malah ngaruh ke kotak komentar ya. kotak komentar saya jadi ilang gan ._. pencerahan gan =(

Balas

makasih buat tipsnya gan, skng ane berhasil buat tombol share di blog.

Balas

thank tutornya gan

Balas

makasih informasi nya mas, berguna banget.
izin pasang ya :)

trus mau tanya mas, kalau mau ngilangin background yang warna hitamnya itu gimana ya mas ?
terimakasih

salam kenal,

jangan lupa mampir n follback ya mas, :)

lirikmagz.blogspot.com
belajarbahasainggrisoffline.blogspot.com
discount-here.blogspot.com

Balas

makasih banget ya ,,, artikelnya sangat membantu

Balas

Gan , Klo Cara Agar Tulisannya Itu Diganti Dengan Photo Gmana ??

Balas

ijin copy mas..langsung praktek..terimakasih..

Balas

Sepertinya tidak cocok untuk template saya, tidak berhasil. Udah beberapa tutorial di coba.

Balas

Terima kasih banyak gan atas sharingnya, ane udah masukin ke blog ane di http://www.slamdebt.com/

Balas

ternyata simple juga ya gan...

Balas

aku coba d blog saya yaa

Balas

makasih gan atas infonya..
kunjungi juga blog saya www.ilmu-tekno-11.blogspot.com

Balas

Sudah saya pasang di Template BMA Lovers tpi kok gk muncul ya gan? tolong pencerahan nya gan :(
ini blog saya http://kindlyrics.blogspot.com/
ditunggu jawaban nya gan :(

Balas

gan, ane berhasil pasang tombol share nya tapi kok gak ada background nya. Hanya link aja

http://asa-kmovie.blogspot.com

Balas

wah keren nich mas andes komplit tombol sahre izin coba dulu mas, makasih

Balas
avatar
Anonymous

Thanks gan infonya, izin copas script nya mo langsung praktek.. :D

Balas

terimakasih infonya gan mantap bener infonya mohon lihat ya http://art-fairy.blogspot.com

Balas

makasih infonya

jangan lupa mampir ya
http://adutburza.blogspot.com/
www.giribig.com

Balas

sangat membantu ni info..
izin nyoba yah gan. :D

Balas

terimakasih atas ilmunya brays ^^

Balas

thanks gan buat tutornya... mudah dan sangat bermanfaat

Balas

terimakasih..mulai semangat ngurus blog lagi

Balas

terimakasih..mulai semangat ngurus blog lagi

Balas
avatar
Anonymous

Sukses masangnya, gak apakan mas kalau beberapa sosmed yang saya tampilkan?

Balas

thanks infonya gan, mau belajar reparasi handphone, ipad & tablet?? kunjungi http://bagasnewweb.blogspot.com/.

Balas

contoh tombol sharenya di gambar paling atas itu ya mas andes ?

Balas
avatar
Anonymous

HTML 5 gak nih gan

Balas

twerimakasih abang ...

Balas

thnks gan ini sangat membantu bagi saya

Balas

thanks Mas izin mencoba pasang di blog ku...

Balas

blognya keren banget

Balas

ijin sedot ya gan, maksih sangat bermanfaat bagi pemula kayak saya....

Balas

work :D thanks :D

Balas

blognya mantep rapi gan
tapi agak berat ditik
tp ga papa lah
http://mirls.blogspot.co.id/

Balas

Terima kasih mas andes.. mau saya terapkan di blog saya ni

Balas

nice gan tapi gak responsive

Balas

wak keren banget ini tombol sharenya..ijin gunakannya untuk blog saya...nayri2 ketemu juga yang sesuai selera ,,maksih gan

Balas

it works! makasih gan!

Balas
«Oldest   ‹Older   201 – 272 of 272   Newer›   Newest»
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Tombol Share di Bawah Posting Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode