Thumbnail
Gambar thumbnail dibuat menggunakan kode baru yang diadopsi dari kode thumbnail popular posts dan telah dimodifikasi sedemikian rupa, sehingga gambar thumbnail yang dihasilkan tetap jelas meskipun ukurannya diperbesar. Pun juga telah dilengkapi dengan gambar alternatif (no image) untuk postingan yang tidak memiliki gambar. Untuk informasi lebih detail mengenai gambar thumbnail dan bagaimana memodifikasinya, silahkan baca dua artikel berikut
- Cara mengatasi gambar thumbnail buram / blur
- Cara mengubah ukuran thumbnail popular posts + no image
Post Snippet / kutipan artikel
Pada tutorial ini, post snippet dibuat menggunakan kode pemanggil <data:post.body/> kemudian dipotong menggunakan script. Cara ini memiliki beberapa kelebihan, diantaranya sebagai berikut.
- Konten akan tetap terlihat utuh dimata mesin perayap.
- Lebih leluasa untuk mengurangi atau menambah jumlah karakter dari cuplikan kata yang ingin ditampilkan.
Berikut ini beberapa model halaman utama yang bisa Anda terapkan pada template Blogspot. Sebelum memilih, pastikan Anda sudah mengikuti langkah 1 dan 2 pada tutorial sebelumnya di sini.
Jika sudah, silahkan pilih model halaman utama untuk melanjutkan.
1. Halaman utama Model 1
2. Halaman utama Model 2
3. Halaman utama Model 3
13 comments:
untuk model 1 gimana caranya agar gambar no label dan no coment tidak terlihat mas?, biar yang tampil hanya label,tanggal,admin, contoh nya kaya brosense milik mas sugeng
Tambahkan kode CSS ini, untuk menghilangkan data komentar dan timestamp
.post-comm,.post-timestamp{display: none;}
untuk model 2, bagaimana supaya bisa 3 kolom
Ubah nilai pada kode CSS yang mengatur lebar untuk class .post{...} dari 50% menjadi 33%
Terima kasih, semoga berhasil,
Assalamualaikum..
Maaf Mas mau nanya biar tampilannya kaya blog ini gimana ?
Pakai thumbnail model pertama, ubah nilai padding untuk .columns-inner menjadi nol pada media 414px, agar gambar thumbnail seluas lebar layar.
iya Mas, saya pakai model pertama. columns-inner yang mana yaa Mas, sudah saya coba blom bisa juga..
Maaf ya Mas banyak nanya,masih belajar.
Tambahkan css baru misal,
.columns-inner{padding:0}
Terimakasih banyak Mas sudah bisa, tapi ko cuma bisa di tampilan seluler saja yaa,,
terus menu header navigasi jadi pindah ke kiri yaa,,
Itu fungsi @media untuk membatasi efek css menurut lebar layar, kalau mau disemua perangkat, jangan diletakan kode css didalam @media, sering" eksperimen gan, nanti paham dengan dengan sendirinya
Bakul oprek sudah melakukan pekerjaan hebat dengan template template lama dengan layout versi 2, sekarang saatnya style mengikuti trend desain model baru please operk juga template template terbaru: contempo, Soho, Emporio dan Notable ...
4 varian template terbaru layout mereka sudah layout versi ke 3 sesuai standard website HTML5 sekarang. Tampilan mereka sangat dinamis, cepat dan laju. Sususnan CSSnya mendekati AMP. No javascript. Saya lihat desain ini dipakai oleh website website ternama seperti Forbes, bloomeberg, new york times hingga koran harian online Singapore The Straight Times. Blogger blogger ternama dunia juga menggunakannya setelah di re-desain.
Di tunggu bang biar memperkaya referensi saya juga he he he..Terimakasih banyak
Mbak anisa kayanya sudah sukses redesign template contempo.semoga sukses seperti mbak lina ya mbak anisa
Post a Comment