Cek Responsif Template Blog dengan Firefox

Responsif sebuah template pada blog memang merupakan nilai tambah bagi sebuah blog karena para pengunjung yang datang dari segala penjuru merasa nyaman mengunjungi blog kalian, dengan resolusi layar yang berbeda - beda, template akan menyesuaikan lebar agar pas dengan layar. Nah pertanyaannya bagaimana cara mengetahui templatenya responsif atau bukan ? Tak perlu ribet", gunakan Mozilla Firefox saja (saya sarankan yang versi terbaru). Karena di Firefox sudah terdapat beberapa tools pengembang web, salah satunya Responsive Design View. Bagaimana cara menggunakannya ? OK cekidot :

1. Buka blog kalian yang akan dicek responsifnya menggunakan firefox.

2. Klik tulisan firefox ada pojok kiri atas - Web Developer - lalu pilih Responsive Design View (atau Ctrl+Shift+M)

 3. Nah akan muncul Responsive Design View. Silakan pilih resolusi yang disediakan, lalu cek. Gunakan Rotate untuk mengubah orientasi.

Jika elemen blog tidak ada yang terpotong pada blog yang dicek, berarti memang responsive. Selamat :D

Semoga bermanfaat :)

Oleh Rama Adithya07.07

9

Selengkapnya

Cara Membuat Efek Gambar Berputar saat Mouse Lewat di Blog

Kembali lagi membagikan tips blogger, kali ini saya membagikan CSS efek gambar berputar saat mouse lewat. Untuk demo download dokumennya disini.

Sudah liat demo nya ? Jika kalian berminat ikuti langkah berikut :

1. Login ke akun blogger kalian, lalu pada dashboard klik menu dropdown dan pilih template

Biasakan backup template kalian sebelum mengedit template

2. Pada template klik 'Edit HTML'

 

 

3. Nah sekarang pada form edit template cari kode <b:skin> (Klik formnya lalu tekan Ctrl+F untuk pencarian)

4. Copy kode CSS dibawah lalu  paste dibawah kode <b:skin>

 

img {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
}

 

 

Catatan :

 - Angka berwarna merah bisa diganti, itu adalah nilai kecepatan transisi. 0.5s berarti waktu perputaran 0.5 detik.

- Angka berwarna oranye (360) bisa diganti, 360 berarti gambar berputar 360 derajat ke kiri. Bisa juga misalnya 27 derajat, berarti gambar menjadi miring. Atau tambah minus ("-") di depan angka untuk membalikkan arah perputaran. Contoh : -360deg berarti berputar ke kanan.

5. Setelah itu klik tombol Simpan template. Sekarang cek blog kalian..jika efeknya berhasil...selamat !! :)

Semoga bermanfaat..good luck :)

Oleh Rama Adithya10.39

8

Selengkapnya

Cara Membuat Efek Gambar Membesar saat Mouse Lewat di Blog

Jika sebelumnya saya sudah membagikan CSS efek gambar mengecil saat mouse lewat untuk blog, maka kali ini saya membagikan script CSS kebalikannya, yaitu efek membesar dengan transisi smooth. Jika kalian penasaran dengan efeknya silakan unduh dokumen HTML nya disini.

Bagaimana ? Jika kalian tertarik silakan ikuti langkah - langkah dibawah ini :

1. Login ke akun blogger kalian, lalu pada dashboard klik menu dropdown dan pilih template

Biasakan backup template kalian sebelum mengedit template

2. Pada template klik 'Edit HTML'

3. Nah sekarang pada form edit template cari kode <b:skin> (Klik formnya lalu tekan Ctrl+F untuk pencarian)

4. Copy kode CSS dibawah lalu  paste dibawah kode <b:skin>

img{
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;}

img:hover{
  overflow:hidden;
  -webkit-transform:translateY(-5px) scale(1.1);
  -moz-transform:translateY(-5px) scale(1.1);
  -o-transform:translateY(-5px) scale(1.1);
  -ms-transform:translateY(-5px) scale(1.1);}

