Iklan 300 x 250

Random Post

Recent Post

 

Merubah Ukuran dan Posisi Sidebar dengan Main Wrapper ( Halaman Posting)

Text Resizer: Click for Resizer
Sebenarnya saya bingung mau kasih judul postingan ini apa,Sesuai janji saya yang kemarin tentang membuatkan tutorial yang satu ini kepada teman saya yang bertannya tentang cara menampilkan homepage(right sidebar 2 kolom) tapi waktu masuk halaman jadi left sidebar 1 kolom. Sebenarnya tutorial ini saya peroleh juga dari teman saya juga loch. hehehehehe insyaallah saya akan mencoba menjawab dan menjelaskannya, mudah-mudahan ini jawaban yang pas buat sahabat blogger saya dan buat semua yang membaca artikel ini.






  • Untuk membuatnya pertama-tama teman-teman harus mencari css seperti berikut ini pada tempalate anda.Untuk contoh templatenya aku menggunakan template 3 kolom loch
Ingat!!!!! Kode diatas akan terlihat tidak serupa pada setiap template, tapi intinya sama.

** main wrapper

#main-wrap1{width:460px;float:left; margin-top:10px}

#main-wrap2{float:left;width:474px;background:#FFF
{display: none !important;}); border:0px solid #323232}

.main .widget{margin-top:4px;margin-left:1px;width:455px;padding:0px 5px;}

** Sidebar Wrapper

#sidebar-leftwrap{width:200px;float:left;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;
background:#FFF; border:1px solid #323232}

#sidebarright{width:200px;float:right;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;
background:#FFF; border:1px solid #323232}
  • Coba perhatikan tulisan warna merah pada kode diatas. Jika kalian ingin merubah atau bertukar posisi antara main wrapper dengan sidebar kalian tinggal mengCopy kodenya dan menukar tulisan warna merahnya sebagai contoh kita akan menukar posisi sidebar right dengan main wrapper. Hasilnya seperti ini :

#sidebarright{width:200px;float:left;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;
background:#FFF; border:1px solid #323232}

#main-wrap1{width:460px;float:right; margin-top:10px}

#main-wrap2{float:right;width:474px;background:#FFF
{display: none !important;}); border:0px solid #323232}
.main .widget{margin-top:4px;margin-left:1px;width:455px;padding:0px 5px;}

Jadi sidebar kanan akan pindah ke kiri dan halaman posting akan pindah dari kiri ke kanan. Jika sudah kita tukar posisinya, sekarang kita tinggal menyisipkan kode tambahan supaya hanya muncul dihalaman tertentu.Untuk kodenya seperti dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

</b:if>

  • Sehingga kalo digabung hasilnya akan seperti ini (jangan lupa menyisipkan kode <style> untuk kode CSSnya) Seperti berikut :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#sidebarright{width:200px;float:left;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;
background:#FFF; border:1px solid #323232}

#main-wrap1{width:460px;float:right; margin-top:10px}

#main-wrap2{float:right;width:474px;background:#FFF
{display: none !important;}); border:0px solid #323232}
.main .widget{margin-top:4px;margin-left:1px;width:455px;padding:0px 5px;}
</style>
</b:if>

  • Kode diatas berarti pada halaman single post, posisi sidebar akan pindah ke kiri dan posisi main wrapper pindah ke kanan, namun pada halaman depan posisinya sebaliknya. Simpan kode diatas dibawah kode ]]></b:skin> atau diatas kode </head>

Penjelasan diatas adalah menukar posisinya, sekarang kita tinggal merubah ukuran main-wrapper lebih lebar dan menghilangkan satu elemen sidebar yaitu sidebar kiri yang dari tadi belum kita otak-atik. Coba perhatikan tulisan berwarna hijau pada kode diatas:

== Main : width:455px;
== Sidebarleft : width:200px;
  • Sebenarnya gampang saja, kalian tinggal membuang sidebar left dan menambahkan angkanya pada main (halaman posting). jadi hasilnya seperti ini :

== Main : width:655px;
== Sidebar left : {display:none;} ---> dihilangkan.

  • jadi kode keseluruhan akan seperti ini :


<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>

#sidebarright{width:200px;float:left;margin-top:10px; margin-right:5px; margin-left:5px;font-size:97%;line-height:1.5em;word-wrap:break-word;overflow:hidden;
background:#FFF; border:1px solid #323232}

#sidebar-leftwrap {display:none;}

#main-wrap1{width:460px;float:right; margin-top:10px}

#main-wrap2{float:right;width:474px;background:#FFF
{display: none !important;}); border:0px solid #323232}

.main .widget{margin-top:4px;margin-left:1px;width:655px;padding:0px 5px;}

</style>
</b:if>

** PEMASANGAN PADA TEMPLATE

  • Pilih Rancangan --> EDIT HTML (centang expand template widget) --> simpan kode modifikasi tadi diatas kode </head> atau dibawah kode ]]></b:skin>

  • Simpan template.

Sekali lagi saya ingatkan, kode diatas hanya contoh pada salah satu template. INGAT KODE UNTUK SETIAP TEMPLATE TIDAK SELALU SAMA.

Semoga bisa menjawab pertanyaan teman saya dan bermanfaat juga untuk teman-teman juga.

Source : http://www.z33s.co.cc/


Artikel Terkait:

Nobi Noku Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Merubah Ukuran dan Posisi Sidebar dengan Main Wrapper ( Halaman Posting)
Dalam Kategori :
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.

5 komentar:

mas arga.. jangan lupa cantumkan link dan nama sumber. Biasakan seperti itu. perhatikan blog2 lain dibagian akhir posting:

sumber : http........

Mengingatkan. takutnya suka ada yang iseng koment ga jelas

I love CSS

ikut nyimak :k:

Noubi noku mengatakan... Reply Comment

@ maz aziz Ok gan maaf sampek lupa hehehehe :j:

@hazel And Anime lovers Thanks gan udah berkunjung

klo d static page, gbs jalan bro...

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q: :r: :s: :t: :u: :v: :w: :x: :y: :z:

Posting Komentar

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda.Blog ini Blog Do Follow,Trims atas kerja samanya

 
 
 

Temukan Kami Dalam FB

Sahabat Blogger

http://nobinoku.blogspot.com/

Tukeran Link Yuk..!! Silahkan copy kode di atas..!!
Saya akan segera link balik..!! Link & Banner Teman
powered by PRBbutton Powered by  MyPagerank.Net backlink Site Meter http://www.wikio.com Free Automatic Backlink
Check Google Page Rank
Cerita Seks Panas Dewasa 17Tahun
free counters
 
Copyright 2010 - 2011 © This Is My Art | Didukung Oleh : Blogger
Template Name : Evolution Magazine Template | Modification by : Argabluesky