Anik World™

Membuat Bye bye Alert

00.59 | By Anik

da seorang sobat yang bertanya kesaya bagaimana cara membuat kotak alert message yang ada konfirmasinya. mungkin yang dimaksud adalah seperti yang ini kali ya

Hmm,, kayaknya nggak salah lagi deh

. Setelah jelajah kesana kemari, buka sana sini. Akhirnya ketemu juga tipsnya. Ok deh tanpa basa-basi, mari kita mulai.

1. Seperti biasa, login ke blogger. Lalu masuk ke menu Design -> Edit HTML

2. Letakkan kode berikut ini dibawah <head> atau tepatnya diantara <head> dan <b:skin>

<script type='text/javascript'>
if (confirm("Terima kasih telah mengunjungi blog ini. Klik OK untuk melanjutkannya")) {
window.location = "http://www.hermanblog.com/";
}
else {
window.location = "http://google.com/";
}
</script>

Keterangan:
Tulisan yang dicetak tebal adalah teks yang muncul dalam kotak alert. Silahkan ganti dengan teks yang anda inginkan
Tulisan berwarna merah adalah alamat web yang akan terbuka jika pengunjung klik OK
Tulisan berwarna hijau adalah alamat yang akan terbuka jika pengunjung klik Cancel atau Close

3. Kalau sudah, klik Save Template dan lihat hasilnya

Selain kotak alert yang sudah dibawah diatas masih ada 1 jenis lagi yaitu kotak alert dengan prompt field yang contohnya seperti dibawah ini.

Untuk membuat kotak alert ini caranya sama dengan diatas. Bedanya hanya pada scriptnya. Agar lebih jelas silahkan perhatikan cara dibawah ini.

1. Login ke blogger. Lalu buka menu Design -> Edit HTML

2. Masukkan script berikut dibawah kode <head>

<script type='text/javascript'>
var name = prompt("Masukkan nama anda disini", "Nama");
alert("Welcome to my blog")
</script>

Perhatian:
Jika anda sudah pernah memasang script kotak alert maka dihapus dulu scriptnya sebelum memasang script ini.

Teks yang dicetak tebal merupakan pesan yang muncul dalam kotak alert
Teks yang berwarna merah merupakan teks yang muncul dalam kotak jawaban.
Teks yang berwarna hijau merupakan pesan yang muncul setelah pengunjung klik OK. Silahkan ganti sesuai keinginan.

3. Kalau sudah, klik Save Template.

Alexa Rank

00.59 | By Anik

Apa itu Alexa rank?
Alexa rank adalah sebuah alat yang dibuat oleh Alexa.com untuk menganalisa seberapa besar trafik atau page views dari sebuah website berdasarkan jumlah pengunjung yang memasang alexa toolbar pada browser mereka. Setelah itu, data-datanya akan dikumpulkan dan kemudian dirangking berdasarkan trafiknya. Semakin besar trafiknya semakin rendah rangkingnya.

Lalu bagaimana cara untuk mengetahui ranking Alexa website kita?
Ada 2 cara yang bisa anda gunakan untuk mengetahui rangking alexa rank web anda yaitu:

I. Memasang widget alexa pada blog anda yang tampilannya seperti ini

Cara pemasangan:

1. Buka http://alexa.com lalu klik For Site Owners

2. Kemudian klik Site Widgets yang terletak disebelah kiri

3. Masukkan alamat website anda pada widget yang ingin anda pasang. Contohnya: hermanblog.com lalu klik Build Widget

4. Copy kode widget yang ingin anda pasang lalu pastekan ke blog anda. Selesai

II. Menginstal alexa toolbar pada browser anda yang tampilannya seperti ini.

Cara pemasangan:

1. Pada halaman alexa.com. Klik Toolbar

2. Jika menggunakan browser Firefox. Maka halaman yang tampil adalah seperti ini

3. Klik Get Sparky lalu ikuti petunjuknya untuk menginstal alexa toolbar

4. Jika anda menggunakan browser Internet Explorer maka halaman yang muncul adalah seperti ini

5. klik Instal Now untuk menginstal alexa toolbar pada browser anda.

