11/19/16

Cara Mudah Mengganti Share Buttons Bawaan Blogger

Pasti di antara sobat blogger semua merasa kurang enak menggunakan Share Buttons Bawaan dari Blogger karena desainnya yang masih terlihat kuno. Sedangkan sobat semua ingin yang lebih berwarna biar kelihatan moderen dan sedikit profesional dalam mengelola bloggnya.

Cara Mudah Mengganti Share Buttons Bawaan Blogger

Memang ada banyak penyedia layanan Share Buttons salah satunya "addthis, addtoany" yang menawarkan kemudahan dalam pemasangan dan sering di pakai oleh kebanyakan kalangan blogger. Tapi menurut saya pribadi terasa berat saat loading blog kita saat menggunakan Share Button yang di pasang  dari penyedia layanan, mungkin sobat semua punya pendapat lain.

Untuk memasang Share buttons yang akan saya berikan ini juga sama sangat mudah dan tidak menyebabkan loading pada blog soba. Share Buttons ini berbentuk flat jika tampilannya kurang menarik silahkan sobat ubah sendiri, saya telah mencobanya sendiri memasang di Blog saya, makanya saya berani membagikannya kepada sobat semua.

Share buttons ini bisa di gunakan di template default blogger, untuk tutorialnya mari kita simak di bawah ini :

1. Anda Login dulu ke blogger
2. Lalu Pilih template - "Edit HTML" (Jangan lupa backup dulu template sobat sebelum mengedit)
3. Silahkan sobat cari kode sharebuttons untuk lebih jelasnya sobat lihat gambar di bawah ini

Mengganti Share Buttons Bawaan Blogger 2

4. Jika sobat telah menemukan kode ShareButtons tersebut, hapus kode dari "<b:if cond" sampai "</b:if>" setelah sobat menghapusnya, copy pastekan kode di bawah ini tepat di atas " </b:includable> " atau di tempat yang tadi sobat hapus.
<style>
.share__button {
  width: 100%;
  overflow: hidden;
  margin-top: 20px;
}
.share__button a {
  display: block;
  height: 32px;
  line-height: 32px;
  color: #fff;
  float: left;
  padding-right: 10px;
  margin-right: 10px;
  margin-bottom: 25px;
}
.share__button .facebook {
  background-color: #436FC9;
}
.share__button .twitter {
  background-color: #40BEF4;
}
.share__button .google {
  background-color: #EC5F4A;
}
.share__button span {
  display: block;
  width: 32px;
  height: 32px;
  float: left;
  margin-right: 10px;
  background: url(https://lh6.googleusercontent.com/-_xmVrHoLpCo/VNBsLm2TQSI/AAAAAAAAAZg/5SbdJpV7gN4/s800/single-share.png) no-repeat;
}
.share__button .facebook span {
  background-color: #3967C6;
}
.share__button .twitter span {
  background-color: #26B5F2;
  background-position: -72px 0;
}
.share__button .google span {
  background-color: #E94D36;
  background-position: -144px 0;
}
</style>
<div class='share__button'>
  <a class="facebook" expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' target="_blank" title="Facebook">
    <span></span>
    Facebook
  </a>
  <a class="twitter" expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' target="_blank" title="Twitter"><span></span>
     Twitter
  </a>
  <a class="google" expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl'  onclick="javascript:window.open(this.href,   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;" rel="nofollow" title="Google+">
    <span></span>
    Google Plus
  </a>
</div>

Keterangan :
  • Warna Ungu untuk merubah ukuran background pada tulisan
  • Warna Merah untuk merubah warna background pada tulisan
  • Warna aqua untuk merubah ukuran logo 
  • Warna orange untuk merubah warna background logo 
  • Warna lime untuk merubah tulisan silahkan kalian kreasikan sendiri.
5. Jika anda belum yakin silahkan klik Pratinjau Template,  jika sudah yakin silahkan anda pilih Save/Simpan Perubahan. 

Jika ada pertanyaan silahkan tinggalkan komentar di bawah, semoga postingan ini bermanfaat bagi anda semua.

You might also enjoy reading

Subscribe

Daftarkan email Anda untuk mendapatkan Artikel terbaru pilihan dari Andito Blog

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Silahkan berkomentar sesuai dengan topik.