Membuat Navigasi Breadcrumbs di Blogspot

Mungkin sudah tidak asing lagi bagi anda dengan navigasi breadcrumbs ini. Dan saya fikir anda semua tentu sudah tahu tentang cara pembuatannya. Namun dikarenakan ada teman blogger yang mempertanyakan tentang bagaimana cara membuatnya maka tidak ada salahnya jika saya kembali mengulang. ^^, Terima kasih mas Rendi Indra Jaya telah meninggalkan pertanyaan di sini.

Mengenai langkah pembuatannya silakan anda ikuti langkah-langkah di bawah ini.

1. Login seperti biasa ke blogger.com
2. klik Rancangan, kemudian pilih Edit HTML, ada baiknya jika anda download dulu template lengkap anda
3. Beri tanda centang pada Expand Template Widget
4. Cari kode seperti ini
   ]]></b:skin>
5. Copy kode berikut lalu letakkan tepat di atas (sebelum) kode tadi
   
   

   .breadcrumbs {
   padding: 5px 5px 5px 0;
   margin: 0 0 5px;
   font-size: 95%;
   line-height: 1.4em;
   border-bottom: 1px solid #ccc;
   }

6. Kemudian cari lagi kode seperti ini
   
   <a expr:name='data:post.id'/>
   <b:if cond='data:post.title'>
   <h3 class='post-title entry-title'>
   <b:if cond='data:post.link'>
   <a expr:href='data:post.link'><data:post.title/></a>
7. Copy kode berikut lalu letakkan tepat di atas (sebelum) kode tadi
   
   

   <b:if cond='data:blog.homepageUrl == data:blog.url'>
   <b:else/>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='breadcrumbs'>
   You Are Here &#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>

8. klik Simpan

     Sekarang lihat hasilnya, jika anda berhasil maka akan muncul navigasi breadcrumbs di atas judul postingan anda seperti pada blog ini. Selamat mencoba dan semoga bermanfaat.... ^^,

Share

baca selengkapnya...

Membuat Menu Navigasi Current Page

Current page merupakan tampilan pada navigasi yang berfungsi untuk menandai page yang sedang aktif pada navigasi. Untuk lebih jelasnya bisa anda lihat pada image di samping. Berhubung current page ini sudah saya aplikasikan pada template saya kemarin, anda bisa melihat livenya di sini. Selain berfungsi untuk menandai page aktif, current page juga membuat tampilan blog menjadi lebih elegant dengan sedikit pengembangan.

Mengenai bagaimana cara membuatnya silakan ikuti langkah di bawah ini.

1. Login ke blogger.com
2. Klik Rancangan
3. Klik Edit HTML, tidak perlu memberi centang pada Expand Widget Template
4. Cari kode berikut
   
   </head>
   
   
