Postingan

Menampilkan postingan dengan label contempo hibrida

CARA MEMBUAT WATERMARK PADA LAY OUT BLOGGER MENGGUNAKAN CSS

Gambar
Gambar watermark buatan editblog Gambar diatas adalah Lay Out Contempo Hybrid dan boleh dikatakan saya telah membuang lebih separoh gagdet bawaan tema contempo dan menambahkan separoh gagdet atau widget klasik pilihan yang terbaik untuk membentuk template yang satu ini. Saya juga telah mengkompres kode kode yang saya tambahkan kedalam HTML, satu satunya ganjalan paling serius pada loading kecepatan tema ini adalah ukuran gambar yang sebagian "enggan" saya kecilkan karena pertimbangan estetika. Kalau sobat perhatikan pada gambar (ditunjukan oleh marking anak panah warna merah) kanan atas lay out saya juga telah menempatkan sebuah watermark cantik, jika sobat ingin membuatnya cukup melalui cara berikut: Masuk kepengaturan blogger Pilih tema Pilih Edit HTML Cari kode: (lebih mudah dengan cara tekan ctrl+f) ]]></b:skin> <b:template-skin> <![CDATA[ Yang sobat cari itu sebenarnya adalah kode yang telah saya sorot warna kuning, karena tepat

APAKAH TEMPLATE CONTEMPO HYBRID ITU?

Gambar
1.PERBEDAAN LAY OUT PADA OPSI DESAINER BLOGGER Saya jelaskan karena banyak yang mengira Contempo Hybrid itu adalah Contempo default. Walaupun dibuat berdasarkan Tema Contempo, contempo hybrid memiliki banyak sekali perbedaan dengan contempo default bahkan beberapa orang yang telah menggunakannya menyangka Contempo Hybrid adalah template klasik blogger. Lay out Contempo Hybrid, sudah beda dengan contempo asli, perhatikan baik baik lay outnya contempo asli: Blog post berada disebelah kanan, sedangkan pada Contempo Hybrid Blog Post dipindah kesebelah kiri, lay out sebelah kanan berubah fungsi menjadi sidebar. Perhatikan lay out contempo hybrid yagn kami buat dibawah ini: Dan perombakan besar besaran dilakukan terhadap: Lay out blogger Contempo menjadi Hybrid Heading blogger Contempo menjadi Hybrid Menu Navigasi Contempo menjadi samasekali baru dan berbeda menjadi: Navigasi Hybrid Merombak elemen CSS HTML untuk tampilan skin Menambah kode css untuk merobah lay out

UPDATE CONTEMPO HYBRID: LAY OUT FIXED

Gambar
Jika kebetulan anda pernah menggunakan template Contempo Hybrida, anda pasti akan menemukan lay out seperti gambar berikut: Tampilan titik titik adalah Menu navigasi custom yang saya buat, tampilan lay out ini tentu saja mengganggu sebagian pengguna walaupun tidak berpengaruh apa apa pada performa blog, saya sebenarnya berencana mau merapikannya dan menjadikannya seperti lay out gagdet/widget default blogger. Akan tetapi karena kesibukan saya hanya bisa menyembunyikannya dengan cara sebagai berikut: Masuk ke blogger>>Dasbor>>Tema>>Edit HTML Kopi kode dibawah ini: body#layout .outer-wrapper {width:970px} body#layout .content-wrapper {width:970px} body#layout #header {width:300px;float:left;margin-top:30px} body#layout #header2 {width:500px;float:right} body#layout .main-wrapper {width:550px} body#layout .sidebar-wrapper,.sidebar1-wrapper {width:300px;float:right} body#layout #footer {width:970px} .footer {width:215px;float:left} body#layout ul {display: non

CARA MENAMBAHKAN BREADCRUMBS YANG RESPONSIVE UNTUK TEMPLATE CONTEMPO HIBRID

Gambar
Struktur template contempo beda dengan template blogger tua atau klasik jadi untuk menambahkan breadcrumbs kita memakai kode yang berbeda, kode yang memberikan perintah responsive. Masuk ke tema contempo sobat: Masuk ke pengaturan pilih theme atau tema pilih opsi editHTML Pada kotak HTML cari kode  <b:includable id='main'>   Atau ketik saja di kotak pencarian diatas kotak editor HTML, bisa juga dengan memilih "LOMPAT KE WIDGET" seperti gambar: Jika sudah ketemu hapus kode tersebut dan ganti dengan kode panjang di bawah ini: <b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/><