Blogger dengan Official Share Buttons Sendiri

Kini Blogger telah memiliki sebuah fitur terbaru, yang mampu meningkatkan kegunaan blog dan penampilan blog. Blogger telah menambahkan fitur Share Buttons dalam posting, yang terdiri dari ikon Email, Blogger, Twitter, Facebook, dan Google Buzz. kamu dapat berbagi dengan kirim email ke temanmu atau berbagi dengan jejaring sosial milikmu.

Tombol ini memiliki efek yang bagus, warnanya akan menyala keika mouse digerakkan ke tombol, selain itu alamat URL yang panjang akan dipendekkan dengan short URL Goo.gl milik Google jika kamu berbagi dengan Twitter. Tombol ini memduahkan kamu dengan tidak perlu lagi menggunakan Share Buttons dari pihak ketiga semisal Addthis.

Berikut langkah-langkah untuk menggunakan dalam Blogger.

1. Login ke Dashboard (saranku login ke http://draft.blogger.com), kemudian pilih Design (id:Rancangan).

2. Tab Design, lihat tab Page Elements, dan klik Edit pada kotak Blog Posts (Posting Blog).

3. Centang pada Show Share Buttons, dan letakkan posisi pada bagian yang kamu kehendaki.

4. Simpan, dan lihat hasilnya pada posting blogmu.

 

Nah bagaimana jika tidak tampil? sebab sebagian templates yang digunakan pada Blogger tidak dapat menampilkan Share Buttons, untuk itu perlu menambahkan kode pada Edit HTML.

Menambahkan kode Share Buttons pada Edit HTML Blogger.

1. Pada tab Design, pilih tab Edit Html, dan centang "Expand Widget Templates", temukan kode berikut (bisa dengan Ctrl+F).

<p class='post-footer-line post-footer-line-1'>

lihat angka 1 pada kode, kamu dapat memilih dan menganti dengan angka 2 mengganti letak pada baris ke-2 atau 3 pada baris ke-3.

atau jika kode diatas tidak ada, temukan kode berikut:

<data:post.body/>

2. Tambahkan kode ini tepat dibawahnya, dan Preview, setelah ok, maka Simpan.

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

 

Tambahan bagi kamu

1. Jika kamu menggunakan auto readmore, kamu pasti ingin Share Buttons ini akan muncul pada halaman artikelnya, dan bukan rinkasannya. kamu bisa menambahkan kode:

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

menjadi kode berikut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons'>
   <b:include data='post' name='shareButtons'/>
</div>
</b:if>

2. Menyembunyikan beberapa tombol Share Buttons, misal kamu ingin menyembunyikan tombol Email, tambahkan kode berikut pada CSS style sebelum kode

.sb-email{display:none}

Atau kamu dapat menyembunyikan kode lainnya dengan mengganti dengan  kode tombol lainnya, yakni: sb-email, sb-blog, sb-twitter, sb-facebook, dan sb-buzz.

Selamat mencoba, semoga berhasil, jika terdapat pertanyaan silahkan tuliskan pertanyaan pada kotak formspring di sidebar kanan, atau isi pada kotak komentar dibawah. Terimakasih.