5. Copy kode di bawah ini dan letakkan tepat sebelum (di atas) kode tadi
   
   

   <style type='text/css'>
   #menu-wrapper {
   margin: 0;
   padding: 5px 10px 5px 0;
   background: #b7b7ff;
   font-size: .9em;
   line-height: 22px;
   border-top: 1px solid #a8a8ff;
   border-bottom: 1px solid #a8a8ff;
   }
   .menu {
   margin: 0;
   float: left;
   height: 26px;
   }
   .menu ul {
   margin: 0;
   padding: 6px 0 0 10px;
   font-weight: bold;
   list-style-type: none;
   text-align: left;
   }
   .menu li {
   display: inline;
   margin: 0;
   }
   .menu li a {
   text-decoration: none;
   margin: 0;
   padding: 4px 10px;
   color: #32527a;
   }
   .menu li a:hover {
   background: #c6c6ff;
   color: #64527a;
   }
   .current-cat{
   padding: 5px 10px;
   color: #64527a;
   background:#c6c6ff;
   border: 1px solid #a8a8ff;
   -moz-border-radius: 5px; -webkit-border-radius: 5px;
   border-radius: 5px;
   }
   .actived a {
   color: #64527a !important;
   }
   </style>
   
   <script type='text/javascript'>
   function currentpage (url,current,name) {
   var name = name ;
   var url = url;
   var current = current;
   if (current == url) {
   document.write (&#39;&lt;li class=&quot;current-cat&quot;&gt;&lt;a href=&quot;&#39;+url+&#39;&quot;&gt;&#39;+name+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);
   }
   else {
   document.write (&#39;&lt;li&gt;&lt;a href=&quot;&#39;+url+&#39;&quot;&gt;&#39;+name+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);
   }
   }
   </script>

   p
6. Cari lagi kode seperti ini
   
   <div id='header-wrapper'>
7. Copy kode berikut lalu letakkan tepat di atas (sebelum) kode tadi (langkah ini menentukan letak navigasi anda, apabila diletakkan sebelum kode tadi maka menu anda akan berada di atas header. Dan sebaliknya apabila kode diletakkan setelah end tag kode tadi maka navigasi akan berada di bawah header.)
   
   

   <div id='menu-wrapper'>
   <b:section class='menu' id='menubar' showaddelement='no'>
   <b:widget id='LinkList1' locked='false' title='' type='LinkList'>
   <b:includable id='main'>
   <ul>
   <b:loop values='data:links' var='link'>
   <script type='text/javascript'> currentpage(&quot;<data:link.target/>&quot;,&quot;<data:blog.url/>&quot;,&quot;<data:link.name/>&quot;); </script>
   </b:loop>
   </ul>
   </b:includable>
   </b:widget>
   </b:section>
   </div>

8. Klik Simpan

     Untuk menambahkan link pada navigasi, silakan masuk Rancangan » Elemen Halaman » pilih Daftar Link. Tambahan Url yang ingin anda pasang pada navigasi. Setelah selesai jangan lupa klik Simpan. Sekarang cek ke blog anda, ^^, semoga bermanfaat dan happy blogging....

Share

baca selengkapnya...

Blue Melodic Template

Blue Melodic Template

Features:

1. Blue and white
2. 3 Columns
3. 3 Footer Columns
4. Bubble Comments
5. Highlight Author Comments
6. Current Navigation
7. Form Search
8. Auto Readmore With Thumbnail
9. Related Posts
10. Avatar On Comments

Tested:

1. Firefox
2. Chrome
3. Opera
4. IE

     Untuk melihat livenya silakan klik DI SINI. bagi yang berminat menggunakan template ini, silakan download DI SINI.

Share

baca selengkapnya...

Vertical Menu Dengan Efek Show Hide

Setelah cukup lama tidak aktif di dunia blogging, akhirnya baru sekarang bisa posting lagi. Akhir-akhir ini saya disibukkan oleh aktifitas keseharian saya. Sebagai postingan pertama saya setelah sekian lama istirahat dari dunia blogging saya akan memberikan sebuah tutorial tentang membuat vertical menu dengan efek show hide. Tutorial ini saya pelajari dari Antonio Lupeti, mungkin sudah tidak asing lagi bagi anda dengan blogger yang saya maksud. Live demonya silakan anda lihat DI SINI. bagi anda yang berminat untuk membuatnya silakan ikuti langkah-langkah di bawah ini.

STEP 1

1. Login ke blogger.com
2. Klik Rancangan
3. Klik Edit HTML
4. Cari kode berikut
   
   </head>
   
   Copy kode di bawah ini, lalu letakkan tepat di atas kode tadi.
   
   

   <style type="text/css">
   /* --- button --- */
   .button{
   background:url(http://i46.tinypic.com/2rbz7rt.png) -32px right no-repeat;
   color:#FFFFFF;
   clear:both;
   display:block;
   float:left;
   font-size:13px;
   font-weight:bold;
   height:31px;
   line-height:31px;
   width:auto;
   margin-right:30px;
   }
   a.button {
   text-decoration:none;
   }
   .button span {
   background:url(http://i46.tinypic.com/2rbz7rt.png) left top no-repeat;
   display:block;
   height:31px;
   line-height:31px;
   padding-left:10px;
   padding-right:8px;
   margin-right:20px;
   }
   /* --- vertical menu --- */
   .v-menu{
   border:solid 1px #7F9FBF;
   width:200px;
   clear:both;
   }
   ul.v-menu, .v-menu li{
   padding:0;
   margin:0;
   list-style:none;
   }
   ul.v-menu{
   clear:both;
   margin-top:6px;
   padding:6px 10px;
   }
   .v-menu li a{
   color:#555555;
   font-weight:bold;
   display:block;
   border-top:solid 1px #DEDEDE;
   padding:4px;
   text-decoration:none;
   }
   .v-menu li a:hover{
   color:#999999;
   }
   </style>
   <script type="text/javascript">
   function showElement(layer){
   var myLayer = document.getElementById(layer);
   if(myLayer.style.display=="none"){
   myLayer.style.display="block";
   myLayer.backgroundPosition="top";
   } else {
   myLayer.style.display="none";
   }
   }
   </script>

5. Klik Simpan

STEP 2

1. Setelah template anda tersimpan, Klik Rancangan
2. Pada menu Elemen Halaman, pilih Tambah Widget sesuai dengan letak yang anda inginkan
3. Setelah terbuka halaman tambah widget pilih penambahan HTML/JavaScript
4. Pada halaman Konfigurasi HTML/JavaScript beri judul widget anda, kemudian copy kode berikut dan letakkan pada content.
   
   

   <a href="#" class="button" onclick="javascript:showElement ('v-menu')">
   <span>ClickHere</span></a>
   <ul id="v-menu" class="v-menu" style="display: none;">
   <li><a href="http://URL ANDA">TEXT ANDA</a></li>
   <li><a href="http://URL ANDA">TEXT ANDA</a></li>
   <li><a href="http://URL ANDA">TEXT ANDA</a></li>
   <li><a href="http://URL ANDA">TEXT ANDA</a></li>
   <li><a href="http://URL ANDA">TEXT ANDA</a></li>
   </ul>

   
   Keterangan :
   * Pada list item (<li><a href="http://URL ANDA">TEXT ANDA</a></li>), silakan sesuaikan dengan Url yang anda tuju dan juga text anda.
5. Klik Simpan

     Sekarang lihat blog anda, jika anda berhasil membuatnya maka akan terlihat vertical menu seperti di blog saya yang ini. Selamat mencoba dan semoga bermanfaat ^^,. Saya mau blogwalking dulu, kangen ama temen-temen blogger semua....

Share

baca selengkapnya...