Judul : BjQuery V.1.19

Halo apa kabar, kali nih saya akan memberikan sebuah tutorial bagaimana cara menggunakan Widget BjQuery yang telah saya buat.

Baiklah Saya mulai saja..
LANGKAH PERTAMA
- untuk pengguna blogspot buka dulu Design >> Edit HTML >> terus centang "Expand Widget Templates"

Copy script dibawah, dan letakkan Tepat dibawah <body>
<script src='http://bjquery.xtgem.com/v_1_19' type='text/javascript'></script>
jika <body> tidak dapat ditemukan, coba cari <body, kemudian letakkan di bawahnya
Perhatian : LANGKAH PERTAMA WAJIB DILAKUKAN



Untuk LANKAH KEDUA.. dilakukan jika Anda ingin menggunakan WIDGET 1 atau 2 atau 3 atau 4 atau 5 atau 6

LANGKAH KEDUA
* Apit Postingan dengan <div id='c_content'> dan </div>

- untuk pengguna blogspot buka dulu Design >> Edit HTML >> terus centang "Expand Widget Templates"

- untuk pengguna Blogspot, Ganti <data:post.body/> menjadi <div id='c_content'><data:post.body/></div>
JIKA <data:post.body/> Lebih Dari 1, Gantikan aja semuanya



SELESAI... Untuk Langkah Selanjutnya Boleh dilakukan boleh TIDAK.. Tergantung kebutuhan Anda..


WIDGET 1 : STRONG_KEYWORD
Fungsi : Memberikan Efek <STRONG></STRONG> untuk keyword-keyword yang ada pada halaman yang bersangkutan
(NB: KALAU nanya kenapa STRONG..? kenapa Bukan Bold <B>..? Itu dikarenakan untuk SEO, Efek STRONG lebih bagus)

FOTMAT : jb_strong_keyword("ID_CONTENT");

Cara Pemasangan :
Letakkan SCRIPT dibawah, TEPAT setelah <div id='c_content'><data:post.body/></div>
<script type='text/javascript'>
jb_strong_keyword("c_content");
</script>

Kalau PUSING, Letakkan aja sebelum </body> (untuk cara ini EFEK yang dihasilkan lebih LAMA, karena proses ini dilakukan TERAKHIR)



WIDGET 2 : TEXT_TO_LINK
Fungsi : Mengubah Kata yang diinginkan Menjadi LINK.

FORMAT : jb_text_to_link("KATA","URL_LINK","ID_CONTENT");

Dulu, Script TEXT TO LINK ini, Pernah ada orang yang ingin membelinya. jadi pergunakan baik-baik..

Cara Pemasangan :
Letakkan SCRIPT dibawah, SETELAH <div id='c_content'><data:post.body/></div>
<script type='text/javascript'>
jb_text_to_link("google","http://www.google.com","c_content");
jb_text_to_link("Zona Widgets","http://zona-widgets.blogspot.com","c_content");
jb_text_to_link("Halaman Yang Sedang Aktif","","c_content");
</script>

Kalau PUSING, Letakkan aja sebelum </body> (untuk cara ini EFEK yang dihasilkan lebih LAMA, karena proses ini dilakukan TERAKHIR)

CONTOH EFEK yang diatas dapat dilihat di bawah ini :
Coba arahkan mouse ke kata " google " kemudian klik
Coba arahkan mouse ke kata " Zona widgets " kemudian klik
Coba arahkan mouse ke kata " Halaman Yang Sedang Aktif " kemudian klik
NB : Oh iy, kalau ada pertanyaan, kenapa efek mouse di LINK Hilang..? Lihat di WIDGET 6
Berkreasilah dengan JURUS KETIGA ini, JURUS ini sangat Bagus.. (Jurus ini juga banyak yang incar)



WIDGET 3 : BOLD_TO_LINK
Fungsi : Mengubah SEMUA KATA yang di BOLD Menjadi LINK.

FORMAT : jb_bold_to_link("URL_LINK","ID_CONTENT");

