First of All

Tampilkan postingan dengan label Navigation Bar. Tampilkan semua postingan

Senin, 21 September 2009

Cara Membuat Breadcrumb Navigasi di Blog

Breadcrumbs adalah sebuah petunjuk atau navigasi yang menginformasikan keberadaan posisi postingan yang aktif. Breadcrumb biasanya membentuk posisi horizontal yang terletak dibawah judul posting. Breadcrumb dapat berupa susunan link yang menghubungkan sebuah posting sesuai dengan beberapa kategori dalam posting tersebut. Breadcrumbs juga membantu pengunjung untuk menelusuri jalur yang telah dilaluinya sampai berada di posisi saat ini sehingga penggunjung dengan mudah dapat kembali ke halaman sebelumnya. Pada kesempatan ini saya akan memberikan trik kepada sobat blogger cara membuat breadcrumb pada blog. Berikut adalah caranya:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Centang Expand Widget Template
4. Letakan kode dibawah ini sebelum kode <b:includable id='main' var='top'>

<b:includable id='breadcrumbs' var='post'>

<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
You are here:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> >
<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>
<b:if cond='data:post.title'>
> <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>

</b:includable>

5. Cari kode ini atau sejenisnya: <b:if cond=’data:post.dateHeader’>
6. Letakan kode dibawah ini sebelum kode pada langkah 5.

<b:include data='post' name='breadcrumbs'/>

7. Tambahkan kode dibawah ini diatas kode ]]></b:skin>

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

9. Simpan template sobat dan lihat hasilnya

ReadFull Article ..

Minggu, 05 Juli 2009

Memasang Nomor Halaman pada Blogger

Para blogger yang tertarik membuat nomor halaman pasti udah gak sabaran untuk memulainya. Nomor halaman yang akan kita buat sangat mudah. Fungsi dari nomor halaman ini yaitu membantu sahabat menavigasi halaman satu ke halaman yang lain seperti pada google search engine. Navigasi halaman menjadi lebih mudah dibandingkan anda memasang link new post and old post. Berikut ini adalah langkah-langkah memasang nomor halaman pada blog sobat.

1. Login ke blogger
2. Pilih Rancangan dan klik Edit HTML
3. Cari kode ini ]]></b:skin>
4. Paste kode dibawah tepat diatas kode ]]></b:skin>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

5. Cari kode </body>
6. Kopi dan paste kode berikut tepat diatas kode </body>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>

5. Jika sudah simpan templatenya...

Keterangan: pada script diatas ada kode var displayPageNum=5; menunjukan jumlah nomor halaman yang ingin ditampilkan. Selamat mencoba

ReadFull Article ..

Rabu, 01 Juli 2009

Menghilangkan Navigation Bar (Navbar)

Navigation bar merupakan kotak berbentuk persegi panjang yang terletak di sebelah atas dari blog sobat. Navbar fungsinya yaitu melalukan sign in dan sign out, membuat posting baru serta melaporkan kecurangan web blog yang melanggar TOS (term of service).

Namun bagi beberapa blogger, navbar yang terletak disebelah atas sering kali membuat tampilan blog menjadi risih dan kurang menarik, sehingga mereka menghilangkan navbar tersebut. Template klasik yang disediakan oleh blogger biasanya masih memiliki navbar namun beberapa custom template telah menghapus navbar tersebut. Jika sobat mau menghilangkan navbar ikuti langkahnya berikut ini:

1. Login ke blogger
2. Pilih Rancangan dan pilih edit HTML
3. Cari kode ]]></b:skin> dan paste kode dibawah ini diatasnya:

#navbar-iframe { height:0px; visibility:hidden; display:none }

atau sobat bisa juga letakkan kode dibawah ini diatas kode ]]></b:skin>

#navbar-iframe {
display: none !important;
}

Ada juga cara alternatif yaitu menempatkan kode berikut ini diatas kode <body>

<style type=’text/css’> #navbar-iframe {display:none;} </style>

4. Simpan template anda dan coba lihat hasilnya.....

ReadFull Article ..

Membuat Auto Hide Navigation Bar di Blog

Mungkin sebelumnya kita udah belajar bagaimana membuat navbar menjadi trasparan dan menghilangkan navbar.Tapi kali ini kita akan belajar bagaimana membuat auto hide navbar.

Navigation bar merupakan kotak berbentuk persegi panjang yang terletak di sebelah atas dari blog sobat. Navbar fungsinya yaitu melalukan sign in dan sign out serta membuat posting terbaru. Berikut adalah caranya:

1. Login ke blogger
2. Klik Rancangan dan pilih Edit HTML
3. Cari kode ]]></b:skin>
4. Letakkan kode dibawah ini sebelum kode diatas

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

5. Simpan template sobat dan lihat hasilnya

Selamat mencoba!!!

ReadFull Article ..