Minggu, 17 Maret 2013

Tips Membuat Tampilan Halaman Post Berbeda


bagaimanakah cara membuat tampilan halaman post / artikel blog berbeda . . ?

Terkadang kita membutuhkan penampilan beberapa halaman post / artikel blog kita sedikit berbeda , dan mengatur ulang letak widget - widget blog yang tadinya / sebelumnya kelihatan menjadi tidak kelihatan atau sebaliknya .
sebetulnya trik ini hampir sama dengan artikel sebelumnya yaitu mengenai cara membuat halaman beranda / homepage berbeda dengan halaman post . jika belum baca silahkan baca disini mengenai Membuat Halaman Beranda ( Homepage ) jika sudah kita lanjutkan tutorial cara Membuat Tampilan Halaman Post Berbeda .
Contoh kita menggunakan artikel blognya mastony yaitu belajar css silahkan klik disini untuk melihat . jika sudah buatlah aturan css baru untuk widget( baru ) yang di sebelah kiri halaman post belajar CSS tersebut . untuk peletakan sama yaitu tepat sebelum kode   ]]></b:skin> contoh widget milik mastony seperti ini .

.contentLeft{margin:0;padding:10px;width:280px;float:none;text-shadow:-1px 1px 1px #fff;border:1px solid white;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-o-border-radius:10px;position:absolute;top:42px;left:-527px;display:none;visibility:hidden;background:#C7DCD8;}
keterangan : top:42 px posisi widget di geser dari atas ke bawah , left:-527px posisi widget di geser dari kanan ke kiri untuk merubah dari kiri ke kanan cukup hapus tanda kurang pada value tersebut , silahkan ubah menurut template masing - masing .sedangkan visibility:hidden dan display:none; agar tidak tampak pada halaman post / artikel manapun kecuali kita memanggil ulang kode css aturan baru .
kemudian tambah gadget baru silahkan anda pilih di sidebar bagian kanan ataupun kiri seperti berikut ini

<div class="contentLeft">....   disini menu widget tersembunyi disini menu widget tersembunyi.... </div>

selanjutnya anda tinggal buat artikel baru dengan metode HTML contoh artikel belajar css seperti berikut ini

Apakah Anda Ingin Belajar Css Untuk Mengontrol Blog Atau Website . .? ,Sebetulnya Apa Sih CSS Itu . .?
blognya mastony TUTORIAL BLOG untuk pemula yang menyediakan belajar CSS dengan tarif harga sebesar $0 Dollar Alias gratis . bagi sobat bloger yang ingin belajar CSS anda bisa simak disini ( untuk pemula ) .
CSS singkatan dari Cascading Style Sheet yaitu berupa Kumpulan - kumpulan kode untuk mengontrol HTML tag / halaman WEB .
<style>#Feed1,#PopularPosts1,#HTML2,#HTML3,#HTML6,#Followers1,.post-footer,#HTML9,.comments ,.blog-pager{display:none;margin:0;padding:0;height:0;}.post-body,.post-header,.main-outer,.content-outer,.header,.header-outer,.content-inner,.main-inner{background:#90BFBC;}.post-body{background:#C7DCD8;padding:10px;margin-left:300px;width:600px;text-shadow:-1px 1px 1px #fff;border:1px solid white;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-o-border-radius:10px;}
h3.post-title{margin-left:300px;}
.copyright{color:#000;text-shadow:-1px 1px 1px #fff;}
h3.post-title,a:visited,a:link,.navright a,.copyright a{color:#fff;text-shadow:0 1px 0 #444444;font-weight:normal;}
a:hover,.navright a:hover{color:red;text-decoration:none;}
.contentLeft{visibility:visible;display:block;}

 

Tidak ada komentar:

Poskan Komentar