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.
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...
Hadiahkan Alexa Ranking untuk Blog Kamu
AlexaRank adalah ukuran kepopuleran suatu Website dengan membandingkan suatu situs dengan semua situs yang berada di jaringan Internet. Perhitungan Alexa rank ini dengan cara
Sekelumit Tentang Pagerank Blog
Apa itu pagerank?
Pagerank Blog merupakan standar algoritma yang berguna untuk menilai kepopuleran suatu blog. PageRank merupakan