6. Jika sudah restart browser anda lalu lihat hasilnya.

Lalu apa manfaat alexa rank bagi blog?
Jika blog anda dimanfaatkan untuk mencari uang di internet maka alexa rank sangat penting bagi anda. Karena banyak program-program penghasil dolar di internet seperti TLA, Sponsoredreviews, Blogsvertise, Buyblogreviews, Linkworth, dll yang mensyaratkan alexa rank untuk bisa bergabung. Jadi semakin kecil rangking alexa blog anda semakin banyak program yang bisa anda ikuti yang artinya semakin besar pula kesempatan anda untuk menghasilkan uang di internet. Selain itu, alexarank juga bisa digunakan untuk menentukan populer atau tidaknya sebuah blog. Blog yang memiliki alexa rank kecil biasanya akan lebih populer dan disukai oleh para advertiser dibandingkan blog yang memiliki alexa rank gede.

Membuat Music Player

00.57 | By Anik

Bagi anda penggemar musik. Memutar lagu melalui HP, Mp3 player ataupun komputer mungkin sudah biasa. Tetapi bagaimana jika memutar musik melalui blog?

Dengan memasang musik player di blog maka tidak hanya anda tetapi pengunjung blog anda juga bisa menikmati lagu kesayangan anda. Sehingga cara ini sangat cocok bagi anda yang blognya berisi tentang musik atau bagi anda yang ingin mempromosikan lagu pribadi.

Ada banyak layanan seperti ini yang tersedia di internet. Dari sekian banyak layanan yang ada. Menurut saya ada 2 musik player yang cukup bagus yakni Musik-live dan eSnips. Kedua musik player ini masing-masing memiliki kelebihan dan kekurangannya. Sehingga silahkan anda tentukan sendiri mana yang lebih bagus.

1. Musik-Live

Kelebihan:
- Lagu sudah tersedia, tinggal pasang
- Banyak model skin yang bisa anda pilih

Kelemahan:
- Tidak bisa upload lagu sendiri

2. eSnips

Kelebihan:
- Bisa upload lagu dari komputer
- Tersedia lagu yang bisa anda putar

Kelemahan:
- Hanya 2 model skin yang bisa dipilih
- Tampilannya kurang menarik

Nah itulah kelebihan dan kelemahannya masing-masing. Silahkan anda tentukan mana yang lebih cocok dengan kebutuhan anda. Agar lebih jelas anda bisa lihat demo Musik-live disini dan eSnips disini.

Kalau sudah menentukan musik player kesukaan anda, berikut adalah langkah-langkah pemasangannya:

A. Musik-Livet.Net

1. Kunjungi http://musik-live.net/ lalu klik Skin Mp3 Player
2. Pilih tampilan player yang anda inginkan. Untuk melihat tampilannya klik Preview Skin
3. Copy kode dalam kolom 'Embed code' lalu buka blogger. Klik menu Design -> Page Elements
4. Paste kode tersebut ke menu HTML/ Javascript
5. Selesai.

Diatas adalah cara memasang musik player dengan lagu yang telah disediakan. Jika anda ingin memilih sendiri lagunya. Berikut caranya:

1. Pada halaman Musik-Live, cari lagu favorit anda dengan kotak pencari.
2. Lalu klik Play & Embed code untuk menampilkan kodenya
3. Copy kodenya lalu paste ke menu HTML/ Javascript blogger anda. Selesai

Catatan:
Cara ini hanya bisa untuk memutar 1 lagu saja. Jika anda ingin memutar banyak lagu maka gunakan eSnips.

B. eSnips

1. Kunjugi http://www.esnips.com/. Untuk bisa memanfaatkan fasilitasnya anda harus signup terlebih dahulu. Jika sudah, sign-in ke akunnya.

2. Klik Upload Files lalu klik Select Files

3. Pilih lagu yang mau anda putar lalu pilih folder dimana anda mau memyimpan lagunya. Pastikan folder yang anda pilih adalah bersifat Public. Karena kalau Private anda tidak bisa menambahkan lagunya kedalam playlist.

4. Jika sudah klik Upload Now

