headerphoto
Tampilkan postingan dengan label Blogger Pemula. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger Pemula. Tampilkan semua postingan

Saya mau berbagi lagi kode javascript untuk dipasang di dalam blog. Sebelumnya saya telah memposting kode javascript jumlah komentar dan jumlah posting, sekarang akan berbagi posting kode javascript teks pelangi, yang sedikit lebih rumit dibandingkan kedua kode sebelumnya.

Apa itu teks pelangi?

Teks pelangi adalah salah satu bentuk, gaya atau style yang diterapkan pada sebuah teks, kata, frasa, kalimat atau beberapa kalimat, yang menjadikan teks tersebut berwarna-warni seperti layaknya pelangi.

Bagaimana cara memasang teks pelangi?

Cara memasang atau membuat teks pelangi yaitu:
:1: Pasang kode berikut di dalam Template blog di atas </head>

<script type='text/javascript'>//<![CDATA[
function rt_decodeHex(t){var r=parseInt(t.substr(1,2),16),n=parseInt(t.substr(3,2),16),o=parseInt(t.substr(5,2),16);return[r,n,o]}function rt_encodeHex(t,r,n){var o="#";return o+=16>t?"0"+t.toString(16):t.toString(16),o+=16>r?"0"+r.toString(16):r.toString(16),o+=16>n?"0"+n.toString(16):n.toString(16)}function rt_getColor(t){var r,n,o,a=15,e=255/a;return a>t?(r=255,n=t*e,o=0):2*a>t?(r=255-(t-a)*e,n=255,o=0):3*a>t?(r=0,n=255,o=(t-2*a)*e):4*a>t?(r=0,n=255-(t-3*a)*e,o=255):5*a>t?(r=(t-4*a)*e,n=0,o=255):(r=255,n=0,o=255-(t-5*a)*e),rt_encodeHex(r,n,o)}function rt_loadColor(t){for(var r=t.innerHTML,n=r.length,o=90/n,a=n-1;a>=0;a--){var e=Math.round(o*a),s=rt_getColor(e);r=r.substr(0,a)+"<span style='color:"+s+"'>"+r.substr(a,1)+"</span>"+r.substr(a+1)}t.innerHTML=r}function rt_scriptStart(){for(var t=document.getElementsByTagName("span"),r=0;r<t.length;r++){var n=t[r];"pelangi"==n.className&&rt_loadColor(n)}}var rt_windowOnLoad=window.onload;window.onload=function(){void 0!=rt_windowOnLoad&&rt_windowOnLoad(),rt_scriptStart()};
//]]>
</script>


:2: Pasang kode berikut di Template, Sidebar, Footer atau kolom HTML JavaScript Blog, dengan mengedit dulu frasa teks pelangi disini sesuai kebutuhan

<span class='pelangi'>teks pelangi disini</span>

:3: Bila berhasil, maka akan tampak seperti teks di bawah ini

Kebaikan apa yang sudah kamu lakukan di hari ini?

:4: Kode teks pelangi disini atau kode yang disebutkan pada poin :2:, boleh di pasang beberapa kali, pasang teks pelangi ini di Template, pasang teks pelangi itu di Sidebar, boleh, sesuai dengan kebutuhan.

Semoga berhasil, semangat :semangat:

Lanjut baca »»

Saya membuka situs Google Web Master, kemudian saya melakukan update sitemap, googlebot dan beberapa kegiatan optimasi blog lainnya. Kemudian saya mendapati ada hasil negatif pada tab Penyempurnaan HTML, bahwa deskripsi blog ini disebut singkat, lihat screenshot gambar dibawah ini.

Penyempurnaan HTML Deskripsi Singkat

Penyempurnaan HTML
Informasi deskripsi meta dapat memberi para pengguna suatu ide tentang isi situs dan mendorong para pengguna untuk mengklik pada situs Anda dalam laman hasil telusur.


Deskripsi yang dianggap singkat itu adalah:
..
Catatan-catatan kang Caang
..
berjumlah 26 karakter.

Berapa jumlah huruf atau karakter yang bagus untuk deskripsi blog?

Berikut hasil analisa menurut situs SEO Sentro:
Description is smaller than 80 characters (26 characters).
The meta description of your page has a length of 26 characters. Most search engines prefer an meta descriptions between 80 and 160 characters. Consider the use of a greater description.


:pin: Artinya:
- Jumlah karakter deskripsi sebuah blog yang dianggap bagus, baik dan tidak singkat adalah minimal 80.
- Saya harus mengganti atau menambah karakter dalam deskripsi blog ini.
- Maka, saya akan menggantinya dengan,

Belajar Internet Blog dan Menulis: Dasar, Pemula, Tutorial, Catatan-catatan dan Hikmah.

Masih ada frasa catatan-catatan -nya :hihihi: dan mudah-mudahan berkembang menjadi lebih baik, semangat :semangat:

Lanjut baca »»

Jumlah komentar yang pernah ditulis, baik oleh penulis blog itu sendiri atau oleh pengunjung atau pembacanya, dan terbit pada sebuah blog dapat kita munculkan angkanya dan kita tampilkan di halaman muka, di sidebar atau di footer, melalui bantuan sebuah kode javascript.

Biasanya untuk melihat jumlah komentar, kita bisa menggunakan Dashbor Blogger pada tab Komentar. Disana akan terlihat komentar-komentar yang sudah diterbitkan dan angka yang menunjukan jumlah komentar tersebut. Dengan memasang sebuah kode javascript yang cukup sedikit dan simpel, kita bisa melihatnya pada halaman muka blog kita, di sidebar atau di footer, tanpa melalui Dashbor Blogger.

Contoh penerapan pada blog ini:



