Judul : Blogspot Jquery V.1.10
Halo apa kabar,
kali nih saya akan memberikan sebuah tutorial bagaimana cara menggunakan Widget Blogspot Jquery yang telah saya buat.
Baiklah Saya mulai saja..
1. LANGKAH PERTAMA, Anda harus melakukan 2 hal :
Setelah dilakukan baru bisa melanjutkan langkah 2 , 3 , dan seterusnya
Untuk Langkah SELANJUTNYA.. Boleh Dilakukan, Boleh TIDAK dilakukan.. jadi bebas.. kalau mau pakai, ya lakukan.. kalau tidak ya terserah..
LANGKAH 2 : 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 :
LANGKAH 3 : 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 :
LANGKAH 4 : BOLD_TO_LINK
Fungsi : Mengubah SEMUA KATA yang di BOLD Menjadi LINK.
FORMAT : jb_bold_to_link("URL_LINK","ID_CONTENT");
Cara Pemasangan :
LANGKAH 5 : 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 :
LANGKAH 6 : 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 :
LANGKAH 7 : 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 :
LANGKAH 8 : 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 :
LANGKAH 9 : RANDOM_POST
Fungsi : Menampilkan Random Post dalam berbagai Style (Khusus pengguna Blogspot)
FORMAT : jb_random_post("URL_BLOG",JUMLAH_TAMPILAN,STYLE);
Contoh Format :
LANGKAH 10 : 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 :
LANGKAH 11 : ALEXA
Fungsi : Menampilkan Ranking dari ALEXA dalam berbagai STYLE
FORMAT : jb_alexa("URL_BLOG",STYLE);
Contoh Format :
Gimana Bacanya..? Capek..?
Kalau yang baca aja capek, yang buat kek mana y..?
2. Perhatikan HTTP:// di bagian URL.. ada yang dilarang tulis HTTP:// (contoh langkah 11) tapi ada juga wajib tulis http:// (contoh langkah 3)
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 (6,96 KB) + Anti Maling (12,64 KB) = 19,6 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..
Baiklah Saya mulai saja..
1. LANGKAH PERTAMA, Anda harus melakukan 2 hal :
- untuk pengguna blogspot buka dulu Design >> Edit HTML >> terus centang "Expand Widget Templates"Perhatian : LANGKAH PERTAMA WAJIB DILAKUKAN
a. Copy script dibawah, dan letakkan Tepat dibawah <body>b. - Apit Postingan dengan <div id='c_content'> dan </div><script src='http://bjquery.xtgem.com/v_1_10' type='text/javascript'></script>jika <body> tidak dapat ditemukan, coba cari <body, kemudian letakkan di bawahnya
- untuk pengguna Blogspot, Ganti <data:post.body/> menjadi <div id='c_content'><data:post.body/></div>
Setelah dilakukan baru bisa melanjutkan langkah 2 , 3 , dan seterusnya
Untuk Langkah SELANJUTNYA.. Boleh Dilakukan, Boleh TIDAK dilakukan.. jadi bebas.. kalau mau pakai, ya lakukan.. kalau tidak ya terserah..
LANGKAH 2 : 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)
LANGKAH 3 : 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>Berkreasilah dengan JURUS KETIGA ini, JURUS ini sangat Bagus.. (Jurus ini juga banyak yang incar)<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 klikNB : Oh iy, kalau ada pertanyaan, kenapa efek mouse di LINK Hilang..? Lihat di LANGKAH KETUJUH
Coba arahkan mouse ke kata " Zona widgets " kemudian klik
Coba arahkan mouse ke kata " Halaman Yang Sedang Aktif " kemudian klik
LANGKAH 4 : 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'>Kalau PUSING, Letakkan aja sebelum </body> (untuk cara ini EFEK yang dihasilkan lebih LAMA, karena proses ini dilakukan TERAKHIR)
jb_bold_to_link("http://zona-widgets.blogspot.com","c_content");
</script>
CONTOH EFEK yang diatas dapat dilihat di bawah ini :Lihat nih y.. Kata BOLD gue BOLDNB : Oh iy, kalau ada pertanyaan, kenapa efek mouse di LINK Hilang..? Lihat di LANGKAH KETUJUH
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>
LANGKAH 5 : 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'>Kalau PUSING, Letakkan aja sebelum </body> (untuk cara ini EFEK yang dihasilkan lebih LAMA, karena proses ini dilakukan TERAKHIR)
jb_italic_to_link("http://zona-widgets.blogspot.com","c_content");
</script>
CONTOH EFEK yang diatas dapat dilihat di bawah ini :Lihat nih y.. Kata ITALIC gue ITALIC / Garis MiringNB : Oh iy, kalau ada pertanyaan, kenapa efek mouse di LINK Hilang..? Lihat di LANGKAH KETUJUH
Coba arahkan mouse ke kata yang di ITALIC kemudian klik..
LANGKAH 6 : 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'>Kalau PUSING, Letakkan aja sebelum </body> (untuk cara ini EFEK yang dihasilkan lebih LAMA, karena proses ini dilakukan TERAKHIR)
jb_underline_to_link("http://zona-widgets.blogspot.com","c_content");
</script>
CONTOH EFEK yang diatas dapat dilihat di bawah ini :Lihat nih y.. Kata UNDERLINE gue UNDERLINE / Garis BawahNB : Oh iy, kalau ada pertanyaan, kenapa efek mouse di LINK Hilang..? Lihat di LANGKAH KETUJUH
Coba arahkan mouse ke kata yang di UNDERLINE kemudian klik..
LANGKAH 7 : 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)Cara Pemasangan :
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
Letakkan SCRIPT dibawah, SETELAH <div id='c_content'><data:post.body/></div><script type='text/javascript'>Kalau PUSING, Letakkan aja sebelum </body> (untuk cara ini EFEK yang dihasilkan lebih LAMA, karena proses ini dilakukan TERAKHIR)
jb_link_style("black",true,true,"c_content")
</script>
CONTOH EFEK dapat dilihat pada link di seluruh halaman ini
LANGKAH 8 : 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
LANGKAH 9 : 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)Cara Pemasangan :
JUMLAH_TAMPILAN : 5 (bebas mau taruh berapa)
STYLE : 1 (Tersedia 1 , 2 , 3 dan 0)
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>
LANGKAH 10 : 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)Cara Pemasangan :
JUMLAH_TAMPILAN : 5 (bebas mau taruh berapa)
STYLE : 1 (Tersedia 1 , 2 , 3 dan 0)
Letakkan SCRIPT dibawah, Di tempat yang Anda ingin tampilkan<script type='text/javascript'>
jb_latest_post("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>
LANGKAH 11 : 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)Cara Pemasangan :
STYLE : 1 (Tersedia 1 , 2 , 3)
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 :
Format Akhir kira-kira jadi seperti ini :
<html>
<head>
<meta name="keywords" content="blogspot jquery , tutorial , share" />
</head>
<body>
<script src='http://bjquery.xtgem.com/v_1_10' type='text/javascript'></script>
<div id='c_content'>
ini ada sedikit share sebagai bahan tutorial dari blogspot jquery V.1.10
<blockquote>
Coba arahkan mouse ke kata "<STRONG> google </STRONG>" kemudian klik
<br />
Coba arahkan mouse ke kata "<STRONG> Zona widgets </STRONG>" kemudian klik
<br />
Coba arahkan mouse ke kata "<STRONG> Halaman Yang Sedang Aktif </STRONG>" kemudian klik
</blockquote>
contoh kata yang di <b>bold</b>
<br />
contoh kata yang di <i>italic</i>
<br />
contoh kata yang di <u>underline</u>
<br />
</div>
<script type='text/javascript'>
jb_strong_keyword("c_content");
</script>
<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>
<script type='text/javascript'>
jb_italic_to_link("http://zona-widgets.blogspot.com","c_content");
</script>
<script type='text/javascript'>
jb_bold_to_link("http://zona-widgets.blogspot.com","c_content");
</script>
<script type='text/javascript'>
jb_underline_to_link("http://zona-widgets.blogspot.com","c_content");
</script>
<script type='text/javascript'>
jb_link_style("red",true,true,"c_content");
</script>
<br />
contoh google translate widgets<br />
<script type='text/javascript'>
jb_g_translate(6,"id");
</script>
<br /><br />
contoh random post<br />
<script type='text/javascript'>
jb_random_post("zona-widgets.blogspot.com",2,3);
</script>
<br /><br />
contoh latest post (Postingan Terbaru)<br />
<script type='text/javascript'>
jb_latest("zona-widgets.blogspot.com",5,3);
</script>
<br /><br />
<script type='text/javascript'>
jb_alexa("www.google.com",1);
jb_alexa("www.google.com",2);
jb_alexa("www.google.com",3);
</script>
</body>
</html>
<head>
<meta name="keywords" content="blogspot jquery , tutorial , share" />
</head>
<body>
<script src='http://bjquery.xtgem.com/v_1_10' type='text/javascript'></script>
<div id='c_content'>
ini ada sedikit share sebagai bahan tutorial dari blogspot jquery V.1.10
<blockquote>
Coba arahkan mouse ke kata "<STRONG> google </STRONG>" kemudian klik
<br />
Coba arahkan mouse ke kata "<STRONG> Zona widgets </STRONG>" kemudian klik
<br />
Coba arahkan mouse ke kata "<STRONG> Halaman Yang Sedang Aktif </STRONG>" kemudian klik
</blockquote>
contoh kata yang di <b>bold</b>
<br />
contoh kata yang di <i>italic</i>
<br />
contoh kata yang di <u>underline</u>
<br />
</div>
<script type='text/javascript'>
jb_strong_keyword("c_content");
</script>
<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>
<script type='text/javascript'>
jb_italic_to_link("http://zona-widgets.blogspot.com","c_content");
</script>
<script type='text/javascript'>
jb_bold_to_link("http://zona-widgets.blogspot.com","c_content");
</script>
<script type='text/javascript'>
jb_underline_to_link("http://zona-widgets.blogspot.com","c_content");
</script>
<script type='text/javascript'>
jb_link_style("red",true,true,"c_content");
</script>
<br />
contoh google translate widgets<br />
<script type='text/javascript'>
jb_g_translate(6,"id");
</script>
<br /><br />
contoh random post<br />
<script type='text/javascript'>
jb_random_post("zona-widgets.blogspot.com",2,3);
</script>
<br /><br />
contoh latest post (Postingan Terbaru)<br />
<script type='text/javascript'>
jb_latest("zona-widgets.blogspot.com",5,3);
</script>
<br /><br />
<script type='text/javascript'>
jb_alexa("www.google.com",1);
jb_alexa("www.google.com",2);
jb_alexa("www.google.com",3);
</script>
</body>
</html>
SELESAI
begitulah kira-kira tutorialnya.. kalau ada yang tidak dimengerti silakan kirimin surat elektronik di email saya blogger_eye[at]yahoo[dot]comGimana 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 langkah 11) tapi ada juga wajib tulis http:// (contoh langkah 3)
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 (6,96 KB) + Anti Maling (12,64 KB) = 19,6 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)
Jika Ketahuan, Saya Gak kan Share VERSI Selanjutnya dari Widgets ini..