5. Tunggu hingga proses upload selesai.

6. Jika sudah klik menu Folder. Pilih folder dimana anda menyimpan menyimpan lagunya

7. Pilih lagu-lagu yang ingin anda pasang dengan cara klik Add to quicklist

8. Jika sudah, scroll ke bagian atas halaman lalu klik Create playlist widgets

9. Pilih skin yang anda inginkan. Lalu copy kodenya yang ada pada kotak.

10. Buka blogger. Paste kodenya pada menu HTML/ Javascript lalu klik Save

11. Selesai.

Mengganti Cursor Blog

00.54 | By Anik

Secara default, tampilan cursor pada blog adalah berbentuk panah namun bagi anda yang merasa bosan dengan tampilan tersebut atau ingin memberi decak kagum bagi pengunjung. Anda bisa menggantinya dengan icon gambar sehingga jika ada pengunjung yang datang keblog anda, tampilan kursornya akan berubah sesuai dengan icon yang anda gunakan. Agar lebih jelas anda bisa lihat disini.

Untuk mengubah tampilan kursor menjadi icon gambar, caranya sangat mudah. Berikut langkah-langkahnya:

1. Login ke Blogger. Masuk ke menu Design->Edit HTML
2. Cari kode </head>
3. Letakkan kode css berikut diatasnya

<style type="text/css">
HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/cool1.gif"), auto;}
</style>

Keterangan:
Teks yang berwarna merah adalah alamat url kursor. Silahkan ganti dengan alamat url kursor yang ingin anda gunakan.

4. Setelah itu, simpan template anda. Selesai

Jika anda tidak memiliki icon kursor, coba kunjungi http://www.totallyfreecursors.com. Situs tersebut menyediakan ratusan hingga ribuan icon kursor menarik yang bisa anda pilih sesuai selera.

Mematikan Klik Kanan pada Mouse

00.48 | By Anik

Mungkin anda sering membuka suatu situs yang melarang blognya untuk diklik kanan oleh pengunjungnya atau dengan kata lain mendisablekan klik kanan khusus pada blog/situsnya saja. Guna dari disable ini ialah untuk melindungi konten atau foto yang anda miliki untuk dicopy oleh orang lain dengan kepentingan yang kita tidak tahu. Nah berkut ini ada javascript untuk mendisablekannya yaitu :

Script ini dicopykan ke blog anda dengan cara :

1. Klik Layout dan pilih edit html

2. Cari kode <head> Copykan kode tersebut dibawahnya.

3. Save.

IP Tracker Pada Blog

00.44 | By Anik

Sesuai namanya, IP tracker atau pelacak alamat IP, tool ini berfungsi untuk melacak alamat IP (Internet Protocol) pengunjung blog anda. Pelacak alamat IP ini juga bisa melacak browser serta operating system yang dipakai oleh pengunjung.
Alamat IP adalah alamat komputer anda dalam jaringan LAN (Local Area Network) maupun WAN (Wide Area Network). Yang dimaksud dengan LAN adalah jaringan komputer yang mencakup wilayah kecil, seperti di kampus, rumah. Sedangkan WAN adalah jaringan komputer yang mencakup area yang lebih besar, seperti jaringan komputer antar wilayah, kota, atau bahkan negara.
Salah satu penyedia tool pelacak IP adalah www.ipnow.org, gratis lho. Tampilannya di blog seperti gambar di bawah ini:
1. Kunjungi situs www.ipnow.org.

2. Pada halaman muka, lihat pada bagian Custom Images. Terdapat beberapa pilihan bentuk tampilan yang bisa disesuaikan dengan blog anda.

3. Silakan anda pilih yang sesuai dengan selera anda. Sebagai contoh saya memilih Custom Graphical Info Image.
4. Lalu akan tampil halaman untuk mengatur warna latar belakang (background color) dan warna font (text color). Setelah itu klik pada tombol Create My Image.

5. Tampil halaman baru yang berisi kode. Blok kode pada kotak Linked Image dan salin (Ctrl+C) kode tersebut, untuk nanti anda tempel pada blog anda.

