INFO TERKINI

Biasanya kalo label yan gada di blog tampilannya seperti ini:

tips(5)
tutorial(6)
widget(7)

kalo hanya seperti itu saja kelihatannya kurang menarik.gimana kalo kita buat menjadi tampilan animasi..coba kamu lihat label yan gada di blog ini.di sebelah kiri atas.klik mouse kamu kesana.bagus kan tampilannya?

cara buatnya gampang kok..ikuti langkah langkah dibawah ini

1.login ke blogger
2.masuk ke layout-edit html
3.cari kode ini

<b:section class='sidebar' id='sidebar' preferred='yes'>

4.copy kode dibawah ini tepat dibawah kode nomor 3

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
&lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;
&lt;param name="bgcolor" value="#ffffff" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

5.kemudian save
6.sekarang label kamu sudah berubah menjadi animasi.bagus bukan?

catatan:
jika dirasa penempatan atau ukuran label terlihat kurang pas dengan template kamu.kamu bisa melakukan sedikit perubahan.

a.width="250" untuk mengubah lebar label..tinggal ganti angkanya saja
b.height="200" untuk mengubah tinggi label..tinggal ganti angkanya saja
c.<param name="bgcolor" value="#ffffff" /> untuk mengubah warna background
d.<param name="flashvars" value="tcolor=0x000000& untuk mengubah warna tulisan

Dalam sebuah buku ada yang namanya daftar isi.daftar isi ini berguna untuk menampilkan semua isi yang ada didalam buku tersebut.tentunya daftar isi ini akan sangat berguna sekali untuk pembaca.karena jika banyak tulisan dalam buku itu,mereka akan kesulitan mencari artikel jika mereka harus mencarinya satu persatu.daftar isi ini juga bisa anda tampilkan didalam blog,sehingga akan sangat memudahkan pembaca dalam mencari artikel dalam blog anda.jadi ketika ada pengunjung yang mengklik blog kamu maka akan tampil semua judul postingan beserta tanggal postingan.ok tanpa berlama lama,saya akan ajarkan cara membuatnya
A.langkah pertama
1.sigin ke blogger
2.masuk ke layout-edit html...sebelum kita mengedit blog sebaiknya anda copy dulu semua code html anda ke notepad..supaya jadi backup kalo nanti kita gagal
3.copy kode dibawah ini tepat diatas kode ]]></b:skin>

#toc { border: 0px solid #000000; background: #ffffff; padding:2px; width:495px; margin-top:10px;}

.toc-header-col1, .toc-header-col2,

.toc-header-col3 { background: #B5CBFA; color: #000000; padding-left: 5px; width:250px;}

.toc-header-col2 { width:75px;}

.toc-header-col3 { width:125px;}

.toc-header-col1 a:link, .toc-header-col1 a:visited,

.toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link,

.toc-header-col3 a:visited { font-size:100%; text-decoration:none;}

.toc-header-col1 a:hover,

.toc-header-col2 a:hover,

.toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background:#f0f0f0;}

4.simpan template itu

B.langkah kedua
1.klik page element
2.tambah sebuah element halaman
3.tambah kode html/javascript
4.copy kode dibawah ini dan masukkan kedalam element halaman yang muncul

<div id="toc"></div>

5.letakkan element halaman tersebut tepat diatas element post
6.kemudian simpan
7.tambahkan sebuah elemet halaman lagi
8.beri judul element halaman tersebut..bisa daftar isi atau terserah kamu
9.copy code dibawah ini dan masukkan kedalam element itu

<div id="toclink"><a href="javascript:showToc();"><img src="http://amen24.googlepages.com/folder.gif"/>
&nbsp;&nbsp;Lihat Daftar Isi !</a><br/><br/></div>
<script style="text/javascript" src="http://amen24.googlepages.com/daftarisi.js">
</script><script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

ganti tulisan yang dicetak tebal dengan alamat blog kamu

10.letakkan element daftar isi tersebut ditempat dimana sering dilihat oleh pengunjung

Text area berfungsi untuk menyimpan kode kode html.contohnya seperti ini:





didalam kolom tersebut kamu bisa menyimpan kode kode HTML yang bisa di copy oleh pengunjung blog.sekarang akan saya ajarkan cara membuatnya.


anda cukup copy code berikut :

1.Text area biasa

<p align="center"><textarea name="code" rows="6" cols="20"> test cara membuat text area...anda bisa menuliskan kode kode HTML di dalam kolom ini</textarea></p>

catatan:
1.kamu bisa mengganti tulisan yang di cetak tebal dengan kode kode yang ingin anda letakkan dalam kolom tersebut.anda bisa meletakkan dalam postingan atau bisa juga diletakkan di dalam page element

2.row="6" ini menunjukkan tinggi dari kolom tersebut.jika ingin kotaknya lebih tinggi,silahkan ganti dengan angka yang lebih besar

3.cols="20" ini menunjukkan lebar kolom


2.Text area Highlight
dengan menggunakan text area ini.pengunjung cukup mengklik tombol highlight all
maka semua text yang ada didalam kolom akan langsung terseleksi,ini sangat memudahkan pengunjung,karena takutnya nanti ada text yang tertinggal jika di seleksi secara manual.

contohnya seperti ini

dengan menggunakan text area ini.pengunjung cukup mengklik tombol highlight all<br /> <br /> maka semua text yan gada didalam kolom akan langsung terseleksi,ini sangat memudahkan pengunjung,karena takutnya nanti ada text yang tertinggal jika di seleksi secara manual.<br /> <br /> <br /> <br />

cara membuatnya..copy code dibawah ini:

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">dengan menggunakan text area ini.pengunjung cukup mengklik tombol highlight all maka semua text yan gada didalam kolom akan langsung terseleksi,ini sangat memudahkan pengunjung,karena takutnya nanti ada text yang tertinggal jika di seleksi secara manual.</textarea></p></div></form>

catatan:
1.ganti tulisan yang dicetak tebal dengan tulisan yang anda inginkan
2.<div align="center"> --> itu menunjukkan tombol highligh akan berada di tengah,jika ingin tombol itu berada di kanan atau kiri,tinggal ganti dengan left atau right
3.Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.
4.<p align="center"> menunjukkan bahwa text area berada ditengah,jika ingin berada di kanan atau kiri tinggal ganti dengan right atau left
5.<text style="WIDTH: 300px"> menunjukkan lebar kolom
6.HEIGHT: 144px menunjukkan tinggi kolom