2017-05-12

Membuat mudah Pilihan Tampilan Share Buttons blogger

Assalaamu alaikum pengunjung guruKATRO,

Seperangkat piranti yang dimanfaatkan sebagai sarana berbagi, atau lebih ekslusifnya mengharap agar pengunjung blog bisa membagikan kepada teman teman online lainnya tentang hasil jerih payah posting blogger.

Dengan kenyataan seperti diatas, Share Buttons menjadi bagian yang penting untuk sebuah blog, bisa dibayangkan bila sebuah blog tanpa adanya tombol share buttons.


Hingga saat ini (setidaknya menurut pandangan guruKATRO) sudah ada sangat banyak jenis dan tampilan shareButtons yang dimanfaatkan oleh para blogger, mulai dari yang sangat ringan loading hingga yang sangat prestisius tampilannya, anda tinggal pilih yang mana, tentunya sesuai selera dan tujuan pemasangannya.





Terutama untuk para pengguna blogspot dan/atau TLD tapi hosting masih menggunakan blogspot milik mbah gugel, sebenarnya sudah difasilitasi share buttons yang sangat ringan loadingnya,....

Kecuali bila anda menggunakan free template blogger kategori baru kala ini, semacam Contempo. Soho. Emporio dll, atau bila anda masih menggunakan tema lama blogger tapi memilih jenis Tampilan Dinamis, kayaknya share buttons dengan tampilan seperti itu telah tiada disana.

Tombol share buttons yang tiada banding kecepatannya itu sayangnya banyak blogger yang tidak menyukai, dan kebanyakan yang tidak menyukai itu hanya karena alasan Tampilannya yang pas pasan, jua ada beberapa blogger yang menganggap bottons itu ukurannya terlalu kecil.

Akhirnya banyak blogger yang lebih memilih tombol share buttons dengan tampilan elegan, walau dengan resiko menambah berat loading blog, misalnya macam yang guruKATRO gunakan ini :




Keunggulan lain dari share buttons adalah bisa menampilkan jumlah aktifitas, sudah berapa kali materi diatasnya disukai atau dibagikan oleh pengunjung kepada rekan rekan onlinenya.

tapi disini, yang guruKATRO rasakan utamanya, tombol suka dan bagikan yang terkait dengan aktifitas di facebook, itulah yang paling berat loadingnya. Mau membuang tombol milik facebook itu? agar loading blog kembali normal, sepertinya sangat tidak bijaksana bagi diri sendiri, karena pada kenyataannya button itulah yang saat ini sedang booming di media online!. Lihat saja contoh screenshhot diatas, tombol share yang lain masih pada kosong, sementara facebook like sudah 31 dan facebook share sudah 43. Mungkin sebenarnya share buttons yang laris lagi adalah twitter, namun sayangnya entah mengapa hingga detik ini guruKATRO masih merasa malas untuk aktif di jejaring sosial tersebut, hingga share twitter pada blog guruKATRO TETAP SAKJA TIDAK DIGUNAKAN.

guruKATRO yang selama ini belum pernah satu kalipun kursus komputer, dan latar belakang pendidikan hanyalah pendidikan Agama saja, jadi mencari cari solusi agar tombol facebook itu bisa tidak mengganggu loading blog. Tapi hingga kini setelah berbagai metoda script di copas dari buatan sang para ahli, belum jua mendapatkan hasil yang signifikan, akhirnya guruKATRO hanya bisa mengernyitkan dahi tanpa mampu menyelesaikan persoalan tersebut.

Dasar guruKATRO ini orangnya angin anginan, walaupun pada kenyataannya tidak bisa apa apa tentang blogger, tapi selalu saja ingin mencoba. Dan inilah Inti dari materi postingan kali ini "MEMPERMUDAH PILIHAN TAMPILAN SHARE BUTTONS", dengan pilihan mengganti tampilan antara share buttons default blogger dengan Share buttons dengan tampilan elegan.

