Saat anda membuat blog di blogspot pertama kali akan mendapatkan menu Navbar, biasanya navbar ini banyak di sembunyikan dan sebagai gantinya mengunakan menu lainnya.  Fitur menu navigasi seperti blog pada umumnya telah banyak dipergunakan. Menu ini fungsinya sebagai navigasi pembaca untuk melihat-lihat halaman lain atau kategori lain dalam blog anda. Pada posting ini kita akan belajar cara membuat menu navigasi bisa di katakan lain dari pada yang lain.

Menu navigasi ini tidak bergerak atau akan tetap berada di atas ketika kita melakukan scroll ke bawah atau keatas.

Ok Langsung saja kita praktekan, tetapi alangkan baiknya kita lakukan backup dengan download full template.

Pada Css kita copy paste kode dibawah ini diatas body {

#nav{
height:35px;
border-bottom:1px solid #ddd;
position:fixed;
top:0px;
left:0px;
right:0px;
background:#fff url(../images/nav.png) repeat-x center left;
z-index:999999;
}
#nav ul{
height:25px;
list-style:none;
margin:6px auto 0px auto;
width:600px;
}
#nav ul li{
display:inline;
float:left;
margin:0px 2px;
}
#nav a{
font-size:11px;
font-weight:bold;
float:left;
padding: 2px 4px;
color:#999;
text-decoration: none;
border:1px solid #ccc;
cursor: pointer;
background:transparent url(../images/overlay.png) repeat-x center left;
height:16px;
line-height:16px;
}
#nav a:hover{
background:#D9D9DA none;
color: #fff;
}

Pada HTML kodenya seperti berikut :

<div id="nav">
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
<li><a href="">Link 6</a></li>
</ul>
</div>

Cukup Sekian, semoga bermanfaat

READ MORE - Membuat Menu Navigasi Horizontal Tidak Bergerak

Breadcrumb merupakan navigation yang biasanya terletak di atas atau di bawah halaman yang memungkinkan pengunjung menuju ke bagian sebuah halaman web / blog sebelumnya.
Contohnya seperti ini:

Browse » Home » Tutorial , Widget » Membuat Recent Posts Lebih Menarik Dengan BuzzBoost


Masing masing kata yang ada di breadcrumb merupakan link menuju ke bagianya masing-masing. Dengan breadcrumb akan memudahkan pengunjung bernavigasi dan dapat dengan mudah memetakan posisinya sedang berada di bagian kategori mana. Karena itu sangat di sarankan sebuah web atau blog menggunakan sistem navigasi breadcrumb ini.

Dengan sedikit modifikasi pada kode template, maka “breadcrumb-navigation” akan segera anda miliki. Berikut adalah caranya.

Silahkan login ke blogger degan ID anda.
Klik Tata Letak.
Klik tab Edit HTML
Click Download Full Template and please back up your template first.
Silahkan beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.


Silahkan cari kode ]]></b:skin>
Copy lalu paste kode di bawah ini persis di atas kode ]]></b:skin>

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

Silahkan cari kode berikut pada template anda :

<div class='post hentry uncustomized-post-template'>

Copy lalu paste kode di bawah ini persis di bawah kode <div class='post hentry uncustomized-post-template'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

Klik tombol Save Template.
Tunggu beberapa saat sampai template anda tersimpan.
Buka halaman blog anda, klik pada judul artikelnya. Silahkan lihat hasilnya.
Selesai.

READ MORE - Membuat Breadcrumb Inilah Caranya

Satu lagi Tip dan trik mengenai Recent Post. Kali ini agak berbeda dengan recent post biasanya, karena disini kita memadukan recent post dengan BuzzBoost dari Feedburner. Recent Post ini sangat menarik karena memanfaatkan Fitur dari BuzzBoost sehingga bisa memunculkan potongan isi dari tulisan/postingan.

Sebenarnya hal seperti ini sudah banyak dibahas akan tetapi modifikasi tiap orang pasti berbeda-beda sesuai dengan selera masing-masing, dibawah ini akan saya bahas bagaimana cara mendaftar ke Feedburner sampai menaruh fitur itu di dalam template blogspot kita.

BuzzBoost  adalah  fasilitas yang diberikan feedburner untuk menampilkan RSS Feed sebagai html dengan menaruh code javascript pada blog kita. Perlu kita ketahui bahwa RSS adalah sebuah file berformat XML untuk sindikasi yang telah digunakan situs web maupun Blog. Teknologi RSS ini mengijinkan kita untuk berlangganan kepada situs web yang menyediakan umpan feed RSS.
Baik kita mulai saja cara membuatnya dan sekarang kita ikuti  langkah-langkahnya: 

