Trik Ricky: Tutorial Blog
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

24/04/19

Membuat Tampilan Blog Tidak Dapat Di Zoom (Perbesar)

Cara agar tampilan blog tidak bisa di zoom

Jika kalian sedang mampir di artikel kali ini pasti kalian pernah melihat atau mengunjungi blog atau web yang tidak bisa di zoom ketika layar di gesek ke arah yg berlawanan. Nah mungkin juga ingin blognya agar tidak dapat diperbesar, gimana sih caranya.

Hmm sebenarnya cara ini gak begitu sulit, hanya sayangnya banyak para newbie yang tidak tau caranya bagaimana membuat blog yang tidak dapat di zoom ketika di perbesar. Untuk membuat blog terkunci dan tidak dapat diperbesar, kamu cukup menambahkan atau mengganti kode yang sudah ada di template kamu dengan kode dibawah ini, biasanya kode ini terletak di atas <head>

<meta charset='utf-8'/>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

Silakan backup terlebih dahulu template kamu sebelum menggantinya dengan kode diatas, jika sudah buka edit HTML dan cari kode <head> (kode ini ada di bagian paling atas).

Jika sudah, simpan kembali dan lihat hasilnya? Apakah blog kamu masih bisa dizoom?
Sisipkan jawabanmu di bawah ya..

23/11/18

Perbaikan Thumbnail Gambar Blur Pada Widget Popular Post

Perbaikan thumbnail Gambar Blur di blog

Thumbnail blur atau gambar buram pada blog merupakan masalah yang serius bagi kebanyakan blogger, tentu saja hal ini pasti membuat tampilan blog jadi kurang menarik dan profesional. Gambar buram umumnya sering terjadi pada widget popular post maupun recent post. Meski tak jarang halaman homepage pun sering mengalami hal seperti ini.

Untuk itu kali ini saya akan sedikit berbagi cara Memperbaiki Thumbnail Gambar yang buram pada popular post blogger. Nah simpel saja, untuk memperbaikinya pun tidak begitu sulit, kamu hanya cukup mengubah resolusi gambar seperti yang saya pernah terapkan pada template blog yang saya gunakan saat ini.

Perbaikan Thumbnail Gambar Buram Pada Popular Post


Monggo, buka template editor dan temukan kode berikut.

data:post.featuredImage, 72, "1:1"

72 merupakan tinggi dari gambar utama yang muncul pada popular post dan 1:1 adalah perbandingan resolusi gambar.

Silakan ubah angka 72 menjadi 200 atau 300 dan 1:1 menjadi 2:1 atau 3:2 (coba satu persatu). Jika sudah simpan kembali template dan coba lihat hasilnya.

Cara ini 100% berhasil ketimbang cara yang lainnya yang pernah saya temui di beberapa blog, seperti dengan menbahkan JS dan lain-lain.

Demikian semoga apa yang bisa saya share kali ini mengenai Perbaikan Thumbnail Gambar Blur Pada Widget Popular Post bermanfaat. Happy blogging!

29/10/18

Sederhana! Cara Membuat Tabel Didalam Postingan Blog

Kode CSS membuat tabel diblog

Tabel merupakan susunan data dalam baris & kolom, atau mungkin dalam struktur yang lebih detail. Tabel umumnya banyak digunakan dalam komunikasi, penelitian, dan analisis data. Tabel sering muncul di media cetak, tulisan, perangkat lunak komputer, arsitektur hiasan, dan lain-lain, termasuk salah satunya di dalam postingan blog atau website.

Tabel juga sering di gunakan di blog maupun website yang isi artikelnya berisi daftar suatu susunan data, agar tabel terlihat rapi dan nyaman di lihat sang pengunjung tentu kita harus memodifikasinya dengan bantuan CSS. Nah jika kamu ingin memodifikasi tabel di blog seperti tabel di Blog saya ini, Kamu bisa ikuti langkah-langkah berikut:

Membuat Tabel Didalam Postingan


Login Ke dasbor blogger dan buat edit HTML. Tambahkan kode CSS berikut tepat di atas </style> yang pertama.