Adapun kode javasriptnya adalah di bawah ini:
<!-- penghitung komentar --><script type='text/javascript'>function totalComments(a){document.write("Jumlah Komentar: <b>"+a.feed.openSearch$totalResults.$t+"</b><br>")}</script><!-- /penghitung komentar -->
<script type="text/javascript" src="http://planetcaang.blogspot.com/feeds/comments/default?alt=json-in-script&callback=totalComments"></script>


Keterangannya:
:1: Silahkan ganti alamat url pada kode tersebut di atas dengan alamat url blog kawan.
:2: <!-- penghitung komentar--> sebagai marker saja, boleh tidak digunakan.
:3: Kode hasil angka ditampilkan dengan style bold, huruf tebal, dan frasanya dengan Jumlah Komentar. Keduanya boleh diedit sesuai keperluan, misal hurufnya jadi normal, atau frasanya dengan Total Komentar, dsb.

Semoga berhasil, semangat :semangat:

Lanjut baca »»

Jumlah posting atau jumlah artikel yang sudah diterbitkan pada sebuah blog dapat kita munculkan angkanya dan kita tampilkan di halaman muka, melalui bantuan sebuah kode javascript.

Biasanya untuk melihat jumlah posting, kita bisa menggunakan Dashbor Blogger pada tab Pos. Disana akan terlihat posting-posting yang sudah diterbitkan dan angka yang menunjukan jumlah posting-posting tersebut. Dengan memasang sebuah kode javascript yang cukup sedikit dan simple, kita bisa melihatnya pada halaman muka blog kita, tanpa melalui Dashbor Blogger.

Contoh penerapan pada blog ini:



Adapun kode javasriptnya adalah di bawah ini:
<!-- penghitung posting --><script type='text/javascript'>function totalPosts(a){document.write("Jumlah Posting: <b>"+a.feed.openSearch$totalResults.$t+"</b>")}</script><!-- /penghitung posting -->
<script type="text/javascript" src="http://planetcaang.blogspot.com/feeds/posts/default?alt=json-in-script&callback=totalPosts"></script>


Keterangannya:
:1: Silahkan ganti alamat url tersebut di atas dengan alamat url blog kawan.
:2: <!-- penghitung posting --> sebagai marker saja, boleh tidak digunakan.
:3: Kode hasil angka ditampilkan dengan style bold, huruf tebal, dan frasanya dengan Jumlah Posting. Keduanya boleh diedit sesuai keperluan, misal hurufnya jadi italic, huruf miring atau frasanya dengan Jumlah Artikel, Total Posting, dsb.

Semoga berhasil, semangat :semangat:

Lanjut baca »»

Sudah mendownload file-file emoticon WhatsApp seperti yang saya tulis dalam posting Download File-file Emoticon WhatsApp kemarin? #SayaSudah dan mari kita lanjutkan pembahasan dengan menggunakan materi file-file emoticon WhatsApp tersebut, yakni menggunakannya untuk chat komentar dan kolom posting blog ini sendiri.

Pasang emoticon pada komentar dan pada kotak posting sudah saya tulis di Tambah Emoticon pada Kolom Komentar Template Blog dan Pasang Gambar Animasi atau Emoticon pada Kolom Posting Blog. Jadi ini adalah penyempurnaan dua posting tersebut atau menggabungkan dua fungsi sekaligus, pasang emoji/ emoticon komentar dan posting blog, dengan mengganti gambar-gambar emoticon dengan emoticonnya WhatsApp. Dari 845 emoticon yang tersedia, saya pilih menjadi 60 emoticon saja.

Caranya memasang emoji atau emoticon komentar dan posting blog yaitu:
:1: Copy kode javascript berikut ini
<script src='https://sites.google.com/site/kangcaang/host_script/emoreplace_pop.js' type='text/javascript'/>
:2: Login ke Blogger - Template - Edit HTML
:3: Paste diatas
</body>
:4: Simpan template
:5: Ketik [:][asik][:] -tanpa tanda kurung- pada komentar atau lihat kata-kata pembentuk emoji di bawah ini, kemudian lihat hasilnya :kepo:


:tanbih: Ini akan berhasil, jika di dalam template blog tersedia dua kode berikut
<div class='widget Blog' data-version='1' id='Blog1'>
<div class='blog-posts hfeed'>


Bila tidak ada :tanya:, buat sendirilah :semangat: atau edit sendirilah kode javascript yang di :atas:, karena saya juga itu buat sendiri :pis:.

Lanjut baca »»

Saya mencari emoticon atau emotion icon atau emoji atau gambar smiley, seperti yang ada pada kolom percakapan di dalam aplikasi WhatsApp, melalui pencarian Google. Gambar-gambar emosi tersebut maksudnya akan saya gunakan dalam kegiatan blogging yang saya jalankan ini, misal dalam Tambah Emoticon pada Kolom Komentar Template Blog, bukan untuk percakapan di WhatsAppnya sendiri, yang tentu saja di sana sudah tersedia.

Emoji Smiley WhatsApp

Kemudian saya mendapatkan hasil positif, ada situs luar :bee:, ia menyediakan link untuk mendownload emoticon atau smiley WhatsApp, dengan jumlah emoticon yang sangat banyak, 845 icon.

Emoticon WhatsApp berdasarkan kategori

:1: Symbols: 209
:2: Objects: 230
:3: Smiley: 189
:4: Nature: 116
:5: Places: 101

:catat: Total emoticon WhatsApp ada 845.

Jenis file-file emoticon WhatsApp tersebut adalah PNG, sehingga terlihat lengkung transparansinya, mempunyai ukuran gambar sebesar 160x160 pixels. Kawan-kawan yang memerlukan file-file emoticon WhatsApp silahkan kunjungi situs
WhatApp Emoji Collection.