1. Daftar Feedburner, bila belum silahkan klik disini. (http://feedburner.google.com)

2. Pada bagian Burn a feed right this instant. isi dengan  rss feed dari situs yang akan anda ekstraksi, misalnya http://ruditabuci.blogspot.com/feeds/posts/default, kemudian tekan tombol Next, seterusnya tekan lagi tombol Next dan seterusnya sampai selesai hingga anda menemukan bagian Analyze,Optimze,Publicize dll

3. Pada halaman Publicize, Klik Link BuzzBoost. Pada halaman BuzzBoost klik  ACTIVE. 
Akan muncul halaman yang berisi script seperti dibawah ini.

<script src="http://feeds.feedburner.com/blogspot/ruditabuci?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/blogspot/ruditabuci"></a><br/>Powered by FeedBurner</p> </noscript>

4. Kemudian Anda cukup mengambil bagian seperti di bawah ini

<script src="http://feeds.feedburner.com/blogspot/ruditabuci?format=sigpro" type="text/javascript" ></script>

5. kemudian modifikasi dengan menambahkan script dibawah ini tepat dibelakang text sigpro

&nItems=8&format=openLinks=new

&displayDate=true&displayExcerpts=true&displayTitle=false&excerptLength=50&dateLocation=below

sehingga menjadi seperti dibawah ini

<script src="http://feeds.feedburner.com/blogspot/ruditabuci?format=sigpro&nItems=8&format=openLinks=new

&displayDate=true&displayExcerpts=true&displayTitle=false&excerptLength=50&dateLocation=below" type="text/javascript" ></script>

Copy Paste pada Blog anda. Buka Design - Page Element - Add a gadget - Javascript/HTML - Isi judul misalnya 'Recent Posts' Lalu Copy Paste script diatas 


6. Setelah itu buka kembali Design - Edit HTML - Expand Widget Templates, Kemudian cari text "Recent Posts" sesuai judul yang kita berikan tadi, sehingga akan ketemu dengan script seperti dibawah ini

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>

<b:includable id='main'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

Ganti  script diatas yang berwarna biru sehingga menjadi seperti di bawah ini

<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='postnew'><div class='widget-content'>

<data:content/>

</div></div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

Langkah selanjutnya adalah menambah style sheet css 


7. Tetap pada mode Edit HTML, Selanjutnya cari </head> setelah ketemu bagian tersebut letakkan script dibawah ini tepat diatasnya

<style>

.postnew li a:hover { 

display:block; 

text-decoration:none; 

background:#efefef;

}

.postnew li a:visited {

text-decoration:none; 

}

.postnew {

float:left; 

width:380px;

}

.postnew ul {

width:90%; 

list-style-type:none;

}

.postnew li a {

text-decoration:none; 

border-top:1px solid rgb(204,204,204); 

line-height:13px; 

display:block;

padding:3px 0px 3px 0; 

}

.feedburnerFeedBlock div, .date, .feedItemAuthor, .feedTitle, .fbsubscribelink, .creditfooter {

        display:none; 

        padding:2px 3px; 

        margin-left:126px; 

        margin-bottom:12px; 

        width:162px

}

.feedburnerFeedBlock  li:hover .date {

        font-size:11px; 

        font-weight:bold; 

        text-align:left; 

        display:block; 

        position:absolute;

background:url(http://4.bp.blogspot.com/_1_qkt6bisvU/TFWxXnUOeKI/AAAAAAAAAiQ/lPG9EIxJemM/s400/tooltips-date.gif) no-repeat scroll 10px 5px; color:#333; padding:6px 35px; margin-right:10px; 

        width:114px

}

.feedburnerFeedBlock  li:hover div {

        border-radius:8px 8px; 

        -moz-border-radius:0 0 8px 8px;  

        -khtml-border-radius:0 0 8px 8px;   

        -webkit-border-radius:0 0 8px 8px;  

        border-radius:0 0 8px 8px; 

        font-size:11px; 

        display:block;

        position:absolute; 

        border:1px solid #ccc; 

        background:#E5E5E5  url(http://2.bp.blogspot.com/_1_qkt6bisvU/TFWw-97HlKI/AAAAAAAAAiI/0uCcQMJxNgU/s1600/tooltips-background.png) repeat-x; 

        color:#333; 

        padding:35px 10px 10px 10px

}

</style>

Demikian Selamat mencoba

READ MORE - Membuat Recent Posts Lebih Menarik Dengan BuzzBoost