Tampilkan postingan dengan label share button. Tampilkan semua postingan
Tampilkan postingan dengan label share button. Tampilkan semua postingan
Quality Templates. Sebagai tombol share (berbagi) buatan pihak ketiga Addthis memiliki fitur lengkap dan dan dapat meningkatkan trafik blog. Addthis juga banyak dipergunakan pada blog yang menggunakan template AMP.

tombol berbagi AddThis
Tombol berbagi AddThis - source: AddThis

Addthis juga dapat di kustomisasi dengan mudah melalui pengaturan default pada laman aslinya dan secara terbatas dapat di atur antarmukanya melalui pengaturan CSS di dalam template blogger, misal warna dan tataletak penempatannya. Lihat template editblogtema ini, menggunakan tombol berbagi Addthis yang diatur melalui kedua cara yang telah kita singgung diatas.

Namun karena menggunakan tool pihak ketiga, Tombol berbagi ini memiliki kelemahan yakni merugikan kecepatan loading template. Ada cara untuk mengurangi lemot pada loading akibat penggunaan Addthis, yakni dengan cara merubah loading Aset Addthis menjadi 'Asynchronize'. Jadi ingat kalau pasang kode adsense dengan cara async. Caranya memang mirip demikikan.

1. CARA PEMASANGAN TOMBOL BERBAGI ADDTHIS DENGAN BERBAGAI STYLE PADA TEMPLATE NOTABLE.

Addthis tidak hanya menyediakan tombol berbagi, tetapi juga tombol follower untuk media sosial yang rapi namun tentu saja kita harus mengaturnya.
  • Masuk ke Addthis.com
  • Pilih 'get started...' atau langsung menggunakan akun Google atau akun Facebook kalian
  • Jika sudah masuk, pilih 'Add profile'
  • Ketika kolom dialog muncul kalian bisa menuliskan nama profile, supaya mudah di ingat sebaiknya tulis saja nama blog kalian.
  • Lalu klik ADD
pengaturan atau dasbor AddThis
Gambar pengaturan/Dasbor Addthis
  • Akan muncul halaman dengan ID Adthis kalian dalam bentuk sederet angka sepeti terlihat pada gambar diatas. 
  • Diatas halaman terdapat navbar dengan menu: 'analytics', 'Tools',   hingga 'Get Code' pilih tool. Pada bagian website tool ada tanda plus (tambah) besar, klik itu (atau klik saja Add New Tool)
  • Selanjutnya akan muncul pilihan tool yang dapat kalian pergunakan. Jika ingin tombol share (tombol berbagi) pilih 'Share Buttons'
Addthis tools
Addthis tools
  • Jika telah masuk ke salah satu pengaturan tool misalnya jika kalian memilih tool 'Share Buttons' kalian akan melihat beberapa opsi pemasangan tombol berbagi tersebut, kami memilih inline. Perhatikan juga floating dan inline dapat di terapkan ke template blogger AMP juga (perhatikan tanda atau simbol petirnya).
tool berbagi addthis
Gambar tool berbagi addthis
  • Jika kalian sudah memilih opsinya kalian bisa melanjutkannya dengan menekan tombol bar warna biru 'continue'
  • Dan seelah itu akan muncul halaman pengaturan, dimana kalian bebas memilih warna, bentuk, dan ukuran tombol berbagi kalian. kalian lihat tombol berbagi dan tombol follower sosial blog editblogema ini sebagai contohnya. Setelah semuanya selesai kalian bisa menekan tombol 'activated tool'
  • Kalian akan kembali ke halaman pengaturan, pada bagian kanan atas navbar (navigasi halaman) pilih 'Get The Code' maka akan muncul kode sebagai berikut:
Pasang kode JavaScript:
<!-- Go to www.addthis.com/dashboard to customize your tools --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5e343037cec3dae8"></script>
Kode di atas diletakan di atas kode </body> di dalam template kalian melalui pengaturan/dasbor blogger.
Pasang kode Inline berikut:
<!-- Go to www.addthis.com/dashboard to customize your tools --> <div class="addthis_inline_share_toolbox"></div>
Cara memasang kode inline di atas adalah sebagai berikut:
Login ke Blogger.
  1. Pilih blog dengan template notable untuk diperbarui.
  2. Di menu sebelah kiri, klik Tema.
  3. Di samping kanan agak ke atas cari tanda titik tiga, klik Edit HTML.
  4. Cari kode </body>Dan letakan kode yang saya sebutkan di atas tepat diatas kode </body> tadi.
Lalu cara pemasangan kode inline, masih di dalam halaman editor HTML blogger cari kode <data:post.body/>, pada template blogger Notable terdapat dua buah kode yang sama, jadi pilih yang kedua letakan kode inline di atas atau dibawah kode tersebut. Save template. 

Kalian masih bisa merobah bentuk, ukuran dan warna tombol berbagi melalui dasbur AddThis setelah itu.

2. MEMBUAT LATAR WARNA PADA IKON TOMBOL BERBAGI ADDTHIS.

Karena Addthis menggunakan ikon SVG, maka kita dapat  melakukan sedikit 'campur-tangan' untuk merobah warna latar ikonnya.

Untuk mewarnai latar daripada ikon AddThis kalian dapat memberikan perintah melalui kode CSS pada template dengan cara:
  1. Pilih blog dengan template notable untuk diperbarui.
  2. Di menu sebelah kiri, klik Tema.
  3. Di samping kanan agak ke atas cari tanda titik tiga, klik Edit HTML.
  4. Cari kode </style>Dan tulis lalu letakan kode yang saya sebutkan di atas tepat diatas kode </style> tadi.
