Salah satu hal yang merusak tampilan website kita adalah meletakan image namun tidak responsive pada semua screen media. Biasanya pada bagian header diletakan image sebagai bagian header agar tampilan website menjadi lebih menarik.

Tampilan terlihat bagus ketika berada di screen dekstop version, namun pada layar yang lebih kecil ukuran dimensinya situs kalian akan terlihat berantakan pada tampilan versi mobile version. Header tampilan pada mobile tidak terlihat responsive pada bagian image header situs kalian. Lalu bagaimana cara membuat header blog menjadi responsive ?

Ikuti beberapa langkah di bawah ini :

1. Merubah ukuran pixel pada image header

Hal pertama yang harus dilakukan untuk membuat header blog menjadi responsive di setiap media screen adalah dengan membuat ulang image headernya menjadi ukuran pixel yang lebih besar dari sebelumnya.

Contohnya, di image 1 saya memakai ukuran width 759 x height 250, kemudian mari kita melakukan percobaan pada image 1 seperti contoh gambar diatas yang memiliki resolusi gambar kecil akan dibuat responsive di semua screen media. Maka hasilnya gambar header kalian akan terlihat seperti tertarik dan blur. Dikarenakan gambar header kalian memiliki resolusi kecil jadi gambar dipaksa untuk memenuhi media responsivenya. Perhatikan rekayasa gambar dibawah ini..


2. Terapkan Kedalam Blog
Langkah selanjutnya adalah dengan login kedalam halaman admin blogger kalian, kemudian terapkan gambar header yang sudah dibuat dengan ukuran resolusi besar ke dalam blog kalian. Caranya pilih Tata Letak - Klik Edit bagian widget header. Kemudian pada opsi gambar klik pilih file untuk mencari lokasi gambar header yang sudah kalian buat lalu pilih Open.


Jika sudah dimasukan lalu pilih Terapkan ke Blog di sebelah kanan pojok, tunggu hingga ada popup notifikasi bahwa sudah berhasil diterapkan kedalam blog, lalu pilih kembali ke blogger.

Selesai deh proses cara mudah membuat header blog menjadi responsive 2018, untuk membuktikannya silakan kalian refresh halaman blog kalian kemudian kalian kecilkan browser kalian maka gambar header akan menyesuaikan secara otomatis dengan ukuran screen kalian.
Untuk lebih jelasnya kalian buka melalui dekstop dan mobile, maka blog kalian akan terlihat sama dengan tampilan di dekstop.

Terimakasih sudah mengikuti tutorial ini mengenai cara terbaru merubah header blog menjadi responsive 2018. Jangan lupa comment yah jika kalian berhasil membuat header kalian menjadi responsive, jangan lupa juga comment jika kalian gagal.

Mendesain sebuah blog merupakan suatu keharusan bagi para blogger selain mempercantik tampilan blog kalian, para pengunjung juga akan merasa nyaman dengan tampilan blog kalian. Sekaligus bisa jadi pacuan keseriusaan kalian  dalam menggunakan blog.

Membicarakan desain template pada artikel ini saya akan membahas tentang header blog, bagaimana cara untuk membuat header blog berada di posisi tengah ? Pada template dafault blogger desain header berada di rata kiri, namun sudah ada juga template blog yang berada di tengah. Jika template kalian headernya berada di kiri dan ingin merubahnya berada di posisi tengah, maka ikuti tutorialnya dibawah ini tentang cara mengatur header blog berada di posisi tengah.

Cara yang dilakukan tidak terlalu susah kalian tidak perlu mengedit template blog kalian hanya saja menambahkan Class atau Id baru kedalam template blog kalian dengan mode penyesuaian template. Jika kalian belum pernah melakukan penyesuaian terhadap template blog kalian untuk merubah posisi header berada di tengah maka ikuti saja langkah langkah dibawah ini.

Pertama, login terlebih dahulu ke halaman admin blog kalian. Kemudian pilih Tema / Theme pada menu di sebelah kiri. Pilih yang Sesuaikan.

Kedua, langkah ke 2 pastikan kalian sudah mengetahui id atau class pada image header kalian. Tapi pada umumnya template blog untuk bagian header memiliki id dan class yang sama. Lalu pilih "Lanjutan" => "Tambahkan CSS", pastekan kode css dibawah ini pada kolom kosong.

#header-inner {
background-position: center !important;
width: 100% !important;
text-align: center;
 }
#header-inner img {
margin: auto;
}

Jika sudah dipaste pada kolom kosong tekan enter untuk melihat perubahan pada header kita. Preview template website ada pada bawah kolom, pastikan header image blog berada di tengah.

Ketiga, Jika posisi header image sudah berada di rata tengah maka penyesuaian yang kalian lakukan sudah benar. Langkah selanjutnya kalian pilih Terapkan ke blog untuk save penyesuaian yang sudah kita lakukan. Jika sudah maka ada popup notifikasi tema telah diterapkan. Kemudian kembali ke blogger.

