Ngehack Template Minima Youk ….

Sumpek, bosan, jenuh dan BT gara-gara PR yang kemaren melorot, Akhirnya terobati juga. Berkat support dan dukungan sohib-sohib yang keurennn abissss ...., Makasih ya. Dan aku jadi semangat nih blogwalking kesana kemari, ehh ... ketemu sama trik yang juga asik, yaitu trik bikin 3 kolom footer. Gua utak-atik dan coba mengaplikasikannya, eh ...ternyata berhasil. Lalu ide nyeleneh kembali muncul, ...Gimana kalo 3 kolom footernya kita letakkan di bawah header... Atau kita coba pasang kedua-duanya sekalian, bisa ngga ya????...

Akhirnya ... berhasil juga jerih payahku meskipun sebetulnya aku buta akan apa itu css, java/script, html, xml dll , Plong dech ... Seneng banget. Biarpun Cuma di minima klasik doank, gak apa-apa dech. Akhirnya aku berhasil menambah 3 kolom di bawah header dan 3 kolom lagi di bawah footer (sebetulnya ada empat kolom hi hi hi ...) Untuk demonya, klik aja di sini. atau di sini sedangkan contoh elemen yang berhasil aku tambah kayak gambar di bawah ini nih :


Ide lain yang tiba tiba nongol adalah "gimana caranya ngumpetin/nyembunyiin 3 kolom footer dan 3 kolom di bawah header tadi bila kita bergerak ke halaman selanjutnya". Maksudnya, biar loading page ke halaman selanjutnya bisa lebih ringan, Khan ngga semua widget harus kita tampilkan di depan. Nah untuk trik ini (Menampilkan dan menyembunyikan elemen halaman) kebetulan telah aku kuasai sedikit, jadi tinggal memadukan antara kode 3 kolom footer dan 3 kolom di bawah header tadi dengan kode nyembunyiin widget tadi. Dan ternyata .... Bisa bro .... Asik ....

Ok, sekarang gua mau bagi nih jurusnya, buat yang mau sedikit repot dan mumet silahkan dech pelajari pelan-pelan. Dan buat para master yang udah kawakan, tolong jagan diketawaiin ya ..., kritik dan sarannya ditunggu nih... biar jampi-jampi gua makin majur...

A. Tiga Kolom Footer

Blogger yang terhormat, sebelum menerapkan trik di bawah ini, sedikit saran yang bisa saya berikan adalah, agar anda selalu membackup template. Untuk langkah antisipasi, takut jampi-jampinya gagal. Atau lebih aman sebaiknya buat blog baru aja dech. Terserah mau dikasih nama apa, yang penting pake template minima dulu. Kalo udah berhasil, boleh dech coba ke tempale-tempale yang lain, atau terapkan ke blog utamamu. Ok Coy ... Tarik ...

1. Login ke blogspot
2. Klik Customize
3. Klik layout
4. Klik edit html, ingat !!! , Expand teks Widgetnya jangan di conteng, ntar bingung dech.
5. Cari kode seperti di bawah ini :



<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>


6. Ganti kode yang berwana biru dengan kode seperti di bawah ini :


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
</p>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
</b:if>


7. Sampe di sini, save dulu dech. Lalu cari kode ini : </b:skin> Kalo udah ketemu, letakkan kode seperti di bawah ini di atas kode </b:skin> tadi.



#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}


Kalo udah beres, save dech. Klik layout untuk melihat elemen baru yang kita tambahkan


B. Tiga kolom di bawah header

Nah, sekarang kita tiba di bagian yang agak merepotkan nih. Biar lebih gampang, kita edit pake worpad atau document.txt

1. Copy kode di bawah ini lalu edit dengan worpad atau document txt :


#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}


2. Ganti kode yang berwarna hijau dengan tulisan header

3. Kalau sudah selesai, tempatkan kode hasil editing kamu tadi ke atas kode </b:skin>

4. Lalu kopi kode di bawah ini lantas edit dengan worpad atau document txt



<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
</p>

<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
</b:if>



5. Ganti semua tulisan footer yang berwarna biru dengan tulisan header.

6. Ganti tulisan
(semua tulisan yang berwarna merah) yaitu col1 menjadi col4, col2 menjadi col5 dan col3 menjadi col6

7. Dan terakhir, kode yang berwarna coklat, yaitu :
col-bottom rubah menjadi col7-bottom

8. Kalo udah selesai kamu edit, copy kode yg tadi telah diedit lalu tempatkan di atas kode ini : <div id='content-wrapper'> yang ada pada templatemu.

8. Save lalu klik layout untuk melihat apakah elemen halaman yang kamu buat udah nongol di bawah elemen header.

Silahkan isi elemen halaman yang baru anda buat tadi dengan berbagai aksesoris, misalnya logo, follower atau profil. Setelah semuanya selesai, kamu bisa melihat tampilan blogmu sekarang, lalu klik judul postinganmu atau readmore-nya untuk melihat apakah 3 kolom header dan 3 kolom footer tadi menghilang.

Jika ingin 3 kolom footer nya tetap nongol, kamu tinggal hapus aja kode yang tebal, yaitu :
<b:if cond='data:blog.url == data:blog.homepageUrl'> dan </b:if> Kedua kode inilah yang bikin 3 kolom header maupun 3 kolom footer tadi disembunyikan bila kita bergerak ke halaman selanjutnya.

Ok blogger .... selamat berpusing ria ...



kembali ke atas




6 comments:

  1. sip sangat mengerti dan jelas sekali bro..

    ReplyDelete
  2. Tengkyu kang jaloe, atas koment plus izin nya ..., kalo ada yang salah langsung suruh push up dech kang he he he

    ReplyDelete
  3. Kabar Baik bro..
    wah lagi asyik kutak katik HTML nih...?? sukses ya..??

    ReplyDelete
  4. Jek.. backgroundnya dibuat gimana tuh jadi kayak slide show.. mantap banget....

    ReplyDelete
  5. @Ifoel

    Tenang bro, gwa lagi buatin postingnya ... tunggu aja yach

    ReplyDelete

Makasih udah mampir dan kasih komentar ....