Membuat Warna Tansparan Pada Blog

Imamz Sabtu, 21 Juli 2012 1 Comment

Klik untuk Memperbesar (ini blog kedua saya)

Dari tiap lapisan background, jika kita memberi background warna transparan untuk lapisan background didepannya dan lapisan dibelakangnya merupakan background warna, tidak akan berpengaruh banyak, hanya akan merubah warna hasil percampuran warna lapisan depan dan belakang, berbeda jika lapisan belakangnya memiliki objek gambar (background gambar) atau adanya teks, tentu gambar atau teks tersebut akan terlihat tembus pandang atau transparan.

Sebagai contoh objek yang akan diperlihatkan adalah teks (seperti dalam bagian post ini kalau belum saya rubah), pada bagian post tersebut saya memberi warna background dengan warna hitam dan objek teks berwarna hitam, tanpa pemberian efek transparan (transparent) tentu objek teks-nya tidak akan terlihat, karena tertutup warna background.

Bagaimana Cara Memberi Efek Transparan Pada Background Warna

Dalam pengkodean warna css dalam template blog, biasa menggunakan kode HEXseperti ini #000000 yang merupakan kode untuk warna hitam, jika kita menggunakan kode hex dalam background tidak akan memberikan warna yang transparan terhadap objek teks. Untuk memberikan efek transparan terhadap objek teks, kita harus merubah pengkodean warna hex dengan warna RGBA, warna hitam untuk rgba adalah (0, 0, 0,), dengan pengkodean warna (0, 0, 0,) tidak akan menghasilkan warna yang transparan, kita harus tambah perintah opacity dibelakang kode, sebagai ilustrasi saya gambarkan seperti dibawah ini :

background: rgba(0, 0, 0, 0.2);

Keterangan:

• Warna Merah merupakan kode rgba untuk warna hitam, sedangkan kode tambahan yang berwarna biru merupakan kode untuk transparansi.
• Nilai kode opacity adalah antara 0.1 - 1. (Semakin kecil nilai opacity, makan akan semakin transparant)

Oke, sekian dulu turorial blogging dari saya. Semoga tips diatas bermanfaat untuk anda...

Membuat Komentar Admin Berbeda Dengan Komentar Pengunjung

Imamz 3 Comments

Sebenarnya sudah lama Saya mau Posting Tips ini, namun karena terlalu banyak Tips Blogging yg belum ke Publis, jadinya Saya bingung mau Publis yang mana, jadi hari ini Saya putuskan Publis yang ini aja. OK, lanjut kita ke langkah-langkahnya.

• Pertama, seperti biasa, Login dulu ke BLOG Kalian masing2.
• Kemudian dari Dasbor, cari Template --> Edit HTML.
• Kalau sudah, sekarang cari Code </body>. (Gunakan CTRL + F atau F3 untuk mempermudah pencarian).
• Kalau sudah ketemu, sekarang Copy Code di bawah ini tepat di ATAS Code </body>.

HTML

<script src='http://jmkjs.googlecode.com/files/Admin.js'/>
<!--admin comment -->
<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('border', '1px solid #000000')
.css('background','#3399FF url("https://d592ae48-a-62cb3a1a-s-sites.googlegroups.com/site/rakasajmk/home/page-3/Admin.png") no-repeat bottom right')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>
<!-- admin comment end-->

• Dan terakhir, tinggal di SIMPAN dan lihat hasilnya. 

KETERANGAN :
* Code yang berwarna Biru, Kalian bisa menggantinya dengan warna Garis Pinggir dan warna Backgroundnya.
* Dan URL yang berwarna Hijau, Kalian bisa menggantinya dengan URL Gambar Kalian.

OK, sekian Tips Blogger kali ini dan semoga Tips kali ini bermanfaat buat Kalian semua.

Cara Membuat Efek Berputar dan Zoom di Gambar Postingan

Imamz 0 Comments

Sebagai contoh Kalian bisa melihat pada blog lain yang memasang efek ini dan ketika disorot kursor Kalian ke arah gambar, akan berputar. OK, ditak usah berlama-lama, kita langsung ke langkah-langkahnya.

• Pertama, pastinya LogIn dulu ke BLOG Kalian.
• Kemudian dari Dasbor, cari Template --> Edit HTML.
• Lalu tekan Tombol CTRL + F atau F3 pada Keyboard, dan cari Code ]]></b:skin>.
• Kemudian Copy Code di bawah tepat di ATAS Code ]]></b:skin>.

CSS

.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}
.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}

• Terakhir tinggal di SIMPAN dan lihat hasilnya.

OK, sekian Tips Blogger kali ini, semoga Tips ini bermanfaat buat Sobat Blogger semuanya.

Cara Menghilangkan Icon Pensil di Postingan

Imamz 5 Comments

Kali ini Saya akan membahas tentang Cara Menghilangkan Icon Pensil Di Postingan. Seperti terlihat pada gambar di bawah ini.

Langkah-langkahnya sebagai berikut :

• Pertama-tama Login dulu ke Blog Kalian
• Dari Dasbor klik "Rancangan" atau "Setting"

• Kemudian, pada bagian "Dasar" cari bagian "Tampilkan Editing Cepat di Blog Anda?". Lihat gambar di bawah.

• Kemudian tinggal di pilih "Ya" atau "Tidak".
• Terakhir tinggal di "SAVE" dan lihat hasilnya, Icon Pensil pada Postingan Kalian sudah hilang.

Selamat Mencoba...!!!

Cara Membuat Auto Reload/Refresh pada Blog

Imamz 7 Comments

Kali ini Saya akan memberikan Tips Blogger yaitu "Cara Membuat Auto Reload pada Blog". Seperti pada judul kali ini, Blog kita akan Nge-Reload atau Nge-Refresh dengan sendirinya, dengan waktu yang kita tentukan. Tips ini juga bermanfaat untuk menyegarkan Blog kita. Bagaimana, Kalian tertarik...? Kalau tertarik, silahkan ikuti langkah-kangkah di bawah ini.

• Pertama, pastinya Login ke Blog Kalian masing2.
• Dari Dasbor, cari Rancangan --> Edit HTML.
• Ketiga, cari Code <head>. [Gunakan CTRL + F atau F3 pada Keyboard untuk mempermudah pencarian].
• Kalau sudah ketemu, sekarang Copy dan Paste-kan Code di bawah ini, tepat di BAWAH Code <head>.

<meta http-equiv="refresh" content="300"/>

• Terakhir, tinggal di SAVE. Dan coba Kalian lihat hasilnya.

KETERANGAN :
* Angka yang berwarna Hijau, menunjukan lama waktu Blog kita akan me Refresh. 300 artinya 300 detik atau 5 menit. Kalian bisa menyesuaikannya dengan keinginan Kalian.