Kesimpulan

- Cara menghilangkan description blog pada header

Bootstrap 4 merupakan salah satu framework html dan css open source yang sering digunakan para developer front-end dalam membuat sebuah website. Bootstrap 4 sangat membantu untuk mempersingkat waktu dalam membangun sebuah website.

Boostrap 4 menawarkan cukup banyak class dan style yang bisa membuat website kalian akan lebih terlihat hidup dengan cara yang mudah. Pada artikel ini kita akan membahas beberapa komponen yang pada umumnya terdapat di website dan terdapat juga pada bootstrap 4. Komponen diantaranya seperti navbar, button, jumbotron, dropdown. Dengan menggunakan class class ini, kita bisa mengaplikasikannya kedalam website kita dengan mudah dan cepat tanpa harus membuatnya dari awal.

Beberapa Komponen pada Bootstrap 4 yang sering kita jumpai di website diantaranya : 

Carousel adalah sebuah slider serangkaian kontent yang pada umumnya kontent image dari sebuah postingan artikel atau sebuah halaman website. Cara membuat slider image pada website sangat mudah dilakukan jika kita menggunakan bantuan bootstrap. Pada website resminya bootstrap telah memberi informasi mengenai membuat carousel untuk website kalian, jadi kita dengan mudah tinggal mengcopy script tersebut kemudian mengaplikasikannya ke dalam website kita.

Terdapat beberapa tipe komponen carousel atau slider image pada bootstrap ini, berikut diantaranya :

1. Slides Only

Yang pertama bentuk dari carousel bootstrap ini merupakan yang standard, slider hanya menampilkan image yang bergeser dengan sendirinya tanpa komponen tambahan lainya. Berikut contohnya :

Rubah tulisan lokasi image kalian menjadi lokasi image kalian pada folder project website kalian. Dengan contoh src="images/slider1.jpg", yang artinya image slider kalian berada di dalam folder images dengan nama image slider1 berformat jpg.

2. Slider dengan menambahkan kontrol navigation
Contoh membuat slider image untuk website yang kedua ini dengan menambahkan komponen kontrol navigation. Dengan kata lain kita bisa mengkontrol slider  dengan menggunakan petunjuk arah ke kanan atau ke kiri. Lihat contoh gambar dibawah :



3. Slider image dengan indicator dan caption
Contoh yang ketiga tentang cara membuat slider image menggunakan bootstrap dengan menambahkan penjelasan pada gambar slider serta indicator dalam slider tersebut. Contoh slider image yang ketiga ini merupakan slider image yang sering digunakan di dalam website. Dengan adanya penjelasan dan judul pada gambar slider menambah cantiknya tampilan slider kalian sekaligus memberi sedikit penjelasan mengenai link slider yang nantinya akan dituju oleh pengunjung website kalian.

Bootstrap 4 telah menyediakan komponen ini, jadi kalian dengan mudah dapat membuat slider image beserta caption dengan sangat mudah. Berikut contoh gambarnya yang sudah saya buat.


Jangan lupa untuk menempatkan script coding slidernya berada di dalam tag <body> website kalian, atur penempatan sesuai dengan keinginan kalian. Jika menurut kalian slider imagenya terlalu besar kalian bisa merubah ukurannya sendiri sesuai dengan kebutuhan website kalian. Contoh diatas saya menggunakan ukuran default dari bootstrapnya.

Jumbotron

Jika kalian ingin menggunakan jumbotron untuk bagian header, copy dan pastekan script diatas lalu taruh tepat dibawah tag <body>. Cukup mudah bukan cara membuat jubotron pada bootstrap 4, kreasikan header kalian dengan menaruh logo image website kalian atau background image untuk bagian header website kalian.

Navbar Bootstrap 4

Lalu bagaimana cara memperbaiki dobel post artikel akibat script kode adsense yang terdapat di dalam artikel postingan blog kalian ?

Langkah 1, login kedalam halaman admin blogger kalian kemudian masuk kedalam settingan edit template blog kalian. Pada kolom menu sebelah kiri pilih Tema / Theme => Edit Template.

Langkah 2, kemudian pada kolom script template blog kalian tekan CTRL+F untuk mencari script adsense yang sudah kita tempatkan pada template kite sebelumnya, Jika kalian lupa letaknya dimana silakan baca kembali artikel saya sebelumnya disini. Atau jika kalian sudah mengikuti dengan benar step by step tentang memasang iklan adsense di dalam postingan artikel blog maka  isi saja pada kolom find yang terdapat pada box script code template blog kalian dengan keyword <!--start adsense dalem post-->  lalu Enter.

