Jumat, 24 Februari 2012

Membuat Kotak Blogroll


Setelah sebelumnya telah diposting mengenai Cara Membuat Dropdown Menu, kali ini akan diposting Cara Membuat Kotak Blogroll. Seperti namanya kotak ini berisikan link blog. Namun selain link bisa diisi yang lain sepertiDaftar Isi Artikel dll.
Karena ini berupa kotak yang bisa diatur besarnya tentu sangat menghemat ruang/space blog kita.

Cara membuatnya :

  • Login dulu di Blogger.com / Blogspot.com
  • Klik menu "Page Element"
  • Pilih Add Page Elements --> HTML/JavaScript
  • Copy script dibawah ini
<div style="overflow:auto;width:95%;height:300px;padding:10px;border:1px solid #eee; background:#AFEEEE">
<a href="http://fanttupa.blogspot.com/2012/02/cara-memasang-jam-di-blog.html">Cara Memasang Jam di Blog</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/cara-memasang-google-translator-di-blog.html">Memasang Google Translator 1</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-animasi-halaman-blog.html">Membuat Animasi Halaman Blog</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-read-more-potongan-artikel.html">Membuat Read More</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-teks-berjalan-pada-blog.html">Membuat Text Berjalan</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-navigation-bar-menjadi.html">Nav Bar Menjadi Transparan</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-kotak-blogroll.html">Membuat Kotak Blogroll</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-google-translator-2.html">Membuat Google Tanslator 2</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/read-more-automatic.html">Membuat Read More Automatic</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/auto-hide-nav-bar-blogspot.html">Auto Hide Nav Bar</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-tab-view.html">Membuat Tab View</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/pasang-kalender-di-blog.html">Pasang Kalender di Blog</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/mengetahui-statistik-pengunjung.html">Mengetahui Statistik Pengunjung</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-daftar-isi-blog.html">Membuat Daftar Isi Blog</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/menampilkan-user-yang-online.html">Menamplkan User Yang Online</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/huruf-besar-pada-awal-postingan.html">Huruf Besar Pada Awal Postingan</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-tag-cloud.html">Membuat Tag Cloud</a>

<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-form-berlangganan-via-email.html">Membuat Artikel Berlangganan via Email</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/menampilkan-page-rank-blog.html">Menampilkan Page Rank Blog</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/cara-membuat-search-engine.html">Membuat Search Engine</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/menampilkan-status-yahoo-messenger.html">Menampilkan status Yahoo Messenger</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/membuat-menu-horizontal.html">Membuat Menu Horisontal</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/icon-unik-pada-address-bar.html">Icon Unik Pada Address Bar</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/menampilkan-peta-pengunjung.html">Menampilkan Peta Pengunjung</a>
<hr />
<a href="http://fanttupa.blogspot.com/2012/02/judul-artikel-sebagai-judul-blog.html">Judul Artikel Sebagai Judul Blog</a>
<hr />
</div>
note:
Tulisan warna 
biru adalah script membuat kotak blogroll.
Tulisan warna 
merah adalah script link kamu, silahkan ganti dengan punya kamu.



SIMPAN




Hasilnya seperti ini:


Membuat Artikel Berhubungan



Membuat Menu Dropdown



Membuat Text Link Berkelap-kelip



Efek Salju Pada Blog (1)



Memberi Higlight Pada Postingan



Memasang Jam di Blog



Memasang Google Translator 1



Membuat Animasi Halaman Blog



Membuat Read More



Membuat Text Area





Membuat Text Berjalan



Nav Bar Menjadi Transparan



Membuat Kotak Blogroll



Membuat Google Tanslator



Menghilangkan Navbar



Membuat Read More Automatic



Tambah Ekspresi Dengan Smiley



Auto Hide Nav Bar



Menghapus Angka Label



Membuat Menu Vertikal



Menampilkan IP Address



Membuat Tab View



Pasang Kalender di Blog



Efek Salju Pada Blog 2



Menghilangkan Nav Bar



Mengetahui Statistik Pengunjung



Membuat Daftar Isi Blog



Menamplkan User Yang Online



Huruf Besar Pada Awal Postingan



Membuat Tag Cloud





Membuat Artikel Berlangganan via Email



Menampilkan Page Rank Blog



Membuat Search Engine



Menampilkan status Yahoo Messenger



Membuat Menu Horisontal



Membuat Shout Box



Icon Unik Pada Address Bar



Menampilkan Peta Pengunjung



Judul Artikel Sebagai Judul Blog







Keterangan:


<div style="overflow:auto;width:95%;height:150px;padding:10px;border:1px solid #eee; background:#FFCCFF">




width:95% adalah lebar kotak bisa kamu ubah pakai pixel, misal 250px


height:150px adalah tinggi kita bisa kamu ubah sesukamu


background:#FFCCFF adalah background kotak. Untuk melihat kode warna silahkan lihat disini. Atau kode background:#FFCCFF bisa dihapus kalau tidak suka.


solid pada kode border:1px solid adalah jenis/style border, kamu bisa ganti dengan style yang lain. Kalau mau ganti style border lihat disini.


Selamat Berkreasi

2 komentar:

Rudy Hartono mengatakan...

infonya sangat bermanfaat sob, happy blogging

bisnisonline-2013 mengatakan...

wah terima kasih sekali gan ini yang saya cari salam

Posting Komentar

Delete this element to display blogger navbar