Dewa Blogger: Hasil penelusuran untuk memperbaiki-layout-pada-template-blogger

Halaman

    Social Items

Home / Hasil penelusuran untuk memperbaiki-layout-pada-template-blogger
Memperbaiki Layout Pada Template Blogger Memperbaiki Layout Pada Template Blogger

Memperbaiki Layout Pada Template Blogger - Setelah membaca komentar pertanyaan dari teman Ibnu yang memberitahukan bahwa ada sedikit kesalahan pada template di dashboard layout atau tata letak blogger.



Setelah Saya cek dan ternyata dari template yang memakai menu horizontal atau penerapan instruksi li ul pada hidangan akan memunculkan titik-titik pada tampilan tata letak blogger dan itu cukup mengganggu pemandangan. Sebelumnya memang tidak ada kesalahan menyerupai ini dan Saya sendiri kurang tahu penyebabnya apa, mungkin dari pihak Google lebih mengetahuinya.

Cara mengatasinya sangat mudah, silakan tambahkan instruksi di bawah ini sempurna sebelum ]]></b:skin>

body#layout ul {     display: none; }

Atau dapat juga menyerupai ini

#layout ul {     display: none; }

Simpan dan lihat hasilnya.

Update 10 Juni 2015

Update 10 Juni 2015

Bagi yang mengalami perubahan tampilan pada layout template khususnya pengguna template yang Saya bagikan di sini, silakan tambahkan instruksi di bawah ini sempurna sebelum ]]></b:skin>

iframe#editorframe,#editorframe {width:1030px!important;} body#layout div.section,#layout div.section{background-color:transparent;border:0;font-family:sans-serif;margin:0;overflow:visible;padding:0;position:relative} body#layout div.section h4,#layout div.section h4 {display:none;}

Memperbaiki Layout Pada Template Blogger

Pembaharuan 19 Maret 2013: Memperbaiki framework templat dengan menyusun ulang satuan-satuan elemen yang lebih fleksibel + mengaktifkan hack meta deskripsi Blogger. Saya sarankan Anda untuk mengunduh ulang/melihat ulang blog demo framework templat Blogazine ini!

Utamakan Konsistensi Tampilan Artikel Sebelum Layout Template Blogazine 21.04.92

Setelah beberapa bulan melaksanakan penelitian sendiri, mencicipi bagaimana sulitnya membuat posting unik dan mengetahui apa yang dapat dipermudah dan apa yang membuat Saya merasa sulit untuk membuatnya, pada hasilnya Saya memutuskan untuk merilis templat blogspot khusus Blogazine yang diperlukan dapat menjadi standar:

Lihat Demo Unduh Templat

Tampilannya memang sangat sederhana, tapi justru itulah tujuan Saya. Saya membuat halaman muka templat ini polos, dan dapat dibilang tidak mempunyai unsur desain sama sekali. Saya harap kalian dapat memodifikasi tampilan halaman muka sesuka hati dan membuat identitas kalian masing-masing. Sebagai catatan, disarankan untuk tidak menyentuh bagian-bagian isyarat CSS di dalam <b:skin> sebab Saya sudah merancangnya supaya dapat mempermudah pembuatan posting unik pada halaman item. Untuk mengedit/mendesain tampilan halaman muka, kalian dapat mencoba berkreasi pada cuilan ini:

<!-- MODIFIKASI TAMPILAN HALAMAN MUKA DI SINI! --> <style>  /* General */ body {}  /* Header */ #headace {   text-align:right;   padding:2em 2.5em; } #headace h1 {   margin:0 0;   font-size:400%; } #headace p {   font-size:120%;   margin:.5em 0 0; }  /* Posts */ .post {   margin:0 0;   padding:0 0; } .post-outer {margin:0 5%} .post .post-title {   margin:0 0;   font-size:120%;   text-align:left; } .post-footer {margin:.5em 0 1.5em} .date-header {display:none}  </style>

Sistem Grid

Saya memakai sistem grid 1140px Grid dari Andy taylor yang juga Saya gunakan dalam blog Blogazine Saya. Dengan sistem grid, kalian tidak perlu lagi membuat peraturan media queries berkali-kali pada setiap posting, sebab sistem grid sudah disusun dalam satu paket di dalam templat. Berikut ini yakni konsep dasar pembuatan kolom pada posting:

Pertama-tama buat pembungkus luar berupa elemen .row:

<div class="row">     ... </div>

Setelah itu kalian tentukan sendiri, akan memakai model grid berapa kolom. Dalam sistem grid ini ada setidaknya sebelas macam ukuran. Masing-masing dibagi dalam kelas yang berbeda ibarat ini:

  1. onecol untuk standar 12 kolom sama lebar
  2. twocol untuk standar 6 kolom sama lebar
  3. threecol untuk standar 4 kolom sama lebar
  4. fourcol untuk standar 3 kolom sama lebar
  5. fivecol
  6. sixcol untuk standar 2 kolom sama lebar
  7. sevencol
  8. eightcol
  9. ninecol
  10. tencol
  11. elevencol

fivecol, sevencol, eightcol, ninecol, tencol dan elevencol dipakai untuk layout kolom lanjutan. Misalnya kalau kita ingin membuat dua kolom dengan lebar yang berbeda. Contoh sederhana, untuk membuat dua kolom sama lebar, kita dapat memakai .sixcol ibarat ini:

<div class="row">     <div class="sixcol">         ...     </div>     <div class="sixcol last">         ...     </div> </div>

Catatan: Jangan lupa untuk menyertakan kelas .last pada setiap selesai kolom. Itu dipakai untuk menghilangkan margin-right yang berlebih pada kolom terakhir.

