Tambahkan Widget AddThis Sharing Buttons Terbaru di Blogmu!

Sobat mungkin sudah tahu dan menggunakan AddThis Sharing Buttons yang cukup terkenal ini. Google Pagerank-nya saja 10, dan Alexa Ranknya sekitar 158 (apa hubungannya ya?). AddThis Social Sharing buttons (begitu nama lengkapnya :)) adalah widget penting bagi para blogger dan webmaster. Alat ini tidak saja menyediakan berbagai macam sharing buttons milik berbagai macam social media, tapi juga dilengkapi dengan fitur analytics untuk memonitor aktivitas sharing. Tentu ini sangat berguna bagi blogger/publisher untuk mengetahui tingkat popularitas kontennya di social media, untuk menganalisis dan mengukur trend berkaitan dengan konten dan topik yang digeluti, dan, tentu saja, untuk mengukur seberapa kuat social media membantu upaya peningkatan traffic.

Nah, dalam prosesnya. AddThis telah berkembang dengan sangat pesat, dalam satu tahun belakangan ini saja jumlah usernya mencapai dua kali lipat. Dan yang lebih hebat lagi, baru-baru ini AddThis sharing tools telah berevolusi dalam bentuk yang lebih kuat, diantaranya adalah perubahan script yang digunakan, kemudahan dalam menggunakan, layout lebih elegan, dan memiliki lebih banyak fitur. Mari kita lihat!

Apa yang Baru dari AddThis?

Ceritanya, beberapa waktu yang lalu saya jalan-jalan ke AddThis karena sudah lama tidak menengok  aktivitas sharing website saya di situs layanan sharing yang sudah cukup "senior" itu. Betapa kagetnya saya (koprol sambil bilang "Waowww!!") karena ketika melihat halaman widget ada beberapa perubahan besar  yang cukup jelas dari widget terdahulu. Yang paling menarik saya adalah desain layout yang tampak fresh dan menyenangkan. Sharing buttons tampak lebih baik dan lebih memiliki presisi. Email form pun kini memiliki tampilan baru. Dan satu lagi, menu dropdown yang muncul kini menggunakan HTML5 dan JQuery dan bersifat asynchronous. Artinya, loading yang dibutuhkan sangat cepat, jauh lebih cepat dari widget sharing buttons lama.

Oya, satu lagi, kini user lebih mudah melakukan sharing karena buttons tidak memunculkan halaman baru, semua bisa dilakukan dari halaman yang sama dan merupakan bagian dari AddThis buttons. Tentu syaratnya user harus dalam kondisi login AddThis terlebih dahulu. Sebagai tambahan lagi, sharing ke Pinterest kini juga jauh lebih mudah karena sekali button Pinterest ditekan, akan muncul lightbox gallery dimana user dapat memilih gambar mana yang hendak dibagi.

Pokoknya, amazing, splendid, incredible lah! (Seperti kata mas Tukul).

Cara Memasang Widget AddThis Sharing Buttons di Blogger

Memasang tool ini sangat mudah dan cepat. Sobat tinggal melakukan setting pada halaman setting AddThis Button dan tinggal memasangnya pada widget atau template. Untuk yang kedua, caranya tidak beda dengan cara memasang widget sharing button yang pernah saya share dahulu. Here we go:

1. Silahkan langsung masuk ke halaman setting AddThis Sharing Buttons (oh ya, sebelumnya saya sarankan untuk mendaftar ke AddThis terlebih dahulu. Dengan menjadi user terdaftar, anda dapat mengatur dan mengakses informasi aktivitas sharing yang sangat bermanfaat sebagai alat analisis).

2. Ada beberapa opsi di bagian pojok kiri untuk menyesuaikan dengan platform blog/website yang digunakan. Saran saya, tetap pilih "A Website" karena kita membutuhkan kode ini jika ingin memasang melalui edit HTML template, kecuali jika sobat ingin menggunakannya sebagai widget/gadget yang tinggal dipasang saja.

3. Pilih layot widget sharing yang diinginkan.

4. Ambil/copy code dan simpan baik-baik.

5. Jika ingin memasang di bagian "gadget", cukup pilih tipe HTML javascript, paste kode, dan simpan. 

6. Jika ingin memasang di bagian atas atau bawah posting, perhatikan clue berikut:
a. Masuk ke:

Template > klik Edit HTML > Centang (check) "Expand Widget Templates" 

b. Jika ingin memasang di bawah judul posting:

Cari (Ctrl + F) <div class='post-header-line-1'/>, letakkan script/kode tepat di BAWAHnya. Kalau <div class='post-header-line-1'/> tidak ketemu, cari <data:post.body/> lalu letakkan script/kode tepat di ATASnya.

c. Jika ingin memasang di bawah posting/artikel:

Cari (Ctrl + F) <data:post.body/> lalu letakkan script/kode tepat di BAWAHnya.

d. Save template 'n lihat hasilnya.

Yup, well done. Have a nice blogging and sharing!

© 2012 - 'til drop. buka-rahasia.blogspot.com. All rights reserved.

Menampilkan Widget Hanya di Homepage dan Halaman Posting

