Cara memperbaiki gadget komentar blogger yang tidak muncul

Bila anda pernah mencoba fitur komentar Google+ pada blog anda dan akan kembali ke komentar bawaan pasti akan menemui komentarnya tidak muncul. Fitur komentatr G+ menonaktifkan komentar bawaan tetapi tidak mengembalikan komentar bawaan seperti semula saat tidak menggunakan fitur G+.

 Saya pernah mendapati gadget komentar blogger saya hilang, tidak muncul setelah memasang dan mencopot komentar G+. Saya sempat menyerah juga mengatasi hal ini, saya mengakalinya dengan memasang gadget komentar disqus. Setelah memasang gadget disqus entah mengapa perasaan ko masih kurang sreg, masih penasaran bagaimana caranya memunculkan kembali gadget komentar yang asli. Mungkina anda juga sudah kesana kemari dengan tutorial yang tidak berhasil.

Berikut cara mengatasi komentar yang tidak muncul, sebelum memasang komentar G+, komentar tidak ada masalah dan ketika beralih dari komentar G+ ke komentar bawaan.

Silahkan buka pada pos editor, buka pada Pilihan.

Setelah dibuka ternyata setelan komentar tidak diperbolehkan berkomentar dan disembunyikan. Ternyata disini letak masalahnya, gara-gara komentar G+.












kita setel ke Izinkan kembali lalu perbarui pos. Kalau jumlah posnya banyak repot juga ya?

Read More

Cara membuat efek zoom otomatis pada gambar posting blog

Untuk membuat blog lebih menarik kita perlu menambahkan efek-efek khusus agar berkesan bagi para pembaca blog kita. Sekarang saya mau berbagi tips cara membuat efek zoom otomatis pada gambar postingan blog. Saat pointer mouse berada diatas gambar maka gambar akan membesar. Trik ini tidak susah cukup memasukkan kode CSS tambahan ke skin template anda.

Sekarang buka akun blogger masuk ke template > edit HTML.

Cari .post-body img diantara <b:skin> dengan </b:skin>, tekan Ctrl+F agar mudah dalam mencari.

Kemudian sisipkan kode berikut dibawah tanda kurung penutup "}" .post-body img :

.post-body img:hover {
transform: scale (2,4);
-ms-transform: scale (2,4);
-moz-transform: scale (2,4);
-webkit-transform: scale (2,4)
-o-transform: scale (2,4);
}

Penjelasan :
transform adalah properti dasar/atau dasar untuk membuat transformasi gambar berlaku untuk peramban selain Chrome, Safari, Mozilla, Opera, IE9.

-ms-transform adalah properti yang didukung oleh Internet Explorer 9.

-webkit-transfrom adalah properti yang didukung oleh peramaban Chrome dan Safari.

-moz-transform adalah properti yang didukung oleh peramban Mozilla.

-o-transform adalah properti yang didukung oleh peramban Opera.

scale (2,4) mengubah gambar dengan skala 2 kali lebar dan 4 kali tinggi dari aslinya, secara teori begitu tetapi peramban juga tetap menjaga resolusi gambar agar tetap tidak rusak.

Tidak semua template menggunakan class .post-body img bisa juga menggunakan .post img atau bisa juga yang lain tergantung pembuat template blog anda.

Read More

Cara membuat sudut melengkung dengan CSS3

Membuat sudut melengkung (rounded corner ) menggunakan CSS itu mudah.

blok ini seharusnya mempunyai sudut melengkung

Kode untuk membuat sudut melengkung dengan CSS adalah border-radius. Sisipkan sintak border-radius pada class CSS yang dimaksud. Contoh :

