Bung Benk

23/11/18

      Comment   

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!

17/10/18

     

Cepat Terindeks! Cara Submit URL Di Search Console Baru

Submit url artikel blog di webmaster

Belum lama ini google telah mengubah tampilan webmaster menjadi lebih baik, dengan menu yang lebih ringkas dan simple mungkin banyak di antara pembuat website atau blog bingung bagaimana cara submit url di webmaster baru agar tiap artikel baru yang di publikasikan lebih cepat terindeks di halaman pencarian.

Awalnya saya sendiri bingung, dan masih mengalihkan dan menggunakan webmaster lama untuk submit tiap url yang saya publikasikan. Namun ternyata untuk submit url di webmaster baru lebih mudah ketimbang submit url di webmaster lama. Nah buat kalian yang masih bingung gimana cara submit url di webmaster baru, kamu bisa ikuti langkah-langkah nya di bawah ini.

Cara Submit URL di Google Webmaster Baru


Silakan login terlebih dahulu menggunakan akun gmail yang terdaftar di situs Google Search Console dan tap menu Bar di Pojok kiri atas > Inspeksi URL > Masukan URL > Enter > Minta pengindeksan.

Submit URL Di Search Console Baru

Proses pengindeksan dibutuhkan waktu 1-2 menit, biarkan dan tunggu sebelum tab popup baru muncul.

Nah selesai, lakukan hal tersebut secara rutin setelah kamu selesai memposting artikel baru agar lebih cepat terindeks oleh mesin pencari google. Demikian Tutorial kali ini mengenai Cara Submit URL Di Search Console Baru.

04/05/18

     

Solusi Gambar Blog Menyamping Saat Share Ke Facebook

Gambar blog miring saat dishare ke facebook

Di google banyak sekali template gratis maupun berbayar yang di bagikan secara gratis, namun ternyata banyak sekali kekurangan dan salah satu kekurangan tersebut adalah masalah gambar berada di posisi kiri dan judul di posisi kanan saat link postingan di bagikan ke facebook.

Nah untuk menangani masalah Gambar Blog Menyamping Saat Share Ke Facebook sebenarnya tidak lah terlalu sulit, kamu cukup menambahakan beberapa rangkaian meta tag, dan untuk menerapakannya ikuti langkah-langkah berikut:

Solusi Gambar Blog Menyamping Saat Share Ke Facebook


Sebelum menambahkan beberapa meta tag di bawah ini baiknya backup dulu template kamu untuk menghindari hal-hal yang tidak di inginkan.

Jika sudah buka template dan cari kode seperti berikut.

<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>

Tambahkan kode berikut tepat dibawah kode yang kamu cari tadi.

<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />

Jika di gabungkan hasilnya akan seperti berikut.

<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoAhZ4bwQoJ-tOkxTcKzs25ZUZIcFCYwJZfegCJTmfWK-K31gOf4t9jW2cWOHUZY-WhUeTMT7VAW00Ahv95J3qZUx-EVAnU-SIhBWRJ1UQ33y-WOkdTknOoXW-TJ0ifgkkYdRlb7r4uQiP/s1600/KonveksiQu-Banner.jpg' property='og:image'/>
</b:if>
</b:if>

Simpan template dan coba share kembali salah satu postingan kamu ke facebook. Lihat hasilnya. Bagaimana apakah gambar artikel postingan kamu sudah tidak menyamping lagi?

Share yuk artikel ini agar teman-teman kamu tau bagaimana mudahnya mengatasi Gambar artikel Blog Menyamping Saat Share Ke Facebook.

Akhir kata

Demikian Semoga Solusi Gambar Blog Menyamping Saat Share Ke Facebook bermanfaat untuk kamu. Salam.

28/03/18

     

Mudah! Panduan Edit HTML Menggunakan Ponsel

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.
  • 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

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

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. 

19/12/17

     

Mengalihkan Halaman Pencarian Blog Ke halaman Pencarian Google


Sekarang perhatikan HTML berikut, jika anda sering mengutak-atik template pasti paham dengan susunan kode ini:

<div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<link expr:href='data:blog.homepageUrl' itemprop='url'/>
<form action='https://www.google.com/search' id='search-wrapper' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get' target='_blank'>
<meta content='https://www.google.com/search?q={q}' itemprop='target'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input class='search-form' itemprop='query-input' name='q' placeholder='Cari artikel...' required='required' type='search'/>
<input expr:value='data:blog.homepageUrl' name='as_sitesearch' type='hidden'/>
<button class='search-button' title='Search' type='submit'SEARCH</button>
</form></div>

Dari rangkaian kode di atas anda tak perlu mengganti semuanya, pada tiap template pasti memiliki kode yang berbeda, namun intinya tetap sama. Dari beberapa kode di atas pasti sudah ada dalam kode search form pada template anda saat ini, yang anda lakukan adalah cukup sesuaikan kode yang saya block merah dengan id dan class pada CSS search form anda saat ini.

Sebagai contoh, dibawah ini adalah kode awal sebelum kode diatas di tambahkan:

<form action='/search' id='searchform'>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='search-form' name='q' placeholder='Search here....' required='required' type='text'/>
<button class='search-button' title='Search' type='submit'><i aria-hidden='true' class='fa fa-search'/></button>
</form>

Maka hasilnya akan seperti dibawah ini:

 
<div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<link expr:href='data:blog.homepageUrl' itemprop='url'/>
<form action='https://www.google.com/search' id='searchform' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get' target='_blank'>
<meta content='https://www.google.com/search?q={q}' itemprop='target'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='search-form' name='q' placeholder='Cari artikel....' required='required' type='text'/>
<input expr:value='data:blog.homepageUrl' name='as_sitesearch' type='hidden'/>
<button class='search-button' title='Search' type='submit'><i aria-hidden='true' class='fa fa-search'/></button>
</form></div>

Perhatikan kode yang saya tandai, yang berwarna merah adalah id dan class nya, kode yang berwarna kuning adalah kode yang saya ubah, dan kode yang berwarna biru adalah kode yang saya tambahkan.

Simpan template dan coba ketikan kata kunci di kolom search form anda, jika belum berhasil anda bisa mengganti search form anda dengan Search form with keyframe effect seperti artikel yang sudah saya bagikan sebelumnya Disini.

Demikian Artikel mengenai cara Mengalihkan halaman pencarian blog ke halaman pencarian Google. Selamat beraktifitas.