Cara Pemasangan :
Letakkan SCRIPT dibawah, SETELAH <div id='c_content'><data:post.body/></div>
<script type='text/javascript'>
jb_bold_to_link("http://zona-widgets.blogspot.com","c_content");
</script>
Kalau PUSING, Letakkan aja sebelum </body> (untuk cara ini EFEK yang dihasilkan lebih LAMA, karena proses ini dilakukan TERAKHIR)

CONTOH EFEK yang diatas dapat dilihat di bawah ini :
Lihat nih y.. Kata BOLD gue BOLD
Coba arahkan mouse ke kata yang di BOLD kemudian klik..
Semua kata yang di bold di halaman ini semua sudah jadi link, kalau g jadi link, berarti kata tuh saya taruh STRONG / efek lain selain Bold <b>
NB : Oh iy, kalau ada pertanyaan, kenapa efek mouse di LINK Hilang..? Lihat di WIDGET 6




WIDGET 4 : ITALIC_TO_LINK
Fungsi : Mengubah SEMUA KATA yang di ITALIC / Garis Miring semuanya Menjadi LINK.

FORMAT : jb_italic_to_link("URL_LINK","ID_CONTENT");

Cara Pemasangan :
Letakkan SCRIPT dibawah, SETELAH <div id='c_content'><data:post.body/></div>
<script type='text/javascript'>
jb_italic_to_link("http://zona-widgets.blogspot.com","c_content");
</script>
Kalau PUSING, Letakkan aja sebelum </body> (untuk cara ini EFEK yang dihasilkan lebih LAMA, karena proses ini dilakukan TERAKHIR)

CONTOH EFEK yang diatas dapat dilihat di bawah ini :
Lihat nih y.. Kata ITALIC gue ITALIC / Garis Miring
Coba arahkan mouse ke kata yang di ITALIC kemudian klik..
NB : Oh iy, kalau ada pertanyaan, kenapa efek mouse di LINK Hilang..? Lihat di WIDGET 6




WIDGET 5 : UNDERLINE_TO_LINK
Fungsi : Mengubah SEMUA KATA yang di UNDERLINE / Garis Bawah semuanya Menjadi LINK.

FORMAT : jb_underline_to_link("URL_LINK","ID_CONTENT");

Cara Pemasangan :
Letakkan SCRIPT dibawah, SETELAH <div id='c_content'><data:post.body/></div>
<script type='text/javascript'>
jb_underline_to_link("http://zona-widgets.blogspot.com","c_content");
</script>
Kalau PUSING, Letakkan aja sebelum </body> (untuk cara ini EFEK yang dihasilkan lebih LAMA, karena proses ini dilakukan TERAKHIR)

CONTOH EFEK yang diatas dapat dilihat di bawah ini :
Lihat nih y.. Kata UNDERLINE gue UNDERLINE / Garis Bawah
Coba arahkan mouse ke kata yang di UNDERLINE kemudian klik..
NB : Oh iy, kalau ada pertanyaan, kenapa efek mouse di LINK Hilang..? Lihat di WIDGET 6




WIDGET 6 : LINK_STYLE
Fungsi : Mengubah Efek-efek yang telah di LINK. Dalam hal ini, efek yang dapat di ubah adalah efek WARNA , UNDERLINE dan BENTUK MOUSE / CURSOR

FORMAT : jb_link_style("WARNA_LINK",UNDERLINE,BENTUK_CURSOR,"ID_CONTENT") CONTOH FORMAT :
a. WARNA LINK : RED atau #FF0000 (wajib taruh kutip 2)
b. UNDERLINE :
isikan true JIKA ingin MENGHILANGKAN efek Underline pada LINK
isikan false JIKA TIDAK ingin MENGHILANGKAN efek Underline pada LINK
c. BENTUK_CURSOR :
isikan true JIKA ingin MENGUBAH Bentuk Cursor yang diarahkan ke link menjadi bentuk TEXT / NORMAL
isikan false JIKA TIDAK ingin mengubah Bentuk Cursor yang diarahkan ke link
Cara Pemasangan :
Letakkan SCRIPT dibawah, SETELAH <div id='c_content'><data:post.body/></div>
<script type='text/javascript'>
jb_link_style("black",true,true,"c_content")
</script>
Kalau PUSING, Letakkan aja sebelum </body> (untuk cara ini EFEK yang dihasilkan lebih LAMA, karena proses ini dilakukan TERAKHIR)