.contoh {
display:block;
border-radius:20px;
background:#aaaaaa;
color:#ffffff;
padding:10px;


Berhubung masing-masing peramban web menerapkan baku yang berbeda maka kita harus menambahkan kode awalan agar didukung oleh masing-masing peramban.
-moz- untuk peramban Mozilla Firefox
-o- untuk peramban opera
-webkit- untuk peramban Chrome dan Safari

.contoh {
display:block;
border-radius:20px;
-moz-border-radius:20px;
-o-border-radius:20px;
-webkit-border-radius:20px
background:#aaaaaa;
color:#ffffff;
padding:10px;


Untuk membuat sudut asimetris anda bisa menggunakan sintaks berikut

/* mozilla */
-moz-border-radius-topleft:15px; /* sudut kiri atas */
-moz-border-radius-topright:50px; /* sudut kanan atas */
-moz-border-radius-bottomleft:15px; /* sudut kiri bawah */
-moz-border-radius-bottomright:50px; /* sudut kanan bawah */
-moz-border-radius:10px 15px 15px 10px; /* ringkas ataskiri ataskanan bawahkanan bawahkiri */

/* chrome , safari */
-webkit-border-top-left-radius:15px; /* sudut kiri atas */
-webkit-border-top-right-radius:50px; /* sudut kanan atas */
-webkit-border-bottom-left-radius:15px; /* sudut kiri bawah */
-webkit-border-bottom-right-radius:50px; /* sudut kanan bawah */


mumulala

Selain untuk membuat sudut melengkung pada block juga bisa diterapkan untuk membuat sudut melengkung pada gambar.

Read More

Cara membuat iklan melayang kiri dan kanan website

Jika anda menggunakan template website atau blog sebagian dari layar artinya tidak fullscreen maka akan ada ruang kosong disisi kiri dan kanan. Nah ruang kosong ini bisa kita manfaatkan untuk menempatkan iklan. Keuntungan dengan menempatkan iklan disisi kanan atau kiri adalah tidak mengganggu kenyamanan pengunjung, tetapi kekurangannya adalah jika anda menggunakan iklan PPC kemungkinan di klik agak kecil. Pilihan ada ditangan anda sendiri.

Berikut adalah sintak CSS untuk membuat gambar atau iklan melayang kiri atau kanan walaupun layar digulung ke atas dan ke bawah, gambar atau iklan akan tetap diam pada posisinya.

1. Melayang kiri
Pastikan tidak ada tautan yang tersembunyi dibawah iklan.

Sisipkan kode berikut pada bagian CSS atau skin dibawah ini

.layangkiri {
left: 0px;
position: fixed;
text-align: center;
top: 0px;
}



Untuk mengubah posisi vertikal (ke bawah & ke atas) edit pada bagian top: 0px;
Ubah nilai top : 10px; untuk menurunkan posisi 10 pixel
Ubah nilai top : -10px; untuk menaikkan posisi 10 pixel

Untuk menerapkannya tambahkan kode berikut pada template anda atau tambahkan sebagai gadget pada blog.


<div class="layangkiri">kode iklan anda</div>



2. Melayang kanan

Hampir sama dengan melayang kiri sisipkan kode CSS berikut

.layangkanan {
right: 0px;
position: fixed;
text-align: center;
top: 0px;
}


Untuk menerapkannya tambahkan kode berikut pada template anda atau tambahkan sebagai gadget pada blog.

<div class="layangkanan">kode iklan anda disini</div>

Read More

Cara membuat widget slide-out CSS

Teknik untuk membuat widget slide out ini hanya menggunakan CSS tanpa javascript. Kode CSS dan HTMLnya sederhana

Ketika posisi mouse diatas gambar maka akan muncul slide widget.

HTML

<div id="slideout">
  <img src="url gambar"  />
  <div id="slideout_inner">
    [masukkan kode widget disini]
  </div>
</div>

 CSS

#slideout {
  position: fixed;
  top: 40px;
  left: 0;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#slideout_inner {
  position: fixed;
  top: 40px;
  left: -250px;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
#slideout:hover {
  left: 250px;
}
#slideout:hover #slideout_inner {
  left: 0;

Masukkan kode CSS di atas kode ]]></b:skin> pada template blogger anda.

 Untuk memodifikasi background abda bisa mengedit #slideout_inner. Untuk posisi edit top: 40px menjadi yang anda inginkan.

Nah sekarang bisa dicoba.

Read More

Cara mudah menambah efek glossy dengan CSS 3

Jika kita terinspirasi dengan tampilan iDevice yang silau. Kini kita dapat menerapkannya di blog kita sendiri.

langsung saja kita mulai membuat efek glossy dengan CSS. Saya akan menggunakan cara yang termudah karena saya sendiri tidak ada latar belakang webdesain.

1. Sekarang kita menuju Gradient Editor

2.

Pilih salah satu template gradien yang anda suka. Jika tidak ada yang sesuai keinginan kita bisa membuat gradien dengan warna pilihan sendiri. 

Kita ambil contoh yang hitam saja. Biar lebih mudah, kita mulai dari awalr saja. Hapus titik-titik yang dibawah sehingga menjadi hitam seperti gambar dibawah ini. Cara menghapusnya klik pada penunjuk lalu klik tombol delete. Penunjuk yang di atas untuk mengatur transparansi sedangkan penunjuk yang dibawah adalah batas untuk warna.

Menambah efek glossy putih.
Kita akan membuat glossy hitam dengan putih.

Klik penunjuk kiri bawah lalu klik Color kemudian pilih warna putih. Buat penunjuk kedua beri warna hitam.

Untuk memperlebar jangkauan glossy kita set nilai Location titik kedua.

Sekarang kita sudah bisa menambah efek glossy yang sederhana. Untuk efek lebih banyak anda bisa menambahkannya lagi.

Sekarang kita sudah mendapatkan kode CSS glossy. Centang IE9 Support agar bisa tampil bagus pada peramban Internet Explorer. 

Kita sudah mendapatkan kode CSS glossy. Sekarang kita tinggal menambahkan class pada kode CSS tersebut. misal .glossy { kode css }. Untuk menerapkannya dengan HTML berikut <div class="glossy"> kode HTML</div>

Read More