5. Setelah itu klik tombol Simpan template. Sekarang cek blog kalian..jika efeknya berhasil...selamat !! :)

Semoga bermanfaat..good luck :)

Oleh Rama Adithya19.29

2

Selengkapnya

Blogger 2.0

Sekarang kalian tidak perlu lagi membutuhkan komputer atau laptop untuk membuat postingan blog, karena sekarang ada versi seluler yang membuat kalian dapat mempos dimana saja melalui ponsel.

Oleh Rama Adithya01.00

0

Selengkapnya

Cara Mengubah Warna Scrollbar di Blog

Selamat malam sobat droiders..kali ini saya berkesempatan untuk membagikan tips untuk blogger, yaitu Cara Mengubah Warna Scrollbar di Blog, bagi kalian sobat droiders yang mengunjungi blog ini lewat Google Chrome pasti melihat scrollbar yang berbeda dari biasanya, itu bukanlah kesalahan pada Chrome anda B) tapi custom scrollbar. Contohnya seperti di bawah :

Catatan : Cara ini hanya berlaku untuk Browser berbasis Chromium, seperti Chrome, Torch, Opera, dan lainnya.

Kalian tertarik untuk mengubah warna scrollbar di blog sobat ? Ikuti langkah berikut :

1. Login ke akun blogger kalian, lalu pada dashboard klik menu dropdown dan pilih template
Biasakan backup template kalian sebelum mengedit template

2. Pada template klik 'Edit HTML'

3. Nah sekarang pada form edit template cari kode <b:skin> (Klik formnya lalu tekan Ctrl+F untuk pencarian)

4. Copy kode CSS dibawah lalu paste dibawah kode <b:skin>

::-webkit-scrollbar {
height:12px;
width: 15px;
background: #b1b7bb; //warna background scroll
}
::-webkit-scrollbar-thumb {
background-color: #4f70b8; //warna scroll
}

Jika kalian ingin mengetahui warna yang lain silahkan gunakan tools Kode Warna HTML.

5. Setelah itu klik tombol Simpan template. Sekarang cek blog kalian..jika scrollbarnya telah berubah warna...selamat !! :)

Semoga bermanfaat..good luck :)

Oleh Rama Adithya21.26

2

Selengkapnya

Cara Membuat Efek Gambar Mengecil saat Mouse Lewat di Blog

Ini adalah postingan pertama saya yang tidak berhubungan dengan Android, melainkan tentang Blogger. Berhubung saya belum punya inspirasi untuk membuat postingan baru tentang Android, dan kebetulan ada ilmu ini, saya share saja :) siapa tau kalian sobat droiders ingin mempercantik blognya dengan efek ini.

Nah postingan kali ini saya akan membagikan kode CSS3 yang memberikan efek pada mouse lewat (baca:hover) yaitu gambar akan sedikit mengecil dengan efek smooth. Contohnya coba kalian arahkan mouse ke gambar dibawah ini :

Bagaimana ? Jika kalian tertarik silakan ikuti langkah - langkah dibawah ini :

1. Login ke akun blogger kalian, lalu pada dashboard klik menu dropdown dan pilih template

Biasakan backup template kalian sebelum mengedit template

2. Pada template klik 'Edit HTML'

3. Nah sekarang pada form edit template cari kode <b:skin> (Klik formnya lalu tekan Ctrl+F untuk pencarian)

4. Copy kode CSS dibawah lalu  paste dibawah kode <b:skin>

img {
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
transition: all 0.1s linear;
}
img:hover {
-webkit-transform: scale(0.95,0.95);
-moz-transform: scale(0.95,0.95);
-o-transform: scale(0.95,0.95);
-ms-transform: scale(0.95,0.95);
transform: scale(0.95,0.95);
}

5. Setelah itu klik tombol Simpan template. Sekarang cek blog kalian..jika efeknya berhasil...selamat !! :)

Semoga bermanfaat..good luck :)

Oleh Rama Adithya19.46

3

Selengkapnya