Tuesday, June 09, 2009

MEMBUAT SIDEBAR TAMPIL BERGANTIAN

. Sudah 3 hari ini saya tidak nulis diblog, kayanya sudah kangen banget. "hihi". 2 hari ini badan saya sakit . "eh ko malah curhat".
Saya ingin langsung saja deh.
Pernah suatu kali anda membuka blog anda terasa loading nya sangat lama apalagi pada halaman utama. salah satu faktornya karena sidebar blog anda sangat penuh dan banyak, Sidebar blog biasanya salah satu hal yang paling "berat" pada saat loading.
Ada berbagai cara yang bisa mengatasi itu salah satunya membuang element sidebar yang menurut anda membuat blog anda terasa berat saat dibuka.
Trus bagaimana dong kalo element sidebar tersebut penting buat blog saya? mungkin pertanyaan itu yang langsung anda pikirkan, cara yang lain yang mungkin bisa mengurangin beban saat membuka halaman utama blog anda, kita dapat membuat element sidebar blog tampil hanya pada halaman posting atau element sidebar blog pada saat kita buka halaman utama berbeda ketika kita buka pada halaman posting..

Berikut ini caranya :
Login to Blogger kemudian pilih "Layout"
Klik pada "Edit HTML" , check pada "Expand Widget Templates"

untuk membuat element sidebar cuma tampil dihalaman posting, cari kode element sidebar blog yang ingin anda hilangkan, contoh saya menggunakan kode ini
<b:widget id='HTML14' locked='false' title='Informasi lowongan kerja' type='HTML'>
<b:includable id='main'>
[ ... internal kode ... ]
</b:includable>
</b:widget>


HTML14 adalah ID yang berbeda-beda sesuai dengan jumlah element sidebar telah anda kumpulkan dan atribut jenis yang berasal dari berbagai jenis komponen lain (Label, Arsip, Feed, dll).
Sobat semua sudah pasti paham dong.

Kemudian liat kode yang berikut ini :
<b:widget id='HTML4' locked='false' title='Informasi lowongan kerja' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
[ ... el código interno ... ]
<b:else/>
<style>#HTML14 {display: none;}</style>
</b:if>
</b:includable>
</b:widget>

Untuk kode yang berwarna merah adalah kode yang anda harus tambahkan.

Bagaimana dengan membuat sidebar tampil seolah-olah bergaitan antara halaman utama dengan halaman posting. Berikut caranya :
Sebelumnya hilangkan check pada "Expand Widget Templates".
Saya menggunakan contoh kode berikut
<b:if cond='data:blog.pageType != "item"'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
[ ... element-element yang ada di sidebar ... ]
</b:section>
</div>
<b:else/>
<div id='sidebar-wrapper-2'>
<b:section class='sidebar' id='sidebar-2' preferred='yes'>
[ ... element-element yang ada di sidebar ... ]
</b:section>
</div>
</b:if>


Untuk kode yang berwarna merah adalah kode yang anda harus tambahkan.


Mungkin cuma segitu yang bisa saya berikan.
salamat mencoba ya.!

Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

10 komentar: on "MEMBUAT SIDEBAR TAMPIL BERGANTIAN"

yugi said...

wah bagus mas tutor nya... terus berbagi ya mas..

andro_simar said...

wah,, mantep infonya,, two thumbs for you,, :D

ifat said...

:) hi...mav baru berkunjung, sip infonya maz

BlaGaBloGer said...

kalau cara buat posting-komentar itu gimana???
kan biar ngirit tempat... hehehehe..
Salam kenal yaaa...

genialbutuhsomay said...

nanya nii .... klu 'sidebar cuma tampil dihalaman posting' terus gmn pengunjung bisa ternavigasi dengan baik di page kita kang?

ubuh said...

@genialbutuhsomay : mungkin kita bisa lebih mengoptimalkan fungsi dari menu nav. lagian tidak semua element sidebar kan yang hanya tampil di halaman postingan.
trima kasih kunjungananya..

ubuh said...

@blagabloger : untuk membuat tab konten seperti disamping itu mungkin anda bisa melihatnya disini www.dynamicdrive.com.
atau nanti saya coba untuk membuat tutorialnya.

H. Nandang Moch Solihin said...

Salam kenal...

Di Blog saya, kalau buka postingan, selalu diikuti dengan sidebar kiri dan kanan, mau tanya, kalau sidebar yang kirinya bisa tidak ikut terbuka, bisa ga ya...

terimakasih

H. Nandang Moch Solihin said...

Lupa, atu lagi..gimana caranya buat nambah widget di bawah postingan,,, ditunggu ya ke emailku..
nms24jam@gmail.com

terimakasih

dani joel said...

jazakumullah....
sangat bagus tutorialnya
salam kenal

Post a Comment

Sobat-sobat semua sudah punya rekening virtual gak buat transaksi di internet. Kalo belum daftar di PAYPAL, Klik aja Icon dibawah Ini

Sign up for PayPal and start accepting credit card payments instantly.