Tampilkan postingan dengan label slidetipstrick. Tampilkan semua postingan
Jumat, 15 Juni 2018
Cara Mudah Membuat Header Blog Menjadi Responsive 2018
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.
Jadi pada rekayasa gambar diatas cara untuk membuat header blog responsive 2018 dengan membuat ukuran gambar header menjadi besar. Dengan minimum ukuran lebarnya 1000, untuk height atau tingginya terserah kebutuhan kalian.
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.
Tunggu hingga proses upload gambar selesai dan akan muncul pada halaman popup widget header kalian. Jika sudah selesai proses uploadnya lalu pilih Simpan. Lihat blog kalian apakah gambar sudah benar terpasang pada blog kalian dengan gambar yang kalian inginkan. Jika sudah benar maka lanjutkan ke proses selanjutnya.
3. Mengedit Bagian Header Css
Pada artikel sebelumnya saya sudah menjelaskan bagaimana cara mengganti header blog dengan gambar. Di artikel tersebut kita menambahkan file css untuk bagian widget header agar posisi header berada di posisi yang kita inginkan. File css itu juga nantinya yang akan kita edit agar header kita menjadi responsive pada semua ukuran screen media.
Kembali ke halaman admin blog kalian masuk ke Tema kemudian pilih Sesuaikan. Karena kita akan menyesuaikan bentuk gambar header kita. Pada menu di sebelah kiri pojok pilih Lanjutan kemudian di sebelah kanan kita scroll paling bawah pilih Tambahkan CSS. Akan terlihat script css yang kita inputkan kedalam blog untuk bagian header.
Rubah file css tersebut seperti contoh dibawah ini.
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.
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.
Rabu, 02 Mei 2018
Cara Memasang Iklan Adsense Berada di Tengah postingan Artikel Blogger
Pada kesempatan ini saya akan mencoba membagi pengalaman pribadi saya untuk memasang iklan adsense berada di tengah tengah dan akhir postingan artikel khusus untuk blogger, karena saya menggunakan blogger. Buat kalian yang memakai wordpress silakan berkunjung ke artikel lainnya yah. hehe... Karena saya kurang paham menggunakan wordpress, jadi maaf buat temen temen yang menggunakan wordpress.
Bagi kalian yang sudah bermitra dengan google adsense pasti sangat ingin meningkatkan penghasilan adsense kalian melalui blog pribadi milik kalian. Menaruh script code google adsense berada di tengah tengah postingan artikel merupakan salah satu cara untuk meningkatkan pendapatan kalian untuk adsense yang telah terpasang, bisa juga menaikan persentase CTR kalian.
Jadi untuk menaruh 2 iklan adsense berada di tengah / akhir artikel postingan kita dibutuhkan mmodifikasi pada template kita dengan menaruh kode javascript tertentu. Sejujurnya saya juga kurang begitu memahami mengenai kode javascript secara menyeluruh, tapi jangan khawatir disini saya akan membantu kalian untuk memasang kode javascript tersebut supaya kalian bisa menaruh kode iklan adsense berada di tengah postingan artikel kalian.
Cara untuk meletakan iklan adsense di tengah artikel postingan
Untuk memasang unit iklan adsense berada di area tengah postingan artikel kalian memang tidak bisa menggunakan widget seperti halnya menaruh iklan adsense di sidebar / header bog kalian. Jika kita ingin menaruh iklan adsense di tengah artikel postingan maka kita harus mengutak ngatik template blog kita sendiri. Ikuti langkah langkah berikut ini..
1. Masuk Kehalaman Edit Template HTML
Login kedalam halaman admin blogger kalian, pilih Theme / Tema pada menu halaman sebelah kiri, kemudian pilih yang Edit HTML.
2. Cari kode html <data:post.body/>
Mengapa kita harus mencari kode tersebut.? karena semua artikel postingan yang kita buat akan muncul yang di tandai oleh kode script html tersebut.
2. Cari kode html <data:post.body/>
Mengapa kita harus mencari kode tersebut.? karena semua artikel postingan yang kita buat akan muncul yang di tandai oleh kode script html tersebut.
Copy kode html diatas, kemudian kalian find kode tersebut didalam html template kalian dengan cara tekan CTRL+F pada kolom script html template kalian. Kemudian pastekan pada kolom search lalu enter, dengan otomatis akan mencari kode html yang kita inginkan.
Pada umumnya kode <data:post.body/> akan tampil lebih dari 1, seperti halnya dengan template yang saya gunakan terdapat 4 kode tersebut. Lalu bagaimana.? Jangan panik itu merupakan hal yang normal, cari kode tersebut yang berada paling bawah.
kemudian kalian block kode <data:post.body/> ini hapus ganti dengan kode javascript ini :
Copy semua kode javascript dan html di atas kemudian pastekan pada kode <data:post.body/> yang sudah kita block tadi.
3. Masukan Kode Adsense yang sudah di Parse
Tahap ini kita harus merubah kode adsense terlebih dahulu dengan memparse kode iklan adsense yang kita copy, Untuk memparse kode iklan adsense klik disini.
Namun sebelum memparse kode iklan adsense ada baiknya kita mengetes terlebih dahulu apakah kode yang kita pastekan sudah muncul di postingan artikel kita atau ternyata malah tidak berpengaruh apa apa. Untuk pengetesan kita bisa menambahkan kode html berikut..
Pastekan kode diatas ini tepat berada dibawah <!--parse adsense 1--> dan <!--parse adsense 2-->, kemudian save template anda. Pastikan tidak ada error ketika kalian save templatenya.
4. Menambahkan tag adsense
Jika semua tahap di atas sudah dilakukan, maka sekarang tinggal tahap terakhir. Kalian harus menambahkan tag <!- adsense -> pada postingan artikel kalian untuk menandakan artikel tersebut akan terdapat iklan adsense berada di tengah postingan artikel blogger kalian.
Caranya Edit salah satu artikel kalian kemudian pilih html - lalu tambahkan kode <!- adsense -> pada tulisan artikel kalian - lalu klik perbaharui supaya nantinya artikel kalian memiliki iklan adsense yang berada di tengah postingan. Bingung.? lihat gambar dibawah yah..
Setelah diperbaharui kemudian pilih lihat artikel tersebut untuk membuktikan apakah artikel tersebut sudah terdapat iklan adsense atau belum. Jika sudah maka berhasil sudah kalian memasang iklan adsense berada di tengah postingan artikel blogger.
Semoga tips and trick kali ini Bisa membantu kebingungan kalian untuk menaruh 2 iklan adsense berada di tengah postingan artikel. Jika masih ada yang gagal silakan comment pada kolom bawah artikel ini dan mari kita bahas sama sama.
Baca Juga : Kenapa postingan menjadi double post setelah memasang kode iklan adsense
4. Menambahkan tag adsense
Jika semua tahap di atas sudah dilakukan, maka sekarang tinggal tahap terakhir. Kalian harus menambahkan tag <!- adsense -> pada postingan artikel kalian untuk menandakan artikel tersebut akan terdapat iklan adsense berada di tengah postingan artikel blogger kalian.
Caranya Edit salah satu artikel kalian kemudian pilih html - lalu tambahkan kode <!- adsense -> pada tulisan artikel kalian - lalu klik perbaharui supaya nantinya artikel kalian memiliki iklan adsense yang berada di tengah postingan. Bingung.? lihat gambar dibawah yah..
Setelah diperbaharui kemudian pilih lihat artikel tersebut untuk membuktikan apakah artikel tersebut sudah terdapat iklan adsense atau belum. Jika sudah maka berhasil sudah kalian memasang iklan adsense berada di tengah postingan artikel blogger.
Semoga tips and trick kali ini Bisa membantu kebingungan kalian untuk menaruh 2 iklan adsense berada di tengah postingan artikel. Jika masih ada yang gagal silakan comment pada kolom bawah artikel ini dan mari kita bahas sama sama.
Baca Juga : Kenapa postingan menjadi double post setelah memasang kode iklan adsense
Senin, 30 April 2018
Menghilangkan Deskripsi Blog pada Header untuk Blogger
Topik kali ini saya akan membagi informasi mengenai menghilangkan deskripsi blog pada header, sebenarnya deskripsi blog itu sangat membantu untuk meningkatkan pengunjung di blog kalian loh. Terus bagaimana dong supaya deskripsi blog tetap ada tapi deskripsi blog ingin dihilangkan pada header tag.??
Lihat gambar diatas, deskripsi blog sungguh sangat menganggu tampilan blog kita. Saya ingin menghilangkan deskripsi blog tersebut tanpa menghapus deskripsi blog nya. Langsung saja keprosesnya yah..
Mengetahui Tag Class pada Deskripsi Blog
- Pertama kita harus mengetahui tag class yang digunakan oleh deskripsi blog itu sendiri, ingat setiap tag class deskripsi blog berbeda beda. Kenapa berbeda.? Karena setiap template yang kalian gunakan otomatis memiliki script coding class yang berbeda pula Namun pada umumnya berada di dalam tag <head>......</head>.
- Jika kalian bingung menentukan class mana deskripsi yang ada pada template blog kalian. Ikuti langkah pada gambar di bawah ini.
1. Klik kanan pada blog deskripsi kalian, pilih inspeksi
2. Kemudian cari berada di kelas manakah deskripsi blog kalian, contoh diatas berada pada class “.description” dan didalam class “.header”.
3. kemudian di kolom yang ketiga kita mencari adakah class .header .description { }, jika ada ikuti langkah selanjutnya.
Merubah CSS pada Template Blog Kalian
Jika kalian sudah cukup lama bermain blog khususnya blogger pasti sudah sangat paham cara merubah script coding css dan html template kalian. Jika masih newbie nih ikutin..
- Masuk ke dalam Blogger admin kalian
- Pilih Theme kemudian Edit HTML
1. Pada kolom html tekan ctrl+f sampai keluar bar find seperti gambar diatas. Kemudian kita akan mencari kelas deskripsi blog yang akan kita hilangkan. Tuliskan “.description” tanpa tanda kutip yah. Lalu enter..
2. Kemudian kita cari kelas yang sama dengan tahap inspeksi awal tadi, lihat gambar diatas ternyata ada kelas deskripsi blog yang akan kita hilangkan sesuai dengan tahap inspeksi awal dengan script codingnya
.Header .description {
Margin : .5cm 0 10px;
padding: 0 2px;
color: $(blog .description .color);
}
Lalu apa yang harus kita hilangkan untuk menghilangkan deskripsi blog pada header kita.? Karena kita akan menghilangkannya maka kita menambahkan beberapa fungsi dari kelas deskripsi tersebut. Tambahkan script display : none; maka script coding css nya akan berubah menjadi
.Header .description {
Margin : .5cm 0 10px;
padding: 0 2px;
color: $(blog .description .color);
display : none;
}
Kemudian pilih save theme / simpan tema, refresh kembali blog anda dan lihat apakah berhasil atau tidak.
Ternyata berhasil deskripsi blog saya sudah tidak tampil lagi di dalam tema tanpa menghapus description blog untuk blogger. Semoga artikel ini bermanfaat dan dapat membantu kalian yah, jika kalian masih bingung silakan comment yah mungkin saya bisa bantu untuk memecahkan kebingungan kalian.
Langganan:
Postingan
(
Atom
)