Gambaran selengkapnya mengenai hasil penerapan kelas-kelas grid di atas dapat kalian lihat di halaman ini:

Lihat Demo

Perataan Gambar dan Teks

Sistem perataan gambar dan teks sudah Saya buat dalam satu paket CSS di dalam templat. Tugas kalian hanya tinggal menerapkan kelas-kelasnya saja pada elemen yang dikehendaki:

/* CSS Float */ .clear {clear:both} /* clear float */ .left {float:left} /* left alignment */ .right {float:right} /* right alignment */ .hidden {display:none} /* hidden element */ .visually-hidden {   position:absolute !important;   top:-9999px;   left:-9999px; } /* accessible hidden element */  /* Text Alignment */ .text-left {text-align:left} /* text-align left */ .text-right {text-align:right} /* text-align right */ .text-center {text-align:center} /* text-align center */  /* Image Alignment */ img.left {margin:0 1em .2em 0} /* left alignment */ img.right {margin:0 0 .2em 1em} /* right alignment */ img.center {margin:0 auto} /* center alignment */

Sebagai contoh, kalau kalian ingin menerapkan perataan gambar ke samping kiri, tambahkan kelas left ibarat ini:

<img class="left" src="gambar.jpg" alt=" Utamakan Konsistensi Tampilan Artikel Sebelum Layout Template Blogazine 21.04.92" />

Sisanya perataan kanan dan tengah Saya rasa dapat dengan gampang dipahami:

<img class="right" src="gambar.jpg" alt=" Utamakan Konsistensi Tampilan Artikel Sebelum Layout Template Blogazine 21.04.92" /> <img class="center" src="gambar.jpg" alt=" Utamakan Konsistensi Tampilan Artikel Sebelum Layout Template Blogazine 21.04.92" />

Editor Blogger biasanya akan menyisipkan elemen .separator pada setiap gambar yang berhasil diunggah. Jadi, dibandingkan menerapkan kelas pada gambar secara langsung, Saya lebih menyarankan kalian untuk menerapkan kelas perataan pada elemen .separator ibarat ini:

<div class="separator center">     <a href="#"><img src="gambar.jpg" alt=" Utamakan Konsistensi Tampilan Artikel Sebelum Layout Template Blogazine 21.04.92" /></a> </div> <div class="separator left">     <a href="#"><img src="gambar.jpg" alt=" Utamakan Konsistensi Tampilan Artikel Sebelum Layout Template Blogazine 21.04.92" /></a> </div> <div class="separator right">     <a href="#"><img src="gambar.jpg" alt=" Utamakan Konsistensi Tampilan Artikel Sebelum Layout Template Blogazine 21.04.92" /></a> </div>

Hapus semua inline-style bawaan dari editor Blogger (Misalnya: style="margin-left:1em;margin-right:1em;"). Kita cukup memakai kelas perataan pada setiap elemen.

Perataan teks tidak sulit, cukup buat elemen gres lalu tambahkan kelas perataan, atau tentukan elemen mana yang ingin diberi kelas perataan:

<div class="text-right"> ... </div>
<div class="row">     <div class="fourcol text-right">         ...     </div>     <div class="fourcol text-center">         ...     </div>     <div class="fourcol last">         ...     </div> </div>

Lihat Demo

Lainnya

Formulir komentar tersembunyi dan fitur thread-commenting bawaan Blogger siap pakai.

Lisensi

http://creativecommons.org/licenses/by/2.5/ - Artinya bahwa Anda boleh mengubah nama pembuat, mengubah identitas templat dan footer namun dengan syarat tetap mempertahankan keterangan sumber. Tidak perlu repot-repot membuat tautan aktif yang dipasang di catatan kaki blog, cukup biarkan semua atribusi yang ada di dalam kode. Selebihnya terserah Anda: Tidak ada lisensi/tidak mewajibkan atribusi, kecuali sistem grid, kalau mau.

Unduh Templat


Sumber https://www.dte.web.id/

Template Blogazine 21.04.92

adalah versi premium dari template Ripple yang kemarin Saya bagikan disini Ripple Pro Responsive Blogger Template

Ripple Pro Responsive Blogger Template adalah versi premium dari template Ripple yang kemarin Saya bagikan disini.

Ripple Clean and Responsive

Pada versi premium ini Saya telah memperbaiki beberapa bug yang sebelumnya ada di template free dan sedikit mengganti tampilan agar lebih fresh dari sebelumnya, berikut fitur dari template ini :

Features Availability
Responsive True Cek
SEO True Cek
Google Testing Tool Validator True Cek
Clean Typography True
Dynamic Heading True
2 Column Style True
Light Base Theme Color True
Minimalist True
Responsive Slider True
Auto Read More with Thumbnail True
Responsive Ad Slot True
Breadcrumbs True
Homepage Share Post True
2 Search Box Style True
Top Navigation True
Fixed Main Navigation True
Social Share Button True
Numbered Page Navigation True
Smooth Scroll back To Top True
Custom 404 Page True
Custom Subscribe Box Widget True
Responsive Contact Form Widget True
Shortcodes True
No Encryption Code True
Multi Author Box True
2 Layout Style (With left sidebar) True
Well Documentation True

Skor page speed berdasarkan GTmetrix

adalah versi premium dari template Ripple yang kemarin Saya bagikan disini Ripple Pro Responsive Blogger Template

Bagi yang berminat, silakan hubungi Saya lewat formulir kontak dengan harga Rp 50.000. Penerimaan hanya melalui rekening BRI.

Ripple Pro Responsive Blogger Template

Langganan: Postingan (Atom)