Assallamuallaikum Wr Wb..

cs.png

Selamat malam kawanku semua, sebelum saya makan sahur saya akan membagikan satu tutorial lagi yaitu Cara Membuat Thumbnail Sejajar Dengan Judul Artikel, sebenarnya cara ini sudah banyak yang share di pencarian google. Tapi tidak apa lah saya share ulang siapa tahu bisa berguna buat newbie yang ingin mengedit css miliknya, membuat thumbnail sejajar dengan judul artikel ini sekaligus request dari temen blogger saya di artikel sebelumnya & akan saya penuhi hari ini.

Sebenarnya membuat thumbnail sejajar dengan judul artikel kita hanya perlu menambahkan property position & property penunjang lainnya di beberapa selector, hanya saja yang membuat ribet adalah di mana kita harus menempatkan property tersebut di tempat semestinya agar apa yang kita atur bisa bekerja dengan maksimal.

Nah... Kali ini saya akan menjelaskan sedetail mungkin Cara Membuat Thumbnail Sejajar Dengan Judul Artikel agar kalian dapat dengan mudah menerapkannya di file css anda tanpa perlu pusing-pusing membuatnya, kalian hanya tinggal mengatur nilai valuenya saja & sesuaikan dengan elemen lainnya agar terlihat rapi.

Penambahan property yang di butuhkan sebenarnya tidak banyak, hanya 7 sampai 8 property saja yang ditambahkan ke dalam selector yang mau di atur, yaitu position, top, left, overflow, word-wrap, font-size, height, dan font-size.


Baca Juga = Memasang Css Import Di Blogponsel

Baiklah, tidak perlu panjang lebar lagi silahkan di simak caranya di bawah ini !

Contoh kode yang digunakan untuk membuat thumbnail sejajar dengan judul artikel dapat kalian lihat di bawah ini !

#content { margin:0;padding:5px;background:#f1f1f1; }

