Senin, 12 Maret 2012

Cara Membuat Footer Menjadi 3 Kolom di blog

cara membuat footer 3 kolom di blog

- Footer biasanya adalah tempat credit sang empunya dan pembuat tempalate. biasanya 3 kolom di atas footer di butuhkan untuk blog yang memiliki widget sangat banyak. Jadi jika blog teman-teman memiliki banyak widget silahkan ikuti tutorial cara membuat 3 kolom footer di blog ini karena mungkin akan sangat bermanfaat untuk menghemat space di sidebar, ini solusi lain selain membuat tabview di blog untuk menghemat space sidebar kita. Footer 3 kolom yang akan kita buat ini bermainnya pada html dan css. jadi siapkan diri anda hehe

apa sih Footer 3 kolom itu?


Footer 3 kolom adalah footer yang memiliki 3 kolom tepat di atas footer blog, footer itu sendiri adalah tempat menaruh credit si pembuat template.

kelebihan footer 3 kolom ini?


Kelebihan dari footer 3 kolom ini adalah dapat menghemat space sidebar kita sehingga lebih terlihat rapi dan preofesional. Ini juga merupakan solusi bagi yang tidak mau memasang tab view java script di blognya. Footer kolon ini nanti bisa sobat isi dengan Daftar isi blog

kekurangan Footer 3 kolom ini?


mungkin dari sisi style dan tampilan akan sedikit hambar namun tidak masalah kalau teman-teman yang tidak mementingkan tampilan.. Karena Konten adalah Raja sesungguhnya :)

cara membuat footer 3 kolom di blog ini caranya bagaimana?


sangat simple dan mudah seperti saya katakan di awal posting kita akan membuatnya dengan bermain dan fokus pada html dan css. Maka langsung saja saya akan menjelaskan langsung rincian cara membuat footer 3 kolom ini ;

1 - Login dulu dong di blogger
2 - masuk tata letak >> edit html >> backup dulu templatenya saya nggak mau nanti ada yang protes kalo templatenya rusak gara-gara tutorial di blog rahasia ini
3 - cari kode ]]>
4 - masukkan kode dibawah ini diatas kode ]]> tadi
#footer-rahasia{
clear:both;
}
.footer-column {
padding: 10px;
}

5 - cari kode yang mirip dengan kode berikut
<div id='footer-wrapper'>
 <b:section class='footer' id='footer'/>
 </div>

6 - jika udah ketemu code di langkah nomor 5 silahkan paste ini tepat diatasnya
<div id='footer-rahasia'>
<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> <hr align='center' color='#5d5d54' width='90%'/></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>

7 - save template dan selesai kini footer blog sobat sudah menjadi 3 kolom :D
semoga bermanfaat ya cara membuat footer 3 kolom ini :)
Best Regard Rahasia Blog

cara membuat footer 3 kolom di blog


Minggu, 11 Maret 2012

cara membuat tab view dengan java script

cara membuat tab view dengan java script

- kali ini saya mau share cara membuat tabview keren dengan java script. tab view ini adalah suatu menu yang terdiri dari 3 atau empat slot yang berisi widget-widget yang telah di tentukan isinya oleh author blog itu sendiri. Sebenarnya banyak sekali di luar sana cara membuat tab view baik menggunakan css html javascript dan yang paling keren menggunakan jquery. namun sekarang saya tidak akan membahas semuanya saya hanya akan memberikan tab view dengan javasrcipt yang saya yakin cukup keren walaupun tidak sekeren jquery sendiri. Tapi java script tabview ini bisa kita kembangkan secara luas dan

Back To Top