Halo Sobat ! | Members area : Register | Sign in
My Ping in TotalPing.com | Display Pagerank

Categories

Arsip Blog

Site Info

Ngetik Dot Com
Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Widget. Tampilkan semua postingan
0

Cara Memasang Widget Histats Di Blog

Jumat, 04 Mei 2012


Memasang gadget histats di blog bertujuan untuk mengetahui statistik blog kita, baik blogspot, wordpress, maupun flatform blog lainnya. Di Blogger sendiri sebenarnya sudah tersedia data statistik blog, namun dari pemantauan ane selama ini kayaknya data statistik blog dari blogspot kurang lengkap misalnya data keyword penelusuran Google tidak semuanya tampil, dan juga misalnya reffering site (situs perujuk) yang menuju ke blog kita tidak tampil sempurna di data statistik blogspot. Bahkan kadang ada situs-situs yang sama sekali tidak menjadi reffering site, malah muncul. Ane kurang faham kenapa hal tersebut bisa terjadi, mungkin Blogspot punya hitung-hitungan sendiri untuk data statistik blog ini.

Dari fakta tersebut, maka diperlukan layanan pihak ketiga (dalam hal ini histats) sebagai monitoring statistik blog kita.
Dengan memasang histats, maka statistik blog akan ditampilkan secara realtime, aktual, tajam dan terpercaya (wuidih.. kaya liputan6 aja, he he he). Lalu data statistik apa saja yang didapat dari pemasangan gadget histats di blog? Beberapa diantaranya adalah traffic summary (page views dan visitor counter), data keyword Google yang masuk ke blog, data reffering site, data click count, data browser yang digunakan pengunjung, data asal negara pengunjung, dan lain-lain.

Monitor Traffic Blog dengan Histats
Monitor Traffic Blog dengan Histats
Berikut tutorial cara memasang gadget Histats di blog:
  1. Daftar dulu / Register di Histats.com GRATISSSS, Isikan data sesuai dengan data Anda, jangan lupa ceklist “I have read and agree Publisher Agreement Terms”. Klik “Register”

  1. Cek email Anda untuk aktivasi email
  1. Masuk/login ke Control Panel Histats dengan mengetikkan alamat email dan password yang tadi didaftarkan.
  1. Pada halaman awal control panel, klik “+Add Website”.
  1. Isi data blog sesuai form yang ada, klik “Continue”.
  1. Selanjutnya, klik nama website yang sudah didaftarkan tadi.
  1. Akan terbuka traffic summary blog, untuk menambahkan kode histats di blog klik “Counter Code”.
  1. Selanjutnya klik “add new counter”, akan terbuka pilihan model histas yang akan ditampilkan di blog. Pilih salah satu.
  1. Ceklist data apa saja yang akan ditampilkan pada model histats yang kita pilih, ada Visitor today, Total visitor, Page view today, Total page view, dan users online.
  1. Setelah OK, klik “Save”.
  1. Anda akan kembali ke list counter code, klik ID counter code yang tadi kita buat.
  1. Akan muncul kode/script HTML histats. Copy paste kode/script HTML tersebut di gadget HTLM/Javascript di blog kita.
Demikian tutorial cara pasang histasts di blog, mudah-mudahan bermanfaat dan tentunya traffic blog Anda akan termonitor jelas dengan pemasangan histats di blog.

0

Cara Memasang Widget Sharing is Sexy! di Blogspot


Kali ini saya akan memberikan sedikit tutorial buat sobat tutorial blogz yang ingin membagi artikelnya lewat situs-situs social bookmark ataupun jejaring sosial, seperti facebook, myspace, twitter, dll . 
Dengan memasang widget sharing is sexy, maka postingan atau artikel sobat akan cepat tersebar dan otomatis blog sobat akan cepat terkenal di situs-situs social bookmark yang notabennya memang tempat berkumpulnya para blogger di seluruh di dunia. Tapi dengan catatan isi konten menarik, dan sobat wajib mendaftar di berbagai situs social bookmark agar sobat bisa langsung sharing tanpa menunggu pengunjung blog yang mengklik widget sharing is sexy-nya.
Berikut
  • Login ke Blogger sobat.
  • Kemudian klik tab Edit HTML.
  • Centang Expand Template Widget.
  • Copy kode di bawah ini dibawah kode ]]></b:skin> 
<style type='text/css'>
div.sexy-bookmarks { height:54px; background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/TXarM4d7_uI/AAAAAAAAE4c/1SvA_kEmBDQ/sharing_thumb%5B3%5D.png) no-repeat left bottom;position:relative; width:540px }
div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/TXarM4d7_uI/AAAAAAAAE4c/1SvA_kEmBDQ/sharing_thumb%5B3%5D.png) no-repeat right bottom; position:absolute; right:-17px }
div.sexy-bookmarks ul.socials { margin:0 !important;padding:0 !important; position:absolute; bottom:0;left:10px }
div.sexy-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important }
div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important;f ont-size:0 !important; color:transparent !important}
.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/TXarI2MridI/AAAAAAAAE4U/Qspdg7GUj5g/sexy_thumb%5B3%5D.png) no-repeat !important }
.sexy-furl { background-position:-300px top !important }
.sexy-furl:hover { background-position:-300px bottom !important }
.sexy-digg { background-position:-500px top !important }
.sexy-digg:hover { background-position:-500px bottom !important }
.sexy-reddit { background-position:-100px top !important }
.sexy-reddit:hover { background-position:-100px bottom !important }
.sexy-stumble { background-position:-50px top !important }
.sexy-stumble:hover { background-position:-50px bottom !important }
.sexy-delicious { background-position:left top !important }
.sexy-delicious:hover { background-position:left bottom !important }
.sexy-yahoo { background-position:-650px top !important }
.sexy-yahoo:hover { background-position:-650px bottom !important }
.sexy-blinklist { background-position:-600px top !important }
.sexy-blinklist:hover { background-position:-600px bottom !important }
.sexy-technorati { background-position:-700px top !important }
.sexy-technorati:hover { background-position:-700px bottom !important }
.sexy-myspace { background-position:-200px top !important }
.sexy-myspace:hover { background-position:-200px bottom !important }
.sexy-twitter { background-position:-350px top !important }
.sexy-twitter:hover { background-position:-350px bottom !important }
.sexy-facebook { background-position:-450px top !important }
.sexy-facebook:hover { background-position:-450px bottom !important }
.sexy-mixx { background-position:-250px top !important }
.sexy-mixx:hover { background-position:-250px bottom !important }
.sexy-script-style { background-position:-400px top !important }
.sexy-script-style:hover { background-position:-400px bottom !important }
.sexy-designfloat { background-position:-550px top !important }
.sexy-designfloat:hover { background-position:-550px bottom !important }
.sexy-syndicate { background-position:-150px top !important }
.sexy-syndicate:hover { background-position:-150px bottom !important }
.sexy-email { background-position:-753px top !important }
.sexy-email:hover { background-position:-753px bottom !important }
</style>
  • Lalu cari kode <data:post.body/>
  • Jika sobat sudah menggunakan read more, maka akan terdapat 2 kode <data:post.body/>. Letakkan kode dibawah ini setelah kode <data:post.body/> yang pertama
<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/miscah' title='Subscribe to RSS'/></li>
<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
</ul>
<span class='sexy-rightside'/></div>
Kemudian Simpan Template.
Ganti tulisan yang berwarna merah dengan ID feedburner sobat, jika belum punya sobat bisa daftarkan blog sobat langsung di feedburner.
0

Cara Pasang Tweet Box [Kotak Nge-Retweet] di Blogger Blog




Cara Pasang Tweet Box [Kotak Nge-Retweet] di Blogger Blog - Met siang teman-teman, masih semangat kan puasanya? hehehe. Ok, kita lanjut pada tutorial blog yang kali ini masih seputar Twitter yaitu kita akan memasang Box Tweet [Kotak Nge-Retweet] di dalam blog, tepatnya di bawah postingan blog.Tampaknya Twitter memang tidak mau kalah saing dengan Facebook yang sebelumnya sudah duluan menyambangi Blog dengan Like & Recommended Plugginnya, walaupun bisa kita lihat Twitter sebelumnya telah ada Tombol Retweet This Post di Blog [Versi Default dan Compact].
Sebelumnya, untuk mengoptimalkan fitur ini, maka teman-teman harus memiliki akun Twitter terlebih dahulu. Silahkan menuju ke sini untuk Sign Up dan di sini untuk menjadi Teman saya di Twitter [Follower].


Langkah-langkah memasang Retweet box di bawah postingan Blog:

1. Login terlebih dulu menggunakan akun Twitter teman-teman untuk menggunakan fitur ini,
2. Buka situs penyelia plugin Tweet Box di sini,
3. Untuk membuat aplikasinya maka kita diharuskan untuk memasukkan data pada kolom yang sudah disediakan,


4. Pada kolom Default Acces Type silahkan beri titik (klik/centang) pada Read & Write, untuk kolom Application Icon tidak perlu di isi, karena bisa di isi nanti,

5. Lanjutkan dengan klik Register Application,
6. Lalu akan muncul jendela baru yang berisi kode Javascript dan API key, silahkan copy kode Javascript dan API key sesuai dengan yang saya lingkari merah dan simpan terlebih dahulu di sebuah Notepad,



7. Ok, sekarang kita akan memasangnya di dalam blog: Login ke akun Blogspot >> Edit HTML >> Klik Expand Templates Widget,

8. Lalu cari kode ini: </head> dan masukkan kode kode Javascript dan API key yang tadi telah di simpan di Notepad dan letakkan di atas kode </head>

Bentuk kodenya seperti ini:

<script src='http://platform.twitter.com/anywhere.js?id=............................&amp;v=1'>
</script>

9. Lanjutkan dengan mencari kode <data:post.body/> dan pastekan kode di bawah ini persis berada di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div id='bp_tweetBox'/>
<script type='text/javascript'>
bp_tweet_link="<data:post.url/>";
twttr.anywhere(function (T) {
T("#bp_tweetBox").tweetBox({
width: 540,
label: "Retweet This Post",
defaultContent: "RT @kucoba_blogger <data:post.title/>"+" "+bp_tweet_link
});
});
</script>

10. Ganti ukuran panjang Box Tweet dengan merubah tulisan warna merah dan ganti tulisan warna hijau dengan id Twitter teman-teman.


11. Jika sudah tinggal klik Save Templates.

Seperti itulah Cara Pasang Tweet Box [Kotak Nge-Retweet] di Blogger Blog, semoga bisa bermanfaat dan silahkan dicoba. Salam