Setelah anda mendapatkan kodenya, selanjutnya anda tinggal menempelkannya di blog anda. Caranya adalah sebagai berikut:
1. Masuk dan login ke www.blogger.com.
2. Masuklah pada halaman Dasbor.
3. Klik menu Tata Letak.
4. Klik menu Tambah Gadget.
5. Klik pada link menu HTML/JavaScript.
6. Pada bagian Judul, ketikkan judul menu yang dibuat. Misal : IP Anda.
7. Pada bagian konten, copy (Ctrl+C) kode yang sudah anda dapatkan di atas dan tempel (Ctrl+V) di sini.
8. Klik tombol Simpan jika sudah selesai.
9. Lihat blog anda untuk melihat hasilnya

Membuat Auto Read More

00.40 | By Anik

Beberapa waktu yang lalu, salah satu rekan saya yang menggunakan template bikinan saya, meminta saya agar dibuatkan automatic read more pada template yang dia gunakan. Untuk memuaskan ‘pelanggan’, maka saya pun mencari ‘ilmu’ ke blog tetangga, dan ternyata ‘tetangga’ saya Ade’s Trick membagi ilmunya buat saya. Nah, sekarang saya ingin berbagi dengan anda semua. Semoga bermanfaat.
Pada artikel sebelumnya saya sudah pernah membahas fungsi Read More versi manual, untuk mengingat kembali silakan baca artikel di sini atau di sini. Fungsi Read More kali ini memang agak berbeda dengan Read More yang pernah dibahas sebelumnya. Bila versi terdahulu kita harus mengatur tulisan yang akan di tampilkan dengan yang di minimalisasi tulisan menggunakan cara manual dengan melakukan pemangilan fungsi :
....<span class="fullpost">.............</span> dimana kode ini biasanya kita tanamkan secara manual ke dalam halaman postingan yang ada di template posting. Untuk versi Auto Read More kali ini akan lebih mudah, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode di atas.
Yang hebatnya lagi, fungsi Auto Read More ini mampu menampilkan image pertama dalam posting dan mem-float image tersebut di awal paragraf awal, meskipun gambar yang kita letakkan berada di tengah atau di akhir postingan. Mungkin lebih tepat disebut fitur image thumbnail.
Tidak hanya itu saja, kita dapat juga mengatur jumlah karakter yang akan ditampilkan. Disini ada 2 opsi untuk jumlah karakter yang akan ditampilkan, yaitu:
1. Jumlah karakter yang ditampilkan, jika ada image yang diikutsertakan dalam postingan
2. Jumlah karakter tanpa image.

Penting! Yang sudah memasang Read More versi lama kodenya dikembalikan dulu ke seperti semula, caranya hapus kode yang berwarna putih di bawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja).
Kode Read More Versi manual tampilannya seperti di bawah ini :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/> <style>.fullpost{display:none;}</style>
<p><data:post.body/></p> <a expr:href='data:post.url'>Read More.. »»</a>
</b:if>

jika sudah ikuti langkah-langkah selanjutnya.
Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakkan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

Langsung copy paste saja kode dibawah ini:

Kedua, Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah
<data:post.body/>
Kalo sudah, ganti kode <data:post.body/> menjadi seperti kode dibawah ini :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:left'>
<a expr:href='data:post.url'>Read More... <data:post.title/></a>
</span> </b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>

*) Tulisan yang berwarna biru muda menandakan Read More + judul posting. Jika tidak menghendaki adanya judul, hapus saja kode berwarna biru muda tersebut.
*) Tulisan left berwarna ungu menandakan posisi tulisan Read More pada posting.
*) Bila tulisan left diganti dengan right, maka posisi tulisan Read More berada di sebelah kanan.
Keterangan:
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
Semoga Berhasil.

SELAMAT DATANG

Sekilas Tentang Anik World

Membuat Bye bye Alert

Alexa Rank

Membuat Music Player

Mengganti Cursor Blog

Mematikan Klik Kanan pada Mouse

IP Tracker Pada Blog

Membuat Auto Read More

pengunjung

Labels

Followers

google translate

Blog Archive

About Me