Ke-845 file-file emoticon tersebut dikompres menjadi file berjenis zip, dengan ukuran file sebesar 15,1 MB :angkut:. Selain untuk keperluan blogging, kawan bisa gunakan untuk keperluan lain, seperti kirim lampiran pada email, menempelkannya pada karya tulis, dan sebagainya. Silahkan kunjungi situs tersebut untuk :download: mendownloadnya.

Lanjut baca »»

الحمد للهِ setelah menghabiskan waktu :1: hari, untuk mengedit url file yang ada kaitannya dengan Google Code pada posting-posting yang telah terbit di tiga blog yang saya kelola (blog CaangGo! ini, blog Elektronika Bersama dan blog Electro Study), akhirnya selesai juga.

Itupun ada beberapa posting yang urlnya yang tidak saya ganti karena ada kegagalan dari pihak ketiga, seperti url yang menempel untuk kode script pembuatan jam analog pada blog (lihat di Pasang Jam Artis Angelina Jolie pada Sidebar Blog). Penyedia layanan animasi jam tersebut, selaku pihak ketiga, tidak bisa di akses :puyeng:.

Selanjutnya saya itu berniat untuk mengganti deskripsi dari blog ini. Deskripsi sebelumnya adalah Tips trik blog, blogger, blogspot, tutorial linux, instal linux, linux mint, ubuntu, musik, renungan, sudah tidak relevan dengan keadaan saya saat ini.


Linux, sistem operasi bapaknya Android, pendamping Windows, sudah tidak saya gunakan lagi sejak mengganti laptop 2,5 tahun yang lalu. Musik masih didengarkan, tapi sekarang lebih banyak mendengarkan ceramah agama, terutama dari ustadz Aam Amiruddin, barokallohufik ustadz, dan ustadz-ustadz lain yang menjadi pengisi ceramah pada Majelis Percikan Iman. Tips trik blog, hanya sekedar pengalaman selama ngeblog, bersifat trial dan error, dan tidak pernah belajar secara resmi.


Lalu deskripsi yang sekarang, sebagai pengganti deskripsi sebelumnya adalah Catatan-catatan kang Caang. Catatan disini berbentuk jamak tetapi tidak bersifat khusus, seperti catatan-catatan blogging, tapi bersifat umum, bisa catatan agama, bahasa, internet, ngeblog, oprek sistem, mungkin oprek Android, atau yang lainnya. Orang yang berilmu pernah berkata, :catat: catatlah hal-hal yang sekiranya perlu kita ingat, terlebih lagi catatan tentang hutang-piutang.

Terus, apa gunanya sebuah deskripsi blog?

Bagi saya sebuah nama atau kata atau untaian kata yang membentuk sebuah frasa atau sebuah kalimat, seperti deskripsi blog adalah sebuah identitas yang harus dijaga. Jadi, Catatan-catatan kang Caang: catatan-catatan harus dijaga agar lestari dan tidak punah dalam memori otak kita. Kang Caang jelas harus dijaga karena ia RI1 (baca: kepala rumah tangga saat ini, namun siapa yang tahu besok lusa jadi kepala desa, kepala pabrik, dsb).

Untuk itu saya cukupkan tulisan ini, karena saya mau merubah deskripsi blog ini, sesuai dengan yang sudah saya tulis di atas.
...
S E M A N G A T :semangat: الحمد للهِ sudah dilakukan.

Lanjut baca »»

Google code sudah lama tidak aktif. Di sana saya menyimpan atau bahasa internet-nya menghosting berbagai file untuk keperluan blogging, seperti: emoticon, kode-kode css atau javascript, hingga file aplikasi .exe (baca: Hosting Gambar Animasi, JavaScript, CSS Melalui Google Code). Akibat dari Google Code yang tidak aktif, saya harus memperbarui segala sesuatu yang terkait dengannya, seperti mengganti tempat hosting berbagai file tersebut, mengganti url-url emoticon, kode script, program aplikasi dan sebagainya.
Hello,

Earlier today, Google announced we will be turning down Google Code Project Hosting. The service started in 2006 with the goal of providing a scalable and reliable way of hosting open source projects. Since that time, millions of people have contributed to open source projects hosted on the site.

But a lot has changed since 2006. In the past nine years, many other options for hosting open source projects have popped up, along with vibrant communities of developers. It’s time to recognize that Google Code’s mission to provide open source projects a home has been accomplished by others, such as GitHub and Bitbucket.

We will be shutting down Google Code over the coming months. Starting today, the site will no longer accept new projects, but will remain functionally unchanged until August 2015. After that, project data will be read-only. Early next year, the site will shut down, but project data will be available for download in an archive format.

As the owner of the following projects, you have several options for migrating your data.

moalmules

The simplest option would be to use the Google Code Exporter, a new tool that will allow you to export your projects directly to GitHub. Alternatively, we have documentation on how to migrate to other services — GitHub, Bitbucket, and SourceForge — manually.

For more information, please see the Google Open Source blog or contact google-code-shutdown@google.com.

-The Google Code team

Ngartos teu tulisan bahasa Inggris di luhur..? :sedih:

Sebelumnya saya menghosting berbagai file tersebut di atas ke Google Drive, namun sekarang ada kendala direct url atau url langsungnya tidak bisa dipanggil atau urlnya tidak ditemukan. Maka dari itu dan mula sekarang, saya harus bekerja lagi meng-update blog, menghosting ulang file-file, memperbarui posting yang terkait dengannya, memperbarui url dan menyiapkan waktu untuk itu.

...
Bismillah
...

