Simple and Futuristic : Blogger Template The Transformers
Blogger Template The Transformers, Template ini didesign oleh : Kang Oemar, Sebelum diluncurkan atau disebarkan, template ini telah kami uji dulu kelayaknnya. template ini selain terlihat elegant juga sudah kami lengkapi dengan Fitur2 baru seperti : Menu Tab view, system Auto Readmore versi terbaru, emoticon pada judul posting juga telah kami sediakan fasilitas meta content seperti untuk memasukan Keyword pada halaman HTML template ini. jadi bagi anda yang berminat untuk menggunakan template ini, tidak usah repot-repot lagi untuk mengeditnya.seperti memasang system auto readmore dan juga Menu Tab view. template ini berukuran 70.59Kb, dengan kecepatan load time 0.9second.template ini tidak menggunakan background berformat gambar seperti pada template premium lainnya. template ini hanya menggunakan olah warna. jadi ukurannya tiak terlalu besar an berat untuk di load.
Template Over view :
Keterangan untuk menu Tab View :
Berikut ini adalah Keterangan untuk memasukan judul postingan atau apapun ke dalam tampilan menu Tab View. silahkan anda edit beberapa bagian kode di bawah ini.
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a class="Active" href="javascript:tabview_switch('TabView',%201);">Recent Post</a>
<a class="" href="javascript:tabview_switch('TabView',%202);">Kategori</a>
<a class="" href="javascript:tabview_switch('TabView',%203);">Free Download</a>
</div>
<div style="width: 300px; height: 200px;" class="Pages">
<div style="overflow: auto; height: 200px; display: block;" class="Page">
<div class="Pad">
</ol>
<li><a href="Link disini"><img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif"/> Judul posting disini</a></li>
</ol>
</div>
</div>
<div style="overflow: auto; height: 200px; display: none;" class="Page">
<div class="Pad">
<ol>
<li><a href="Link disini"><img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif"/> Nama Kategori disini</a></li>
</ol>
</div>
</div>
<div style="overflow: auto; height: 200px; display: none;" class="Page">
<div class="Pad">
<ol>
<li><a href="Link disini"><img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif"/> Nama Content disini</a></li>
<ol>
</div>
</div>
</div>
</div></form>
<script type="text/javascript"><br/>
<br/>tabview_initialize('TabView');<br/><br/></script>
Silahkan anda ganti beberapa bagian kode yang dicetak tebal dan berwarna merah diatas sesuai dengan yang anda inginkan, misalnya untuk bentuk tampilan dari menu Tab View tersebut, silahkan anda ganti ukuran lebar (Width) yang tadinya 300 menjadi 200.juga untuk ukuran height-nya.
sedangkan untuk memperbanyak isi kontent yang akan di tampilkan pada menu Tab View, anda cukup mengcopy dan mempaste kode.
<li><a href="Link disini"><img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif"/> Nama Content disini</a></li>
anda cukup memperbanyak kode diatas, tapi anda harus mengcopynya dari baris yang sama. agar tampilan emoticonnya sama pada setiap halaman Tab View tersebut. kalau anda tidak menyukai tampilan emoticon tersebut, silahkan anda ganti atau anda hapus kode image source-nya.
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif"/>
Silahkan anda praktekan sendiri pada blog anda. semoga bermanfaat dan salam blogger mania.
ds