Blog Ping

Rabu, 20 Oktober 2010

Cara Menambahkan Elemen Halaman Diatas Footer

Masih tentang desain template setelah sebelumnya saya posting cara menambah dua kolom elemen halaman dibawah sidebar utama dan menambah sebuah elemen halaman dibawah dua sidebar yg telah dibuat itu, agar lengkap kali ini akan saya paparkan lagi langkah-langkah menambah elemen halaman diatas footer seperti terlihat pada gambar berikut:

Menambahkan Elemen Halaman Baru Diatas Dua Kolom

Postingan ini khusus menjawab pertanyaan sobat Rahmatea, yang menanggapi postingan saya yang membahas cara menambahkan elemen halaman dibawah dua kolom. Bagaimana trik atau caranya jika elemen yang ditambahkan diatas dua kolom? Caranya mudah saja kebetulan postingan sebelumnya kita membahas cara menambahkan sebuah kolom pada sidebar, sehingga hasilnya template yang semula dua kolom menjadi tiga kolom.
menambahkan elemen halaman baru atau kolom baru pada sidebar
Sekarang kita lanjutkan...
Bagaimana cara menambahkan sebuah kolom elemen halaman diatas dua kolom

Menambahkan Kolom Elemen Halaman Baru Pada Sidebar

Setelah mempublikasikan template perdana yang saya hasilkan dari belajar otodidak desain template, beberapa teman minta diajarkan cara membuat template. maka pada postingan kali ini kita akan belajar lagi bagaimana menambahkan elemen baru pada sidebar atau membuat template dua kolom menjadi tiga kolom dengan dua kolom pada sidebar kanan.
Nah langsung saja seperti biasa template yang saya jadikan tempat eksperimen kecil adalah template default minima.

Menambah Elemen Dibawah Dua Sidebar

Sebelumnya saya pernah posting cara menambahkan elemen (dua kolom tambah gadget) dibawah sebuah sidebar utama.
 menambahkan elemen (dua kolom tambah gadget) dibawah sebuah sidebar utama
Postingan kali ini trik menambah elemen halaman dibawah dua kolom atau sidebar yang telah saya buat kemarin.
Seperti gambar dibawah ini:
menambah elemen halaman dibawah dua kolom atau sidebar

Menambah Dua Kolom Elemen Halaman Dibawah Sidebar Utama

Kali ini saya ingin mengetengahkan cara menambah dua kolom elemen halaman dibawah sidebar utama.
Tidak panjang lebar lagi, berikut cara menambah elemen halaman dibawah sidebar utama yang saya jadikan tempat eksperimen blog saya lainnya yang menggunakan template default blogger yaitu minima...
Tampilan awal templateminime seperti gambar dibawah ini:

elemen halaman dasar minima
Bagaimana cara menambah elemen dibawah sidebar utama menjadi dua kolom seperti gambar dibawah ini:
menambahkan dua kolom dibawah sidebar utama
Ikuti langkah langkahnya:
Menambah elemen di bawah sidebar utama

Membagi Header Menjadi Dua Kolom

Alhamdulillah hari ini bisa update lagi setelah beberapa hari asyik ngotak ngatik CSS dan belajar menggunakan beberapa program (Adobe Photoshop, Corel Draw X4, DreamLight Photo Editor dan PhotoShine) yang baru saya instal dilaptop kesayangan, yang tentu program itu saya harapkan bisa membantu saya lebih kreatif lagi dalam mendesain template kedepan dan menggunakannya pada hal-hal lain yang juga memeberi maslahat.
Tutorial sebelumnya kita sudah pernah membahas cara menambahkan kolom atau elemen halaman diatas header dan dibawah header juga menambahkan dua dan tiga kolom dibawah header. Kali ini kita akan belajar menambahkan elemen halaman baru pada header atau membagi header menjadi dua kolom.
Hasilnya seperti screenshot berikut:
membagi header menjadi dua kolom
Berikut langkah-langkahnya:

Membuat Tabber Tab Menu Dengan JQuery #1

Saat ini tabber tab mulai banyak terkenal dalam dunia desain web. Banyak situs yang menggunakan tabber tab dan mengisinya dengan berbagai konten untuk menghemat ruang halaman web site. Diantara yang banyak saya lihat menggunakan tabber tab untuk kategori recent post, comments dan random posts adalah template atau theme wordpress.

InsyaAllah kali ini saya ingin mengetengahkan cara membuat tabber tab dengan JQuery untuk template blogger. Diantara ragam tabber tab satu diantara yang akan kita pelajari cara pembuatannya sekarang, adalah tabber tab dengan struktur menu menggunakan icons seperti screenshot diatas. Atau lihat demonya disini

Cara Menambahkan Elemen Halaman Atau Kolom Full Widgets Pada Sidebar

Tutorial kali ini kita akan belajar lagi tentang desain template (cieh)? Bagaimana menambahkan elemen halaman atau kolom full widget pada sidebar template blogger dengan menggunakan CSS, XHTML dan JavaScript hanya dalam empat langkah simple, kita juga bisa dengan mudah mengganti warna dan widget langsung pada area dashboard. Berikut sebuah screenshot simple hasil dari tuturial ini:


tab view versi 2 image. 
imagetab view versi 2

Tampilannya mirip tab view sederhana yang triknya pembuatannya pernah saya bahas sebelumnya hanya saja selain perbedaan yang sudah saya sebutkan diatas kolom widget ini ketika menu diklik tingginya akan menyesuaikan dengan tinggi widget. Untuk menguji dan meyakinkan sobat JavaScript ini bekerja silahkan lihat demonya dulu pada template yang masih dalam proses desain saya disini dan disini. Sekalian saya minta saran dan kritik teman-teman untuk kedua tampilan terbaik template sederhana itu!!!

O ya saya sarankan untuk mengetes tutorial ini pada minima template atau backup template sobat sebelum bereksperimen dengan template sobat saat ini.

Membuat Background Pada Teks Area

Anaa pernah posting cara membuat teks area, apa itu teks area? lihat aja lagi postingan itu disini.

Kali ini cara membuat agar teks areanya memiliki background dengan cara menambahkan kode berikut:

Letakkan kalimat yang ingin ditampilkan pada teks area disini