Civitas Virtual SMP Negeri 2 Batangan Media Edukasi Informasi Komunikasi Akademika-----> (Smart, Kreatif, Inovatif, Unggul, Tangguh, Religius)

Animasi KURSOR

Jumat, 21 November 2014

Cara membuat Blogroll

Cara membuat Blogroll


Sebelumnya kita cari tahu dulu, apa itu Blogroll?? Apa ya...
Blogroll adalah sebutan kode script untuk membuat box yang dilengkapi dengan tulisan teks, sementara box tersebut dapat ditarik-tarik dengan menggunakan scroll jika terdapat kelebihan muatan teks.

Blogroll sering digunakan untuk link halaman pos pada widget, atau link sahabat untuk tukeran link.

Gimana ya cara buatnya:
  1. Masuk ke blogger kamu
  2. Pada dashboard pilih > Tata Letak > Tambah gadget > HTML/Javascript
  3. Nah, masukin kode berikut ini
<div style="border:0px none;overflow:auto;width:160px;height:400px;text-align:left;background:#FFFFFF">

<div style="background:#020D8A;"><font color="#FFFFFF"><b>Alat Listrik</b></font></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/2013/07/lampu-philips.html"><font color="#000000">- Lampu Philips</font></a></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/2013/07/lampu-osram.html"><font color="#000000">- Lampu Osram</font></a></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/"><font color="#000000">- Kabel Listrik</font></a></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/2013/07/box-mcb.html"><font color="#000000">- Box MCB</font></a></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/2013/07/inbox-outbox.html"><font color="#000000">- Inbox & Outbox</font></a></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/2013/07/stop-kontak-1-6-way.html"><font color="#000000">- Stop Kontak 1-6 Way</font></a></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/2013/07/stop-kontak-saklar.html"><font color="#000000">- Stop Kontak + Saklar</font></a></div>

<div style="background:#020D8A;"><font color="#FFFFFF"><b>Elektronik</b></font></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/2013/07/microphone-yamaha-ya-7970-memiliki.html"><font color="#000000">- Microphone Yamaha</font></a></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/2013/07/energizer-recharge-mini.html"><font color="#000000">- Baterai Charge</font></a></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/2013/07/lampu-emergency.html"><font color="#000000">- Lampu Emergency</font></a></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/2013/07/seterika.html"><font color="#000000">- Seterika</font></a></div>

</div>
  • Setelah itu klik simpan, dan lihat hasilnya, mantap bukan??
Cara modifikasi kode diatas:
  • width:160px;height:400px = lebar dan tinggi, sesuaikan dengan blog kamu ya
  • Kamu bisa merubah warna latar belakang dan huruf yang digunakan, dengan mengganti kode warna HTML yang berwarna merah
  • Tulisan berwarna biru adalah link untuk halaman kamu, dan juga tulisan yang timbul di blog nantinya
Contoh jadinya seperti ini dengan width:160px;height:200px :



Selamat Mencoba...
Kalo berhasil, komen boleh lah... :)

0 komentar:

Posting Komentar