CONTOH EFEK dapat dilihat pada link di seluruh halaman ini




WIDGET 7 : Google_Translate
Fungsi : Translate Website / Blog. Memberikan kemudahan untuk User / Visitor yang tidak mengerti bahasa yang ada di blog / website kita..

FORMAT : jb_g_translate(BANYAK_GAMBAR_NEGARA_DALAM_1_BARIS,"BAHASA_AWAL");
kalau FORMAT-nya tidak dimengerti, baca aja dulu kelanjutannya..

Cara Pemasangan :
Letakkan SCRIPT dibawah, Di tempat yang Anda ingin tampilkan
<script type='text/javascript'>
jb_g_translate(6,"id");
</script>

hasilnya kira-kira seperti terlihat di bawah ini : (2 Baris, Masing-masing baris terdapat 6 Gambar Negara )

NOT Your LANGUAGE..? TRANSLATE IT !!!




EFEK ketika klik dapat dilihat, jika script ini ditaruh pada website/blog.
EFEK-nya adalah mengubah bahasa Awal Indonesia(id) menjadi bahasa lain, sesuai dengan keinginan




WIDGET 8 : RANDOM_POST
Fungsi : Menampilkan Random Post dalam berbagai Style (Khusus pengguna Blogspot)

FORMAT : jb_random_post("URL_BLOG",JUMLAH_TAMPILAN,STYLE);