Bagi kalian publisher google adsense pasti pernah mendapatkan email atau pemberitahuan pada akun google adsense kalian untuk mengaktifkan fitur ad balance adsense kalian. Sebenarnya apa itu fitur Ad Balance google adsense ? Ad Balance Adsense adalah suatu fitur yang disediakan oleh pihak google adsense untuk memaksimalkan tampilan iklan yang relevan pada website kalian untuk meningkatkan profit adsense kalian pada level maksimal.

Mengetahui penjelasan tentang ad balance adsense pasti kalian selaku publisher ingin segera mengaktifkan fitur ad balance adsense kalian di website kalian. Namun masih banyak publisher yang belom betul memahami mengenai fitur ad balance adsense ini. Apalagi jika kalian masih newbie menjadi publisher google adsense seperti saya ini. Untuk itu mari kita ulas bersama sama mengenai ad balance google adsense.

Menurut penjelasan dari pihak google adsense yang saya pahami, ad balance digunakan untuk memfilter iklan google adsense yang terpasang pada website kita. Jadi iklan yang akan terpasang pada webstie kita hanya yang memiliki iklan yang berkualitas tinggi saja, dengan kata lain iklan yang memiliki Rate dan nilai Impression RPM cukup tinggi.

Terus nanti iklan adsense yang tampil di website kita jadi berkurang dong ?

ya tentu saja akan berkurang, tapi tahukah kalian jika iklan yang memiliki rate tinggi akan mempengaruhi besar earning (penghasilan) adsense kalian. Meskipun iklan yang tampil berkurang namun google adsense telah menganalisa jenis iklan yang tepat untuk meningkatkan penghasilan kalian dengan kata lain iklan yang akan tampil lebih relevan dengan pengunjung website kalian dan berpotensi untuk meningkatkatkan CPC kalian.

Dengan begitu kenyamanan pengunjung website kalian pun akan bertambah dibandingkan dengan banyaknya iklan yang tampil pada website kalian namun tidak mempengaruhi nilai CPC adsense kalian. Contoh simplenya dengan mengatur ad balance pada akun google adsense kalian tayangan adsense pada website kalian akan berkurang menjadi 40% namun penghasilan dari adsense yang tampil memiliki rate 100%.

Untuk mengakses fitur ad balance adsense login ke akun google adsense kalian kemudian pada kolom menu sebelah kiri pilih My ads => Ad balance.

Pada settingan default seperti gambar diatas rate ads yang berwarna biru memiliki rate 100%, yang artinya semua iklan yang sudah dipasang pada website kita akan tampil semua termasuk "iklan receh" yang memiliki rate RPM dan CPC rendah. Mempengaruhi tingkat pengunjung menjadi bosan dengan iklan iklan yang tidak relevan pada website kalian.

Lalu bagaimana mengatur supaya iklan adsense menjadi relevan dan meningkatkan pendapatan google adsense kita ?

Caranya cukup mudah kalian tinggal geser buletan berwarna biru kesebelah kiri yang artinya mengurangi ad fill rate. Pada level berapa ad fill rate dikurangi ? sebenarnya ad fill rate memiliki rating yang berbeda beda dari setiap masing masing website. Jadi untuk mengatur fitur ad balance ini tidak selalu sama dengan yang lainnya.

Untuk mengetahui berada di level berapa cukup mudah, setelah kalian menggeser ke arah kiri maka volume ads yang berwarna biru akan menurun. Google adsense telah menganalisa secara otomotis berada di level manakah yang paling tepat, tetap geser ke arah kiri sampai volume estimated kalian berkurang.

Nah jika sudah berkurang maka kalian akan tahu level terendah dari ad fill rate kalian, Jika Estimated Earning kalian berkurang tidak 100% maka geser kembali ke kanan hingga kembali ke 100%. Seperti contoh saya ad fill rate terendahnya berada di 41%, jika digeser lagi ke 40% maka estimated earningnya akan berkurang tidak 100%. Oleh karenanya level terendah ad fill rate saya berada di angka 41%. Jika bingung lihat gambar dibawah ini 

Jadi setinggan ad balance adsense ini untuk mengatur atau memfilter tiap jenis iklan yang terpasang pada website kalian. Hanya iklan iklan yang memiliki RPM dan tingkat CPC yang tinggi saja yang akan ditampilkan pada website kalian, dengan begitu akan meningkatkan penghasilan adsense kalian berada di level yang maksimal.

Jika masih bingung silakan komentar pada kolom dibawah ini, jika menurut kalian artikel ini bermanfaat silakan share ke teman teman publisher yang lain. Selamat mencoba dan lihat pembuktiannya pada akun google adsense kalian.

Baca Juga :