Ketika melakukan setting desain blog, terkadang kita terkendala dengan banyaknya widget yang ditampilkan, sehingga widget tampak berdesakan dan halaman menjadi begitu panjang. Dalam kasus lain lagi, terkadang kita hanya ingin widget tertentu hanya muncul di halaman spesifik, baik homepage, halaman statis, maupun halaman posting saja. Dulu saya pernah berbicara mengenai bagaimana menyembunyikan sidebar Blogger di halaman tertentu, dengan menggunakan conditional tags dan CSS (display), dan jika yang diinginkan hanya untuk menyembunyikan satu atau beberapa widget, maka tentu kurang tepat jika diterapkan. So, dalam kesempatan ini, saya ingin berbagi mengenai bagamana menampilkan atau menyembunyikan salah satu atau beberapa widget dalam halaman tertentu, dan menampikannya pada jenis halaman lain.

Konsep Hack Menampilkan Widget Pada Halaman Tertentu

Cara ini sebenarnya masih sama dengan artikel yang sebelumnya sudah saya sebutkan, yaitu menggunakan conditional tags (b if), salah satu tag XML Blogger, untuk memberikan perintah agar suatu elemen ditampilkan pada bagian/halaman tertentu saja dan menyembunyikannya pada bagian/halaman lain.  Conditional (if) juga dikenal penggunaanya pada PHP, dan juga dikenal dalam bahasa Inggris (if clause, conditional sentence) hehehehe..... Bedanya dengan cara sebelumnya, cara yang saya tawarkan ini tidak akan menggunakan CSS, melainkan menggunakan conditional tags langsung pada elemen yang hendak diberikan perintah, yang dalam hal ini adalah elemen-elemen widget.

Langkah-langkah Menampilkan Widget Pada Halaman Tertentu

1. Mencari ID Widget

Sebelum memberikan conditional tags, anda harus mengetahui ID widget yang hendak ditampilkan pada halaman tertentu. Cara mencarinya sangat mudah:

a. Ada dua cara untuk mengakses editor widget (sebenarnya ada 3, yaitu melalui edit HTML, tapi cara ini akan lebih rumit:

- Jika anda dalam kondisi login Blogger, anda dapat langsung mengakses "quickedit" langsung dari halaman blog, quickedit adalah tool untuk mengedit widget secara langsung, letaknya biasanya adalah di bagian pojok kanan bawah widget, berupa ikon obeng dan kunci (screwdriver and wrench). Klik icon pada widget yang diinginkan dan akan muncul pop-up window dimana anda dapat mengedit konten widget.

- Atau akses editor widget melalui halaman "Layout", lalu klik link "edit" di salah satu bagian widget. Kemudian akan muncul pop-up window.

b. Lihat di bagian URL/address di browser pada halaman pop up window tersebut. Letak ID widget berada di bagian akhir URL (geser URL ke kanan). Perhatikan contoh gambar berikut:

d. Simpan Id Widget tersebut, misalnya dari contoh di atas, Id widget yang hendak saya edit adalah "HTML11".

2. Memberikan Conditional Tags Pada Elemen Widget

Untuk menampilkan widget di halaman tertentu, anda harus menambahkan conditional tags (b if cond) pada elemen widget yang diinginkan. Berikut langkah menambahkannya sesuai dengan contoh widget yang sudah disampaikan di atas:

a. Masuk ke halaman template (Dashboard > Template)

b. Klik "Edit HTML" > Proceed.

c. Jangan lupa klik/centang "Expand Widget Templates" untuk menampilkan seluruh elemen widget di dalam editor.

d. Tekan CTRL+F, masukkan ID widget yang diinginkan yang sebelumnya telah dicari dan dipersiapkan. Dalam contoh ini saya akan menggunakan id widget "HTML11" sebagai contoh dan berikut kurang lebihnya elemen widget sobat:

e. Kemudian tambahkan conditional tag setelah <b:includable id='main'> dan tag penutupnya sebelum </b:includable>. Berikut conditional tags berdasarkan jenis halaman dan cara menambahkannya, perhatikan tag berwarna merah dan itulah yang harus ditambahkan:

Cara Menampilkan Widget Hanya di Halaman Utama/Indeks (Homepage)

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Cara Menampilkan Widget Hanya di Halaman Posting

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Cara Menampilkan Widget Hanya di Halaman Statis

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Cara Menampilkan Widget Hanya di Halaman Arsip (Archive)

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Cara Menampilkan Widget Hanya di Salah Satu Halaman (Berdasarkan URL)

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "Ganti dengan URL Halaman di sini"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

f. Setelah conditional tags ditambahkan, save template.

Jika ingin melakukan hal yang sama pada beberapa widget, anda harus melakukan dan mengulang cara yang sama seperti di atas: cari ID widget, cari elemen widget sesuai ID di edit HTML, dan masukkan conditional tags berdasarkan jenis halaman ke dalam elemen widget. Save and Done.

Semoga bermanfaat and have a nice Blogging.

© buka-rahasia.blogspot.com. 2012 - 'Til drop. All rights reserved.