svg {width:44px; height:44px}svg path {fill:#ff0000}
 Kalian dapat merobah kode yang berwarna merah (itulah latar ikon tombol berbagi editblogtema yang sekarang) dengan kode warna yang kalian sukai.

Catatan: Jika pada template kalian tidak terdapat kode </style> kalian dapat meletakan menambahkan dengan cara mengurung kode diatas dengan tag awalan <style> lalu di tutup dengan </style> jadi akan terlihat sebagai berikut:
<style>svg {width:44px; height:44px}svg path {fill:#ff0000}</style>
Letakan sebelum atau di atas kode </head> .

3. MENAMBAHKAN KODE 'Asynchronize' MEMPERCEPAT LOADING HALAMAN BLOG.

Pemasangan Tombol Addthis mengharuskan kita memasang Kode Javascript sebelum kode </body> contohnya:
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5d515d3a8ea4a1f7"></script>
Kode warna merah adalah ID Addthis kita, tentu saja setiap ID berbeda beda kodenya, jika kalian mendaftar ke Addthis, kalian akan mendapatkan kode kalian sendiri.
Kode di atas sebelum di tambahkan dengan kode tambahan 'Asynchronize' setelah di tambahkan akan tampak sebagai berikut:
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5d515d3a8ea4a1f7" async="async"></script>
Save template.

Kalian dapat berimprovisasi sendiri dengan cara mengutak atik tampilannya. Jangan takut salah, jika perlu gunakan blog dummy.

4. KELEBIHAN TOMBOL BERBAGI ADDTHIS
  • Tampilan cantik dan dapat di kosumisasi melalui dasbor AddThis dan editor HTML blogger
  • Dapat membantu meningkatkan trafik
  • Memiliki tool yang lengkap: Berbagi, Follower, Newsletter dll.

5. KELEMAHAN TOMBOL BERBAGI ADDTHIS
Kelemahan terbesar  tombol berbagi AddThis adalah:
  • Loadingnya berat
  • Loadingnya sangat berat terutama karena mereka bekerja dengan MoatAds. Contoh script tersembunyinya: https://z.moatads.com/addthismoatframe568911941483/moatframe.js (Bekerja selama 7 Jam di tambah 50 menit)
  • Moatads dapat berisiko menjadi malware bagi kita yang mengutamakan privasi. Mereka mengumpulkan informasi pengguna.

SHARE YA:

cara membuat tombol berbagi super ringan 

Kita tidak perlu alergi pada JavaScript walaupun pada persoalan desain itu cukup runyam: Dalam kondisi tertentu memang benar JavaScript dapat mengorbankan kecepatan sebuah template blog. Mengorbankan kecepatan blog adalah mengorbankan SEO template blog itu sendiri. Ditambah lagi jika anda harus memasang link font awsome dari librari boostrap untuk menampilkan ikon jejaring sosial berbagi.

Sebenarnya cukup manfaatkan elemen yang telah tersedia secara default (bawaan) blogger itu sendiri. kita bisa memasang tombol berbagi. Anda pasti memperhatikan bagaimana misalnya template terbaru memiliki ikon menu hamburger atau ikon panah? Apakah di dalam template template ini telah terpasang link font awsome dan Javascript?

Ternyata tidak! Mereka hanya menggunakan HTML CSS, tidak heran secara default walau nampak demikian stylish, empat jenis template terbaru terbilang sangat cepat. Dan anda masih bisa mengoptimalkan tampilannya tanpa harus mengorbankan kecepatan. Beda jika anda menggunakan share button atau tombol berbagi dari pihak ketiga seperti Addthis, AddToAny, Sharethis dst, walaupun memiliki banyak fitur, namun pada analisa kecepatan GTmetrix sangat merugikan kecepatan sebuah template.

Dan jika anda hanya butuh tombol berbagi, maka tombol berbagi dari SHARING I.O inilah cara yang paling tepat dalam menambahkan tombol pencarian super ringan dan supercepat ini dengan mudah:

Tambahkan CSS.Caranya sederhana saja:
  • Masuk ke pengaturan blog
  • Pilih tema (atau theme kalau bahasa Inggris)
  • Pilih "sesuaikan" (atau customize kalau bahasa Inggris)
Setelah sesuaikan dipilih maka kita masuk ke mode "Blogger Theme Designer" disana pilih "lanjutan" (atau advance kalau bahasa Inggris) begitu diklik disebelah kanan akan muncul list menu dropdown dari atas ke bawah, scroll hingga sampai ke menu paling bawah. Pilih "Tambahkan CSS" (atau add CSS kalau bahasa Inggris).

tambahkan css

Ketikan kotak blanko kosong CSS muncul, copy kode dibawah ini dan pastekan kedalam blanko
kosong kotak CSS tadi (klik 2x untuk menyorot dan mengkopi kode):
 
resp-sharing-button__link, .resp-sharing-button__icon { display: inline-block } .resp-sharing-button__link { text-decoration: none; color: #fff; margin: 0.5em } .resp-sharing-button { border-radius: 5px; transition: 25ms ease-out; padding: 0.5em 0.75em; font-family: Helvetica Neue,Helvetica,Arial,sans-serif } .resp-sharing-button__icon svg { width: 1em; height: 1em; margin-right: 0.4em; vertical-align: top } .resp-sharing-button--small svg { margin: 0; vertical-align: middle } /* Non solid icons get a stroke */ .resp-sharing-button__icon { stroke: #fff; fill: none } /* Solid icons get a fill */ .resp-sharing-button__icon--solid, .resp-sharing-button__icon--solidcircle { fill: #fff; stroke: none } .resp-sharing-button--twitter { background-color: #55acee } .resp-sharing-button--twitter:hover { background-color: #2795e9 } .resp-sharing-button--pinterest { background-color: #bd081c } .resp-sharing-button--pinterest:hover { background-color: #8c0615 } .resp-sharing-button--facebook { background-color: #3b5998 } .resp-sharing-button--facebook:hover { background-color: #2d4373 } .resp-sharing-button--tumblr { background-color: #35465C } .resp-sharing-button--tumblr:hover { background-color: #222d3c } .resp-sharing-button--reddit { background-color: #5f99cf } .resp-sharing-button--reddit:hover { background-color: #3a80c1 } .resp-sharing-button--linkedin { background-color: #0077b5 } .resp-sharing-button--linkedin:hover { background-color: #046293 } .resp-sharing-button--email { background-color: #777 } .resp-sharing-button--email:hover { background-color: #5e5e5e } .resp-sharing-button--xing { background-color: #1a7576 } .resp-sharing-button--xing:hover { background-color: #114c4c } .resp-sharing-button--whatsapp { background-color: #25D366 } .resp-sharing-button--whatsapp:hover { background-color: #1da851 } .resp-sharing-button--hackernews { background-color: #FF6600 } .resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus { background-color: #FB6200 } .resp-sharing-button--vk { background-color: #507299 } .resp-sharing-button--vk:hover { background-color: #43648c } .resp-sharing-button--facebook { background-color: #3b5998; border-color: #3b5998; } .resp-sharing-button--facebook:hover, .resp-sharing-button--facebook:active { background-color: #2d4373; border-color: #2d4373; } .resp-sharing-button--twitter { background-color: #55acee; border-color: #55acee; } .resp-sharing-button--twitter:hover, .resp-sharing-button--twitter:active { background-color: #2795e9; border-color: #2795e9; } .resp-sharing-button--google { background-color: #dd4b39; border-color: #dd4b39; } .resp-sharing-button--tumblr { background-color: #35465C; border-color: #35465C; } .resp-sharing-button--tumblr:hover, .resp-sharing-button--tumblr:active { background-color: #222d3c; border-color: #222d3c; } .resp-sharing-button--email { background-color: #777777; border-color: #777777; } .resp-sharing-button--email:hover, .resp-sharing-button--email:active { background-color: #5e5e5e; border-color: #5e5e5e; } .resp-sharing-button--pinterest { background-color: #bd081c; border-color: #bd081c; } .resp-sharing-button--pinterest:hover, .resp-sharing-button--pinterest:active { background-color: #8c0615; border-color: #8c0615; }

Save template dan selanjutnya:
2. TAMBAHKAN HTML, caranya:Masuk kepengaturan blogger, pilih tema, pilih edit HTML dan cari kode <data:post.body/> lalu letakan kode beriktu berikut tepat dibawah kode <data:post.body/> tadi:
<!-- Sharingbutton Facebook --> <a class="resp-sharing-button__link" href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io" target="_blank" rel="noopener" aria-label="Share on Facebook"> <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"/></svg> </div>Share on Facebook</div> </a> <!-- Sharingbutton Twitter --> <a class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text=Super%20fast%20and%20easy%20Social%20Media%20Sharing%20Buttons.%20No%20JavaScript.%20No%20tracking.&amp;url=http%3A%2F%2Fsharingbuttons.io" target="_blank" rel="noopener" aria-label="Share on Twitter"> <div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"/></svg> </div>Share on Twitter</div> </a> <!-- Sharingbutton Tumblr --> <a class="resp-sharing-button__link" href="https://www.tumblr.com/widgets/share/tool?posttype=link&amp;title=Super%20fast%20and%20easy%20Social%20Media%20Sharing%20Buttons.%20No%20JavaScript.%20No%20tracking.&amp;caption=Super%20fast%20and%20easy%20Social%20Media%20Sharing%20Buttons.%20No%20JavaScript.%20No%20tracking.&amp;content=http%3A%2F%2Fsharingbuttons.io&amp;canonicalUrl=http%3A%2F%2Fsharingbuttons.io&amp;shareSource=tumblr_share_button" target="_blank" rel="noopener" aria-label="Share on Tumblr"> <div class="resp-sharing-button resp-sharing-button--tumblr resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.5.5v5h5v4h-5V15c0 5 3.5 4.4 6 2.8v4.4c-6.7 3.2-12 0-12-4.2V9.5h-3V6.7c1-.3 2.2-.7 3-1.3.5-.5 1-1.2 1.4-2 .3-.7.6-1.7.7-3h3.8z"/></svg> </div>Share on Tumblr</div> </a> <!-- Sharingbutton E-Mail --> <a class="resp-sharing-button__link" href="mailto:?subject=Super%20fast%20and%20easy%20Social%20Media%20Sharing%20Buttons.%20No%20JavaScript.%20No%20tracking.&amp;body=http%3A%2F%2Fsharingbuttons.io" target="_self" rel="noopener" aria-label="Share by E-Mail"> <div class="resp-sharing-button resp-sharing-button--email resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.25 14.43l-3.5 2c-.08.05-.17.07-.25.07-.17 0-.34-.1-.43-.25-.14-.24-.06-.55.18-.68l3.5-2c.24-.14.55-.06.68.18.14.24.06.55-.18.68zm4.75.07c-.1 0-.2-.03-.27-.08l-8.5-5.5c-.23-.15-.3-.46-.15-.7.15-.22.46-.3.7-.14L12 13.4l8.23-5.32c.23-.15.54-.08.7.15.14.23.07.54-.16.7l-8.5 5.5c-.08.04-.17.07-.27.07zm8.93 1.75c-.1.16-.26.25-.43.25-.08 0-.17-.02-.25-.07l-3.5-2c-.24-.13-.32-.44-.18-.68s.44-.32.68-.18l3.5 2c.24.13.32.44.18.68z"/></svg></div>Share by E-Mail</div> </a> <!-- Sharingbutton Pinterest --> <a class="resp-sharing-button__link" href="https://pinterest.com/pin/create/button/?url=http%3A%2F%2Fsharingbuttons.io&amp;media=http%3A%2F%2Fsharingbuttons.io&amp;description=Super%20fast%20and%20easy%20Social%20Media%20Sharing%20Buttons.%20No%20JavaScript.%20No%20tracking." target="_blank" rel="noopener" aria-label="Share on Pinterest"> <div class="resp-sharing-button resp-sharing-button--pinterest resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.14.5C5.86.5 2.7 5 2.7 8.75c0 2.27.86 4.3 2.7 5.05.3.12.57 0 .66-.33l.27-1.06c.1-.32.06-.44-.2-.73-.52-.62-.86-1.44-.86-2.6 0-3.33 2.5-6.32 6.5-6.32 3.55 0 5.5 2.17 5.5 5.07 0 3.8-1.7 7.02-4.2 7.02-1.37 0-2.4-1.14-2.07-2.54.4-1.68 1.16-3.48 1.16-4.7 0-1.07-.58-1.98-1.78-1.98-1.4 0-2.55 1.47-2.55 3.42 0 1.25.43 2.1.43 2.1l-1.7 7.2c-.5 2.13-.08 4.75-.04 5 .02.17.22.2.3.1.14-.18 1.82-2.26 2.4-4.33.16-.58.93-3.63.93-3.63.45.88 1.8 1.65 3.22 1.65 4.25 0 7.13-3.87 7.13-9.05C20.5 4.15 17.18.5 12.14.5z"/></svg> </div>Share on Pinterest</div> </a>
Save template

Tentu saja tombol diatas banyak mengandung kelemahan jadi kita sendiri yang harus mengedit dan merombaknya jika diperlukan. Misalnya dari sisi kelengkapan fitur, Google plus masih tersedia padahal Gplus kan sudah mati. Namun dari segi kecepatan tombol berbagi "dari sharing button.I.O ini sungguh ringan dan cepat!

SHARE YA:

berbagi ke medsos
berbagi ke medsos
Tombol berbagi melayang menjadi penting pada template soho yang sedang dipakai editblogtema. Saat itu admin blog ini bertanya tombol apa yang bisa mengisi ruang kosong seperti blank pada sebelah kanan halaman berisi konten pada saat konten dibuka pada perangkat laptop dan PC dekstop? Jadi aku berfikir harus ada sesuatu yang bisa melayang untuk menarik perhatian pembaca. Pilihan jatuh kepada tombol berbagi.

Maka tombol berbagi yang ada sebelumnya harus dihapus agar tidak memblokir kecepatan loading halaman. Pilihan jatuh kepada tombol berbagi AddToAny versi widget.

Cara memasangnya:
TAMBAHKAN CSS
  1. Masuk kepengaturan blogger
  2. Pilih tema
  3. Pilih sesuaikan untuk masuk ke halaman Desainer Tema Blogger
  4. Lalu klik "lanjutan"
  5. Akan muncul menu dropdown (turun kebawah) scroll naik sampai ke pilihan "tambahkan CSS"
  6. setelah kotak dialog atau blanko CSS terbuka copy dan pastekan kode berikut ke dalamnya:
@media screen and (max-width: 700px) {
.a2a_floating_style.a2a_vertical_style { display: none; }
}
@media screen and (max-width: 1400px) {
.a2a_floating_style.a2a_vertical_style { background: transparent; }
}
kotak dialog tambahkan CSS
kotak dialog tambahkan CSS
 Save tema.
TAMBAHKAN HTML
  1. Masuk kepengaturan blogger
  2. Pilih "tata-letak"
  3. Pilih "tambahkan gagdet" 
  4. Setelah pilihan tambahkan gagdet muncul pilih "HTML/JavaScript"
  5. Pada kotak dialog atau halaman HTML yang muncul, pastekan kode berikut ke dalamnya:
<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="left:0px; top:150px;">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_google_plus"></a>
<a class="a2a_button_pinterest"></a>
<a class="a2a_dd" href="https://www.alamatbloganda/share"></a>
</div>
<script async src="https://static.addtoany.com/menu/page.js"></script>
kotak dialog HTML/JavaScript
kotak dialog HTML/JavaScript
Save template. Selesai. 

SHARE YA:

tombol berbagi po.st
PO.ST adalah salah satu tombol berbagi pihak ketiga yang paling lengkap dan memiliki fitur yang sangat berguna bagi blog kita daripada ancaman keamanan. Selain memiliki tombol berbagi dan analisa trafik halaman website pengguna, dia juga memiliki fitur keamanan yang menarik dan semua itu 100% gratis.

Fitur "DARK SOCIAL SHARING", dimana kita bisa melacak aktivitas pengguna yang mengcopy-paste artikel kita. Istilah ini dikenal dengan Dark Social, sangat disukai oleh sebagian pengguna dan paling sering dilakukan oleh mereka.

Fitur Tracking Address Bar Engagement. "Merampok" tautan bilah alamat adalah cara yang disukai pengguna membagikan konten secara online.  Fitur ini memungkinkan kita untuk menangkap keterlibatan yang terjadi ketika pengguna mengklik tautan artikel yang dibagikan kepada mereka.  Berguna untuk memahami apa yang dilakukan oleh pengguna melalui opsi berbagi pribadi ini.  Catatan: Ini akan menambahkan tanda # di bilah alamat web kita, bersama dengan karakter pengidentifikasian yang unik.

  • Fitur tracking Copy-Paste. Cara kedua yang paling populer adalah pengguna membagikan konten secara online adalah dengan menyalin dan menempelkan teks artikel.  Melalui cara  mereka mengutip  sumber atau dengan berbagi, kita dapat mencari tahu konten apa yang paling mereka sukai dengan fitur ini.

Dari sini juga bisa setting berapa jumlah kata yang di copy dst.

Fitur tracking berbagi kutipan. Berguna untuk mengetahui apakah pengguna menyalin teks artikel untuk dibagikan sedikit atau banyak, fitur ini juga sekaligus membuat pengalaman dan cara berbagi lebih efisien dengan mengungkapkan tombol berbagi yang muncul secara instan setelah mereka menyalin teks ke clipboard mereka.

Pengaturan di sini hanya akan mengubah tombol yang ditampilkan ketika pengguna menyorot dan menyalin teks dari halaman.
  • Fitur untuk mengatahui seberapa lama pengguna membaca konten (atau berapa lama pengguna berada di halaman blog) dengan menyeting interval waktu yang berbeda akan memungkinkan kita untuk memisahkan pengguna yang secara aktif terlibat dalam konten yang mereka baca atau mereka tonton.  Jika kita memiliki penghitung waktu 10 detik, kita dapat menangkap semua pengguna yang telah membaca atau melihat beberapa konten. 

Jika ingin mengatur timer sekitar 30 detik, kita dapat mentracking pengguna yang secara aktif terlibat dengan konten dan menunjukkan sinyal minat yang lebih kuat.

Cara mengaktifkannya kita harus masuk dan mendaftar terlebih dahulu di:
Jika sudah kita dapat memilih untuk mengaktifkan tombol berbagi dan fitur Dark Social ini yang biasanya harus dipasang diatas kode </head> denga cara masuk kepengaturan blogger, lalu pilih tema dan pilih edit HTML, kodenya akan kita temukan dibagian bawah instruksi pemasangannya.

Cara memasang tombol berbagi po.st:


Pada navigasi halaman PO.ST klik saja menu social tools, disana kita juga akan memiliki beberapa pilihan style atau gaya tombol berbagi:
  1. Masuk dan mendaftar terlebih dahulu dengan cara menekan link PO.ST yang telah kami letakan di atas.
  2. Pasang link style sesuai instruksi namun, untuk link CSS berikut harus diletakan diatas kode </head>:

<script type="text/javascript">
    // DO NOT IMPLEMENT //
    // this code through the following //
    // //
    // Floodlight Pixel Manager //
    // DCM Pixel Manager //
    // Any system that places code in an iframe //
    (function () {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = ('https:' == document.location.protocol ? 'https://s' : 'http://i')
    + '.po.st/static/v4/post-widget.js#publisherKey=3jua57gbjkt3ibsbsane';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
    })();</script>
    Sedangkan kode HTMLnya harus diletakan di bawah atau diatas kode <data:post.body/> jika ingin meletakannya diatas postingan letakan diatas, sebaliknya jika ingin meletakannya dibawah postingan letakan saja dibawahnya.
    berikut contoh kode milik saya karena kodenya API-nya pasti akan berbeda sesuai dengan registrasi pendaftaran teman teman: 
<div class="pw-server-widget" data-id="wid-uf4hq2bo"></div>
Jangan lupa save tema.

www.editblogtema.net

SHARE YA:

Originally constributed by: Anissa Auliasari
addthis share button atau tombol berbagi AddThis sangat terkenal responsive dan untuk AMP sendiri sampai saat ini AddThis merupakan satu satunya pilihan tombol berbagi dari pihak ketiga yang kompitabel, paling banyak dipergunakan dan pemasangan juga dapat dilakukan dengan cara di kustomisasi menurut selera pemasang agar tampilannya nampak beda. Cara penerapannya juga tidak jauh berbeda dengan cara pemasangan di blog HTML klasik biasa.

Disini kita hanya akan membahas bagaimana cara pemasangan tombol berbagi ini secara default ke bloggger AMP. Jika pemasangannya nanti sudah benar maka akan tampil tombol share inline berjajar pada halaman postingan di blog AMP seperti tampak pada gambar di atas.

Langkah pertama:
Tentu saja buat terlebih dahulu akun AddThis melalui: AddThis
Tentu saja membuat akun adalah gratis.

tinggal di copy dan diterapkan kedalam kotak editor online blogspot
letakan diatas tag body
Gambar letak atau posisi kode di dalam template 
Langkah kedua:
Setelah akun dibuat masuk ke dasbor pengaturan AddThis, untuk membuat kustomisasi tombol berbagi sobat, hingga saat ini tampilan tombol berbagi untuk Blogger AMP adalah berjajar atau inline.

Langkah ketiga:
Pilih Tombol tombol medsos yang sobat sukai setelah dirasa cukup, tekan "activate tool" untuk mengaktifkan tool. dari sini akan muncul kotak halaman kodenya.

Langkah ke empat:
Copy kode unik tersebut dengan menekan tombol "snippet code" di bawah halaman kode tersebut. Pastekan kode tersebut tepat diatas </head> kode HTML template AMP sobat. Tampilan kode </head> pada AMP bisa saja normal bisa jadi dibungkus seperti pada kode yang saya sorot warna hijau:
<b:if cond='data:blog.pageType == &quot;item&quot;'><script async='async' custom-element='amp-addthis' src='https://cdn.ampproject.org/v0/amp-addthis-0.1.js'/></b:if><!-- Go to www.addthis.com/dashboard to customize your tools --><script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5aac9c0a5226a9c5' type='text/javascript'/><!--letakan kode unik AddThis disini--!>&lt;/head&gt;&lt;!--<head/>--&gt; <body> <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'><amp-sidebar id='sidebar1' layout='nodisplay' side='right'> <div aria-label='close sidebar' class='close-sidebar' on='tap:sidebar1.toggle' role='button' tabindex='0'>&#10005;</div>
Langkah ke 5.
Terakhir tapi penting, Copy-Paste-kan kode inline AddThis pada bagian body (tepatnya diatas </body> templat dimana anda inginkan tombol share itu tampil nantinya. Pada tampilan template AMP bisa saja seperti contoh dibawah ini:
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'> &lt;/div&gt; <b:else/> &lt;/div&gt; </b:if> <b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;index&quot;}'> &lt;/div&gt; </b:if> <!--letakan kode inline AddThis disini--!>&lt;!--</body>--&gt;&lt;/body&gt;
</HTML>
Mudah mudahan ini bisa membantu karena jika tidak ada perbedaan susunan struktur kode pada template yang berbeda, misalnya sobat memodifikasi tampilan dengan menambahkan kode CSS diatas kode </style> atau kode: ]]></b:skin> maka hapus saja kode CSS tambahan tersebut agar tidak mengganggu tampilan tombol berbagi AddThis ini yang seharusnya dipasang secara default, maka seharusnya AddThis share Button dapat bekerja dengan baik pada template blog AMP sobat.

Baca juga: PANASARAN APA SIH AMP ITU?

SHARE YA:

tampilan addtoayny

Beberapa widget / gagdet blogger memang dapat memperlambat laju sebuah halaman blog, terbukti pada indikator pengukuran kecepatan web yang berbeda beda telah mengungkapkannya. Logikanya setiap widget atau gagdet yang ditampilkan mengandungi kode HTML dan script yang harus diproses, terkadang menyinkronkan beberapa tautan untuk menampilkan dan menterjamahkan sebuah widget secara visual dihalaman blog.

Misalnya widget pengikut atau follower bawaan blogspot sendiri, jauh lebih berat daripada widget popular post dan widget label blog, karena seluruh pengikut memiliki link mereka masing masing yang harus di "render" agar dapat tampil secara visual di halaman sidebar atau dimana saja di halaman blog.

Namun gagdet atau widget pengikut ini tentu saja memiliki pengaruh positif mirip "backlink" terhadap blog sobat sama seperti halnya link halaman fanspage facebook yang dianggap dapat meningkatkan performa blog dimata mesin pencari.

Tetapi sayang sekali harganya adalah mengorbankan kecepatan. Dan algoritma terbaru Google samasekali tidak ramah terhadap halaman blog yang lambat, mesin pencari seolah malas menunggu dan mengantarkan konten konten daripada halaman web yang berlari seperti siput. Itulah sebabnya mengapa blog blog AMP lebih memiliki peluang menempati tempat tertinggi pada index mesin pencari, lebih didahulukan.

LALU APAKAH TOMBOL BERBAGI MEMPERLAMBAT KECEPATAN BLOG?

Jelas sekali ya. Awalnya saya menggunakan tombol buatan sendiri di blog ini, dan terasa sangat ringan karena tidak ada tugas halaman menampung link dari pihak ketiga. Tetapi karena terbatasnya tombol share buatan sendiri baik dari segi penampilan dan kelengkapan linknya, saya lalu mencoba tombol share atau tombol berbagi custom dari Addthis, tombol yang sangat keren dan dapat kita robah tataletak dan bentuk ikonnya.

Akan tetapi dengan tombol addthis saya harus meletakan tautan javascript diatas tag </body> lalu meletakan kode line dibawah atau diatas <data:post.body/>

Awalnya pagespeed mengukur kecepatan blog saya adalah 89-100 dan setelah menggunakan tombol berbagi AddThis kecepatan menurun drastis menjadi 55-100, tentu saja saya tidak mau tinggal diam. Saya mencobakan tombol AddThis kepada tiga halaman blog dengan template premium yang berbeda dan hasilnya sama sama mengalami penurunan kecepatan.

Jadi saya mencari bantuan Google mencari apakah ada tombol berbagi pihak ketiga yang ringan? Dan seorang teman dari negeri seberang yang ahli koding menyarankan saya menggunakan Addtoany, saya langsung mencobanya setelah membersihkan semua kode kode pemasangan AddThis dari template blog, ternyata memang jauh sekali perbedaannya. AddToAny jauh lebih ringan walau juga mengurangi kecepatan namun tidak begitu berarti banyak bagi kecepatan halaman blog. Jadi untuk sementara saya memakai AddToAny.

CARA MEMASANG TOMBOL BERBAGI ADDTOANY
  1. Masuk ke AddToAny
  2. Pilih "GET"
  3. Pilih ikon BLOGGER lihat tampilan ilustrasi gambar diatas
  4. Akan muncul tampilan widget seperti gambar:
    tinggal tekan tombol menambahkan widget maka tombol berbagi addtoany jadi milik blogspot sobat
  5. Tekan tombol warna biru "Menambah Widget"
  6. Save dan tema blogspot sobat telah memiliki tombol berbagi AddToAny.
Tombol ini sangat lengkap. Hampir semua tombol medsos yang dimiliki oleh AddThis ada pada AddToAny. Sobat juga bisa mengkustomisasi letak, tampilan, warna tombol berbagi ini melalui halaman AddToAny jika diperlukan

Jika sobat menggunakan tema blogspot yang telah di edit menjadi responsive sobat dapat menghapus tombol bawaan blogspot dan menggantikannya dengan tombol ringan AddToAny dengan mengikuti petunjuk  yang telah saya posting di halaman blog ini sebelumnya dengan judul:

CARA MENGHAPUS TOMBOL SHARE BAWAAN BLOGSPOT DAN MENGGANTIKANNYA DENGAN TOMBOL SHARE RESPONSIVE

Sebenarnnya sobat bisa saja meletakan tombol AddToAny secara manual dengan cara :

  1. Masuk kepengaturan blogger
  2. Pilih Tema
  3. Pilih edit HTML
  4. Cari kode <data:post.body/> dengan cara tekan ctrl+f bersamaan 
  5. Jika terdapat lebih dari satu atau dua kode yang sama pilih yang ketiga, (cari sampai ketemu ya...) lalu copy kode dibawah ini:

<div class='post-body post-content'>
<div class='a2a_kit a2a_kit_size_32 a2a_default_style' id='my_centered_buttons'>
    <a class='a2a_button_facebook'/>
    <a class='a2a_button_twitter'/>
    <a class='a2a_button_google_plus'/>
    <a class='a2a_button_pinterest'/>
    <a class='a2a_dd' href='https://www.addtoany.com/share'/>
</div>
<script async='async' src='https://static.addtoany.com/menu/page.js'/>
  1. Letakan di atas <data:post.body/> jika ingin tombol berbagi berada diatas postingan
  2. Letakan di bawah <data:post.body/> jika ingin tombol berbagi tersebut berada dibawah postingan.
  3. SAVE template.

www.editblogtema.net

SHARE YA:

Sobat masih menggunakan tombol share yang ada google plusnya pada tema blogger yang sedang sobat pakai? Wah tombol itu bakalan tidak berfungsi dan kalau di klik mungkin akan keluar notifikasi: "maaf, halaman yang sedang anda cari sudah berpulang kerahmatulah"
maka tombol Google Plus tidak diperlukan lagi
google plus is dead
Jadi untuk apa piara tombol itu lagi, klo buat hiasan dan kenang-kenangan masih bolehlah ya. Tapi ingat kodenya masih tertanam didalam tema blogger sobat. Google sudah beri peringatan agar kita membuangnya. Dan kalau kebetulan kita pakai tema buatan pihak ketiga hubungi saja pembuatnya.

Sebenarnya meremove atau mengenyahkan tombol ini tidak susah kalau sobat terbiasa ngutak ngatik halaman "edit HTML" di pengaturan blogger.

Contoh yang saya lakukan pada beberapa template baik buatan pihak ketiga maupun yang bawaan, cukup tekan ctrl+f pada halaman edit HTML, ketikan share, atau facebook, atau tweeter atau gplus, akan segera ketemu untaian kode yang harus dihapus pada bagian html, dan berikut CSSnya.

1. MENGHAPUS DAN MEMASANG TOMBOL SHARE BARU UNTUK TEMA BAWAAN BLOGSPOT.

Saran saya nih buat sobat sobat kalau memakai tema model lama blogger diluar contempo, soho, emporio dan terkemuka, lebih baik ikuti petunjuk cara membuatnya agar menjadi responsive terlebih dahulu, lalu hapus dulu tombol jadul bawaan bloggernya dan ganti dengan tombol berbagi yang kita inginkan. Cara menghapus tombol bawaan blogger pada tema lama adalah sebagai berikut:

Tombol bawaan blogspot atau blogger itu yang kami maksud bentuknya yang seperti ini:
Terlihat kecil, monoton dan jadul, dan trik untuk menghapus dan menggantinya dengan tombol yang lebih fresh, responsive dan modern sangat mudah. 

Masuk ke pengaturan blogspot/blogger, pilih TEMA lalu klik "editHTML" cari salah satu kode di bawah ini:

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>


Atau kalau tidak ketemu cari kode dibawah ini, kita dapat menerapkan ini dengan mudah pada template jenis sederhana, awsome dst:

<div class='post-share-buttons goog-inline-block'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</div>


Atau......
Perhatikan gambar baik-baik: Gunakan saja ctrl+F untuk mempercepat pencarian, dan kalau sudah ketemu hapus saja. Kode yang kita sebutkan diatas terlihat dalam HTML blogspot sebagai berikut:

Dan perhatikan setelah di hapus akan tertinggal sub-title kode : <!--share buttons--> di atasnya:

2. MEMASANG TOMBOL SHARE ADDTHIS

Buat akun addthis DISINI  buat akun sobat, setelah akun berhasil dibuat biasanya: 
  1. verifikasi melalui email gmail kalau sobat mendaftarkannya menggunakan akun gmail.
  2. Kalau sudah berhasil masuk ke addthis, klik share button
  3. Pilih inline (sobat bisa mengatur tombol belakangan)
  4. lalu tekan tombol  "continue" pada bagian bawah
  5. pilih activied
Langkah selanjutnya: pada navigasi halaman addthis terdapat menu "get the code" tekan atau klik itu.
Atau copy kode dibawah ini dan pastekan diatas kode </body>:
<!-- Go to www.addthis.com/dashboard to customize your tools --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5be7e50ef90c0b8e"></script>

Selanjutnya kopi pastekan kode di bawah ini ke dalam ruang kosong di bawah kode <!--share buttons--> sebagai pengganti share button atau tombol share yang telah kita hapus tadi:
<!-- Go to www.addthis.com/dashboard to customize your tools --> <div class="addthis_inline_share_toolbox"></div>
            
Lalu Save. Selesai.
Untuk demo saat diterapkan pada tema premium lihat tombol share yang sedang saya pakai ini, saya pasang di editblogtema.

Untuk tema bawaan blogger sobat bisa melihatnya pada demo template yang saya buat dari template awsome bawaan blogger yang telah saya modifikasi dibawah ini:
 Lihat DEMO
3. MENGAPA HARUS MEMASANG TOMBOL ADDTHIS?

Kan banyak tombol berbagi yang lain? Benar. Tapi tombol share atau tombol berbagi ini memiliki beberapa kelebihan:

  1. Selalu update, lihatlah tidak terdapat lagi tombol google plus dalam daftarnya.
  2. Lengkap ada 177 tombol berbagi keberbagai media dan aplikasi di web.
  3. Memiliki stats, nah dia dapat juga memicu pengunjung dan bisa menjadi backlink yang baik bagi situs sobat dan dapat meningkatkan SEO.
  4. Dapat di kustom: tinggal edit melalui dasbor addthis, sobat bisa menentukan bentuk, warna dan posisi tombol berbagi dimana sobat ingin menempatkannya dihalaman blog sobat.
  5. Memiliki tool lain seperti emoticon, related post, tombol follower dan korespondesi yang dapat meningkatkan SEO halaman website kita.
  6. Tentu saja dapat dipergunakan bebas dan gratis.

Silahkann eksplorasi halaman AddThis, Selamat ngeblog tetap semangat ya....

www.editblogtema.net

SHARE YA:

dapat di pasang ke setiap tema bawaan blogspot
Beberapa waktu yang lau kami telah menulis cara menambahkan tombol "Reactions" yang keren ke template klasik blogger yang lebih lama, tapi tahukah anda cara tersebut tidak bisa diterapkan ke dalam templat blogger yang lebih baru seperti Contempo, Emporio, Soho dan Terkemuka? Padahal tombol tombol ini sangat membantu pembaca dan pengunjung blog untuk lebih terlibat dan berinteraksi dengan site atau blog kita.

Dan template template terbaru terutama contempo sendiri tidak sama dengan template template lama/klasik blogger, didalam template hanya ada satu <data:post.body/> dan harus diperlakukan beda. Untungnya ada pihak ketiga memperbaharui layanan mereka untuk tombol berbagi dan tombol reaction ini.

Jangan kuatir, anda tetap bisa memasang tombol share dan reactions yang lebih keren. Tombol reaction ini apabila nanti disentuh oleh pengunjung blog akan memunculkan tombol share medsos dibawahnya termasuk share ke WhatsApp, keren, bukan?

LANGKAH SATU:
Namun terlebih dahulu anda kunjungi REACT & SHARE, mendaftar dengan menggunakan email nanti akan muncul halaman seperti gambar:
kunjungi saja situsnya
Perhatiakan tiga tool diatas layar: 
  1. chosse style anda bisa memilih model ikon reaksi yang sesuai keinginan
  2. Customize, anda bisa mengedit bentuk dan letak emoji sesuai keinginan
  3. Install akan muncul kode sesuai dengan site yang telah anda daftarkan, lalu copy kode tersebut untuk di pastekan kedalam template anda dan ikuti langkah kedua:

LANGKAH KEDUA:
Caranya adalah buka blogger anda yang kebetulan menggunakan tema contempo, Soho, emporio atau terkemuka.

  1. Masuk dasbor blogger pengaturan atau setting blogger
  2. Pilih Tema atau kalau bahasa Inggris "Theme"
  3. Pilih atau masuk ke opsi editHTML
Pada halaman HTML cari kode <data:post.body/> setelah ketemu pastekan kode yang didapat dari halaman REACT & SHARE diatas sebelum atau sesudah <data:post.body/> (kalau sebelum maka posisi emoji berada diatas postingan, kalau sesudah maka posisi emoji akan berada tepat dibawah postingan)
Kalau kode saya begini:

<div class="rns"></div>
<script type="text/javascript">
  (function() {
    window.rnsData = {
      apiKey: '4ac2ubo6ksa1lk87'
    };
    var s = document.createElement('script');
    s.src = 'https://cdn.reactandshare.com/plugin/rns.js';
    document.body.appendChild(s);
  }());
</script>

SAVE template. Demonya cukup lihat blog ini, sekarang templatenya sudah saya ganti dengan template CONTEMPO yang telah saya edit sehingga memiliki sidebar layaknya template klasik: Tema contempo yang saya pakai ini adalah kombinasi: Contempo asli strukturnya, namun klasik tampilannya, he he he...By the way saya suka sama kode CSSnya yang banyak dan rumit.

Demikian cara membuat tombol reaksi plus tombol share, semoga bermanfaat!

SHARE YA:

Menurut saya sih ini tombol share paling responsive telah dibuat oleh rekan blogger kita. Seperti anda ketahui  tombol share cukup signifikan mendukung kinerja SEO sebuah blog, jadi tidak perlu dibahas lagi manfaatnya.
Persiapan:

  1. Masuk ke pengaturan blogger
  2. Pilih tema atau template
  3. Pilih editHTML

Langkah 1
Untuk memasang tombol share ini pastikan template blogger anda telah terpasang kode pemanggil font awsome yang harus anda pasang dibawah kode <head>:

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>

Dan juga pastikan telah terpasang kode API (Application Programming interface) pada template anda untuk memastikan semua kode perintah widget share yang mau kita pasang berjalan sempurna, masangnya sama yakni dibawah kode <head> atau diatas kode </head> kodenya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Note: Jika kedua kode diatas telah terdapat pada template anda (template tempalte premium telah memiliki kode kode ini) maka langkah diatas dapat diabaikan.

Langkah 2

Cari kode </head> letakan kode di bawah ini sebelum atau sesudahnya (pembuatnya menyarankan sesudahnya, saya berpendapat lebih baik sebelumnya)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>


.bsd_horizontal_sharebar {
position: relative;
background: none;
z-index: 2;
width: 100%;
padding: 10px 0;
display: inline-block;
font-family: sans-serif;
margin: 5px 0px;
border-top: 1px dotted rgba(0, 0, 0, 0.05);
border-bottom: 1px dotted rgba(0, 0, 0, 0.05);
}
.bsd_horizontal_sharebar .Share_buttons {
display: block;
}
.bsd_horizontal_sharebar .Share_buttons .wrap {
text-align: center;
margin: 0 auto;
display: inline-block;
min-width: 41px;
}
.bsd_horizontal_sharebar .Share_buttons .wrap1 {
display: inline-block;
width: 31px;
float: left;
}
.bsd_horizontal_sharebar .Share_buttons ul {
margin: 0;
padding: 0;
}
.bsd_horizontal_sharebar .Share_buttons ul li a, .bsd_horizontal_sharebar .Share_buttons ul li a:hover {
color: #FFF !important;
cursor: pointer;
line-height: 25px;
height: 100%;
display: block;
text-decoration: none;
}
.bsd_horizontal_sharebar .Share_buttons ul li {
list-style: none;
list-style-type: none;
padding: 0;
margin: 1px;
float: left;
width: 16%;
max-width: 115px;
display: inline-block;
font-size: 13px;
overflow: hidden;
text-align: left;
height: 25px;
line-height: 25px;
color: #fff;
border: 1px solid rgba(0,0,0,0.04);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.bsd_horizontal_sharebar .Share_buttons ul li .fa {
color: #fff;
font-size: 17px;
font-weight: normal;
font-family: FontAwesome;
display: inline-block;
text-align: center;
padding: 0;
height: 25px;
line-height: inherit;
width: 30px;
background-color: rgba(0,0,0,0.1);
border-right: 1px solid rgba(0,0,0,0.05);
}
/*--Facebook---*/
.bsd_horizontal_sharebar .Share_buttons .bs_fb {
background: #3a579a;
}
.bsd_horizontal_sharebar .Share_buttons .bs_fb:hover {
background: #314a83;
}
/*--Tweeter---*/
.bsd_horizontal_sharebar .Share_buttons .bs_twtr {
background: #00abf0;
}
.bsd_horizontal_sharebar .Share_buttons .bs_twtr:hover {
background: #0092cc;
}
/*--Google Plus---*/
.bsd_horizontal_sharebar .Share_buttons .bs_gplus {
background: #df4a32;
}
.bsd_horizontal_sharebar .Share_buttons .bs_gplus:hover {
background: #be3f2b;
}
/*--Pinterest---*/
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst {
background: #cd1c1f;
}
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst:hover {
background: #ae181a;
}
/*--linkedin---*/
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin {
background: #2554BF;
}
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin:hover {
background: #224EB4;
}
/*---Total Share----*/
.bsd_horizontal_sharebar .Share_buttons .share.h6 {
font-size: 10px;
font-weight: bold;
text-shadow: none!important;
text-decoration: none;
text-align: center;
color: #000000;
border-top: 3px solid #FFF600 !important;
border-bottom: 0;
padding: 0px !important;
padding-top: 5px!important;
margin: 0 !important;
line-height: 8px;
border-radius: 75% 0;
}
.bsd_horizontal_sharebar .Share_buttons .share {
border: none;
margin: 0px 5px 0px 1px;
overflow: visible !important;
width: 95px !important;
}
.bsd_horizontal_sharebar .Share_buttons .share .count.h4 {
font-size: 18px;
font-weight: bold;
text-shadow: none;
text-decoration: none;
font-family: sans-serif;
text-align: center;
color: #FF0000;
line-height: 15px;
margin-top: 0px;
margin: -4px 0px 2px 0;
min-height: 15px;
padding: 0px;
border: none;
}
.bsd_horizontal_sharebar .Share_buttons .bs_fb .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_twtr .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_gplus .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin .share-bs {
position: relative;
color: #C3C3C3;
display: inline-block;
text-align: center;
font-weight: bold;
font-size: 11px;
float: right;
min-width: 12px;
font-family: sans-serif;
padding: 0px 5px;
background-color: rgba(0,0,0,0.28);
border-radius: 0px 0px 0px 15px;
}
@media only screen and (max-width: 979px) {
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin {
width: 34px;
}
.bsd_horizontal_sharebar .Share_buttons .bs_fb .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_twtr .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_gplus .share-bs,
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst .share-bs
{
display: none !important;
}
}


@media only screen and (max-width:768px) {

.bsd_horizontal_sharebar .Share_buttons ul li a, .bsd_horizontal_sharebar .Share_buttons ul li a:hover {
color: #FFF !important;
cursor: pointer;
line-height: 25px;


font-size: 11px;
height: 100%;
display: block;
text-decoration: none;
}
.bsd_horizontal_sharebar .Share_buttons .wrap {
min-width: 34px;
}
.bsd_horizontal_sharebar .Share_buttons .bs_linkdin,
.bsd_horizontal_sharebar .Share_buttons .bs_pntrst {
width: 30px;
}
.bsd_horizontal_sharebar .Share_buttons ul li {
margin: 1px 3px;
}
@media only screen and (max-width:479px) {
.bsd_horizontal_sharebar .Share_buttons .share {
border: none;
margin: 0px 5px 0px 1px;
overflow: visible!important;
width: 80px!important;
}
.bsd_horizontal_sharebar .Share_buttons ul li {
width: 25px !important;
margin: 2px;
border-radius: 50px;
border: 2px solid rgba(0, 0, 0, 0.14);
}
.bsd_horizontal_sharebar .Share_buttons .wrap {
display: none !important;
}
.bsd_horizontal_sharebar .Share_buttons ul li .fa {
width: 25px !important;
}
}
</style>
</b:if>

Langkah ke 3:
Di dalam template anda (opsi editHTML) cari kode: share buttons kodenya dalam template aka terlihat seperti:

<!--share buttons-->

di bawahnya ada kode berikut:

<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

Kalau tidak ada pasti bentuknya seperti ini:

<div class='post-share-buttons goog-inline-block'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</div>

Hapus kode dibawah share button tersebut dan ganti dengan kode di bawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
var shareUrl = $("link[rel=canonical]").attr("href");
$.getJSON('http://bloggersstand.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
shares = data.shares;
$(".count").each(function (index, el) {
service = $(el).parents(".share-bs").attr("data-service");
count = shares[service];
if (count > 1000) {
count = (count / 1000).toFixed(1);
if (count > 1000) count = (count / 1000).toFixed(1) + "M";
else count = count + "k";
}
$(el).html(count);
});
});
});
//]]></script>
<div class='bsd_horizontal_sharebar'>
<div class='Share_buttons'>
<ul>
<li class='share'>
<div class='share-bs' data-service='total'>
<div class='count h4'></div>
<div class='share h6'>SHARES</div>
</div>
</li>
<li class='bs_fb'><a expr:href='&quot; http://www.facebook.com/share.php?v=4&amp; src=bm&amp; u=&quot; + data:post.url + &quot; &amp; t=&quot; + data:post.title' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'>
<div class="wrap1"><i class="fa fa-facebook"></i> </div>
<div class="wrap">Share</div>
<div class='share-bs' data-service='facebook'>
<div class='count'/></div>
</a>
</li>
<li class='bs_twtr'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @bloggersstand - &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'>
<div class="wrap1"><i class='fa fa-twitter'></i></div>
<div class="wrap">Tweet</div>
<div class='share-bs' data-service='twitter'>
<div class='count'/></div>
</a>
</li>
<li class='bs_gplus'><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot; &quot; ,&quot; menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot; ); return false; ' rel='nofollow'>
<div class="wrap1"><i class='fa fa-google-plus'></i></div>
<div class="wrap">Share</div>
<div class='share-bs' data-service='google'>
<div class='count'/></div>
</a>
</li>
<li class='bs_pntrst'><a data-pin-config='beside' expr:href='&quot; http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot; &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=500&quot; ); return false;' rel='nofollow'>
<div class="wrap1"><i class='fa fa-pinterest'></i></div>
<div class="wrap">Pin</div>
<div class='share-bs' data-service='pinterest'>
<div class='count'/></div>
</a>
</li>
<li class='bs_linkdin'><a expr:href='&quot; http://www.linkedin.com/shareArticle?mini=true&amp; url=&quot; + data:post.url + &quot; &amp; title=&quot; + data:post.title + &quot; &amp; summary=&amp; source=&quot; ' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=500&quot; ); return false;' rel='nofollow'>
<div class="wrap1"><i class='fa fa-linkedin'></i></div>
<div class="wrap">Share</div>
<div class='share-bs' data-service='linkedin'>
<div class='count'/></div>
</a>
</li>
</ul>
</div>
</div>
</b:if>
</b:if>


