Cara-Cara Membuat Tombol di blogspot

Cara membuat tombol untuk blog blogger sangatlah gampang, karena kita hanya membutuhkan beberapa kode HTML yang amat singkat. Beberapa tujuan pembuatan tombol atau button ini hanya agar tampilan tulisan maupun link yang kita sediakan terlihat lebih menarik.


Selain itu dengan sebuah tombol maka tampilan posting akan menjadi lebih singkat dan akan terlihat lebih unik daripada hanya sekedar tulisan saja. Coba anda lihat Contoh tombol hideshow dibawah ini:

Nah untuk lebih jelas silakan anda perhatikan contoh penulisan perintah dalam membuat tombo ini. Klik saja setiap tombol yang ada untuk melihat perbedaannya.

<button>Saya Adalah Tombol</button>

maka anda akan mendapatkan hasil seperti berikut:

Contoh di atas adalah tulisan yang dibentuk dengan gaya tombol/button namun tidak mengandung link.

Jika anda ingin menjadikannya sebuah link maka anda hanya perlu menambahkan kode seperti ini.

<a href="http://realfa17.blogspot.com/2011/05/cara-cara-membuat-tombol-di-blogspot.html"><button>Cara-Cara Membuat Tombol di blogspot</button></a>

maka anda akan mendapatkan hasil seperti berikut:

Jika anda ingin membuat agar linknya terbuka di tab baru, maka anda harus menggunakan kode berikut

<a href="http://realfa17.blogspot.com/2011/05/cara-cara-membuat-tombol-di-blogspot.html" target="_blank"><button>Cara-Cara Membuat Tombol di blogspot</button></a>

Untuk menampilkan tombol ketengah posting maka anda cukup menambahkan kode seperti ini:

<div class="separator" style="clear: both; text-align: center;"><centre><button>Cara-Cara Membuat Tombol di blogspot</button></a></div>

Jika anda ingin menambakan gambar animasi di atas tombol maka kodenya seperti berikut:

<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsp8VdcJPxAkTzxWRBhxk94za7g3b0MHIOm48fjinyz6F_fKvb9njsVL0FkMNkPJ8YWnIh3Y7JFU19l9M-hwXlFEcU7Yn7vByQ3e_au5ZptsDfmTINIfzhxL_F_1NMgM0MlFB-T3vltrzb/s1600/AddEmoticons04211.gif" /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsp8VdcJPxAkTzxWRBhxk94za7g3b0MHIOm48fjinyz6F_fKvb9njsVL0FkMNkPJ8YWnIh3Y7JFU19l9M-hwXlFEcU7Yn7vByQ3e_au5ZptsDfmTINIfzhxL_F_1NMgM0MlFB-T3vltrzb/s1600/AddEmoticons04211.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><button>Cara-Cara Membuat Tombol di blogspot</a></div>

Gampangkan???
Yang perlu anda perhatikan adalah perubahan kode telah ditandai dengan perubahan warna.
Jika anda sudah menguasai cara pembuatan tombol ini anda bisa menggabungkannya dengan kreasi anda sendiri.
Salah satu trik tombol lain dan yang paling sering saya pakai adalah
seperti yang di atas. Jika ingin tahu bagaimana caranya tinggal klik saja lagi..

selamat berkarya..!!!

Cara Membuat Read More Di Blogspot

Cara membuat read more di Blogspot atau blogger sangat mudah, hanya dengan manupulasi CSS display:none yaitu meng-hiden teks yang tidak ingin ditampilkan di home, archive dan halaman label. Sebenarnya teknik ini bisa digunakan untuk menerapkan salah satu teknik Black Hat SEO di blogspot, untuk teknik SEO ini tidak akan saya bahas disini, yang berminat silakan explore dan dicoba sendiri.

Berikut ini langkah-langkah untuk membuat read more blogger :

• Silakan login ke blogger.com, klik link Layout (Tata Letak) kemudian klik link Edit HTML
• Aktifkan list Expand Template Widget, agar source script template blogger na terlihat secara keseluruhan.
Tepat di atas atau sebelum tag </head> masukkan kode berikut seperti ini:
<style>
<b:if cond='data:blog.pageType == "item"'>
span.hidenpost {display:inline;}
div.hidenpost {display:inline;}
<b:else/>
span.hidenpost {display:none;}
div.hidenpost {display:none;}
</b:if>
</style>
Cari <data:post.body/> dan tambahkan kode berikut tepat dibawahnya:
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read more ...</a>
</b:if>
Selesai. Sekarang setiap posting letakkan


<span class="hidenpost"> sisa postingan yang akan dihiden, akhiri dengan </span> (ketika memasukkan <span class="hidenpost"> dan </span> posting harus dalam mode Edit HTML bukan Compose ) p
t AddThis, atau yang lainnya. Atur juga margin atasnya disesuaikan dengan keinginan kamu (tidak harus 5px). Dan jika kamu ingin meletakkan Read more tersebut berada di tengah, ganti saja right-nya dengan center.

Demikian tutorial ini, selamat mencobanya.

