Memperbesar kotak share button default blogger

Assalaamu alaikum sahabat guruKATRO,

Diakui atau tidak, Share buttons bawaan blogger atau ShareButtons Default milik blogger, adalah jenis Tombol berbagi yang hingga saat ini belum ada tandingannya dalam urusan kecepatan loading, namun dalam perjalanannya ternyata banyak blogger yang kurang suka dengan ShareButtons tersebut.
Ada yang tidak suka dengan alasan tampilannya terlalu kecil dan mepet, ada yang menganggap gayanya pas pasan, ada pula yang beralasan bila share button itu tidak mampu menampilkan counter sharers alias sudah berapa kali sebuah posting itu telah dibagikan melalui media share tersebut.

Bagi pengunjung blog guruKATRO yang tidak menyukai share buttons tersebut dengan alasan yang ke dua dan ke tiga, bolehlah untuk tidak usah melanjutkan cerita ini, karena percuma saja, hingga akhir bahasan ini selesai pun tidak akan dituangkan disini. namun bagi yang dengan alasan pertama, yang tercetak dengan huruf italic plus color biru itu, tidak ada salahnya untuk menelaah lebih lanjut. Karena itu mengandung arti bila sebenarnya anda masih menyukai keunggulan kecepatan loading share button tersebut.

Ockey mari kita lihat dulu default tampilan ShareButtons bawaan blogger yang kayaknya seprti ini yah ???
guruKATRO juga memaklumi tampilan yang supermini dan super mepet tersebut, mungkin saja itu dimaksudkan agar terjaga loading blog. Tampilan Share button seperti itu terpampang pada template bawaan blogger model lama kecuali untuk beberapa template lama dengan tampilan Dinamis.

Bila anda benar benar masih mengagumi share button tersebut, dan hanya ingin sedikit memperbesar serta mentidakmepetkan tampilan saja, maka tinggal tambahkan saja css seperti ini pada halaman edit template blog anda dengan css seperti ini :

kita bungkus dulu include sharebuttons dengan html class buatan sendiri, misalnya dengan ketik :
<div class='modif-default-sharebuttons'>

 sehingga yang asalnya :
<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>
</b:if>

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

kalau sudah bungkus dengan html class tersebut, tinggal kita atur dengan css :
.modif-default-sharebuttons {
    margin: 10px 0;
    padding: 5px;
    text-align: center;
    transform: scale(1.6);
}


dengan perintah css seprti itu, maka ukuran kotak share telah dibesarkan, tapi masih ada kendala, masalah lebar yang menjadi over, seperti ini :

Ada dua cara mengatasi hal ini :

1. Bila ingin share google plus tetap sejajar, gunakan css ini :
.goog-inline-block.dummy-container {
    margin-left: -6px;
    width: 32px;
    overflow: hidden;
}

maka tampilannya akan seperti ini :



2. Bila anda suka tetap menampilkan deskripsi/rincian data yang ada di belakang google plus, terpaksa google plus button diletakkan sendirian dibawah yang empat itu.

caranya jangan gunakan css pada nomor 1 diatas, tapi gunakanlah css yang ini :
.goog-inline-block.dummy-container {
    display: block;
    max-width: 180px;
}

maka tampilannya akan menjadi seperti ini :




3. Bila anda menjadi kurang suka, gara gara pengaruh css zoom, tampilan kotak share menjadi layu, silakan segarkan dengan menambahkan  css brightness dan contrast pada perintah css untuk modif-default-saharebuttons, seperti ini :
.modif-default-sharebuttons {
    margin: 10px 0;
    padding: 5px;
    text-align: center;
    transform: scale(1.6);
    filter: brightness(.8)contrast(1.2);
}

dengan penambahan css filter:brightness(.8)contrast(1.2), maka raut wajah kotak share buttons menjadi agak sedikit lebih fresh




NB :

Khusus bagi pemula seperti penulis artikel ini!


  • Ketikan modif-default-sharebuttons bisa diganti sesuka hati, dengan syarat semua ejaan pengganti harus sama persis, baik yang ada pada html maupun yang ada pada css
  • (1.6) nilai zoom pada transform scale, dan juga nilai brightness(.8)contrast(1.2), bisa diubahsesuaikan dengan pengaturan halaman blog masing masing
  • css transform dan filter, merupakan default css, agar dapat bekerja pada semua browser, tambahkan :


   -moz- transform: scale(1.6);

   -webkit- transform: scale(1.6);   -o- transform: scale(1.6);    -ms-transform: scale(1.6);    transform: scale(1.6);
begitu juga pada css filter :

    -moz-filter: brightness(.8)contrast(1.2);
    -webkit-filter: brightness(.8)contrast(1.2);    -o-filter: brightness(.8)contrast(1.2);    -ms-filter: brightness(.8)contrast(1.2);    filter: brightness(.8)contrast(1.2);

  • Cari html

<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>
</b:if>

ada didalam <b:includable id='post' var='post'>


  • Letakkan css diatas ]]></b:skin>



Demikian sedikit bahasan tentang modifikasi tampilan ShareButtons default milik blogger, masih banyak cara lain yang pastinya bisa menampilkan yang lebih bagus dari yang diatas itu, silakan kembangkan sendiri sendiri.

Ya Allah ya Tuhan Kami Yang Maha Bijaksana,
Berikanlah keberkahan yang melimpah,
kepada pembaca kami
yang tidak memblokir iklan
pada halaman ini

bagikan Artikel ini melalui :

Demikian Posting tentang Memperbesar kotak share button default blogger yang dapat guruKATRO sajikan, mohon maaf bila masih banyak kekurangannya, kritik dan saran serta pertanyaan dapat disampaikan melalui kolom komentar.

Terima kasih

No comments