2009-09-20

Membuat Float Navigation Bar

Hampir mirip dengan NavBar bawaan blogger, namun bentuknya float dan lebih sederhana.
Untuk membuatnya ikuti langkah-langkah berikut:
1. Masuk ke Layout -Edit HTML
2. Centang Expand Widget Template.
3. Cari kode ini ]]></b:skin>
4. Letakkan kode dibawah ini tepat diatas kode yang tadi.


/********************************
* Navigasi Apung *
*********************************/
#navigasi-apung
{
align: center;
position: fixed;
border-top: 1px solid #fff;
border-bottom: 1px solid #000;
background-color: #c0c0c0;
width: 100%;
left: 0px;
color: #000;
z-index:10000;
opacity: 0.8;
filter: alphaundefinedopacity: 80);
bottom:0;
}
#navigasi-apung:hover
{
opacity: 1;
filter: alphaundefinedopacity: 100);
}
#navigasi-apung a
{
color: #000;
font-weight:bold;
}
/********************************
* Navigasi Apung Kiri *
*********************************/
.kiri_apungmnu
{
float:left;
list-style-type:none;
padding:0;
margin:3px 0px 3px 5px;}
.kiri_apungmnu li
{
padding: 0px 0px 0px 3px;
margin-left:2px;
float:left;
color:#000;
font:normal 11px arial;
}
.kiri_apungmnu li a
{
display:block;
font:normal 11px arial;
width:auto;
float:left;
text-decoration:none;
}
.kiri_apungmnu li a:hover
{
text-decoration:none;
}
/********************************
* Navigasi Apung Kanan *
*********************************/
.kanan_apungmnu
{
float:right;
list-style-type:none;
padding:0;
margin:3px 5px 3px 0;
}
.kanan_apungmnu li
{
padding: 0 0 0 3px;
margin-left:2px;
float:left;
color:#000;
font:normal 11px arial;
}
.kanan_apungmnu li a
{
display:block;
font:normal 11px arial;
width:auto;
float:left;
text-decoration:none;
}
.kanan_apungmnu li a:hover
{
text-decoration:none;
}


5. Yang di cetak tebal bisa kamu ganti sesuai keinginan. Kemudian cari kode ini  <body>
6. Letakkan kode dibawah ini setelah kode yang tadi.


<div id='navigasi-apung'>
<ul class="kiri_apungmnu">
<li><a href="/" title="Halaman Utama">Beranda</a></li>
<li>|</li>
<li><a href="/search?max-results=50" title="Daftar Isi">Daftar Isi</a></li>
<li>|</li>
<li><a href="/feeds/posts/default" title="Baca via Feed" target="_blank">Feed</a></li>
<li>|</li>
<li><a href="" title="Berlangganan Artikel">Langgan</a></li>
<li>|</li>
<li><a href="mailto:chungkring@gmail.com" title="Email Adhiets">Email</a></li>
<li>|</li>
<li><a href="http://adhiets.blogspot.com/" title="Tentang Adhiets" target="_blank">Tentang</a></li>
</ul>
<ul class="kanan_apungmnu">
<li><a href="http://www.blogger.com/" title="Blogger Login" target="_blank">Login</a></li>
<li>|</li>
<li><a href="http://www.blogger.com/post-create.g?blogID=XXXXXX" title="Entri Baru">Entri Baru</a></li>
<li>|</li>
<li><a href="http://www.blogger.com/posts.g?blogID=XXXXXX" title="Edit Entri">Edit Entri</a></li>
<li>|</li>
<li><a href="http://www.blogger.com/blog-options-basic.g?blogID=XXXXXX" title="Pengaturan">Pengaturan</a></li>
<li>|</li>
<li><a href="http://www.blogger.com/rearrange?blogID=XXXXXX" title="Tata Letak">Tata Letak</a>
</li>
</ul>
</div>


Simpan dan lihat hasilnya. continue...

Membuat Rotasi Banner (Banner rotator)


Rotasi banner atau banner rotator adalah banner yang akan muncul secara bergantian tanpa harus membuka halaman baru. Simpelnya seperti banner animasi flash.
Langkah membuatnya adalah sbb:
1. Masuk ke Edit HTML
2. Cari  kode berikut  &lt;/head&gt;
3. Masukkan kode dibawah berikut tepat di atas kode yang tadi

<link rel="StyleSheet" href="http://sites.google.com/site/chungkring/mBanner.css" type="text/css" />
<script type="text/javascript" src="http://sites.google.com/site/chungkring/mBanner.js"/>


4. Simpan dan Masuk ke Page Element (Element Halaman)
5. Tambahakan widget HTML/JavaScript
6. Masukkan kode dibawah ini kedalam Widget tadi.

<center>
<script language="javascript">
banner1 = new Banner('banner1');
banner1.add("IMAGE", "banners/01.jpg", 3, 60, 480,"http://adhiets.blogspot.com");
banner1.add("IMAGE", "banners/01.jpg", 3, 60, 480,"http://adhiets.blogspot.com");
banner1.add("IMAGE", "banners/01.jpg", 3, 60, 480,"http://adhiets.blogspot.com");
banner1.add("FLASH", "banners/04.swf", 3, 60, 480,"http://adhiets.blogspot.com");
banner1.add("FLASH", "banners/05.swf", 3, 60, 480,"http://adhiets.blogspot.com");
banner1.add("FLASH", "banners/06.swf", 3, 60, 480,"http://adhiets.blogspot.com");
document.write(banner1);
banner1.start();
</script>
<center>

NB:
Kode yang berwarna merah adalah lamanya waktu banner ditampilkan (3 detik)
Kode yang berwarna hijau adalah tinggi banner. (60px)
Kode yang berwarna biru adalah lebar banner (480px)
continue...

Memasang meta tags yang seo friendly


Mungkin semuanya sudah tahu apa fungsi dari meta tag. Pada artikel sebelumnya saya sudah menjelaskan cara memasukkan meta tag ke ddalam blogger. Namun kali ini kita akan mencoba memasukkan meta tag yang lebih seo friendly.
Caranya tidak jauh berbeda, hanya pada penambahan meta tag sekunder.
1. Masuk ke Edit HTML.
2. Cari kode <head>
3. Letakkan kode dibawah ini tepat setelah kode tadi.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<meta content='Isi dengan deskripsi blog' name='description'/>
</b:if>
<meta content='Isi dengan kata kunci blog' name='keywords'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<meta content='noodp' name='robots'/>
<meta content='Isi dengan nama author' name='author'/>
<meta content='Isi dengan pemilik copyright' name='copyright'/>
<meta content='index, follow' name='robots'/>
<meta content='id' name='language'/>
<meta content='id' name='geo.country'/>
<meta content='global' name='distribution'/>
<meta content='1 days' name='revisit-after'/>
<meta content='Indonesia' name='geo.placename'/>

4. Huruf yang di cetak tebal ganti sesuai keinginan anda.
5.Simpan pekerjaan anda. continue...