Contoh Format :
URL_BLOG : zona-widgets.blogspot.com (tanpa HTTP:// DAN diapit dengan tanda Kutip 2)
JUMLAH_TAMPILAN : 5 (bebas mau taruh berapa)
STYLE : 1 (Tersedia 1 , 2 , 3 dan 0)
Cara Pemasangan :
Letakkan SCRIPT dibawah, Di tempat yang Anda ingin tampilkan
<script type='text/javascript'>
jb_random_post("zona-widgets.blogspot.com",3,1);
</script>

contoh style 0 :
<script type='text/javascript'>
jb_random_post("zona-widgets.blogspot.com",2,0);
</script>



contoh style 1 :
<script type='text/javascript'>
jb_random_post("zona-widgets.blogspot.com",2,1);
</script>



contoh style 2 :
<script type='text/javascript'>
jb_random_post("zona-widgets.blogspot.com",2,2);
</script>



contoh style 3 :
<script type='text/javascript'>
jb_random_post("zona-widgets.blogspot.com",2,3);
</script>





WIDGET 9 : LATEST_POST (POSTINGAN TERBARU)
Fungsi : Menampilkan LATEST POST dalam berbagai Style (Khusus pengguna Blogspot)

FORMAT : jb_latest_post("URL_BLOG",JUMLAH_TAMPILAN,STYLE);

Contoh Format :
URL_BLOG : zona-widgets.blogspot.com (tanpa HTTP:// DAN diapit dengan tanda Kutip 2)
JUMLAH_TAMPILAN : 5 (bebas mau taruh berapa)
STYLE : 1 (Tersedia 1 , 2 , 3 dan 0)
Cara Pemasangan :
Letakkan SCRIPT dibawah, Di tempat yang Anda ingin tampilkan
<script type='text/javascript'>
jb_latest("zona-widgets.blogspot.com",3,1);
</script>

contoh style 0 :
<script type='text/javascript'>
jb_latest("zona-widgets.blogspot.com",2,0);
</script>



contoh style 1 :
<script type='text/javascript'>
jb_latest("zona-widgets.blogspot.com",2,1);
</script>



contoh style 2 :
<script type='text/javascript'>
jb_latest("zona-widgets.blogspot.com",2,2);
</script>



contoh style 3 :
<script type='text/javascript'>
jb_latest("zona-widgets.blogspot.com",2,3);
</script>





WIDGET 10 : ALEXA
Fungsi : Menampilkan Ranking dari ALEXA dalam berbagai STYLE

FORMAT : jb_alexa("URL_BLOG",STYLE);

Contoh Format :
URL_BLOG : zona-widgets.blogspot.com (tanpa HTTP:// DAN diapit dengan tanda Kutip 2)
STYLE : 1 (Tersedia 1 , 2 , 3)
Cara Pemasangan :
Letakkan SCRIPT dibawah, Di tempat yang Anda ingin tampilkan
<script type='text/javascript'>
jb_alexa("www.google.com",1);
</script>


Style 1 :


Style 2 :


Style 3 :




WIDGET 11 : Facebook Comment
Fungsi : Membuat Komentar Facebook di Blog / Website

FORMAT : jb_fb_comments(Banyak_Komentar,Lebar_Komentar);

Cara Pemasangan :
Letakkan SCRIPT dibawah, Tepat di bawah Postingan
<script type='text/javascript'>
jb_fb_comments(5,700);
</script>


Hasilnya Seperti Ini :


WIDGET 12 : Facebook Like Box
Fungsi : Membuat Facebook Like Box di Blog / Website

FORMAT : jb_fb_like_box("URL_Facebook_Page",Lebar/Width,"Face","Stream","Header");

Contoh Format :
URL_Facebook_Page : www.facebook.com/Google (tanpa HTTP:// DAN diapit dengan tanda Kutip 2)
Lebar/Width : 300
Face : true (hanya boleh true atau false [WAJIB diapit Tanda Kutip "])
Stream : true (hanya boleh true atau false [WAJIB diapit Tanda Kutip "])
Header : true (hanya boleh true atau false [WAJIB diapit Tanda Kutip "])
Cara Pemasangan :
Letakkan SCRIPT dibawah, Di tempat yang Anda ingin tampilkan
<script type='text/javascript'>
jb_fb_like_box("www.facebook.com/Google",300,"true","true","true");
</script>


Hasilnya Seperti Ini :


Contoh Lain kalau Face = true , Stream = false, Header = false :


Contoh Lain kalau semua false


WIDGET 13 : Follow Twitter
Fungsi : Membuat Tombol FOLLOW Twitter di blog / website

FORMAT : jb_follow("URL_Alamat_Twitter","Warna_Text","Warna_Link");

Contoh Format :
URL_Alamat_Twitter : twitter.com/blogger_eye (tanpa HTTP:// DAN diapit dengan tanda Kutip 2)
Warna_Text : #0000ff (hanya boleh ditulis dalam bentuk Heksadesimal [WAJIB diapit Tanda Kutip "])
Warna_Link : #ff0000 (hanya boleh ditulis dalam bentuk Heksadesimal [WAJIB diapit Tanda Kutip "])
Cara Pemasangan :
Letakkan SCRIPT dibawah, Tepat di bawah Postingan
<script type='text/javascript'>
jb_follow("twitter.com/blogger_eye","#0000ff","#ff0000");
</script>


Hasilnya Seperti Ini :


WIDGET 14 : SHARE My Website
Fungsi : Menampilkan kumpulan SHARE Button dalam berbagai STYLE

FORMAT : jb_share(STYLE);

Contoh Format :
STYLE : 3 (Tersedia 1 , 2 , 3 , 4 , 5)
Cara Pemasangan :
Letakkan SCRIPT dibawah, Di tempat yang Anda ingin tampilkan
<script type='text/javascript'>
jb_share(3);
</script>


Style 1 :


Style 2 :


Style 3 :


Style 4 :


Style 5 :




WIDGET 15 : Facebook SHARE
Fungsi : Menampilkan SHARE Button Facebook dalam berbagai STYLE

FORMAT : jb_fb_share(STYLE);

Contoh Format :
STYLE : 1 (Tersedia 1 , 2)
Cara Pemasangan :
Letakkan SCRIPT dibawah, Di tempat yang Anda ingin tampilkan
<script type='text/javascript'>
jb_fb_share(1);
</script>


Style 1 :


Style 2 :




WIDGET 16 : Plus One SHARE
Fungsi : Menampilkan SHARE Button Plus One dalam berbagai STYLE

FORMAT : jb_plus1_share(STYLE);

Contoh Format :
STYLE : 1 (Tersedia 1 , 2 ,3 , 4)
Cara Pemasangan :
Letakkan SCRIPT dibawah, Di tempat yang Anda ingin tampilkan
<script type='text/javascript'>
jb_plus1_share(1);
</script>


Style 1 :


Style 2 :


Style 3 :


Style 4 :




WIDGET 17 : AddThis SHARE
Fungsi : Menampilkan SHARE Button AddThis dalam berbagai STYLE

FORMAT : jb_addthis_share(STYLE);

Contoh Format :
STYLE : 1 (Tersedia 1 , 2 ,3)
Cara Pemasangan :
Letakkan SCRIPT dibawah, Di tempat yang Anda ingin tampilkan
<script type='text/javascript'>
jb_addthis_share(1);
</script>


Style 1 :


Style 2 :


Style 3 :




WIDGET 18 : Twitter SHARE
Fungsi : Menampilkan SHARE Button TWITTER dalam berbagai STYLE

FORMAT : jb_twitter_share(STYLE);

Contoh Format :
STYLE : 1 (Tersedia 1 , 2 ,3)
Cara Pemasangan :
Letakkan SCRIPT dibawah, Di tempat yang Anda ingin tampilkan
<script type='text/javascript'>
jb_twitter_share(1);
</script>


Style 1 :


Style 2 :


Style 3 :




WIDGET 19 : Twitter SHARE No Count
Fungsi : Menampilkan SHARE Button TWITTER dalam berbagai Format dan STYLE

FORMAT : jb_twitter_share_no_count(PREFIX,SUFFIX);

Contoh Format :
PREFIX : RT @Blogger_Eye : (Berfungsi untuk menambahkan kata yang kita inginkan di depan Title)
SUFFIX : dari Blogger_Eye : (Berfungsi untuk menambahkan kata yang kita inginkan di akhir Title)
Cara Pemasangan :
Letakkan SCRIPT dibawah, Di tempat yang Anda ingin tampilkan
<script type='text/javascript'>
jb_twitter_share_no_count('RT @blogger_eye : ','dari Blogger_Eye');
</script>


Hasilnya Seperti Ini :




SELESAI

begitulah kira-kira tutorialnya.. kalau ada yang tidak dimengerti silakan kirimin surat elektronik di email saya blogger_eye[at]yahoo[dot]com

Gimana Bacanya..? Capek..?

Kalau yang baca aja capek, yang buat kek mana y..?

SEDIKIT SARAN :

1. Perhatikan Tanda Kutip 2 (") jika formatnya mengharuskan kutip 2, maka taruhlah kutip2.. kalau ditulis jangan kutip 2, y jangan kutip 2..
2. Perhatikan HTTP:// di bagian URL.. ada yang dilarang tulis HTTP:// (contoh Widget 10) tapi ada juga wajib tulis http:// (contoh widget 2)

SEDIKIT SPESIFIKASI BANDWIDTH :

1. setiap 1 random post memakan kira-kira 3,5 KB (SEDANG, TERGANTUNG)
2. alexa style 1 (6,16 KB), style 2(6,96 KB) , Style 3 (3,38 KB)
3. Server Alexa sering DOWN, terutama untuk style 2 (RINGAN, TERGANTUNG)
4. Google Translate memakan kira-kira 10,2 KB (RINGAN)
5. Sisanya : Semua dirangkum dalam 1 Script (10,0 KB) + Anti Maling (17,3 KB) = 27,3 KB (RINGAN)

Intinya.. Script Ini Ringan jika tidak memakai "Random Post" secara berlebihan. Normal 5 - 40 random post.. (40 random post = 140 KB)
kalau input random_post 1000, maka 1000 * 3,5 KB = 3,5 MB
This Tutorial Created By : " Blogger Eye "
Website : Zona Widgets (http://zona-widgets.blogspot.com)
Script / Tutorial Boleh Di SHARE. Tapi DILARANG diperjual belikan.
Jika Ketahuan, Saya Gak kan Share VERSI Selanjutnya dari Widgets ini..