Saturday, June 30, 2012

Cara Menambahkan Widget Sosial Bookmark Berbentuk Segitiga


Jika di postingan sebelumnya saya menampilkan cara menambahkan icon sosial bookmark berbentuk sprite, kali ini saya akan memberikan icon sosial book mark berbentuk chiki. Yup, chiki seperti makanan ringan ituloh hehehe tepatnya sih menyerupai segitiga gitu. Langsung saja ke tutornya aja yah :p

1. Masuk akun Blogger kamu.

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu masukkan kode Javascript dibawah ini kedalam kotak Javascript tersebut.

<!--Subscribe Follow Gadget--><center>

<a title="Grab Our Rss Feed" href="http://feeds.feedburner.com/hzndi" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3EpFmHo06X6-_5X0gQobgIPxtOAomGPy3p3Q7wP7nn2loW1ZRVRF6RLaobikrqO6j69tZ7NT9Z30Yi_d30vbOiCQUNlFfSub-sdEVWtp8HklbD9IpqsIaX8y82by44aXNP3EG88qS-9n6/s1600/RSS_78x75.png" style="margin-right:2px;" alt="Icon"/></a>

<a rel="nofollow" title="Get Free Updates Via Email" href="http://feedburner.google.com/fb/a/mailverify?uri=hzndi&amp;loc=en_US" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHDfgeTflakGBpaAa5ktVEsuS7kPLVcJVmBiiSdfESMVQON1eAaDOyMsmAImVy4IgKJLBXoVDk7oCEmruCg8I7YVgbHByOrqtZK5ruS7RkordJIzR248YYUwnX7-F0RwlJsguKxNBP_JYQ/s1600/Email_78x75.png" style="margin-right:2px;" alt="Icon"/></a>

<a rel="nofollow" title="Like Our Facebook Page" href="http://facebook.com/hzndi" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUPRBw9X0l1vtFHT_T10i9TTvR7vhdA8674MjynVfvUT-6ypVIYfjIec8Tha9pAtWJrOWEAXzmlFzSWQ0uwlyJYaXQIiDpQUDRs-TIXxx3dCwxG9Ix68-XQDLydnqWeCVb5hV0cFi75Vbb/s1600/Facebook_78x75.png" style="margin-right:2px;" alt="Icon"/></a>

<a rel="nofollow" title="Follow Our Updates On Twitter" href="http://twitter.com/hzndi" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM5M262VIvMnCLkydufrathH_8uO3o3zMBxn7RzaKi0IDmp9L_2VtF5z2oaTua9YuWLQnirkArYv0sxVGQjtZkp8GgLScFpxQ-ukIEES9f114tQ28CtPSL_6vsWIJ9mHpHaYQkSVsdKolP/s1600/Twitter_78x75.png" style="margin-right:2px;" alt="Icon"/></a>

<a title="Follow Us On Google+" rel="nofollow" href="https://plus.google.com/b/108200902911276741668/108200902911276741668/posts" target="_blank"><img style="margin-right:2px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSTOipICdPxN9qhNQ_lINyxG8QSGCnXoKpttmIC-xMy1Mu4hVaLqDypJB4CR17a0MDJeuxHUoGgPI9D1RRuxsvBPcZo53v_bdjc8w3l_dLmxssuD3cLR3E3YbouTsxzX8TLvdAyTVmdIPK/s1600/Google+_78x75.png"/></a>

<a title="Follow Our Pins" rel="nofollow" href="http://pinterest.com/hzndi" target="_blank"><img style="margin-right:2px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYZU5MRtfA7NMektONx1cWJ_nAshHdDt4fInOjdu7bXH5UJxQD9xfFfdRgOltiP-xeNC9i2WerVdfCSc5ivixU9NPJ40H1_zNpmWNZeuubAYzO5egSH7661Qm7CBIB4u1WYW_9Jc7u_2hH/s1600/Pinterest_78x75.png" alt="Follow Me on Pinterest" /></a>

<a title="See Our Vids" rel="nofollow" href="http://youtube.com/hzndi/" target="_blank"><img style="margin-right:2px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg19XUA_KJ2AKulNQTMTtX3yQC4q_-LQpUX4bGSWilCtjoM_55EfKJVWefynG1nQE0tDjHRXqy2fY_NGtUS_DA8pxpyg9b6_yFuYmCq4d6pehbDCmScfV3N5az7KZ1lit8Sp8sEPfw_SS9V/s320/YouTube_78x75.png" alt="YouTube" /></a><br/></center>
<!--Share and Translate by http://www.hzndi.blogspot.com -->

