Facebook Twitter Google Plus Dan More Share Button Valid HTML5

Facebook Twitter Google Plus Dan More Share Button Valid HTML5

Bola Hero Gawai

Facebook Twitter Google Plus Dan More Share Button Valid HTML5

Share Button Valid HTML5
Sebenarnya share button Facebook, Twitter, dan Google Plus yang valid HTML5 sudah pernah dishare oleh kang Ismet, namun di sini saya menambahkan lagi sebuah share button dari AddToAny yang memungkinkan share artikel ke lebih banyak lagi social media tanpa harus menampilkan semua share button-nya di halaman blog. 

Yang ditampilkan hanya sebuah icon plus (+) untuk mewakili widget More Share dari AddToAny.

Untuk live demonya silahkan lihat pada share button di bawah postingan ini. Agar share button ini tidak mengganggu loading blog, saya lengkapi js-nya dengan asynchronous. Jika Anda tertarik untuk mencobanya silahkan copy kode-kode di bawah ini.

Silahkan simpan kode CSS di bawah ini di atas kode ]]></b:skin> atau kode </style> 


.share-box{border-top:2px solid #bbb;border-bottom:1px solid #ccc;font-size:16px;padding:10px 0 11px;position:relative;margin:25px 20px}
a.more{background:#007eff;border:1px solid #0b6bce;border-radius:2px;font-size:16px;font-weight:700;color:#fff;text-align:center;padding:2px 6px;margin-top:-4px}
a.more:hover{background:#0f6bc9;}

Kemudian pastingan kode JavaScript SDK Facebook sudah terpasang di blog Anda seperti berikut:


<div id='fb-root'/>
<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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Dan pastikan juga kode JavaScript SDK Facebook sudah dipasang kode asynchronous seperti ini js.async=true;, jika belum silahkan pasang seperti kode di atas.

Kemudian silahkan copy kode HTML di bawah ini di daerah bawah postingan blog Anda.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-box'>
<span style='float:left;margin-top:-2px;margin-right:30px;font-size:18px;font-family: Oswald;color:#666;text-transform:uppercase'>Share this article :</span>
<div style='margin-right:30px;float:left;'>
<span class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90' expr:data-href='data:post.url'></span>
</div>
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div style='float:left;'>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
</div>
<a class='a2a_dd more' href='http://www.addtoany.com/share_save' title='More Share'>&#10010;</a>
<script async='async' src='http://static.addtoany.com/menu/page.js' type='text/javascript'/>
</div>
</b:if>

Silahkan sesuaikan font-family untuk tulisan "Share this article :" dengan font-family blog Anda.

Jika blog Anda terpasang kode &lt;!--</body>--&gt;&lt;/body&gt; (di paling bawah), maka agar tombol Google Plus-nya muncul silahkan pasang javascriptnya di bawah ini dan simpan di atasnya.


<script type='text/javascript'>
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Jika ternyata kode javascript di atas sudah ada di blog Anda maka silahkan lewati langkah ini.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

46 Comments Add Comment

bisa di comot nih om...hehehehe, oya om mau tanya nih ada gak label thumbnail nya dari maskolis yg udah om validkan html5 coba dah mas cek blog saya ada 3 valid yang salah satunya label thumbnail.

Balas

keduax.

bisa saya terapkan di blog saya Kang....

Balas

Mas sepertinya itu error dari widget recent post catagory untuk label "tentang wanita"

coba pada kode ini /feeds/posts/default/-/tentang wanita tambahkan kode %20 pada labelnya menjadi seperti ini /feeds/posts/default/-/tentang%20wanita

Error lainnya dari gambar di postingan mas, juga pada widget subscribe jangan pakai kode <b:if cond='data:blog.pageType == &quot;item&quot;'> pada kontennya (jangan disimpan di dalam gadger html/javascript) tapi yang disembunyikan itu widgetnya id='HTML4' (di edit html)

Balas

Silahkan dicoba mas :)

Balas

selalu menarik hati kalau urusannya valid HTML 5, maklumlagi demam si ida nih...;o)
tombol sharenya ngga bikin berat pastinya kan?....mo diutak atik lagi ah...
makasih ilmunya ah.

Balas

Nambah SEO hari ini, makasih mas Adhy.. :D

Balas

Hehehehe ada-ada aja kang Lembu mah, apa hubungannya si Ida sama HTML5 heheheh :D tapi kade tah kang si Ida palid ka susukan hehehhe :p

Sudah saya coba tidak berat loadingnya kang :D

Balas

Iya selain memperhatikan validasi html5, perlu diperhatikan juga unsur seo-nya. Selain nilai seo onpage tentunya tombol share ini juga menjadi seo offpage dengan semakin tersebarnya lagi postingan ke lebih banyak sosmed.

Balas

Kumplit sekali yah Kang Adhy tombol share nya ini sangat bermanfaat
Buat di pasang di blog saya, terima kasih Kang ijin coba :)