Ada kabar baik pamiarsa!
  • Barusan saya mengunjungi situs Google Code dan menemukan file-file yang sudah saya hosting masih ada disana dalam bentuk arsip. Hal itu seperti yang ada di dalam tulisan dalam kutipan darinya di atas.
  • Bahwa file-file yang sudah dihosting bisa langsung kita panggil dan kita gunakan dalam blog, seperti emoticon pertama di atas dan emoticon ini :oke:
  • Pertanyaan: Lalu bagaimana supaya memanggil kembali file-file tersebut?
  • Jawaban: Cukup ganti url saja, misal

    url file di Google code sebelumnya
    http://moalmules.googlecode.com/files/boy-emoticon-009.gif

    ubah menjadi
    https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/moalmules/boy-emoticon-009.gif
  • Paham kan cara mengganti url nya? :jempol:
  • Semoga berhasil dan mari kita berjuang....!

Lanjut baca »»

Feed Blogger masih error ya? Hanya menampilkan update URL artikel sebanyak 150 atau 151 aja. Akibatnya, konten blog yang mengandung script feed tersebut, seperti Daftar Isi, tidak akan menampilkan artikel secara keseluruhan. Bagaimana solusi menampilkan feed semua artikel yang tersedia?

feed-150-only

Problem feed blogger ini, tidak akan mengganggu blog yang mempunyai artikel kurang dari 150. Namun bagi sebuah Blog yang memlikiki artikel sebanyak 200, 500 atau lebih dari 150, akan rugi, karena beberapa artikel tidak akan ditampilkan.

Lalu, bagaimana agar feed Blogger tersebut normal kembali? Jawabannya, tunggu kabar dari Mbahnya, Mbah Google, hehe. Kalo triknya atau Solusi untuk menampilkan feed blogger lebih dari 150, atau dengan kata lain, solusi menampilkan feed semua artikel yang tersedia, saya punya. Berikut langkahnya:

1. Harus tau ID Blogger kamu, tahu kan?
Contoh ID Blog ini adalah 6090294668116296019
2. Jika kode html daftar isi kamu seperti di bawah ini
<script type="text/javascript" src="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/moalmules/showrecentposts24.js"></script><script type="text/javascript">var numposts = 600;</script><script type="text/javascript" src="http://planetcaang.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=showrecentposts"></script></div>

3. Maka, ganti alamat URL feed nya dengan feed/ atom yang ada ID Bloggernya
<script type="text/javascript" src="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/moalmules/showrecentposts24.js"></script><script type="text/javascript">var numposts = 600;</script><script type="text/javascript" src="https://www.blogger.com/feeds/6090294668116296019/posts/default?redirect=false&start-index=1&max-results=500&alt=json-in-script&callback=showrecentposts"></script>

4. Hasilnya seperti gambar di bawah ini
feed-blogger-bisa-lebih-dari-150

Kesimpulannya, trik atau solusi untuk menampilkan feed/ sitemap/ atom Blogger lebih dari 150 adalah dengan mengganti URL feed lama dengan url feed yang ada ID Bloggernya. Semoga berhasil...!

Lanjut baca »»

T
Thumbnail Abjad Blog CaangGo! merupakan gambar mini yang menampilkan kumpulan huruf atau abjad, berukuran kurang dari 1 KB, berdimensi 64 x 64 pixels, berextensi png, bisa digunakan sebagai dropcap atau huruf pertama sebuah posting, sebagai thumbnail pada gadget Popular Post, sebagai pemanis postingan dan pelengkap posting yang tidak terdapat gambar didalamnya.

