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 seperti Daftar Isi Artikel dll.
Karena ini berupa kotak yang bisa diatur besarnya tentu sangat menghemat ruang/space blog kita.
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:150px;padding:10px;border:1px solid #eee; background:#FFCCFF">
<a href="http://tips-mempercantik-blog.blogspot.com/2009/03/membuat-artikel-yang-berhubungan.html">Membuat Artikel Berhubungan</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/03/membuat-blogroll-dengan-menu-dropdown.html">Membuat Menu Dropdown</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/03/membuat-text-link-berkelap-kelip.html">Membuat Text Link Berkelap-kelip</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/03/membuat-efek-salju-pada-blog-1.html">Efek Salju Pada Blog (1)</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/03/memberi-highlight-pada-postingan.html">Memberi Higlight Pada Postingan</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/03/memasang-jam-di-blog.html">Memasang Jam di Blog</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/03/memasang-google-translator.html">Memasang Google Translator 1</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/03/membuat-animasi-halaman-blog.html">Membuat Animasi Halaman Blog</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/03/membuat-read-more-potongan-artikel.html">Membuat Read More</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/03/membuat-text-area.html"> Membuat Text Area</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/03/membuat-teks-berjalan-pada-blog.html">Membuat Text Berjalan</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/membuat-navigation-bar-menjadi.html">Nav Bar Menjadi Transparan</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/membuat-kotak-blogroll.html">Membuat Kotak Blogroll</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/membuat-google-translator-2.html">Membuat Google Tanslator</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/03/menghilangkan-navbar-blogspot.html">Menghilangkan Navbar</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/read-more-automatic.html">Membuat Read More Automatic</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/03/tambah-ekspresi-dengan-smiley.html">Tambah Ekspresi Dengan Smiley</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/auto-hide-nav-bar-blogspot.html">Auto Hide Nav Bar</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/menghapus-angka-pada-label_6805.html">Menghapus Angka Label</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/membuat-vertikal-menu_07.html">Membuat Menu Vertikal</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/menampilkan-ip-adress.html">Menampilkan IP Address</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/membuat-tab-view.html">Membuat Tab View</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/pasang-kalender-di-blog.html">Pasang Kalender di Blog</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/03/membuat-efek-salju-pada-blog-2.html">Efek Salju Pada Blog 2</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/menghilangkan-nav-bar.html">Menghilangkan Nav Bar</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/mengetahui-statistik-pengunjung.html">Mengetahui Statistik Pengunjung</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/membuat-daftar-isi-blog.html">Membuat Daftar Isi Blog</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/menampilkan-user-yang-online.html">Menamplkan User Yang Online</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/huruf-besar-pada-awal-postingan.html">Huruf Besar Pada Awal Postingan</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/membuat-tag-cloud.html">Membuat Tag Cloud</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/membuat-form-berlangganan-via-email.html">Membuat Artikel Berlangganan via Email</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/menampilkan-page-rank-blog.html">Menampilkan Page Rank Blog</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/cara-membuat-search-engine.html">Membuat Search Engine</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/menampilkan-status-yahoo-messenger.html">Menampilkan status Yahoo Messenger</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/membuat-menu-horizontal.html">Membuat Menu Horisontal</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/membuat-shout-box.html">Membuat Shout Box</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/icon-unik-pada-address-bar.html">Icon Unik Pada Address Bar</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/menampilkan-peta-pengunjung.html">Menampilkan Peta Pengunjung</a>
<hr/>
<a href="http://tips-mempercantik-blog.blogspot.com/2009/04/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
makasih ya, berguna banget artikelnya. kalau misalnya bikin kotak seperti itu tapi isinya daftar posting blog kita kaya yang ada di sidebar blog ini gimana caranya?
BalasHapusmakasih banyak ya :)
mantab tipsnya salam bos
BalasHapuswah infonya mendukung nich.... thanks sob..... :s
BalasHapusThanks Toturialnya,,
BalasHapussangat bermanfaat..
mantap skali infonya bos...termakasih
BalasHapusmakasih mas tipsnya
BalasHapusMantap .... thank
BalasHapus