Tips Agar Emoticon Berhasil Muncul pada Kotak Komentar

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
   
   
   
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
    
    
    
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
Selengkapnya »»

Memasang Tab View atau Tab Switch Lebih dari Satu

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="http://moalmules.googlecode.com/files/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
• Demonya bisa kawan lihat di Tes Tab View Lebih dari Satu
• Semoga berhasil

Selengkapnya »»

Merana, Sungguh Merana, Kalau Dibanned Tim GA

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.

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.

Selengkapnya »»

Belajar dan Mengenal Lebih Banyak Distro Linux

Mengenal dan belajar Linux. Tahukah kawan berapa banyak distro Linux yang tersebar di seluruh penjuru bumi ini? ratusan! Ya, betul jawabannya memang ada beratus-ratus distro Linux yang tersedia di planet biru ini. Distro-distro Linux tersebut, sedianya dapat digunakan dan didistribusikan kembali secara bebas oleh siapa saja (GRATIS, Coy!), tinggal kitanya, mau nggak mengenal dan belajar sistem operasi yang berlogo seekor Pinguin tersebut?

Saya pernah mengupas beberapa distro Linux, diantaranya Linux Puppy dan Ubuntu. Ubuntu sendiri memiliki turunan-turunan, ada yang menjadi turunan resmi seperti: Kubuntu, Edubuntu, Xubuntu, Ubuntu Studio, Gobuntu, Mythbuntu, dan Ubuntu JeOS, ada juga yang merupakan turunan tidak resmi, seperti: Alinex, AndLinux, Fluxbuntu, Elbuntu, Freespire, GnewSense, Goobuntu, gOs, Hiweed Linux, Impi Linux, Linux Mint, Linux MCE, Maryan Linux, Molinux, Nubuntu, OpenGEU, OzOs, Protech, Ubuntu Muslim Edition, Ubuntu Satanic Edition, Ubuntulite, PC/OS, dan Blankon. Ada berapa tuh? yang pernah saya ulas saja ada sekitar 30 distro Linux. Kalau kawan mau distro Linux yang lebih banyak lagi silahkan kunjungi situs DistroWatch.com

Melalui situs DistroWatch.com, yang mulai dipublikasikan tanggal 31 Mai 2001, kita bisa mengetahui informasi dari beraneka ragam distro Linux, sehingga bisa disesuaikan dengan kebutuhan. Misalnya ingin Linux untuk bermain game ada linuX-gamers, perlu Linux untuk ilmuwan seperti agan ada Scientific Linux, atau perlu Linux yang ringan ada Linux Puppy atau Mint, dsb.

Distro-distro Linux terbaru pun, informasinya diterbitkan disana, seperti screen shot dibawah ini


Sekedar ingin tahu Linux apa yang paling populer dan menduduki rangking teratas? contohnya screen shot dibawah ini


Wow ane nggak nyangka, saat ini Linux Mint (distro yang ane gunakan) menduduki rangking 1 di DistroWatch.com, menggeser posisi Ubuntu yang tak lain adalah mbahnya. DistroWatch.com sendiri dikembangkan oleh Ladislav Bodnar, seorang pria kebangsaan Slovakia.

Selengkapnya »»

Edit Partisi Hard Disk untuk Dual Boot Windows dan Linux

Bila kita menggunakan Live CD atau Live USB Linux Puppy, Linux Ubuntu, distro turunan Ubuntu, seperti Kubuntu, Edubuntu, Xubuntu, Linux Mint dsb, disana akan terdapat sebuah aplikasi pengedit partisi hard disk yang bernama GParted.

GParted, Gnome Partition Editor

GParted is a free partition editor for graphically managing your disk partitions.

With GParted you can resize, copy, and move partitions without data loss, enabling you to:

Grow or shrink your C: drive
Create space for new operating systems
Attempt data rescue from lost partitions

Aplikasi GParted ini sama halnya dengan software Windows: PowerQuest Partition Magic, berguna untuk mengedit partisi hard disk, seperti membuat partisi baru, menghapus partisi, menambah atau mengurangi ukuran partisi. Jadi sebelum Linux Ubuntu diinstal ke dalam komputer, laptop atau netbook, disarankan untuk membuat partisi yang disiapkan untuk keperluan Linux tersebut.

PERINGATAN:

1. Back up data-data penting sebelum memulai pembutan partisi
2. Pembuatan partisi Linux mengambil dari partisi terakhir - data (drive D: atau drive E:) bukan dari partisi awal - sistem Windows (drive C:)

Partisi os seperti Windows dan Linux, banyak yang merekomendasikan untuk ditempatkan pada partisi yang terpisah. Hal ini untuk menghindari crash atau tertimpanya file-file sistem. Kita ambil contoh netbook yang memiliki dua sistem operasi, Windows dan Linux, partisi Windows, kita buat satu buah partisi sistem dan dua buah partisi data. Partisi Linux kita buat satu buah partisi sistem, satu buah partisi data, dan satu buah partisi swap (memory). Berapa total partisi dalam hard disk tersebut?

Kalo kita hitung sih, ada enam buah ya! namun ternyata ada tujuh partisi. Dalam hard disk ada istilah Primary partition dan Extended partition. Primary partition dibatasi hingga 4 buah partisi, lalu untuk membuat partisi ke-5, 6, 7, dst, pada Primary partition terakhir (ke-4) harus kita jadikan Extended partition. Dari Extended partition inilah kita bisa buat partisi ke-5, 6, 7, dst. Lihat screen shoot GParted dibawah ini

Partisi hard disk yang telah diedit untuk dual boot os, Windows dan Linux
Mengenai ukuran minimal partisi yang dianjurkan untuk keperluan dual boot, serta konsep file system yang akan digunakan (FAT, FAT32, NTFS, ext2, atau ext3) , silahkan baca di Linux dan Konsep Partisi Hard Disk.

Selengkapnya »»

CSS Image Transparency, Bagaimana Membuat Gambar Terlihat Memudar

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="http://1.bp.blogspot.com/_BXJ5hczKH1s/S4AL8pVM4yI/AAAAAAAAAmQ/cHPcAe0ipIA/s400/linux+mint+caang1.jpg" alt="linux_mint_kang_caang" />
5. Lihat dan arahkan mouse pointer pada gambar dibawah ini
   
   Gambar default tanpa CSS Image Transparency
   
   Gambar dengan sentuhan CSS Image Transparency

Selengkapnya »»