/* Post Tabel */
.post-body table{width:100%}
.post-body table td,.post-body table caption{background:#fff;border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top}
.post-body table th{background:#0591bc;color:#fff;border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top}
.post-body table.tr-caption-container{background:#fff;border:1px solid #e9e9e9;margin:0}
.post-body th{font-weight:700}
.post-body table caption{border:0;font-style:italic}
.post-body td,.post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #97b28e}
.post-body th:hover{background:#d2d2d2}
.post-body table tr:nth-child(even)>td{background-color:#f9f9f9}
.post-body table tr:nth-child(even)>td:hover{background-color:#fbfbfb}
.post-body td a{color:#444}
.post-body td a:hover{color:#cf4d35}
.post-body table.tr-caption-container td{border:0;padding:0;background:#fff;line-height:17px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:#000}
.post-body table.tr-caption-container,.post-body table.tr-caption-container img,.post-body img{max-width:100%;height:auto}
.post-body li{list-style-type:circle}
.post-body td.tr-caption{font-size:85%;padding:10px !important}

Simpan dulu CSS diatas.

Untuk membuat tabel didalam postingan blog silakan tambahkan kode html berikut pada mode HTML (bukan compose).

Cara Membuat Tabel Didalam Postingan Mode HTML

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Type</th> <th>Persentasi</th><th>Unit</th> </tr>
<tr> <td>Samsung</td> <td>25.5 %</td> <td>2.3 Juta</td></tr>
<tr> <td>Xiaomi</td> <td>18.3 %</td><td>1.7 Juta</td> </tr>
<tr> <td>Oppo</td> <td>16.8 %</td><td>1.5 Juta</td>  </tr>
<tr> <td>Vivo</td> <td>6.5 %</td><td>600.000</td>  </tr>
<tr> <td>Smartfren</td> <td>5.6 %</td><td>520.000</td>  </tr>
</tbody> </table>

Coba pratinjau untuk memastikan tabel telah tersusun rapi. Untuk tabel di atas kamu bisa lihat review-nya disini.

Demikian Cara Membuat Tabel Didalam Postingan Blog pada kesempatan kali ini, moga bermanfaat.

28/03/18

Cara Paling Gampang Edit HTML Via Smartphone

Cara Paling Gampang Edit HTML Via Smartphone

Sebagai seorang blogger pastinya kamu tidak asing dengan yang namanya HTML. HTML atau Hyper Text Multi Laguage adalah bahasa pemrograman yang terdiri dari rangkain dan kode-kode khusus seperti huruf, angka maupun karakter tertentu.

Hypertext Markup Language juga merupakan sebuah bahasa markah yang digunakan untuk design sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. (Sumber: Wikipedia)

Jadi dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML

Untuk mengedit HTML di blogger biasanya kita dapat melakukannya dengan masuk ke dasboard blogger > Theme > Edit HTML, namun hal ini tentu hanya bisa di akses dengan menggunakan Komputer. Lalu bagaimana jika kami ingin mengedit dengan menggunakan Smartphone???

Jika Kamu membuka dasbord blogger dengan smartphone tentu bisa saja namun screen yang di tampilkan hanya support tampilan desktop. Hal ini pasti akan sedikit menyulitkan pandangan mata kamu.

Apalagi jika kita ingin mengedit HTML untuk merubah tampilan blog, setelah tampilan Kode2 HTML tersebut terbuka kita tidak dapat melakukan hal-hal yang biasa diakukan ketika mengunakan dekstop seperti mengedit maupun menghapus kode-kode tertentu yang kita inginkan.

Untuk bisa mengedit file HTML kamu perlu menambahkan aplikasi tambahan yang bisa membuka file dan mengedit file HTML dengan mudah. Dari dari sekian banyak aplikasi sejenis yang sudah saya coba, saya rekomendasikan sebaiknya kamu menggunakan aplikasi Quick Edit.

Lalu bagaimanakah cara menggunakannya agar kamu dapat dengan mudah mengedit file HTML, CSS maupun JavaScript untuk merubah design blog atau website? simak aja Cara Paling Gampang Edit HTML Via Smartphone berikut ini.

Cara Edit HTML Dengan Quick Edit


Buka smartphone kamu dan lakukan langkah-langkah berikut:

  • Langkah Pertama Download dan instal terlebih dahulu aplikasi Quick Edit di Google Play Disini atau jika ingin Versi Premiumnya (Tanpa iklan) saya punya File Apk nya (Quick Edit V1.3.5) silakan Unduh Disini.
  • Download Template/Tema blog yang ingin kamu edit.
  • Buka file tema yang kamu download tadi.
  • Edit sesuai keinginan anda.
  • Simpan kembali.
  • Upload kembali Tema yang kamu edit tadi ke blog.
  • Selesai

Backup template kamu sebelum mengedit dengan Quick Edit dengan cara mengcopy filenya menjadi 2 bagian, 1 untuk edit, 1 untuk backup.

Nah untuk memudahkan kamu mencari kode-kode tertentu Tap tiga titik di pojok kanan atas dan ketik HTML, CSS, maupun Script ingin kamu edit.

Upps bagaimana? Mudah sekali bukan. Jika ada kesulitan, sisipkan komentarmu yah dibawah. Selamat mencoba. 

01/01/18

Dukungan Https Kini Sudah Tersedia Untuk Custom Domain Blogger

Dukungan Https Kini Sudah Tersedia Untuk Custom Domain Blogger

HTTPS merupakan singkatan dari Hypertext Transfer Protocol Secure adalah protokol komunikasi internet yang memiliki fungsinya melindungi integritas dan privasi data pengguna antara komputer pengguna dan situs/web/blog yang dikunjungi.

Pengguna internet Zaman Now tentu menginginkan penelusuran yang aman dan bersifat pribadi saat menggunakan mengunjungi sebuah situs/web/blog agar privasi mereka terlindungi selama terkoneksi dengan jaringan initernet. HTTPS Zaman Now ini tentu sangat baik menjalankan fungsinya sebagai media untuk melindungi koneksi/jaringan si pengguna internet itu sendiri ke situs/web/blog.

Bila kita mengakses dasboard blogger melalui www.blogger.com tentu menu pilihan untuk setting HTTPS suport ini belum muncul, dan untuk membukanya kita harus mengakses alamat draft.blogger.com dengan cara pilih setelan > dasar dan lihat bagian kanan pilihan yang ada seperti gambar berikut:

Setting Https Untuk Custom Domain Blogger

Berikutnya aktifkan HTTPS Availability dengan memilih YES pada kolom pilihan, halaman dashboard akan te-refresh otomatis yang kemudian akan masuk ke proses pengalihan url yang semula HTTP dan akan di alihkan ke HTTPS atau menunggu HTTPS aktif (lihat gamabar)

Proses Pengalihan Http ke Https Untuk Custom Domain Blogger

Dalam mode pilihan diatas untuk beberapa saat blog tidak bisa diakses. Tak perlu khawatir, pengalihan url dari HTTP ke HTTPS hanya sebentar, setelah menu pilihan kedua "Https redirect" sudah bisa diklik, pilih juga "Yes" pada pengaturan ini. Lihat gambar dibawah ini:

Proses Redirect Http ke Https Berhasil

Jika pemgaturan sudah disetting seperti gambar diatas maka blog sudah kembali bisa diakses, tentunya url blog juga sudah berubah menjadi HTTPS. Jadi Jika ada link di blog awalnya menggunakan url Http maka otomatis akan dialihkan ke Https, begitu juga jika ada pengunjung yang mengakses dengan url blog yang lama dan masih menggunakan Http maka otomatis alan dialihkan ke HTTPS.

Di samping itu juga untuk anda yang menggunakan adsense maka adsense anda yang biasanya tayang dengan normal akan hilang/blank beberapa saat, namun anda tak perlu khawatir, masalah ini tak akan berlangsung lama, adsense membutuhkan waktu beberapa saat dan akan otomatis nantinya untuk menyesuaikan iklan yang mendukung Https.

Dalam hal ini juga ada beberapa hal yang wajib dilakukan setelah Https aktif diantaranya adalah:

  • Ganti semua Url lama yang di edit di Html dengan cara masuk ke edit HTML, tekan Ctrl + Shif + R untuk memunculkan kotak di pojok kanan atas.
  • Ketikan url lama anda yang masih menggunakan Http pada kolom yang muncul kemudian tekan Enter (http//:www.namadomainanda.com)
  • Ketikan https//:www.namadomainanda.com dan tekan Enter kembali.
  • Periksa template blog anda untuk mixed content. Jika Https blog anda masih berwarna abu-abu artinya menandakan template blog memiliki mixed content, tentu hal ini harus diperbaiki agar HTTPS berubah warna menjadi hijau. Semua Url js dan gambar menggunakan Https dan dapat diakses dengan normal.
  • Rubah url sitemap di robots.txt menjadi Https. Sebelumnya Tambahkan dulu properti baru di Search Console untuk nama domain anda dengan awalan Https
  • Selesai

Demikian Tutorial Blogger kali ini mengenai Dukungan Https Kini Sudah Tersedia Untuk Custom Domain Blogger. Semoga apa yang bisa saya share kali ini bermanfaat, salam hangat.

18/12/17

Auto Redirect Ketika Blog Diakses Dengan UC Browser & Opera Mini

Auto Redirect Ketika Blog Diakses Dengan UC Browser & Opera Mini

Makin banyaknya pengguna smartphone yang menggunakan Browser anti iklan atau Adblock seperti Uc browser dan opera mini membuat kita galooou sebagai blogger yang menggaet penghasilannya dari iklan yang kita tayangkan.

Untuk mengatasi hal tersebut cara yang paling jitu saat ini adalah Memblokir dan mengalihkannya secara otomatis ke browser Google chrome agar iklan kita dapat tampil dengan baik saat blog dibuka dan diakses oleh pengunjung.

Cara ini adalah cara paling mujarab ketimbang Cara yang pernah saya bagikan sebelumnya di Artikel yang berjudul Trik Memblokir Pengunjung ketika blog di buka dengan UC browser.

Sederhana, dengan cara ini pengguna tidak lagi menemukan notifikasi apapun seperti cara ysng pernah saya share sebelumnya ketika pengunjung mengakses blog kita dengan Uc browser dan Opera mini. Jika pengunjung terdeteksi membuka blog kita dengan salah satu dari ke dua browser tersebut maka akan langsung di alihkan ke browser nomor 1 google yaitu Chrome.

Penasaran gimana caranya? Now.. Penerapannya adalah sebagai berikut:

1. Buka Template editor.
2. Tambahkan ke 2 JavaScript dibawah ini tepat di atas </head>

Script Redirect Otomatis UC browser


<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<script type='text/javascript'>
//<![CDATA[
var findmove1 = navigator.userAgent;
var redirect = findmove1.search("UCBrowser");
if(redirect>1) {
var queries1 = window.location.assign("googlechrome://navigate?url="+ window.location.href);
var activity = queries1;document.getElementsByTagName('head')[0].appendChild(activity);
}
//]]>
</script>
</b:if>

Script Redirect Otomatis Opera Mini


<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<script type='text/javascript'>
//<![CDATA[
var findmove2 = navigator.userAgent;
var redirect = findmove2.search("Opera Mini");
if(redirect>1) {
var queries2 = window.location.assign("googlechrome://navigate?url="+ window.location.href);
var activity = queries2;document.getElementsByTagName('head')[0].appendChild(activity);
}
//]]>
</script>
</b:if>

Jika sudah jangan lupa simpan kembali template dan silakan coba buka blog anda sendiri dengan ke dua browser tersebut.

Demikian, Semoga Auto Redirect Ketika Blog Diakses Dengan UC Browser & Opera Mini ini dapat meningkatkan penghasilan adsense anda karena setelah ini blog anda tetap dapat menampilkan iklan meskipun endingnya harus di alihkan ke browser bawaan mbah google itu.