Hasil rekayasa untuk memilih antara tampilan default dengan yang buatan sendiri itu hanya diatur dengan menggunakan html tag kondisional  yang sangat sederhana :

pertama cari dulu html seperti ini :

  • bukakartu ! dulu saya seneng menggunakan textarea, tapi entah mengapa sekarang males banget pakai cara itu .... maaf html dan script saya cetak tidak dalam textarea disini.


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

setelah ketemu , berilah html kondisional seperti ini diatasnya :

ket :

  • ShareButtons default blogger adalah yang berwarna biru
  • html kondisional tambahan adalah yang cetak tebal dan berwarna merah
  • Share button buatan sendiri adalah yang berwarna ungu


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

# untuk membuat pilihan aktifkan share buttons buatan sendiri, beri else disini seperti ini #

<b:else/>

# dan dibawah else, baru kita pasang share buttons buatan sendiri, pasang disini semua javascript nya, ini bertujuan agar bila kita memilih sharebuttons default, maka semua data mulai dari bawah <b:else/> hingga diatas </b:if> paling bawah, benar benar tidak bekerja dan 100% tidak mempengaruhi loading blog.#

dibawah else seperti ini misalnya :

<div class='katroshares'>
<div class='katro twshare'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'/>
</div>
<div class='katro fblike'>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false' data-size='small' expr:data-href='data:blog.homepageUrl'/>
</div>
<div class='katro fbshare'>
<div class='fb-share-button' data-layout='button_count' data-size='small' expr:data-href='data:post.url'/>
</div>
<div class='katro linkshare'>
<script src='//platform.linkedin.com/in.js' type='text/javascript'>lang: id_ID </script>
<script data-counter='right' expr:data-url='data:post.url' type='IN/Share'/>
</div>
<div class='katro pintshare'>
<a href='https://www.pinterest.com/pin/create/button/'>
<img src='//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png'/>
</a>
</div>
<div class='katro gshare'>
<div class='g-plus' data-action='share' data-annotation='bubble'/>
</div>
</div>
<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.src = &quot;//connect.facebook.net/id_ID/sdk.js#xfbml=1&amp;version=v2.9&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
<script>
//<![CDATA[
window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
  return t;
}(document, "script", "twitter-wjs"));
//]]>
</script>
</b:if>

untuk yang mulai dari bawah else hingga diatas b:if bisa diganti dengan model share button kesukaan and, yang penting adalah letakkan semua script pendukung share button disitu !

NB : kebanyakan blogger meletakkan script diatas /head atau diatas /body !

Seteleh selesai dibuat seperti itu klik simpan template, kembali atau tutup halaman edit template.

kemudian buka navigasi tata letak atau lay out

klik edit pada bagian bawah kanan widget main atau widget Posting blog



lalu beri checklist atau buang checklist pada baris pilihan share buttons, setiap ganti pilihan itu, lalu klik simpan / save ..... coba amati hasilnya dengan membuka salah satu halaman posting anda.



Amati juga perbedaan loadingnya ...

Inti kerja cara ini adalah

  • bila kita beri checklist pada Tampilan Tombol Berbagi, maka yang muncul adalah share button default blogger
  • bila kita buang checklist pada Tampilan Tombol Berbagi, maka yang muncul adalah share button buatan sendiri
  • manfaatnya kita bisa mengganti itu kapan saja hanya dengan meberi atau membuang tanda checklist disitu saja.


Mohon maaf bila posting in hanyalah share dari seorang blogger yang belum bisa apa apa tapi selalu ingin mencoba yang baru.

bila anda tidak berkenan atau bila menemukan kelemahan cara ini ....   yaaaaah ..... jangan ikuti langkah ini

Demikian Posting tentang Membuat mudah Pilihan Tampilan Share Buttons blogger yang dapat kami sajikan, mohon maaf bila masih banyak kekurangannya, kritik dan saran serta pertanyaan dapat disampaikan melalui kolom komentar.

Terima kasih

Komentar Facebook
Komentar Blogger

Tidak ada komentar

Populer

Google+