Ada beberapa style blogroll dalam penggunaannya di blog, pada artikel CARA MEMBUAT BLOGROLL ini akan di bahas bagaimana cara membuat berbagai macam style blogroll tersebut berikut kode HTML yang di gunakan untuk membuat beberapa style blogroll.
Sekarang mari ikuti langkah megal megolnya miau dalam membuat beberapa style blogroll berikut ini, kode yang di beri warna harus anda edit terlebih dulu dengan alamat URL yang mau anda tampilkan sebelum memasangnya di blog anda.
CARA MEMBUAT BLOGROLL STYLE MENURUN
<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1">;
<option>BLOGROLL</option>
<option value="http://primbon-arti.blogspot.com/2012/07/30-ilmu-pelet-mahabah-pengasihan-kirim.html">30 Ilmu Pelet Mahabah Kirim Mimpi Basah</option><br />
<option value="http://primbon-arti.blogspot.com/2012/07/30-jenis-ilmu-kesaktian-kekebalan.html">30 Ilmu Kesaktian dan Kekebalan</option><br />
<option value="http://primbon-arti.blogspot.com/2012/07/cara-membuat-ramuan-gurah-manfaat-gurah.html">Ilmu Gurah, Cara Membuat Ramuan Gurah</option><br />
<option value="http://primbon-arti.blogspot.com/2012/07/ilmu-sapu-angin-khizib-bayu.html">Ilmu Sapu Angin Khizib Bayu</option><br />
<option value="http://primbon-arti.blogspot.com/2011/08/kegunaan-mahabah.html">Fungsi 30 Ilmu Mahabah</option><br />
</select>
Silahkan anda copy dan paste kan kode HTML di atas ke dalam blog anda, tetapi jangan lupa untuk mengedit kode yang berwarna merah dengan link url dan judul halaman blog url tersebut. Anda bisa menambahkan link url dan judul halamannya sesuai dengan kebutuhan anda, sebagai contoh miau hanya masukan 5 link saja. Angka 1 untuk size bisa juga anda ganti dengan angka 2, 3 dst. Lalu lihat sendiri hasilnya.
Contoh hasil kode di atas adalah sebagai berikut:
CARA MEMBUAT BLOGROLL STYLE MARQUEE
<marquee direction="up" height="100" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="50%">
<a href="http://primbon-arti.blogspot.com/2012/07/30-ilmu-pelet-mahabah-pengasihan-kirim.html" target="_blank">30 Ilmu Pelet Mahabah Kirim Mimpi Basah</a><br />
<a href="http://adf.ly/GT5BQ" target="_blank">http://primbon-arti.blogspot.com/2012/07/30-jenis-ilmu-kesaktian-kekebalan.html</a><br />
<a href="http://primbon-arti.blogspot.com/2012/07/cara-membuat-ramuan-gurah-manfaat-gurah.html" target="_blank">Ilmu Gurah, Cara Membuat Ramuan Gurah</a><br />
<a href="http://primbon-arti.blogspot.com/2012/07/ilmu-sapu-angin-khizib-bayu.html" target="_blank">Ilmu Sapu Angin Khizib Bayu</a><br />
<a href="http://primbon-arti.blogspot.com/2011/08/kegunaan-mahabah.html" target="_blank">Fungsi 30 Ilmu Mahabah</a><br />
</marquee>
Silahkan copy dan paste di blog anda kode HTML di atas untuk Blogroll Style Marquee, tetapi jangan lupa, tulisan yang berwarna merah harus anda edit terlebih dulu. Dan untuk menampilkan tulisan yang memiliki link dan bergerak ini menjadi renggang atau ada space jarak dari tulisan ke tulisan silahkan masukan kode <br /><br /> setelah kode </a>.
Untuk up bisa anda ganti dengan down dan angka 100 untuk height juga bisa anda sesuaikan dengan keinginan anda, kode angka 3 bisa anda ganti sesuai keinginan. Fungsinya untuk mengatur kecepatan tulisan bergerak, semakin besar angkanya maka semakin cepat gerakan tulisannya begitu juga sebaliknya. Dan 50% untuk ukuran lebarnya.
Contoh hasil kode di atas adalah sebagai berikut:
CARA MEMBUAT BLOGROLL STYLE MARQUEE DENGAN TABEL
<table border="3" cellpadding="2" style="height: 100px; width: 300px;"><tbody>
<tr> <td align="left"><marquee direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="100%">
<a href="http://primbon-arti.blogspot.com/2012/07/30-ilmu-pelet-mahabah-pengasihan-kirim.html" target="_blank">30 Ilmu Pelet Mahabah Kirim Mimpi Basah</a><br />
<a href="http://primbon-arti.blogspot.com/2012/07/30-jenis-ilmu-kesaktian-kekebalan.html" target="_blank">30 Ilmu Kesaktian dan Kekebalan</a><br />
<a href="http://primbon-arti.blogspot.com/2012/07/cara-membuat-ramuan-gurah-manfaat-gurah.html" target="_blank">Ilmu Gurah, Cara Membuat Ramuan Gurah</a><br />
<a href="http://primbon-arti.blogspot.com/2012/07/ilmu-sapu-angin-khizib-bayu.html" target="_blank">Ilmu Sapu Angin Khizib Bayu</a><br />
<a href="http://primbon-arti.blogspot.com/2011/08/kegunaan-mahabah.html" target="_blank">Fungsi 30 Ilmu Mahabah</a><br />
</marquee>
</td> </tr>
</tbody></table>
Hampir sama dengan blogroll marquee sebelumnya hanya bedanya yang ini menggunakan tabel. Silahkan anda utak - atik sendiri kode HTML di atas yg berwarna merah.
Contoh hasil kode di atas adalah sebagai berikut:
CARA MEMBUAT BLOGROLL STYLE SCROLLBAR
<div style="border: 3px solid#000000; height: 140px; overflow: auto; width: 240px;">
<a href="http://primbon-arti.blogspot.com/2012/07/30-ilmu-pelet-mahabah-pengasihan-kirim.html" target="_blank">30 Ilmu Pelet Mahabah Kirim Mimpi Basah</a><br />
<a href="http://primbon-arti.blogspot.com/2012/07/30-jenis-ilmu-kesaktian-kekebalan.html" target="_blank">30 Ilmu Kesaktian dan Kekebalan</a><br />
<a href="http://primbon-arti.blogspot.com/2012/07/cara-membuat-ramuan-gurah-manfaat-gurah.html" target="_blank">Ilmu Gurah, Cara Membuat Ramuan Gurah</a><br />
<a href="http://primbon-arti.blogspot.com/2012/07/ilmu-sapu-angin-khizib-bayu.html" target="_blank">Ilmu Sapu Angin Khizib Bayu</a><br />
<a href="http://primbon-arti.blogspot.com/2011/08/kegunaan-mahabah.html" target="_blank">Fungsi 30 Ilmu Mahabah</a>
</div>
Silahkan anda copy dan paste kode HTML di atas tersebut dan jangan lupa melakukan editing untuk tulisan yang berwarna merah,
Contoh hasil kode di atas adalah sebagai berikut:
30 Ilmu Pelet Mahabah Kirim Mimpi Basah
30 Ilmu Kesaktian dan Kekebalan
Ilmu Gurah, Cara Membuat Ramuan Gurah
Ilmu Sapu Angin Khizib Bayu
Fungsi 30 Ilmu Mahabah
30 Ilmu Kesaktian dan Kekebalan
Ilmu Gurah, Cara Membuat Ramuan Gurah
Ilmu Sapu Angin Khizib Bayu
Fungsi 30 Ilmu Mahabah
CARA MEMBUAT BLOGROLL STYLE BACKGROUND BERGAMBAR
<div style="background-image: url(http://kitabkeilmuan.files.wordpress.com/2012/12/kelinci.jpg); background-position: center; background-repeat: repeat; padding: 5px;">
<marquee direction="up" height="150px" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" style="border: 3px solid #000000; padding: 2px; text-align: center;" width="529px">
<a href="http://primbon-arti.blogspot.com/2012/07/30-ilmu-pelet-mahabah-pengasihan-kirim.html" target="_blank">30 Ilmu Pelet Mahabah Kirim Mimpi Basah</a><br />
<a href="http://primbon-arti.blogspot.com/2012/07/30-jenis-ilmu-kesaktian-kekebalan.html" target="_blank">30 Ilmu Kesaktian dan Kekebalan</a><br />
<a href="http://primbon-arti.blogspot.com/2012/07/cara-membuat-ramuan-gurah-manfaat-gurah.html" target="_blank">Ilmu Gurah, Cara Membuat Ramuan Gurah</a><br />
<a href="http://primbon-arti.blogspot.com/2012/07/ilmu-sapu-angin-khizib-bayu.html" target="_blank">Ilmu Sapu Angin Khizib Bayu</a><br />
<a href="http://primbon-arti.blogspot.com/2011/08/kegunaan-mahabah.html" target="_blank">Fungsi 30 Ilmu Mahabah</a><br />
</marquee>
</div>
Untuk style blogroll dengan back ground bergambar ini anda harus menentukan terlebih dulu ukuran gambar yg akan di gunakan, baru upload ke blog dan masukan urlnya. Atau bisa juga anda cari gambarnya di internet kemudian copy url dan masukan ke dalam kode htmlnya.
Contoh hasil kode di atas adalah sebagai berikut:
Tidak terlalu sulit bukan? Silahkan anda mencoba sendiri dengan melakukan editing untuk mengetahui hasilnya. Semoga tulisan miau di atas tentang CARA MEMBUAT BLOGROLL bisa bermanfaat untuk anda semua
Rating: 4.5
Posting Komentar
Posting Komentar