<!--Subscribe Follow Gadget http://www.spiceupyourblog.com -->

NOTE :

- Ganti semua yang berwarna biru dengan alamat FB, Feedburner, RSS/FEED, Twitter, Pinterest, dan Youtube kamu.

- Jika kamu ingin menghapus salah satu ikon tersebut, lihat cara ini, misalkan saya ingin menghapus icon pinterest, maka yang saya hapus hanyalah kode di bawah ini :


<a title="Follow Our Pins" rel="nofollow" href="http://pinterest.com/hzndi" target="_blank"><img style="margin-right:2px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYZU5MRtfA7NMektONx1cWJ_nAshHdDt4fInOjdu7bXH5UJxQD9xfFfdRgOltiP-xeNC9i2WerVdfCSc5ivixU9NPJ40H1_zNpmWNZeuubAYzO5egSH7661Qm7CBIB4u1WYW_9Jc7u_2hH/s1600/Pinterest_78x75.png" alt="Follow Me on Pinterest" /></a>

3. Bagaimana sobat ? sangat mudah bukan ? :) thanks to Paulcrowe

Menambahkan Facebook Recommendations Bar kedalam Blogger


Facebook saat ini merilis sebuah aplikasi untuk blogger yang mana bisa menambahkan pageviews halaman blog. Jika kamu menggunakan aplikasi ini tentunya bisa juga meningkatkan trafik dari blog kamu karena akan memunculkan beberapa artikel kamu yang sebelumnya di posting. Jika dilihat tampilannya seperti gambar diatas, atau kamu bisa ke mybloggertricks.com untuk demo livenya. Langsung saja yah tutorialnya, kamu perhatikan baik-baik.

Langkah 1, Buat Aplikasi Facebooknya

1. Login ke Facebook Apps menggunakan akun Facebook kamu.

2. Klik tombol "create new app" dibagian atas, kira2 tombolnya seperti gambar ini create new app 

3. Kemudian akan muncul kotak pop up, Untuk penamaan aplikasinya terserah kamu, di contoh ini namanya adalah "my recommendation bar". Contohnya seperti gambar dibawah ini 

app name
Jika tidak kelihatan, buka di halaman baru browser kamu

 
4. Masukkan kode keamanan Captchan kemudian kamu klik submit.

5. Hampir selesai nih, kamu klik saja kotak Website with Facebook Login, lalu masukkan URL alamat blog/web kamu di dalamnya. Pada contoh di bawah saya mengambil gambar dari mybloggertricks.com

Site URL
Jika tidak kelihatan, buka di halaman baru browser kamu

6. Setelah itu kamu akan melihat 2 karakter alpha-numerik, yang satu berisi App ID dan satu lagi adalah App Secret. Salin kode App ID dan simpan kode tersebut di notepad atau ms.word karena kita akan membutuhkannya nanti.

App ID
Jika tidak kelihatan, buka di halaman baru browser kamu
Langkah 2, Menambahkan Bar Rekomendasi di Blog Kamu

1. Login ke Blogger.com --> Klik Template.

2. Backup dahulu template kamu untuk mencegah hal-hal yang tidak diinginkan.

3. Di bagian template, klik Edit HTML --> Lanjutkan --> Dan kamu cari kode  

<html  

dan kamu ganti dengan kode  

<html xmlns:fb='http://ogp.me/ns/fb#'

hal ini berguna untuk menyesuaikan dengan browser Internet Explorer juga.

4. Sekarang kamu cari kode <body> selanjutnya kamu salin kode dibawah ini dan letakkan di bawah kode <body>.
    
   <div id='fb-root'/>
    <script>
    //Facebook Recommendation bar by www.mybloggertricks.com
    //Translate by www.hzndi.blogspot.com
//<![CDATA[
    (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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=***************";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    //]]>
    </script>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='z-index:999999; position:absolute;'>
    <fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://www.hzndi.blogspot.com' trigger='40%'/></div>
    </b:if></b:if>
NOTE :

- Ganti 15 digit bintang *************** berwarna biru dengan App ID yang tadi kamu simpan di notepad.
-  Ganti http://www.hzndi.blogspot.com dengan naman URL Website kamu.

5. Simpan template dan kamu tunggu beberapa detik, untuk menyesuaikan plugin yan baru saja kamu taruh. Thanks to mybloggertricks.com :))

Twitter Delicious Facebook Digg Stumbleupon Favorites More