Just Another Place 2 Share


Yuk, Modifikasi Tampilan Blogdetik Biar Tampil Beda

28 Oct 2015

Salut dong buat Blogdetik yang sudah sukses meluncurkan platform multi blog original setelah sekian lama menggunakan platform Wordpress. Tapi ya gitu deh, berhubung platform baru, kita juga maklum kalau template yang tersedia masih sangat terbatas. Hanya ada 3 pilihan template (tema) yang bisa dipilih dari dashboard. Jadi agak garing yah kalau kita blogwalking ke sesama blogger pengguna blogdetik, karena tampilannya hanya itu dan itu lagi.

Untungnya, platform blogdetik sebetulnya memberi peluang bagi pengguna untuk memodifikasi tampilan blog “nyaris” sesuka-sukanya, hampir menyerupai blogspot. Bahkan jauh lebih mudah memodifikasi tampilan blogdetik ketimbang blogspot kalau kamu punya cukup kemampuan bahasa html dan css.

Well ngga usah berpanjang-panjang, di artikel ini saya persembahkan sedikit tips dan trik yang standar2 aja untuk memodifikasi tampilan blogdetik kamu, minimal merubah font dan warna biar bisa sedikit tampil beda.

Tips dan trik ini kita akan coba memodifikasi template blogdetik 2 kolom. Silahkan masuk ke Dashboard Blogdetik kamu dan pilih tema 2 kolom, kemudian klik tombol Edit HTML/Pasang Widget dan akan terbuka jendela kode HTML yang akan kita gunakan untuk memodifikasi tema. Tenangg… ngga seribet yang keliatan kok. Ok lanjut…

Modifikasi Font (huruf)

Sebetulnya platform blogdetik sudah menyediakan fitur untuk mengganti font tampilan, tapi hanya terbatas font-font standar. Ngga seru kan? Dengan trik ini kamu akan lebih bebas menggunakan font favorit.

Untuk bisa menggunakan aneka font untuk template website/blog, sebetulnya kita harus membuat format font untuk keperluan web dan mengupload font ke server, yang mana tidak mungkin kita terapkan di platform blogdetik, jadi kita akan memanfaatkan dan mengimport dari direktori font yang disediakan oleh Google. Gratis kok. Caranya dengan mengakses https://www.google.com/fonts. Ratusan font siap pakai sudah tersedia disini. Silahkan luangkan waktu kamu untuk mencari font kesukaan.

Untuk contoh, saya memilih font Archivo Narrow, kayaknya lucu.  Klik aja tombol Quick use seperti yang ditunjukkan gambar di bawah.

Pertama kamu akan disuruh memilih style font yang ingin kamu gunakan. Masing-masing font biasanya menyediakan beberapa jenis style, ada yang sedikit ada yang banyak. Khusus untuk font Archivo Narrow yang saya pilih hanya menyediakan 4 style, dan saya memilih hanya 2 style saja yaitu normal 400 dan bold 700 (jangan memilih terlalu banyak nanti malah bingung dalam penggunaannya)

Scroll ke bawah, ada pilihan cara embed font ke halaman website kamu, klik tab @import kemudian seleksi dan copy skrip di dalamnya yaitu :

 @import url(https://fonts.googleapis.com/css?family=Archivo+Narrow:400,700);

Kembali ke dashboard blogdetik tadi, kemudian paste script ini ke dalam kode html tema blog kamu diantara script <style type=”text/css”> dan </style>

Hasilnya akan seperti ini :

<style type="text/css">
@import url(http://{{ http_host }}/statics/themes/standard/css/detikframe.style.css);
@import url(http://{{ http_host }}/statics/fonts/flaticon.css);
@import url(http://{{ http_host }}/statics/css/style.css);
@import url(http://{{ http_host }}/statics/themes/standard/css/blogdetik.style.css);
@import url(https://fonts.googleapis.com/css?family=Archivo+Narrow:400,700);
</style>

Kemudian klik Simpan.

Selanjutnya kembali ke menu Tema, dan klik tombol Modifikasi.

Di sebelah kanan ada jendela kode CSS yang masih kosong. Kode CSS inilah yang akan kita gunakan untuk memodifikasi tampilan. Masukkan script berikut di jendela kode CSS :

 

Klik Simpan.

Nah, coba refresh halaman blog kamu, pasti fontnya sudah berubah bukan???

Ukuran font terlalu kecil? Kamu tinggal tambahin tag font-size aja di css kamu, misalnya :

body{
font-family: ‘Archivo Narrow’, sans-serif;
font-weight: 400;
font-size:110%
}

Kemudian klik Simpan. Silahkan refresh blog kamu.

Sekarang kita rubah font judul blog, caranya dengan menambahkan script berikut di css kamu :

h2#blog_title {
font-family: ‘Archivo Narrow’, sans-serif;
font-weight: 700;
font-size:300%;
}

Kemudian klik simpan. Silahkan lihat hasilnya dengan me-refresh halaman blog. Untuk ukuran font (font-size) silahkan atur sesuai selera apakah mau dibesarkan atau dikecilkan tinggal rubah nilai persentasenya saja. Gimana, mudah kannn?

Modifikasi Warna Background

Selanjutnya yuk kita bermain dengan warna background (sekaligus akan menyesuaikan warna font juga).

Untuk merubah warna backgorund ke abu-abu tambahkan tag background-color ke css yang mwengatur body tadi menjadi seperti ini :

body{
background-color: #757575;
font-family: ‘Archivo Narrow’, sans-serif;
font-weight: 400;
}

Klik simpan dan lihat hasilnya. Background blog menjadi abu-abu, tapi tulisan atau font pada postingan blog jadi ngga kelihatan yah, oke selanjutnya kita rubah background khusus untuk postingan blog menjadi putih, tambahkan script ini ke css kamu :

.main_content {
background-color:#fff;
}

Simpan dan lihat hasilnya. Wah postingan blog terlalu rapat ke kiri kan? Coba atur paddingnya menjadi :

.main_content {
background-color:#fff;
padding:0 15px 0 15px;
}

Simpan dan lihat hasilnya. Bagaimana, cukup?

Sekarang kita rubah background sidebar, tambahkan script berikut :

.widget {
background-color:#fff;
}

Simpan. Hasilnya kurang mantap? Tambahkan padding seperti berikut :

.widget {
background-color:#fff;
padding: 10px 15px;
}

Sekarang ubah warna judul postingan biar senada dengan warna background tanggal posting yuk? Tambahkan script css berikut :

.bigJudul, .post_title {
color: #249A99 !important;
}

Kemudian simpan.

Coba modif css untuk judul posting menjadi sbb :

.bigJudul, .post_title {
color: #eb615e !important;
text-transform:uppercase;
}

Simpan dan lihat hasilnya.

Coba tambahkan css dengan script berikut :

.tgl {
background-color:#eb615e;
}

Simpan dan lihat hasilnya. Gimana? Lebih ok kan?

Agar lebih personal dan tampil beda silahkan pilih font dan warna favorit kamu.

Ingin bertanya? Silahkan isi komen.

 


TAGS modifikasi template tema


-

Search

Latest