RSS
Twitter
Facebook
Showing posts with label Navigation Bar. Show all posts
Link × Menu × Navigation Bar
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'>5. Cari kode ini atau sejenisnya: <b:if cond=’data:post.dateHeader’>
<!-- Breadcrumb by www.blogtrikdantips.blogspot.com -->
<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>
<!-- End of Breadcrumb -->
</b:includable>
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 {9. Simpan template sobat dan lihat hasilnya
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}
Navigation Bar
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;
}
6. Kopi dan paste kode berikut tepat diatas kode </body>
<!--Page Navigasi-->
<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>
<!--Page Navigasi -->
5. Jika sudah simpan templatenya...
Keterangan: pada script diatas ada kode var displayPageNum=5; menunjukan jumlah nomor halaman yang ingin ditampilkan. Selamat mencoba
Navigation Bar
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 {Ada juga cara alternatif yaitu menempatkan kode berikut ini diatas kode <body>
display: none !important;
}
<style type=’text/css’> #navbar-iframe {display:none;} </style>4. Simpan template anda dan coba lihat hasilnya.....
Navigation Bar
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)}5. Simpan template sobat dan lihat hasilnya
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
Selamat mencoba!!!