Demo telah di cobakan ke blog edittema ini.

SHARE YA:

Bang, ane coba pasang tombol share dari tutorialnya Arlina sudah pilih banyak post.body tetap saja tombol sharenya gak muncul, buatin tutorialnya don.
-Reza-
tombol berbagi arlina
Tombol share juga penting,  tujuannya untuk memudahkan kita berbagi atau agar pembaca mudah membagikan artikel/postingan kita. Saya membaca banyak blog dan  diantaranya beberapa teman mengajukan pertanyaan karena kesulitan memasang tombol share yang terdapat dalam tutorial blognya Arlina Desizn yang berjudul:
MEMASANG TOMBOL SHARE DI BLOG
Silahkan baca tutorial tersebut. Kesulitannya adalah pada saat memilih pemasangan setelah tag <data:post.body/> saya meneliti koleksi struktur blog yang saya simpan di notepad ternyata para blogger pemula kesulitan memilih diantara 1,2,3 sampai empat kode serupa walaupun Arlina mengatakan pilih kode ke-2 dalam mark up post (bukan mobile) tetap saja membingungkan. 

Karena ketika cara tersebut diterapkan dan ternyata tidak berhasil, anda harus mencari kodenya kembali untuk dihapus dalam HTML, mencari diantara beberapa kode <data:post.body/> ribet bukan?