pastikan juga diantara <span class="hidenpost"> dan </span> tidak boleh ada <span> jika tidak bisa dihindarkan gunakan <div class="hidenpost"> dan </div> demikian juga sebaliknya. Gantilah Read more tersebut dengan kode HTML Read more, widget.


Ket: 
Tutorial ini hanya untuk template tertentu.

Cara Memberi Rainbow Effect (Efek Pelangi) Pada Link Hover

Pada setiap template blog memiliki bentuk tampilan link (tautan) yang berbeda-beda. Ada yang menggunakan bentuk garis bawah (underline), warna, ada pula yang menggunakan bentuk perubahan huruf. Setiap kali kita ingin mengubah bentuk warna atau huruf dari link tersebut, kita akan direpotkan dengan pencarian letak dimana kode link untuk title, posting, comments, widget, dan footer, tersebut berada.

Ini cukup memakan waktu, bahkan bagi mereka yang belum faham betul “bahasa” HTML akan berakibat fatal, yaitu rusaknya template. Sebenarnya ada cara yang mudah untuk mengubah bentuk tampilan warna pada link hover ini . Tapi sebelumnya akan dijelaskan dahulu mengenai bentuk tampilan link, khawatir para blogger pemula belum mengerti.

Ada tiga bentuk tampilan link yang biasa terdapat pada script HTML template blog, yaitu: link active, link visited danlink hover.

• Link active, adalah bentuk tampilan link ke suatu URL tertentu yang masih belum diklik untuk dikunjungi.
• Link visited, adalah bentuk tampilan link yang sudah diklik untuk dikunjungi. Link ini akan kembali ke bentuk active jika kamu menghapus riwayat (history) pada internet explorer, atau jika kamu membuka situsnya di komputer lain.
• Link hover, adalah bentuk tampilan link apabila didekati oleh mouse pointer.

Bagaimana cara memberi rainbow effect (efek pelangi) pada link hover, supaya link pada blog akan terlihat berwarna-warni, apabila didekati oleh mouse pointer. Untuk memberi efek pelangi pada link hover ini sebenarnya cukup mudah, berikut ini adalah langkah-langkahnya :

• Kopi script berikut :
  
  
  <script src='http://sites.google.com/site/ruangsc/enes/rainbowlink.js'/>
• Kemudian Login ke blogger.
• Dari halaman Dashboard klik Tata Letak dan pilih Edit HTML.
• Letakkan script tadi (yang sudah dikopi) di bawah <head> (sebaiknya di bawah <title><data:blog.pageTitle/></title>), yang letaknya ada di barisan awal script.
• Kemudian di save.

Atau dengan cara yang lebih gampang, copy kode scrpit di atas, kemudian anda masuk ke halaman dashboard, pilih menu Rancangan| Tambah gadget | HTML/Java script, pastekan kode tersebut dan simpan. Terserah anda mau letakkan dimana saja tidak masalah. Karena menurut pengalaman saya kode tersebut tetap berfungsi...

Untuk melihat hasilnya, buka blog dan dekatkan mouse pointer ke kata/kalimat yang memakai link..

Contoh pembuatan tabel dengan html

Dalam bahasan sebelumnya kita telah mencoba beberapa contoh penulisan tag html. Sekarang kita akan coba bagaimana membuat tabel dalam website. Tabel merupakan hal yang sangat penting sehingga mau tidak mau anda harus bisa menguasainya. Karena dengan tabel kta akan lebih mudah dalam mendesign sebuah website....

sekarang kita langsung saja mencoba membuat sebuah tabel.....

silahkan buka program notepad anda...
Tentu masih ingat kan bagaimana caranya...!!!

Latihan 3.

Membuat Tabel

Ketikkan;

<html>
<body>
<table width=”80%” border=”1″>
<td>
<td>Ini kolom pertama</td>
<td>Ini kolom kedua</td>
</tr>
<td>
<td>Ini kolom pertama baris kedua</td>
<td>Ini kolom kedua baris
kedua</td>
</tr>
</table>
</body>
</html>

Simpan dengan nama contoh Tabel1.html. Tutup notepad anda dan lihat hasilnya...

buka kembali notepad anda lalu ketikkan;

<html>
<body>
<table width=”80%” border=”1″>
<tr>
<td bgcolor="red">Ini kolom pertama</td>
<tr bgcolor="red">Ini kolom kedua</td>
</tr>
<tr>
<td bgcolor="yellow">Ini kolom pertama baris kedua</td>
<td bgcolor="yellow">Ini kolom kedua baris kedua</td>
</tr>
</table>
</body>
</html>

Simpan dan lihat hasilnya.....
waahhh.......
kok jadi warna-warni yach.....!!!!!

oke.....
Sekarang kita coba lagi ketikkan;

<html>
<body>
<table width="80%" border="1">
<tr>
<td align="center" bgcolor="grey" width="70%">Ini kolom pertama</td>
<td align="right" bgcolor="grey" width="100%">Ini kolom kedua</td>
</tr>
<td height="800" bgcolor="pink">
<td align="center">Ini kolom pertama baris kedua</td>
<td align="right">Ini kolom kedua baris kedua</td>
</tr>
</table>
</body>
</html>

simpan dan.........
Latihan selesai.....