Google adsense merupakan salah satu industri periklanan digital yang sangat besar didunia, google adsense akan selalu berkembang dari tahun ketahun dengan ditunjukannya dengan fitur fitur terbaru yang dikeluarkan oleh google adsense. Meskipun banyak program periklanan selain google adsense namun nyatanya google adsense masih menduduki peringkat teratas dibandingkan dengan kompetitor lainnya. Karena google adsense selalu menjaga kepercayaan publishernya untuk selalu setia pada google adsense dan berkembang bersama dalam dunia periklanan.

Fitur terbaru yang dikeluarkan oleh google adsense adalah Auto Ads, februari 2018 fitur auto ads google adsense telah resmi diperkenalkan oleh pihak google melalui blog google adsense, ataupun memberikan informasinya melalui email setiap publisher google adsense. Fitur Auto Ads google adsennse dapat sangat membantu performa penghasilan kita dalam menampilkan iklan iklan dari akun google adsense kita.

Sesuai dengan informasi yang diberikan oleh pihak google adsense fitur auto ads google adsense ini memiliki beberapa keuntungan pokok diantaranya :

1. Pengoptimalan: Menggunakan pembelajaran mesin, Iklan otomatis hanya menampilkan iklan ketika mereka cenderung berkinerja baik dan memberikan pengalaman pengguna yang baik.
2. Peluang pendapatan: Iklan otomatis (auto ads) akan mengidentifikasi ruang iklan yang tersedia pada website anda secara otomatis dan menempatkan iklan baru di sana, berpotensi meningkatkan pendapatan Anda.
3. Mudah digunakan: Dengan Iklan otomatis Anda hanya perlu menempatkan kode iklan di halaman Anda satu kali. Saat Anda siap menggunakan fitur dan format iklan baru, cukup aktifkan dan nonaktifkan dengan menekan tombol - tidak perlu lagi mengubah kode.
4. Fitur auto ads bisa digunakan secara bersamaan dengan iklan iklan yang sebelumnya sudah terpasang pada widget website / blog kalian, jadi tidak perlu menghapus iklan adsense yang sudah terpasang pada widget blog kalian.

Cara memasang auto ads google adsense pada blog / website

Untuk bisa menikmati fitur terbaru dari google adsense ini kalian harus mengaplikasikannya kedalam website kalian, caranya mudah ikuti langkah langkah dibawah ini :

Lakukan login ke akun google adsense kalian masing masing, kemudian pilih menu My Ads => Auto Ads. Kemudian akan tampil sedikit penjelasan mengenai fitur terbaru google adsense auto ads, pilih GET STARTED.

Perlu diketahui cara pemasangan script code ini diperuntukan bagi pengguna blogger, jika kalian pengguna wordpress maka caranya akan berbeda. Tapi tenang saja google adsense telah memberikan informasi lengkapnya pada tahap sebelumnya, lihat gambar diatas pada bagian sebelah kanan kalian klik learn how to insert ad code in wordpress site.

Untuk pengguna blogger langkah pertama masuk kehalaman admin blog kalian.

- Pada dashboard blog sebelah kiri kalian pilih Themes => Edit HTML

- Kemudian tekan CTRL+F cari kode <head>

- Paste kode auto ads yang sudah di copy tadi tepat berada di bawah kode <head>

- Save template dan kembali ke dashboard blogger kalian.

Jika sudah dilakukan maka kalian tinggal menunggu sampai google adsense berhasil memindai keseluruhan website kalian. Google adsense akan secara otomatis memindai website anda dan akan menaruh iklan secara otomatis sesuai dengan ruang kosong yang berada di website kalian.

Kebanyakan publisher google adsense sangat tidak sabar untuk melihat perubahan yang terjadi setelah memasang fitur terbaru google adsense auto ads ini. Ingat google adsense membutuhkan waktu kurang lebih 12 jam paling lama untuk menampilkan iklan pada website kalian, ataumungkin hanya 1 jam saja google sudah bisa memasang iklan pada website kalian. Fitur auto ads akan memasang iklan secara random sesuai dengan potensi dari website kalian. Jadi kalian tidak bisa mengatur letaknya, jika ingin bisa di atur maka kalian harus memasang secara manual menggunakan widget blog yang tersedia.

Semoga dapat membantu memberikan pencerahan tentang penjelasan dan cara memasang auto ads google adsense. Silakan comment dibawah ini jika kalian merasa bingung atau ragu.

Apa itu Bootstrap.? 

Cara Penggunaan Bootstrap 

Kemudian save file index yang kita buat ini di dalam folder file project website kita bersamaan 3 folder bootstrap tadi. Jika kalian bingung lihat gambar dibawah ini.

Untuk pembuktian silakan buka file index.html kalian di dalam browser kalian, lihat tampilan website kalian. Dengan begitu proses instalasi bootstrap sudah benar tinggal melanjutkan membuat halaman index websitenya menggunakan bootstrap sesuai dengan keinginan kalian.