.post { margin:0;padding:5px;padding-left:55px;background:#fff;position:relative; }

.post .post-meta { margin:0;padding:4px;background:transparent !important;position:relative;margin-left:5px; }

.post .post-meta .title { margin:0;margin-left:1px;padding:0; }

.post .post-meta .title a { color:#008000; }

.post .post-content { margin:0;padding:5px;height:0;font-size:0;overflow:hidden;word-wrap:break-word; }

.post-meta2 { margin:0;padding:5px;background:transparent !important;text-align:left; }

.thumbnail { width:60px;height:50px;margin:2px !important;padding:1px !important;border:none !important;background:transparent !important;position:absolute;top:0;left:0; }

.thumb { width:60px;height:50px;margin:2px !important;padding:1px !important;border:none !important;background:transparent !important;position:absolute;top:0;left:0; }

Seperti yang kalian lihat pada contoh kode di atas, di kode tersebut terdapat beberapa property yang sengaja saya beri warna agar kalian bisa membedakan mana property tambahan yang saya jelaskan di atas tadi ! Semua property tambahan akan saya jelaskan di bawah nanti.

Untuk lebih mudahnya silahkan Copas (Copy Paste) kode di dalam textarea di bawah ini, lalu pastekan di dalam file css anda !

Di dalam textarea tersebut ada kode css yang mencakup selector #content sampai .post-meta2 dan ada beberapa penambahan property seperti yang saya jelaskan di atas tadi, penambahan property berada di bagian selector .post, .post .post-meta, .post .post-content, .thumbnail, dant.thumb, semua property yang saya tambahkan di atas akan saya jelaskan satu per satu untuk apa saja fungsinya, silahkan di simak penjelasannya di bawah ini !


Pertama :

Pada selector .post saya tambahkan 1 property yaitu "Position" tanpa tanda petik & property tersebut mempunyai nilai value yaitu "Relative", nilai value relative ini berfungsi untuk mencegah selector .thumbnail keluar dari elemen .post atau lebih gampangnya tidak keluar jalur ketika selector .thumbnail ditambahkan property "Position" dan memiliki nilai value "Absolute".

Jika selector .post tidak ditambahkan property "position:relative;" tapi selector .thumbnail ditambahkan property "position:absolute" beserta attribute "top:0;left:0; dan lain-lain" maka yang terjadi adalah thumbnail akan langsung keluar dari elemen .post dan berada di atas blog (bagian header) atau di bagian bawah blog (bagian footer) tergantung posisi mana yang digunakan.

Kejadian ini di picu karena tidak ada yang menahannya untuk berada tetap di dalam element .post, maka dari itu kita perlu menambahkan property "Position" dan nilai value "Relative" agar ada yang menahan .thumbnail tetap berada di dalam elemen .post.

Lalu terdapat property "padding-left:55px" ini berfungsi untuk memberi ruang terhadap thumbnail nanti, nilai "55px" bisa di ubah sesuai dengan kebutuhan anda.


Kedua :

Lalu di selector .post .post-meta saya juga menambahkan property "Position" beserta nilai valuenya "Relative", tujuannya sama namun elemen yang dicegahnya saja yang berbeda. Di sini yang perlu di atur adalah alas/dasar dari judul artikel, property "position:relative" berfungsi untuk mencegah alas/dasar judul artikel bergerak, jadi kita atur biar tetap berada di tempatnya.

Terdapat pula property "margin-left:5px" ini dilakukan untuk mengatur jarak luar elemen dasar judul artikel sebelah kiri, pengaturan ini bertujuan untuk mencegah terjadinya penumpukan antara judul artikel & thumbnail nantinya.


Ketiga :

Di dalam selector .post .post-content saya tambahkan beberapa property yaitu height, font-size, overflow, dan word-wrap. Property tersebut memiliki fungsi masing-masing diantaranya !
1. Height - berfungsi untuk mengatur tinggi elemen, di dalam selector .post .post-content di atas saya telah menambahkan property "height:0;" ini berfungsi untuk mengecilkan tinggi elemen .post-content (deskripsi artikel) dari ukuran sebelumnya atau lebih gampang bisa disebut menyembunyikannya.
2. Font-size - mengatur ukuran font, pada selector ini saya sengaja tambahkan property "font-size" & memiliki nilai value "0" ini berfungsi untuk menghilangkan atau mengecilkan font yang ada di .post-content (deskripsi artikel) di mode homepage.

Kenapa tidak memakai property "content:none" atau "display:hidden" ? Karena kalau memakai property content atau display maka thumbnail yang akan kita atur sejajar dengan judul artikel tidak akan bekerja.

Hal itu bisa terjadi karena thumbnail berada di dalam elemen .post-content, jika menggunakan property "content:none;" atau "display:hidden;" maka secara otomatis thumbnail akan di halangi atau di tahan keluar oleh property tersebut, karena pada dasarnya thumbnail mengikuti aturan selector .post .post-content, maka dari itu saya menggunakan property "height" & "font-size" agar thumbnail bisa bekerja seperti yang telah kita atur.


3. Overflow - berfungsi untuk mengatur konten yang melebihi batas elemen, di sini saya menggunakan nilai value "hidden" untuk property "overflow" supaya jika terjadi over konten bisa di cegah dan di sembunyikan dari tampilan web browser.


4. Word-wrap - berfungsi untuk mengatur konten atau gambar yang melebihi batas ukuran yang semestinya.

Pada kode di atas saya tambahkan nilai value "break-word" agar konten atau gambar yang melebihi ukuran layar smartphone dapat di potong secara otomatis, tapi konten atau gambar yang terkena property ini akan terlihat setengah atau 3/4 ukuran gambar aslinya.

Property ini bisa berfungsi untuk mencegah terjadinya zoom in & zoom out di blog, jadi tampilan yang dihasilkan akan tetap di zona zoom in & sesuai ukuran layar smarphone anda.


Ke empat.

Lalu pada selector .thumbnail saya tambahkan juga beberapa property diantaranya position, top, dan left, dari ketiga property tersebut masing-masing memiliki nilai value yang akan mengatur efek yang dihasilkan dari property tersebut pada selector .thumbnail, dan berikut ini penjelasannya !

Pada selector .thumbnail terdapat property "position" & nilai value "absolute" (Exam : position:absolute).
Pemberian property beserta nilai valuenya tersebut berfungsi untuk memindahkan posisi selector dari tempat semula atau tempat asalnya, lalu di dalam kode .thumbnail terdapat beberapa attribut pengikut dari property "position" yaitu "top" & "left".

Top dan left ini berfungsi untuk menentukan letak selector yang akan di pindahkan, jika attribut yang digunakan adalah top & left maka posisi thumbnail akan berada di pojok kiri atas.

Saya memberi nilai value "0" di kedua attribut tersebut agar posisinya tepat berada di samping judul artikel. Akan tetapi nilai "0" ini tidak bisa dijadikan sebagai patokan dasar untuk menentukan letak selector tersebut, nilai yang dapat diberikan tergantung dari pengaturan selector lainnya.

Nilai yang bisa digunakan adalah 0 sampai 100 bahkan bisa lebih, namun jika nilai value lebih dari 0 maka harus menggunakan satuan ukuran yaitu px, em, in, %, pt, dan lain-lain.

Kalian juga bisa menggunakan nilai minus untuk menentukan posisi selector yang akan di pindah, misalkan -10px, -15%, -25em, dan lain-lain.


Kelima.

Selector .thumb ini sebenarnya sama dengan .thumbnail di atas, kenapa saya juga menambahkan selector .thumb ini ? Karena saya sendiri kurang tahu apakah thumbnail BP menggunakan class "thumbnail" atau "thumb" atau juga bisa keduanya ?

Maka dari itu saya juga menggunakan kedua selector ini, apabila thumbnail BP (Blogponsel) menggunakan salah satu class di atas itu tidak akan mengganggu selector yang telah di atur !!


Baca Juga = Cara Membuat Halaman Preview Css

Saya rasa penjelasan tentang kode membuat thumbnail sejajar dengan judul artikel cukup sampai di sini, sekarang saya akan menjelaskan tentang cara penggunaannya !


Cara Penggunaan :
1. Silahkan copy terlebih dahulu kodenya yang ada di dalam textarea di atas.
2. Kedua login dahulu ke akun hostingan anda, atau anda bisa menggunakan Xtgem.

Di sini saya anggap kalian menggunakan xtgem untuk membuatnya.


3. Setelah login ke akun xtgem anda, silahkan pilih site yang akan anda gunakan lalu klik build.
4. Lalu klik File Browser.
5. Lalu pilih folder yang akan anda gunakan untuk menyimpan kode di atas atau di mana anda menyimpan file css yang anda pakai nantinya.
6. Jika sudah di dalam folder tersebut anda bisa membuat file baru dengan cara klik Buat File lalu kasih nama file anda di kolom nama, misalkan nama.css (ingat !! Akhiran nama harus menggunakan ekstensi .css).

Lalu untuk type file pilih TEXT (File Text Kosong) pokok jangan yang HTML, lalu pastekan kode yang telah anda copy tadi ke dalam kolom input yang di sediakan. Lalu klik "Save".

Namun jika menggunakan cara ini maka anda harus menambahkan kode import ke dalam file css anda, caranya masukkan kode ini di atas kode css anda.

Silahkan ganti "alamat situs anda" dengan url situs xtgem anda, lalu "nama folder jika file berada di dalam folder tertentu" silahkan ganti dengan nama folder yang anda gunakan untuk menyimpan file tadi.

Lalu "nama file" silahkan anda ganti namanya sesuai dengan nama yang anda berikan tadi (ingat !! Nama, huruf kapital harus sama persis), jika namanya menggunakan spasi silahkan spasinya di ganti dengan tanda hubung "-".

Namun jika anda ingin memasukkan kode tersebut ke dalam file yang telah anda buat, silahkan cari file css tersebut lalu pastekan kode yang telah anda copy tadi tepat di bawah kode css yang lama yang ada di dalam file css anda.


7. Klik Save.
8. Selesei.


Note :

Sebelum anda menggunakan kode di atas silahkan atur terlebih dahulu nilai value dari property padding, margin, background, border, color, width (thumbnail, dan height (thumbnail). Kalian juga bisa menambahkan property beserta nilai valuenya sesuai dengan kebutuhan anda.

Jika kalian ingin melihat hasil dari kode di atas silahkan klik tautan berikut ini !


Hasil Preview

Akhirnya kelar juga tutorial ini, setelah sekian banyaknya yang saya ketik & tangan terasa capek tapi itu semua tidak membuatku patah semangat. Hehe..

Demikian yang dapat saya sampaikan tentang Cara Membuat Thumbnail Sejajar Dengan Judul Artikel pada malam hari ini, semoga apa yang saya share ini bisa bermanfaat buat banyak orang & yang ingin belajar tentang css.

Saya mengucapkan terima kasih banyak karena telah menyempatkan waktu luang kalian untuk berkunjung ke blog saya ini, dan saya mohon maaf jika ada kesalahan kata atau tata cara penyampaiannya sulit dimengerti.

Wassallamuallaikum Wr Wb..