Think Simple




Akhirnya menemukan nama yang sangat sesuai untuk template blog ini. Think Simple menjadi pilihan karena saya membuatnya melalui langkah-langkah yang sederhana. Bukan dengan mengedit html atau membangunnya dengan sederet koding yang sama sekali tak saya pahami. Think Simple ini awalnya adalah template bawaan blogger yang ada di 'desainer template'. Namanya 'Sederhana'.

Awalnya saya ingin dibuatkan template dan ingin kotak postingannya mirip dengan tampilan dinamis yang flipcard. Tetapi postingan tidak semuanya muncul di beranda. Hanya beberapa. Mungkin enam atau sembilan sudah cukup. Lalu widget kiri kanan. Warna pastel.


Terdengar tidak begitu rumit karena memang saya tak banyak mengetahui tentang template.

Setelah template yang saya pesan jadi, ternyata hasilnya berbeda dari yang saya lihat di tempat sebelumnya template tersebut diinstall dan saya tidak bisa mengubahnya secara manual dari 'desainer template' melainkan harus mengedit html-nya. Padahal saya berharap template tersebut bisa saya edit melalui 'desainer template' bawaan blogger. Tampilan tata letaknya masih seperti yang disediakan blogger.

Kemudian saya batal menggunakan template yang telah dibuat tersebut.

Namun, di balik kegagalan tersebut saya memahami satu hal. Setelah memutar otak beberapa hari. Ada sesuatu yang bisa saya gunakan dari template yang tidak saya gunakan tapi sudah dibuatkan itu. Ada kode CSS yang bisa saya ambil.

Mulailah saya mengedit template bawaan blogger ini dengan cara paling awam. Membuka tata letak dan 'desainer template'. Memilih huruf yang saya inginkan. Ukuran template yang sesuai. Tata letak yang selalu saya sukai. Widget di kiri dan kotak postingan di kanan. Lalu saya mengambil kode CSS untuk menimpa pengaturan badan postingan menjadi seperti yang sekarang ada di sini. Cara mengedit template dengan cara yang sangat mudah bisa dibaca di sini [Cara Mengubah Template]. Postingan awal saya saat mengedit template bawaan blogger tanpa menambahkan kode CSS kecuali untuk tulisan 'header blog' yang saya pilih agar menjadi ke tengah template.

Berikut kodenya yang saya masukkan di pengaturan 'tingkat lanjut'. Bisa ditemukan di 'desainer template' saat kita memilih 'ubah suaikan' template.

.post {
display:block;
float:left;
height:auto;
margin:0 3px 3px 11px;
overflow:hidden;
padding:5px; width:560px;
background:#FCF9FB;
padding:15px;
box-shadow:0 0 0 1px #FAFAFA;
border-radius:45px;
-webkit-box-shadow: 0px 2px 3px 1px #333333; -
moz-box-shadow: 0px 2px 3px 1px #333333;
box-shadow: 0px 2px 3px 1px #333333; }


Serunya menggunakan CSS untuk membuat badan postingan adalah kita bisa mengubah bentuknya sesuai yang kita inginkan.

  1. Radius Badan Postingan
    Saya paling suka dengan kotak postingan yang membulat di empat sisinya. Sehingga radiusnya yang awalnya 33px sekarang menjadi 45px. Ditandai dengan kode 'border-radius:45px'. Jika ingin mengubahnya menjadi angka yang lain bisa diubah sesuai keinginan.

  2. Badan Postingan
    Untuk menyesuaikan ukuran badan postingan dengan template saya memilih lebar 560px. Ini juga bisa diubah sesuai ukuran template kita.

  3. Warna Latar Badan Postingan
    Warna untuk badan postingan di sini ditandai dengan 'background:#FCF9FB'. Untuk mencari warna yang tepat atau sesuai dengan keinginan kita silakan baca postingan ini [Menemukan Warna yang Tepat]. Tinggal mengganti kode warna yang ditandai dengan tanda pagar dengan kode warna yang lain. Hapus kode dan ganti. Jangan menghapus tanda pagarnya.

Saya rasa badan postingan juga bisa diberi gambar tapi saya sendiri belum mencobanya. Saya lebih suka yang polos karena tidak mengganggu pembaca yang ingin menuntaskan isi artikelnya. Sekarang saya memahami bahwa kode CSS itu mengandung kurung buka yang ini [{] dan ditutup dengan kurung yang [}]. berbeda dengan html yang menggunakan tanda kurung ini [<] dan ini [>]. Harus diingat pula tanda 'titik koma' yang ada di kode CSS jangan sampai dihilangkan setiap mengedit CSS.

Ini hanya tiga bagian yang saya ubah tapi jika ingin mengubah bagian yang lain jangan takut untuk mengeditnya.

Ini cara mengedit template Think Simple yang saya gunakan. Sangat simpel. Apabila ada yang rasanya keliru atau tidak sesuai dengan harapan jangan takut untuk menghapus semua kode CSS dan template akan kembali ke tampilan editan kita sebelum ada kode CSS yang kita tambahkan.
Share:

Posting Komentar

Berkomentarlah yang baik. Semua komentar yang masuk akan dimoderasi. (admin: Honeylizious [Rohani Syawaliah]).

Designed by OddThemes | Distributed by Blogger Themes