Bagi kawan-kawan Blogger ataupun Netter yang memerlukan, saya berikan thumbnail abjad seperti di bawah ini. Tertera, urutan huruf, url- thumbnail abjad, dan tampilannya, silahkan.
  1. Huruf A
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtIhgp_KA1sGK9P94ugNkYTR6LYFXPBh90fjkRuaa-JQFh3U66r_xf4rkONh_rHERJksu3hQHF5h9sR8JxBlz_JK8eqKFmiUYZNogQmHvIlud3Zcb9FmmL8BUk0hLhcQXJdaqGQM2V4jQ/s1600/huruf_a.png
    A
  2. Huruf B
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir_zpnls5HxVcyWjxqzJDd4nSD7i_kovFkdoqSdd-0ZLTlpsKspSEFZjBR0I_tnoeVQ8_VsFFNGYy4FR4UlCFGFqAxMtbINGMUUC9kUeLYToVVx4qy0sx267-Hg2wprlwBAuycMWU-0-4/s1600/huruf_b.png
    B
  3. Huruf C
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQx7oHyNEWIs2LJKyHGpGi85NK6P3SBWpkx11Tf_KcWM9eG9ST9OILSOzDcdc_e8WOIekyrpDyVaYEBP0qj24VoAc6PNZS5W2fbVSlYs590P3LWCwFSUEgSMUHdSkT7gmWgOEuSKzMtqQ/s1600/huruf_c.png
    C
  4. Huruf D
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjea-AYCCCv9KfksmTBWMNhHfJxZMBKHYMqX1v4tVokqpO5m2XG6TkkdopdrzxbS1nX0bTHxHFjg5fwWacEVH2UXXuH87lWWAGxibciaAsk-GGP0lODLy9uMfSK8HLC4PEDpge5vrwBe9o/s1600/huruf_d.png
    D
  5. Huruf E
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-GzosgVCXEOPQH_iOE5BL5Ayt6xbOmxzeEJ0NNuOXELUuu4ehdAki91gAy6Jb0VlaakR3_1Dvjj__yB6vdy8k7o7g7FOQDDhqc5SjIwUrV8O4Vk1943HdgYJVt86KThibes1LNWD_kv4/s1600/huruf_e.png
    E
  6. Huruf F
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCHTdVi01gZs8EaKgKQHwqlJMXCgy8Tw7HxCSo3a8Hzbku5JnYPcW10yvZdDHneU17wqlp7emTFJuvXSBEFsROJTC2zUjdhjcYVy5IaYKPcJcbFHVQkMmYK1LZrg6uberejYRswPPkMdM/s1600/huruf_f.png
    F
  7. Huruf G
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDHdJ4k8cx8d7XN5Dycbr7ToSDqXkZWepyO0NmFHe0Kr15MnweoDFGGj3FBMsHegqpeRQDgUbRLwvbFCDSHDljXbPeFxbWmfmfYSsR4U0v0rrUKA9YSl8cJdXcNglio4UuNqQv12G-HZI/s1600/huruf_g.png
    G
  8. Huruf H
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKwhj7m06mwDUrq6TVyAZ7U1TCInGPNTeb_gNj6ZUrL7l1aOhKjGhx6y73rFF9MAAGKBC2kCuQfdE8xAbOYWUQuMSSs7p5yN2POg5mychdnYo5hOZ2Y9xhvuINvHwZQ2z_awVWsBCdMso/s1600/huruf_h.png
    H
  9. Huruf I
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6yOAXaJ9DqWQh6ratMOlyfKCqr6mDB1xOYUqwosm8_CsEvcXu5eunsEBbmUFK4bhq20KayCRXl5ao_rz1tLc64lu1el7B-sDXvrjKxF2Lri_U1rmcbzG6l3agk4a-w30T2bCp0ZfuJSs/s1600/huruf_i.png
    I
  10. Huruf J
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKoNTv50uW88d73t2QLfsx_oGENk4MvCZkfDtcNa-MA86YXvg13rOH1je_rbquIqC5tvxOl2n2VwvHGKSVqN9drYLGk9fAP8OLmy2RKfguc9037AiHuQbszCfhtlp7CgjeabFHjLcCk1k/s1600/huruf_j.png
    J
  11. Huruf K
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdQhaFeAds_mNJjYCv4ZqcB4_JhQfdCoG6RXHP_vZBXGuw5yBWBPkyX7019yGcgYB9NJKqd8ejXGgERMw_9zOjnjwpLcrefBSLcew_F2riR3b4EGo8Vi7YrFG9vrciLrDX2QQ8E2FOIHc/s1600/huruf_k.png
    K
  12. Huruf L
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJSmHq_e_TvXcEEgSWfkJMYW07B219za2hs90DFvTA2FECk9GCk6eNdG6JJesLahCbGq1C7B8ztvjRMV6EY3cfMXKtUNv9fLVKGEnMTNegk6rcED38nk0vsftDzESKS9wx9-CS-Hbrm5w/s1600/huruf_l.png
    L
  13. Huruf M
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiE74gxfWcG_ZKnxvyu592Wmr147mfRYWhw_G7Qf4p5kXj3U3IiH42VUXvVxiR-PBmQQFOXf8KGvFghXAsf38Z0UKmtvdWkShknhSrDsAmKBuWAtcYCZldTEJEdfMh28iDW0WMqbyG1sQ/s1600/huruf_m.png
    M
  14. Huruf N
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoStjBR-tbnOWjPMmH4FjzzLiuRO3pIBdPbeItuzczt8ycye36b41_T-bMG8zqHa-e6p9wLyk5q9sqJuB_aMECYyihIHYiYrWWAq7KTjkVth28UvddduufRcJ10Yygg8gZE-xsSmEK_10/s1600/huruf_n.png
    N
  15. Huruf O
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVEEQ6oP2qfcIHYh1RsXMWnzXMLoovgP8gEpR5Yuio6F5xSaUEf1JTVreMaUq0hM0QEZ2PCm1-WjIm1lYFwNIgFo_OXaay6f0R4gobYjgMG0NP-2_uI8_e5pgM9DsBlF-3AgJcneJODfA/s1600/huruf_o.png
    O
  16. Huruf P
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOOpyCIcBDDU-bp-2xK988u328kJ81-n5Rn30Ig1lF3OqGM2_coABHLzqSlqJWsuM2_gDjj4gi9tE8l7ITaEOKbtgZx1Aw8A-hiswLNfgTBKledFKjA_0mtX6Ps8yx_v4Wkwsp41Lw13c/s1600/huruf_p.png
    P
  17. Huruf Q
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7BnU5UL3mcWJf2MJfL5B50Fu2C19hI6FcVsJc7NLANFAtV9oNbhHueZm4CHMj7gvpQcKlwvFg-ouK3BFmoR2Hhg1HTvFto85fllxrZaoC1tZXc5oGRaBdNY3qXJVMqfLGFgIv4VfQ4ds/s1600/huruf_q.png
    Q
  18. Huruf R
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj8D1mRgdnwcyZ8ogosVXy0-WX-ZLzW0043pNCuyfxZN70v2g0feQ09Xrf5H4onpvYngBEtiTJJ-JmssZGjQrVpZDQ-qDmwX0rrO0YXN4nlW__C6r8qnVDAbXxLPs5XLmGiVtTo6URx3g/s1600/huruf_r.png
    R
  19. Huruf S
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiD_aB8WfEQ1C0rk_i7QJmyq9pLpHb1ITXB4YqlkkINwtph8P5SyHiEgD15aaJepWpElJIDf63UlsCUWBuPHfXwCTCA4R488ttnasVc4yGsV5WFXj-RWWEtvmWfKSVCS6V7AfXhPdRpTo/s1600/huruf_s.png
    S
  20. Huruf T
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9ul8Yid4-XP3YpDOBSvh82frj4mVmNJcuknsj6yPupHZcMTyWSBatnNPa5tjKw-xZ_zVhCVvbZAoKEZQ7-JD7w8C5F3FIAzmgB9F1wwNVJAPNmd2KFzFIdecKeqrpGCWG1CoQ6eU0Y7c/s1600/huruf_t.png
    T
  21. Huruf U
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ_lTAL0edaO7_kEeoU0IKZm_00Y0hgVm4pXe3s-Oh-pL6Q8eotGVr44qQjwDJXo5EjUsJlEuKp369Kur-W4REgLk8yEzTw_GoIiL9XZl1kX5kGIMlvDVKK4PjsbNBeKgihdIJWcXt6WE/s1600/huruf_u.png
    U
  22. Huruf V
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYsy8_0rC81UilFSqpYSkycNDmtQiefvf9hk5NWQSHJEyNK_a1l0J8IRddb8WyIEPtaZt-0aLH0GzM0vcyQxNukaMQNRWt0PbHNx5U8IlEs3RniQ8nznX09FO-UEBqyNJthQ2w3YEVfnE/s1600/huruf_v.png
    V
  23. Huruf W
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVZ149Q01WsBsJvP3XJFBDaeVypQVCAbYoIhZj5ha6TeBz3xrgOc8i47AKep31F99ckePX5IYsc7AnQJkIvy6bQpt6J8Hl64yTx0uw-koTh-buu3AptO0zOO_ZTeAkv4rGP0WYibC6Q_M/s1600/huruf_w.png
    W
  24. Huruf X
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeGTNaIObNrM5IRy-nF32wSBaTJbWOOf8FYxOcxxJjFe25f0oiSyadShmZXEnS1qsKLOcmy9GvpH4xFZU-tc2Vut4jw0ACfctNct5qz3v6nYn2mDgwEzZOI-cKFJ1qPyrg0FRp4zIehXI/s1600/huruf_x.png
    X
  25. Huruf Y
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEineZH63JXSyDlaYQjhNFm-uD0XuPFraqdfhBSrYbgADpnow_z0xX_LaJtKf5fwH8PiylOkBTO-zTpX3iPFYnwh6bnF_OFqZ0NL9mYKQfy3hyK7gha07feNKKrX0GYBQx7ZdAldaJCQX8Y/s1600/huruf_y.png
    Y
  26. Huruf Z
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTzp5ceIF1ksGoaHmURSIExUtM-KSSS1VSExL1QyR7b77Tq6J9dTcUq98At7TILilJERgEnVctG1z9LggpGT-gNgxwyPBrpmQWD9uIjgkO9DDkRVavFDKF75RRZqhBiit1H-W2WmdHjDc/s1600/huruf_z.png
    Z