Balas

Ini tombol share yag paling lengkap, nanti saya coba Kang :)

Balas

ok om...tanks berat, kalau dari gambar postingan sih emang om,malas editnya hampir semua soalnya..wkakakak

Balas

saya ingin memasangnya kang cuma saya sudah terlanjur menggunakan template droid kang ismet gima cara editnya ya kang... ??? :)

Balas

Silahkan dicoba kang Saud :)

Balas

Silahkan kang Heri :)

Balas

Cari kode ini pada droidplus

<div class='share'>
<span style='float:left;margin-right:15px;margin-top:3px'>Suka artikel ini? Bagikan :</span>
<span class='st_fblike_hcount'/>
<span class='st_twitter_hcount'/>
<span class='st_plusone_hcount'/>
<span class='st_sharethis_hcount'/>
</div>

Balas

Jika melihat kodenya sudah terdapat tombol sharethis mas, jadi sepertinya tidak perlu diganti. Dengan sharethis juga bisa share ke banyak sosmed :)

Balas

Tutornya lengkap banget, dicoba deh :)

Balas

Silahkan mas :)

Balas

Ternyata agak ribet juga ya Kang, berarti yang lama harus di hilangin dulu ya Kang...???

Balas

Jika yang lama sudah valid ga usah ganti, tinggal nambahin more share-nya aja, jika belum valid bisa diganti sekalian biar valid :)

Balas

iya kang...cuma ada sedikit yang kurang saya suka di sharethis khususnya untuk share ke FB tampilan di FB bukan seperti yang saya harapkan misalnya ketika saya share beberapa postingan ke FB yg muncul di FB jadi satu tidak terpisah
hehehehe jelasinnya agak mbulet ya kang :) :)

Balas

Saya pengennya share button itu bisa diedit iconnya, backgroundnya sama lebar dan tingginya biar keliatan rapi gitu, tapi jumlah/nomor sharenya tetap muncul. Mudah-mudahan share button seperti itu bisa bung Adhy luncurkan di artikel selanjutnya. :-d

Balas

tombol berbagi pinterest asupkeun, geus aya di default settingan post, sok toong...anyar tah...hohoho

Balas

ijin dipraktekkan ya sob...

Balas

Sudah saya terapkan Kang,....Mudah, Ringan, Valid dan yang membanggakan tampilannya luar biasa,....
Sebagai masukan kang.... BELUM RESPONSIVE :-d ..... :p

Balas

kang sudah saya pasang tapi kenapa kok tombol share fb-nya gak muncul???

Balas

Pastikan kode di bawah ini sudah terpasang di bawah kode <body>
<div id='fb-root'/>
<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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Balas

Betul mas memang belum responsive :D tinggal atur di tiap-tiap query devicenya :)

Balas

Waduh belum ada yang begitu mah bung :) kalau sudah ada nanti saya share

Balas

iya kang udah ada di button share default bloggernya. kalau yang ini kan udah ada di more sharenya untuk pinterest :)

Balas

sudah saya terapkan, tapi sama saja :) mungkin templateku gak suport ...

Balas

ijin share ya mas :D emang bener loading blogku jadi tambah wuss wuss

Balas

Thanks you very much ADHY :-bd

Greetings.

Balas

You're welcome Andres :)

Balas

kode JavaScript SDK Facebook ditaro dimana jika belum terpasang di blog ?

Balas

Simpan di bawah kode <body>

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×