Tips Tricks, Tutorial, Blogging, Bisnis Online

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.

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 </head>
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)

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 != "item"'>
<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.

2009-09-19

Membuat Breadcumbs atau BlogMap

Contohnya seperti gambar disamping
Langsung ke TKP
1. Masuk Edit HTML dan Centang Expand Widget Template. Jangan lupa backup template!
2. Cari kode ini ]]></b:skin>
3. Copykan kode dibawah ini tepat sebelum kode di atas.
.breadcrumbs{
float:left;
width:590px;
font-size:11px;
border-bottom:double #eaeaea;
margin:0 0 20px;
padding:0 0 3px
}

4. Cari kode dibawah ini :
<b:includable id='main' var='top'>

<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>

5. Nonaktifkan status message tsb dengan menambahkan  dibelakangnya.
6. Maka akan menjadi seperti ini:

7. Tambahkan kode breadcumbs dibawah status message tadi. Hasilnya akan seperti ini:
>
<b:include data='posts' name='breadcrumb'/>

8. Cari kode di bawah ini:
<b:includable id='main' var='top'>

9. Masukkan kode Breadcumbs dibawah ini tepat diatas kode yang tadi.
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
» <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Beranda</a> » Arsip untuk <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Beranda</a> » Seluruh Artikel
<b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Beranda</a> » Artikel Pada Kategori <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

10. Simpan dan lihat hasilnya.
Selamat Mencoba!

Tips Tricks, Tutorial, Blogging, Bisnis Online

2009-09-20

Membuat Float Navigation Bar

Membuat Rotasi Banner (Banner rotator)

Memasang meta tags yang seo friendly

2009-09-19

Membuat Breadcumbs atau BlogMap

Kategori

Blog Statistik

Tolking-Tolking

Arsip Blog

Pembaca Setia

Recent Posts

Recent Comments

Top Comentators