Alternatif Penyimpanan Javascript

Memang susah teman, setelah mendengar geocities dari Yahoo akan ditiadakan dan diganti dengan web hosting Yahoo yang berbayar $4.99 (dibulatkan jadi $5). Padahal mungkin masih banyak para blogger yang ingin memanfaatkan fasilitas web hosting secara gratis, "termasuk OB" (ha.. ha..). Walaupun ditinjau dari sudut layanannya, web hosting yang berbayar memberikan keuntungan lebih dibandingkan yang gratis. Trik blogger kali ini, OB akan berbagi pengalaman tentang alternatif penyimpanan file-file baik itu berupa javascript, image, icon, dan sebagainya sehingga dapat dipergunakan dalam blog kamu. Nah, layanan web yang mendukung aktivitas blog disini selanjutnya akan OB sebut Blogger Stuff dan salah satu layanan yang sangat mendukung aktivitas tersebut adalah web hosting.

[ Baca selengkapnya ]

Trik Merubah Tampilan Google Translate

Beberapa saat yang lalu kita dikejutkan dengan meledaknya bom di dua hotel berbintang lima Jakarta, sehingga Ibukota Republik Indonesia tersebut dalam kondisi "Siaga I". Terlebih lagi urungnya pasukan Manchester United berlaga dengan tim sepakbola Indonesia menambah rentetan kelabu kalender bulan Juli 2009 Negara kita tercinta ini. Dan merupakan hal yang patut, jika kita pun turut berbelasungkawa atas musibah tersebut.

Terlepas dari itu semua, OB tetap setia belajar bersama teman-teman untuk sekedar mereview satu atau dua buah trik blogger. Nah, trik kali ini kita akan membuat tampilan google translate agar tampil beda (kemungkinannya lagi, loading widget atau gadget google translate ini agak ringan). Demonya dapat kamu lihat di sidebar kanan posting ini. Yuk, langsung kita kupas triknya.

[ Baca selengkapnya ]

Membuat Kotak Banner

Kotak banner berfungsi untuk menyisipkan image iklan yang akan ditampilkan dalam blog. Adapun bentuk banner bermacam-macam ukurannya, khusus dalam trik blogger ini kita akan mencoba menyisipkan image iklan yang berukuran 125 x 125. Disamping itu area banner dapat pula menjadi ajang promosi, entah itu promosi blog kamu yang lain atau blog orang lain yang diwakilkan dalam bentuk banner. Demo banner dapat kamu lihat di widget Pesan Sponsor Optimasi Blog (sidebar bottom sebelah kanan). Apabila kamu tertarik ingin mengaplikasikannya dalam blog kamu, mari kita mulai trik blogger membuat kotak banner.

[ Baca selengkapnya ]

Dasar Pembuatan Menu Horizontal

Diposting ini OB akan sedikit berbagi dengan teman-teman tentang bagaimana membuat menu horizontal menggunakan CSS. Mengapa trik blogger ini OB angkat kembali? Karena banyak minat para blogger mania untuk menghiasi blognya dengan menu-horizontal sesuai dengan keinginan dan karakter blognya masing-masing. Ketika kamu blog walking tentu banyak sekali bertemu trik membuat menu horizontal dengan sistem kode yang berbeda pula, dan sangat dimungkinkan pula kode yang akan OB tampilkan berbeda dengan lainnya (atau bisa pula sama). Nah, agar tak titik air ludah karena membaca paragraf pembuka. Yuk, kita bedah triknya.

Kode CSS (Cascading Style Sheets adalah sebagai berikut :

#menu-navigation {
border-bottom: 1px solid #e3e3e3;
border-top: 1px solid #e3e3e3;
clear: both;
display: block;
float: left;
margin: 0 auto;
width: 100%;
}
#menu-navigation ul {
list-style: none;
margin-bottom: 0;
padding: 0 15px;
}
#menu-navigation li {
float: left;
position: relative;
}
#menu-navigation li.alignright {
float: right;
margin: 0;
}
#menu-navigation a {
color: #666;
display: block;
line-height: 3.1428em;
padding: 0 1.5714em;
text-decoration: none;
}
#menu-navigation ul ul {
-moz-box-shadow: 0 3px 3px rgba(0,0,0,.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,.2);
box-shadow: 0 3px 3px rgba(0,0,0,.2);
display: none;
float: left;
margin: 0;
padding: 0;
position: absolute;
top: 3.1428em;
left: 0;
z-index: 99999;
}
#menu-navigation ul ul ul {
left: 100%;
top: 0;
}
#menu-navigation ul ul a {
background: #f9f9f9;
border-bottom: 1px dotted #ddd;
font-weight: normal;
height: auto;
line-height: 1.5714em;
padding: .39285em  .39285em  .39285em 1.5714em;
width: 152px;
}
#menu-navigation ul li:hover > ul {
display: block;
}
#menu-navigation li:hover > a,
#menu-navigation ul ul :hover > a,
#menu-navigation a:focus,
#menu-navigation .selected  > a {
background-color: #f5f5f5;
color: #111;
}

.selected digunakan untuk mengindikasikan jika URL halaman blog sama dengan URL pada menu navigasi, maka berlaku pengkodean .selected. Sedangkan untuk HTML (HyperText Markup Language) adalah sebagai berikut:

<nav id="menu-navigation">
 <ul>
  <li><a href="#">Beranda</a></li>
  <li><a href="#"></a>Tentang</li>
  <li><a href="#"></a>Sitemap</li>
  <li><a href="#"></a>Kontak</li>
 </ul>
</nav>

Dengan menggunakan HTML di atas, berarti kita meniadakan fungsi .selected. Pada kasus Blogger.com fungsi .selected dapat diakomodasi dengan menambahkan tag kondisional tiap menu, contoh untuk beranda (home):

 <b:if cond='data:blog.url != data:blog.homepageUrl'>
  <li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
 <b:else/>
  <li class='selected'><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
 </b:if>

Sedangkan pada menu lain dapat disimak pada kode di bawah ini.

 <b:if cond='data:blog.url != "#"'>
  <li><a href='#'>Tentang</a></li>
 <b:else/>
  <li class='selected'><a href='#'>Tentang</a></li>
 </b:if>

Dimana URL (Uniform Resource Locator) pada kode yang berwarna merah adalah sama, contoh: h**p://namablog.blogspot.com/p/tentang.html. Selanjutnya dengan pengkodean CSS di atas, kita dapat pula membuat menu navigasinya menjadi lebih kompleks (drop down)

 <li><a href='#'>Drop Down</a>
  <ul class='submenu'>
   <li><a href='#'>Item1.1</a></li>
   <li><a href='#'>Item1.2</a></li>
   <li><a href='#'>Item1.3</a>
   <ul>
    <li><a href='#'>Item3.1</a></li>
    <li><a href='#'>Item3.2</a></li>
    <li><a href='#'>Item3.3</a></li>
   </ul>
   </li>
  </ul>
 </li>

Lho…, dimana tag kondisionalnya. Jika dalam menu berlaku drop down, maka tag kondisional tidak berlaku. Oleh karena masing-masing URL (warna biru) akan diisi dengan berbeda, sedangkan URL yang diberi warna merah tidak perlu dimasukkan — biarkan seperti itu — karena berfungsi sebagai alat bantu. Sekarang kamu pasti sudah bisa membuat menu horizontal sesuai keinginan dan kebutuhan di dalam blog kamu...

[ Baca selengkapnya ]