Bisnis Online: September 2009

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.

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!

Memasang Artikel Terkait Versi Standard dan Simpel

Semuanya udah pada tau kan fungsi dari Artikel terkait atau Related Post? Nah,tanpa basa-basi lagi sesuai judulnya "simpel" maka langsung aja kita ke TKP. Okee?? Kemon!!!
1. Masuk ke Edit HTML
2. Centang Expand Widget Template.
3. Cari kode <data:post.body/>
4. Copy kan kode di bawah ini tepat di atas kode yang tadi.

<b:if cond='data:blog.pageType == "item"'>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;overflow:auto'>
<div id='aditku'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('aditku').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

5. Jika kode <data:post.body/> ada dua buah maka pilih lah yang kedua atau yanga bawah.
6. Simpan dan Lihat hasilnya dengan membuka salah satu postingan anda yang sudah di beri label.
Selamat Mencoba..!!!

Bisnis Online

Sabtu, 19 September 2009

Membuat Float Navigation Bar

Membuat Rotasi Banner (Banner rotator)

Memasang meta tags yang seo friendly

Membuat Breadcumbs atau BlogMap

Memasang Artikel Terkait Versi Standard dan Simpel

Pengikut

Arsip Blog

Mengenai Saya