Pembahasan mengenai dropcap pernah diposting di blog ini, silahkan lihat di Dropcap, Membuat Huruf Pertama Tampak Sangat Besar.

Thumbnail abjad di atas, ga ada kredit atau link yang mengarah ke blog ini, jadi clear hanya untuk sedekah, mudah-mudahan, amin.

Lanjut baca »»

Saya dapati ada beberapa kawan blogger yang tidak berhasil memunculkan emoticon komentar seperti yang diutarakan pada postingan Tambah Emoticon pada Kolom Komentar Blog. Bukan berarti postingannya error, atau salah memasang kode, tetapi keanekaragaman template blog yang membuat hal tersebut tidak berhasil.

Untuk itu, kali ini saya mencoba berbagi tips agar emoticon berhasil muncul pada kotak komentar. Langkahnya antara lain:
  1. Lihat postingan kawan yang telah ada komentarnya
  2. Blok sebagian tulisan isi komentar, lalu tekan Ctrl + C (Copy), lihat gambar di bawah ini

    tips-tambah-emoticon-blog-sebelum
  3. Tekan Ctrl + U untuk membuka tab Page Source
  4. Tekan Ctrl + F (Find), lalu tekan Ctrl + V (Paste, tulisan yang tadi diblok)
  5. Lihat kode HTML yang dibuat Blogger pada tulisan yang diblok, seperti ini:
    <p id='bc_0_0MC' class='comment-content'>Postingannya bersambung gan :c:</p>
  6. Edit javascript yang telah diberikan pada artikel Tambah Emoticon pada Kolom Komentar Blog, pada tag dd - class - comment-body menjadi p - class - comment-content
  7. Simpan javascript, upload melalui Google Code dan catat URL nya, seperti
    http://moalmules.googlecode.com/files/comment-content-p-emoticon.js
  8. Sign in ke Blog - Template - Edit HTML - Lanjutkan
  9. Cari (Ctrl + F) kode </body>
  10. Pasang kode script dengan URL yang baru tadi diatasnya, seperti ini:
    <script src='http://moalmules.googlecode.com/files/comment-content-p-emoticon.js' type='text/javascript'/>
  11. Simpan Template dan Reload postingan yang telah ada komentarnya tadi
  12. Gambar di bawah menunjukan tips ini berhasil

    tips-tambah-emoticon-blog-sesudah
  13. Go Blogger.. Go Open Source.. Alhamdu.. lillah

Tips emoticon pada kotak komentar ini, telah berhasil saya praktekkan pada beberapa template bawaan Blogger, seperti:

Blogger Template Style
Name: Ethereal
Designer: Jason Morrow

Blogger Template Style
Name: Awesome Inc.
Designer: Tina Chen

Blogger Template Style
Name: Travel
Designer: Sookhee Lee

Lanjut baca »»

Memasang tab view atau tab switch lebih dari satu. Dengan sedikit modifikasi kode tab view pada artikel sebelumnya, kita bisa membuat tab view tersebut menjadi beberapa buah.