Anggaplah saya sedang mengoreksinya, cara yang cukup mudah dilakukan adalah: 
  1. Masuk kepengaturan blog
  2. Pilih Tema atau template
  3. Pilih editHTML
Seperti pada tutorial Arlina, cari kode ]]></b:skin>  atau </style> dan letakan kode CSS dibawah ini di atasnya, (cara ini sudah benar):
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='tombol-berbagi-arlina'> <div class='tombol-berbagi-arlina-fb'> <a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a> </div> <div class='tombol-berbagi-arlina-tw'> <a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a> </div> <div class='tombol-berbagi'> <a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a> </div> <div class='tombol-berbagi'> <a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a> </div> </div> </b:if>
Lalu bagaimana dengan langkah yang kedua? Berbeda dengan cara yang arlina tunjukan pada blognya, alih alih harus memilih salah satu kode <data:post.body/>, saya lebih menyarankan anda mencari kode <!--Share buttons--> di dalam HTMl, tekan ctrl+f dan pada kotak pencarian diatas kolom HTML ketikan saja: Share Button, bentuknya sbb
Dibawah "Share buttons" ada barisan kode:
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>

Atau kalau tidak terdapat kode diatas pasti ada kode sbb:

<div class='post-share-buttons goog-inline-block'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</div>

Hapus semua kode tersebut, tapi tinggalkan kode <!--share buttons--!> diatasnya, dan gantikan dengan kode dari Arlina dibawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='tombol-berbagi-arlina'> <div class='tombol-berbagi-arlina-fb'> <a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a> </div> <div class='tombol-berbagi-arlina-tw'> <a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a> </div> <div class='tombol-berbagi'> <a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a> </div> <div class='tombol-berbagi'> <a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a> </div> </div> </b:if>

Dan silahkan SAVE template blogger anda.

Tampilannya adalah seperti di bawah ini dan kami cobakan diblog editblogtema untuk membuktikan "keampuhannya".
Terimakasih, semoga bermanfaat!

SHARE YA: