Cara Membuat Statistik Pengunjung Blog Dengan HISTATS

Statistik pengunjung diperlukan untuk melihat kualitas dari blog kita dikarenakan jika pengunjung blog kita banyak dan bertambah setiap harinya semakin bagus pula kualitas informasi yang ditampilkan pada blog kita.
Salah satu cara untuk menampilkan statistik pengunjung maupun jumlah halaman web yang dibaca pengunjung setiap harinya adalah dengan memasang fasilitas histats yang disediakan oleh web www.histats.com. Layanan ini seperti widget lainnya jadi mudah dipasang pada web maupun blog anda dan yang paling penting layanan ini 100% free/ tidak berbayar. Ok, langung aja cara pembuatannya :

1. Buka

stats.com/" style="color: red;">http://www.histats.com
2. Register data anda terlebih dahulu, klik register

3. Isi username, password serta semua informasi yang dibutuhkan, ingat password dan email yang anda digunakan!dan klik register.

klik register untuk registrasi

4. Tunggu beberapa saat sampai pemberitahuaan bahwa registrasi telah selesai/ Registration Done.

5. Masuk dan login kedalam email yang telah anda register pada tahap 3 untuk melihat laporan ulang dari

hitsats.com dan klik link yang berikan

6. Setelah meng-klik link yang diberikan anda di-redirect ke halaman pengisian alamat web/ blog anda maka tahap selanjutnya masukan alamat website/ blog anda dan klik register.

Tahap Resigter alamat web/ blog anda

7. Tunggu beberapa saat dan anda akan dialihkan kehalaman control panel mereka, klik add a website untuk memasukan alamat web/ blog jika dihalaman tersebut diberitahukan bahwa belum ada website yang ter-register/ no site registed dan jika tidak ada pemberitahuaan seperti dibawah ini langkahi tahap ini ke tahap 9.

Klik Add a Website
8.Tunggu beberapa saat dan pada tahap ini masukan data yang diminta seperti alamat web/blog, descripsi dari web/ blog, info waktu dll dan klik continue.

Tahap pengisian info seputar web dan pengaturan waktu setempat

9. Klik menu control panel

Menu control panel

10. klik menu counter code

Menu Counter Code

11. Klik add new counter



Menu Add New Counter

12. Setelah dialihkan pada halaman create new tracking counter klik salah satu bentuk counter yang anda sukai, terdapat 1 line , 2 line 3 line dll, sebagai contoh pilih saja 3 line.

13. Tahap selanjutnya yaitu memilih kategori informasi yang ingin ditampilkan seperti jumlah pengunjung hari ini, jumlah pengunjung yang sedang online, total halaman yang dilihat. Ceklist kategori yang ingin anda tampilkan dan klik save.

 

14. Tunggu beberapa saat dan tahap selanjutnya klik counter id.

15. Tahap terakhir copy dan paste code tersebut kedalam notepad anda sebelum anda paste kedalam web anda.

Jika anda ingin menampilkan hitstats pada website anda, cukup dengan mengcopy dan paste ke dalam pengaturan gadget web anda dan jika anda ingin menempatkan pada blog seperti blogger.com maupun  wordpress.com dll pilih add a gadget dan pilih mode javascript, copy dan paste kode tersebut.

Semoga berhasil...!!!

KODE WARNA

#FOF8FF Aliceblue

#FAEBD7 Antiquewhite

#00FFFF Aqua

#7FFFD4 Aquamarine

#F0FFFF Azure

#F5F5DC Beige

#FFE4C4 Bisque

#000000 Black

#FFEBCD Blanchedalmond

#0000FF Blue

#8A2BE2 Blueviolet

#A52A2A Brown

#DEB887 Burlywood

#5F9EAD Cadetblue

#7FFF00 Chartreuse

#D2691E Chocolate

#FF7F50 Coral

#64950 Cornflowerblue

#FFF8DC Cornsilk

#DC143C Crimson

#00FFFF Cyan

#00008B Darkblue

#008B8B Darkcyan

#B8860B Darkgoldenrod

#A9A9A9 Darkgray

#006400 Darkgreen

#8B008B Darkmagenta

#BDB76B Darkkhaki

#556B2F Darkolivegreen

#FF8C00 Darkorange

#9932CC Darkorchid

#8B0000 Darkred

#E9967A Darksalmon

#8FBC8B Darkseagreen

#483D8B Darkslateblue

#2F4F4F Darkslategray

#00CED1 Darkturquoise

#9400D3 Darkviolet

#FF1493 Deeppink

#00BFFF Deepskyblue

#696969 Dimgray

#1E90FF Dodgerblue

#B22222 Firebrick

#FFFAF0 Floralwhite

#228B22 Forestgreen

#FF00FF Fuchsia

#DCDCDC Gainsboro

#F8F8FF Ghostwhite

#FFD700 Gold

#DAA520 Goldenrod

#808080 Gray

#008000 Green

#ADFF2F Greenyellow

#F0FFF0 Honeydew

#FF69B4 Hotpink

#CD5C5C Indianred

#4B0082 Indigo

#FFFFF0 Ivory

#F0E68C Khaki

#E6E6FA Lavender

#FFF0F5 Lavenderblush

#7CFC00 Lawngreen

#FFFACD Lemonchiffon

#ADE8E6 Lightblue

#F08080 Lightcoral

#E0FFFF Lightcyan

#FAFAD2 Lightgoldenrodyellow

#90EE90 Lightgreen

#D3D3D3 Lightgray

#FFB6C1 Lightpink

#FFA072 Lightsalmon

#20B2AA Lightseagreen

#87CEFA Lightskyblue

#778899 Lightslategray

#B0C4DE Lightsteelblue

#FFFFE0 Lightyellow

#00FF00 Lime

#32CD32 Limegreen

#FAF0E6 Linen

#FF00FF Magenta

#800000 Maroon

#66CDAA Mediumaquamarine

#0000CD Mediumblue

#BA55D3 Mediumorchid

#9370DB Mediumpurple

#3CB371 Mediumseagreen

#7B68EE Mediumslateblue

#00FA9A Mediumspringgreen

#48D1CC Mediumturquoise

#C71585 Mediumvioletred

#191970 Midnightblue

#F5FFFA Mintcream

#FFE4E1 Mistyrose

#FFE4E1 Moccasin

#FFDEAD Navajowhite

#000080 Navy

#FDF5E6 Oldlace

#808000 Olive

#6B8E23 Olivedrab

#FFA500 Orange

#FF100%0 Orangered

#DA70D6 Orchid

#EEE8AA Palegoldenrod

#98FB98 Palgreen

#AFEEEE Paleturquoise

#DB7093 Palevioletred

#FFEFD5 Papayawhip

#FFDAB9 Peachpuff

#CD853F Peru

#FFC0CB Pink

#DDA0DD Plum

#B0E0E6 Powderblue

#800080 Purple

#FF0000 Red

#BC8F8F Rosybrown

#4169E1 Royalblue

#8B4513 Saddlebrown

#FA8072 Salmon

#F4A460 Sandybrown

#2E8B57 Seagreen

#FFF5EE Seashell

#A0522D Sienna

#C0C0C0 Silver

#87CEEB Skyblue

#708090 Slategray

#FFFAFA Snow

#00FF7F Springgreen

#4682B4 Steelblue

#D2B48C Tan

#008080 Teal

#D8BFD8 Thistle

#FF6347 Tomato

#40E0D0 Turquoise

#EE82EE Violet

#F5DEB3 Wheat

#FFFFFF White

#F5F5F5 Whitesmoke

#FFFF00 Yellow

#9ACD32 Yellowgreen

CARA MEMBUAT MENU MELAYANG / FLOAT MENU DI BLOG

Berbagai macam cara dilakukan para blogger untuk menghemat ruang di blognya, salah satunya dengan menggunakan roll pada arsip, dan pada toturial kali ini untuk menghemat halaman kita akan membuat menu melayang

Menu ini dapat sobat tampilkan di bagian kiri maupun di bagian kanan blog, sobat tinggal memilih mana yang lebih cocok untuk blog kesayangan sobat, contoh sobat bias lihat di blog ini

Bagi sobat blogger yang kepengin mencoba menu melayang silahkan ikuti langkah-langkah mudah di bawah ini

Cara pemasangannya sebagai berikut:
1. Masuk ke Blogger dengan ID sobat.
2. Pilih Design (Rancangn) -> Edit HTML.
3. Back up (download) template terlebig dahulu (seperti biasa…untuk asuransi…hehe…)
4. Cari kode ini </head> pada template anda
5. Copy Seluruh script dibawah ini, kemudian paste tepat diatas atau sebelum kode </head>

<script src='http://elmubarok.googlecode.com/files/floating1.js'

type='text/javascript'/>

<script>

YOffset=150;

XOffset=0;

staticYOffset=30;

slideSpeed=20

waitTime=100;

menuBGColor=&quot;Dodgerblue&quot;;

menuIsStatic=&quot;yes&quot;;

menuWidth=150;

menuCols=2;

hdrFontFamily=&quot;verdana&quot;;

hdrFontSize=&quot;2&quot;;

hdrFontColor=&quot;black&quot;;

hdrBGColor=&quot;#FF0000&quot;;

hdrAlign=&quot;left&quot;;

hdrVAlign=&quot;center&quot;;

hdrHeight=&quot;15&quot;;

linkFontFamily=&quot;Verdana&quot;;

linkFontSize=&quot;2&quot;;

linkBGColor=&quot;white&quot;;

linkOverBGColor=&quot;#FFFF99&quot;;

linkTarget=&quot;_top&quot;;

linkAlign=&quot;Left&quot;;

barBGColor=&quot;Dodgerblue&quot;;

barFontFamily=&quot;Verdana&quot;;

barFontSize=&quot;2&quot;;

barFontColor=&quot;white&quot;;

barVAlign=&quot;center&quot;;

barWidth=20; // no quotes!!

barText=&quot;WELCOME&quot;; 

// ----- Mulai Edit Menu

ssmItems[0]=[&quot;My Menu&quot;] //Header Menu

ssmItems[1]=[&quot;Home&quot;, &quot;/&quot;, &quot;&quot;]

ssmItems[2]=[&quot;About Me&quot;, &quot;http://www.blogger.com/profile/17756234265760334338&quot;,&quot;&quot;]

ssmItems[3]=[&quot;Me In Facebook&quot;, &quot;http://www.facebook.com/Ozan.SLANKERS&quot;,&quot;&quot;]

buildMenu();

//----- Selesai Edit Menu

</script>

Keterangan:

• Pada bagaian yang ditandai dengan warna merah boleh sobat ganti dengan warna kesukaan sobat atau disesuaikan dengan blog sobat (untuk melihat kode warna silahkan klik disini...)

• Pada bagaian yang berwarna kuning harus sobat ganti sesuai blog sobat

• Pada kata WELCOME (yang bercetak tebal) boleh sobat ganti sesuka sobat

Untuk menambah menu silahkan sobat amati scrip yang paling bawah "ssmItems[nomor urut menu]=["Nama Yang Menu", "Url Menu", ""]" lalu tambahkan di bawah deretan kedalam daftar scrip diatas...(copy tanpa tanda petik)

Cara Membuat Akun Google

Sebelum belajar cara membuat blog, buatlah akun Google terlebih dahulu!
Kok akun Google? Google dan Blogger adalah milik perusahaan yang sama. Akun Google bisa anda gunakan untuk masuk ke fasilitas Blogger atau fasilitas Google lainnya, termasuk ke Blogger atau Blogspot.

Ayo, kita buat aja dulu akun Google. Caranya adalah sebagai berikut:

1.Klik di sini untuk masuk. Tampilan seperti di bawah ini (tampilannya terpotong) akan muncul

2.Isi data yang diminta sesuai permintaan. Data tersebut adalah Nama Depan, Nama Belakang, Nama Login yang Diinginkan, Buat Sandi, Masukkan Kembali Sandi, Pertanyaan Rahasia, Jawaban (pertanyaan rahasia anda), Email Pemulihan (boleh kosong), Lokasi, dan Verifikasi Kata.

Pelan-pelan aja mengisinya supaya tidak ada kesalahan!

3.Tekan Saya Menerima. Buat Akun Saya

Tampilan Baru Follower GOOGLE Friend Connect

Ternyata blogger melakukan update terhadap follower karena beberapa hari yang lalu follower saya berkurang jumlahnya dan sekarang blogger memakai tampilan baru follower yaitu memakai fasilitas Google Friend Connect.

Gini tampilannya agan2 semua..

Google Friend Connect memiliki kelebihan fasilitas daripada yang sebelumnya yaitu:

# Sign in dengan Google, Yahoo, AIM atau openid account.
# Berinteraksi dengan pengunjung lainnya dengan membuat teman-teman, berbagi media, posting komentar, permainan, dan banyak lagi.
# Mengundang teman-teman dari jaringan sosial lainnya dan daftar kontak untuk bergabung dengan situs atau blog Anda.

rekan-rekan yang belum tau cara membuat tampilan follower baru ini, monggo ikuti langkah-langkah berikut:

1. silahkan kunjungi http://www.google.com/friendconnect/
2. klik tombol biru "set up new site"
3. Klik continue-->muncul halaman "Tell us about your site"silahkan isi site name and home URL(URL blog anda)
4.muncul halaman "Add the following files to your site" silahkan download filenya
5.kemudian continue-->Test Your Setup-->klik tombol "test to finalize setup"
6.Muncul halaman "Add a Members gadget to your site" kemudian klik "Get code for the Member Gadget"
7.muncul halaman "Set up the Members gadget" silahkan edit ukuran dan warna gadget yang ada inginkan
8.Copy paste kode gadget ke website atau blog anda

Biasanya tanpa anda copy paste kode HTML nya Follower anda otomatis sudah diupdate ke tampilan yang baru setelah anda klik "test to finalize setup"
Selesai..

Selamat menggunakan follower baru ya dan perluas friend connection anda bersama tampilan baru follower Friend Connect...

Membuat Kotak Pada Postingan Blog

Cara membuat kotak dengan border pada posting blog atau web. Menggunakan kotak border dengan warna dan bentuk berbeda dapat menambah nilai lebih pada postingan. Selain itu tujuaannya untuk memberikan sebuah penekanan terhadap pernyataan yang di anggap penting, unik ataupun peringatan. Mulai dari warna background, model dan warna border dapat diganti-ganti sesuai dengan keinginan. Berikut cara membuat dan menggunakan kotak border di posting blog. Maaf dan terima kasih.

Dalam fitur blog, sebenarnya sudah tersedia untuk membuat kotak berbeda, yaitu blockquate. Akan tetapi jika dalam satu postingan ada beberapa penekanan terhadap pernyataan, kalau memakai blockquote semua jadi akan terlihat membosankan dan kaku. Maka agar lebih menarik sehingga menjadi tampil cantik dengan membuat kode html untuk kotak-kotaknya (istilah pastinya tidak tahu :) ). Langsung saja dipraktikkan yuk cara menggunakan bordernya…
Cara membuat border beda

Untuk membuat border pada postingan maka dalam penulisan kodenya harus dalam mode HTML, tanpa mode tersebut, maka akan dianggap sebagai teks biasa. Contoh border pertama kode html sebagai berikut :

<div style=”border: 1px #c8c785 solid; background-color: #fdfccf; width: 200px; padding: 10px; text-align: left;”>KATA POSTING DI SINI</div>

Hasilnya script di atas menjadi seperti di bawah ini

KATA POSTING DI SINI

Contoh lagi dengan panjang, warna dan background border posting berbeda seperti di bawah ini kode html-nya. Perubahan pada kata yang dicetak tebal
<div style=”border: 1px #a0ca9e dotted; background-color: #e5fce4; width: 400px; padding: 5px; text-align: right;”>Contoh border kedua</div>

Contoh border kedua

Penjelasan sedikit supaya paham struktur kode html tersebut bagi yang lagi mulai mengenal, like me

1. border: 1px #a0ca9e dotted;
   Ini untuk model border. “1px” untuk ketebalan border, bisa diganti dengan 2px atau 3px.
   “#a0ca9e” ini untuk warna border (hijau). Bisa diganti-ganti misalnya pada contoh pertama warna kuning #c8c785, biru #7c9af0, atau warna-warna yang lainnya.
   “dotted” bentuk border garis putus-putus (titik-titik). Pada contoh yang pertama dengan type “solid” untuk garis biasa.
2. background-color: #e5fce4;
   Ya sudah bisa dimengerti, ini untuk warna backgroundnya. Bisa diganti-ganti.
3. width: 400px;
   Kode untuk panjang border, bisa disesuaikan dengan panjang posting.
4. padding: 5px;
   Jarak huruf dengan garis tepi. Semakin besar angkanya maka jaraknya menjadi semakin jauh. Kode di atas berlaku untuk semua jarak dari atas, kanan, bawah dan kiri.
   Juga bisa dibuat berbeda, misalnya dengan kode padding: 10px 5px; Kode ini membuat jarak atas dan bawah 10px, sedangkan yang kanan dan kiri 5px.
   Jika setiap sisi ingin beda, maka kodenya padding: 10px 5px; atau berbeda semua padding: 10px 15px 5px 8px;
   Jika hanya satu sisi yang berbeda bisa dengan kode padding-left: 10px;

Contoh border ketiga kodenya:
<div style=”border: 2px #a0ca9e solid; background-color: #e5fce4; width: 400px; padding: 5px; text-align: justify;”>Contoh border ketiga</div>

Di bawah ini width saya hapus, agar panjangnya menyesuaikan dengan posting, dan saya tambahi kode margin, jarak border dengan sisi kiri.

Contoh border keempat kodenya:
<div style=”border: 2px #a0ca9e solid; background-color: #e5fce4; margin-left: 60px; padding: 5px; text-align: justify;>Kata di sini</div>

Untuk desain atau model border selengkapnya di bawah, sehingga lebih mudah melihat perbedaannya:

Solid

<div style=”border: 1px solid #000000; background-color:#efefef; padding: 5px; width: 400px;”>
Artikel blog di sini….
</div>

Dotted

<div style=”border: 1px dotted #000000; background-color:#efefef; padding: 5px; width: 400px;”>
Artikel blog di sini….
</div>

Dashed

<div style=”border: 1px dashed #000000; background-color:#efefef; padding: 5px; width: 400px;”>
Artikel blog di sini….
</div>

Double

<div style=”border: 4px double #000000; background-color:#eaebfd; padding: 5px; width: 400px;”>
Artikel blog di sini….
</div>

Groove

<div style=”border: 4px groove #000000; background-color:#edfcf0; padding: 5px; width: 400px;”>
Artikel blog di sini….
</div>

Outset

<div style=”border: 4px outset #000000; background-color:#f9effb; padding: 5px; width: 400px;”>
Artikel blog di sini….
</div>

Ridge

<div style=”border: 4px ridge #000000; background-color:#fafae9; padding: 5px; width: 550px;”>

Artikel blog di sini….

</div>

Urutan penulisan kode bisa dibolak-balik, asal tanda pemisahnya jelas. Pada contoh terakhir yang warna merah. Selain itu kita bisa menghilangkan border pada sisi tertentu. Ambil contoh pada border terakhir, bagian bawah tidak ada garisnya

<div style=”border: 4px ridge #000000; border-bottom: none; background-color: #fafae9; padding: 5px; width: 400px;”>Artikel blog di sini….</div>

Maka dari beberapa contoh di atas, Anda bisa memodifikasi kodenya sesuai dengan kebutuhan. Dengan mencoba-coba langsung sehingga akan lebih mengerti setiap perubahan pada kodenya. Dari semua kode silahkan pilih yang cocok, tentunya menyesuaikan temanya, umpama untuk peringatan agar benar-benar diperhatikan pengunjung, maka background berwarna merah

Contoh border untuk posting blog, kode terakhir :

<div style=”border: 1px #7c9af0 solid; background-color: #d9e1fb; padding: 2px;”>Kata Ada Di SINI</div>

bagaimana pendapat Agan2 semua..??? baguskan.. :D