Lihat kode HTML berikut ini
<style type="text/css">
body {color: #444444; font-size: 13px; font-family: serif; margin: 10px; background: #F9F5EA;}
.TabView .Tabs { overflow: hidden; }
.Tabs a { float: left; text-align: center; padding: 5px 8px; text-decoration: none; }
.Tabs a:hover, .Tabs a.Active { background: yellow; text-decoration: none; font-weight: bold; }
.Pages { overflow: hidden; height: 75px; width: 395px; }
.Page { background: yellow; padding: 5px 10px; }
/* overflow: hidden berfungsi untuk tampil ok pd opera mini*/
</style>
<script src="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/moalmules/tabview.js" type="text/javascript"></script>
<!-- TabView1 -->
<div id="TabView1" class="TabView">
<div class="Tabs" >
<a>planetcaang</a>
<a>bumicaang</a>
<a>electro-study</a>
<a>elektronika</a>
</div>
<div class="Pages">
<div class="Page">TEST 1</div>
<div class="Page">TEST 2</div>
<div class="Page">TEST 3</div>
<div class="Page">TEST 4</div>
</div>
</div>
<script type="text/javascript">tabview_initialize('TabView1');</script>
<!-- TabView2 -->
<div id="TabView2" class="TabView">
<div class="Tabs" >
<a>planetcaang</a>
<a>bumicaang</a>
<a>electro-study</a>
<a>elektronika</a>
</div>
<div class="Pages">
<div class="Page">TEST 5</div>
<div class="Page">TEST 6</div>
<div class="Page">TEST 7</div>
<div class="Page">TEST 8</div>
</div>
</div>
<script type="text/javascript">tabview_initialize('TabView2');</script>
<!-- TabView3 -->
<div id="TabView3" class="TabView">
<div class="Tabs" >
<a>planetcaang</a>
<a>bumicaang</a>
<a>electro-study</a>
<a>elektronika</a>
</div>
<div class="Pages">
<div class="Page">TEST 9</div>
<div class="Page">TEST 10</div>
<div class="Page">TEST 11</div>
<div class="Page">TEST 12</div>
</div>
</div>
<script type="text/javascript">tabview_initialize('TabView3');</script>

Keterangan:
  • Copy paste kode HTML di atas dalam gadget HTML/JavaScript blog
  • Kode tersebut akan menghasilkan tiga buah tab view atau tab switch
  • Style CSS bisa kawan ubah sesuai dengan keinginan, misalnya color: #444444; menjadi color: red; ukuran font-size: 13px; menjadi font-size: 15px; atau ingin mengubah lebar tab view width: 395px; menjadi 250px;
  • Ganti judul tab view planetcaang, bumicaang, electro-study, dan elektronika dengan judul yang kawan inginkan
  • Ganti isi tab view (gadget) mulai dari TEST 1 s/d TEST 12, dengan gadget blog kawan
  • Semoga berhasil :sukses:

Lanjut baca »»

Tanggal 17 Februari 2011 lalu, saya menerima surat yang berisi PIN akun Google AdSense yang saya miliki. Kemudian saya tahu, bahwa Tim Google AdSense mengirim surat tersebut kepada publisher nya yang telah mendapatkan earnings lebih dari $10. Tapi apa lacur, setelah saya mendapatkan earnings lebih dari minimal pay out $100 tiba-tiba Tim Google AdSense membanned akun saya?

Terakhir saya sign in ke akun GA, tanggal 15 November 2011 dan mendapatkan nilai earnings all time sebesar $109.19. Katanya sih akhir bulan ini direview oleh tim GA dan awal bulan depan cair. Namun itu tadi, bukannya dicairkan, eh malah dibekukan pada pertengahan bulan tepatnya kemarin yaitu tanggal 19 November 2011: Google AdSense Account Disabled.

akun_GA_dibanned
Merana, Sungguh Merana, Kalau Dibanned Tim GA

Ibarat makan tanpa sambel, ngeblog tanpa GA terasa hambar kurang bergairah. Perjuangan mempertahankan blog ini seolah luntur, dengan hilangnya GA. Semangat membara membuat posting-posting baru lenyap.

Di sisi lain, Tim Google AdSense memberikan kesempatan kepada publisher nya yang dibanned, memperebutkan kembali akun GA dengan cara membuat pengajuan banding atas penonaktifan akun. Saya pun melakukannya, dan poin penting yang saya ambil seperti dibawah ini

Subject: Banding atas Kegiatan Tidak Sah
Date: Sun, 20 Nov 2011 13:58:30 +0000
. . . . .
31_InvalidActivity: mungkin melalui cbox atau guest book yang menulis seperti: dun 4get visit n kiss my ads back

Imbasnya gadget Buku Tamu CBox akan saya hapuskan. Walaupun kecil kemungkinan dengan pengajuan banding akun GA saya akan diaktifkan kembali, setidaknya masih ada usaha memperebutkannya.

Lanjut baca »»

Kali ini kita belajar CSS lagi, mengenai Image Transparency atau gambar transparan. Bagaimana teknik membuat gambar pada Blog terlihat memudar, seolah tidak jelas, namun jika mouse pointer diarahkan pada image tersebut, gambar yang terlihat memudar tadi akan berubah menjadi jelas.

Cara membuat Image Transparency atau gambar transparan, yaitu
  1. Sign in ke Blogger - Rancangan - Edit HTML
  2. Cari (gunakan Ctrl+F) kode img
  3. Ganti kode menjadi
    img{opacity:0.6; filter:alpha(opacity=60);}
    img:hover{opacity:1.0; filter:alpha(opacity=100);}
  4. Simpan Template dan lihat hasilnya

Kode CSS Image Transparency seperti diatas, berlaku untuk image pada semua bagian template, seperti gambar di sidebar, posting, atau footer. Namun ada kalanya pada bagian posting, CSS image mempunyai kode tersendiri seperti .post img atau .content img. Kita bisa memberlakukan CSS Image Transparency ini hanya pada bagian posting tersebut, caranya
  1. Masih pada Edit HTML Template, cari (gunakan Ctrl+F) kode .post img atau .content img
  2. Tambahkan kode berikut ini dibawahnya
    .post img.transparan{opacity:0.6; filter:alpha(opacity=60);}
    .post img.transparan:hover{opacity:1.0; filter:alpha(opacity=100);}
  3. Simpan Template
  4. Buat posting baru, upload gambar lalu tambahkan kode class="transparan" didalam <img ---- />, seperti
    <img class="transparan" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJNnWga68iyU_B-KVO7RZOfsPhx2U4sJeFtbY48R4U8OyFdeCk9Ed2T0ciUi0D6VGQOkJRLm-U9R2DzMElwl98nSMeJt5_w5bMkfhtwRpv7jxWTkY4V63ariINKYEgIENUIIqSSLREmZA/s400/linux+mint+caang1.jpg" alt="linux_mint_kang_caang" />
  5. Lihat dan arahkan mouse pointer pada gambar dibawah ini

    linux_mint_kang_caang
    Gambar default tanpa CSS Image Transparency


    linux_mint_kang_caang
    Gambar dengan sentuhan CSS Image Transparency

Lanjut baca »»

jam_angelina_jolieUntuk mempercantik tampilan blog, nggak ada salahnya bila kita memasang sebuah jam. Jam yang akan dipasang pada blog kali ini adalah jam analog bergambar artis Hollywood Angelina Jolie. Biarpun tampilan blog acak-adut, kalo kita pasang jam dengan background pemeran Julia Russell/Bonnie Castle dalam film Original Sin ini, pasti pengunjung akan seneng.

Cara memasang jam Angelina Jolie terbilang gampang, cukup copy paste pada gadget HTML/JavaScript sidebar atau header blog, kode dibawah ini
<embed src="http://fc03.deviantart.net/fs48/f/2009/189/1/e/clockwidget_by_blogclocks.swf?c=0xedffc4&p=http%3A%2F%2Fmoalmules%2Egooglecode%2Ecom%2Ffiles%2FAngelina%2DJolie%2D112%2Ejpg&a=0&s=2&r=1" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="120" height="120" wmode="transparent"></embed>
Perlu untuk diperhatikan, jam analog tersebut akan bekerja dengan baik bila komputer telah terinstal Flash Player 8 keatas.

Merasa tidak suka dengan artis yang juga istri orang (Brad Pitt) itu, lalu ingin jam artis lain seperti Megan Fox atau Luna Maya? bisa saja, silahkan kunjungi situs kawan saya wawazawa.

Lanjut baca »»

Tips blogging kali adalah bagaimana cara membuat 2 kolom pada sidebar blog. Sebelumnya saya ingin mengucapkan terima kasih kepada kawan blogger Riani Natalina, karena saya mendapatkan ide ini atas masukkan dari beliau, yang telah berkomentar di artikel Tambah Emoticon pada Kolom Komentar Template Blog.

Langsung saja, cara membuat 2 kolom pada sidebar blog atau menambahkan 2 kolom baru pada sidebar blog (contoh disini saya mengambil template blog bumicaang), yaitu:
  1. Sign in ke Blogger - Rancangan - Edit HTML
  2. Download Template Lengkap, untuk jaga-jaga bila terjadi kegagalan
  3. Cari (gunakan tombol Ctrl+F pada keyboard) kode #sidebar
  4. Berapa lebar kolom sidebar tersebut? disana saya dapati width: 350px; lalu sebagai acuan, 2 kolom baru pada sidebar harus lebih kecil atau samadengan lebar kolom sidebar ÷ 2, kemudian berikan perintah CSS dibawah #sidebar, seperti ini
    .sidebar1 {float: left; width: 170px; margin: 0; padding: 0;}
    .sidebar2 {float: right; width: 170px; margin: 0; padding: 0;}
    #sidebar-wrapper {float: left; width: 350px; margin: 0; padding: 0;}
  5. Cari kode
    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
    ----hingga----
    </b:section>
    </div>
  6. Tambahkan kode berikut diatas </div>
    <!-- tambah 2 buah sidebar -->
    <b:section class='sidebar1' id='sidebar1' preferred='yes'/>
    <b:section class='sidebar2' id='sidebar2' preferred='yes'/>
    <!-- /tambah 2 buah sidebar -->
  7. Simpan Template, lalu lihat di tab Elemen Laman

    sidebar_awal_blog_bumicaang
    Sidebar sebelum ditambah kolom baru


    sidebar_tambah_2_blog_bumicaang
    Sidebar setelah ditambah 2 kolom baru

Lanjut baca »»

Melanjutkan pembahasan mengenai dasar JavaScript, kali ini kita belajar mengenai bagaimana perintah atau kode HTML bisa diubah ke dalam JavaScript :sukses:.

Contoh:
  1. Copy kode HTML emoticon pada artikel Tambah Emoticon pada Kolom Komentar Template Blog <--lihat/klik
  2. Buka program aplikasi gedit atau pengedit JavaScript lainnya, lalu Paste
  3. Berikan perintah
    document.write("kode_html_disini");seperti pada pembahasan teknik penulisan JavaScript secara langsung, lalu edit menjadi satu baris atau tanpa ada enter pada tiap baris html
  4. Simpan file dalam ekstensi .js, seperti kode-emoticon.js lihat gambar dibawah ini

    html_jadi_javascript
  5. Upload file kode-emoticon.js melalui situs Google code dan simpan alamat url file tersebut
  6. Pada gedit buat dokumen baru, lalu tulis kode script menjadi
    <script type="text/javascript" src="https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/moalmules/kode-emoticon.js"></script>
  7. Kode script emoticon siap untuk dipasang
  8. Untuk mengetes kode JavaScript emoticon tersebut, silahkan coba pasang pada gadget HTML/JavaScript Blogger.

Lanjut baca »»

Previous