Membuat Menu Navigasi Horizontal Glossy di Blog

Kembali saya akan berikan tutorial dalam modifikasi menu navigassi horisontal di blog anda. Seperti yang sudah saya jelaskan sebelumnya menu navigasi pada blog merupakan elemen yang penting di  alam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Setelah sebelumnya saya memberikan tutorial membuat multi level menu drop down, kali ini saya akan berikan lagi penjelasan membuat menu horisontal glossy. contohnya ada pada gambar di bawah, atau langsung menuju disini.

Langsung saja. berikut ini tutorial membuat glossy horizontal menu

1. Login ke blogger dengan akun anda 
2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
3. Tambahkan kode CSS berikut diatas tag  ]]></b:skin>
   
   /*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
   /*Modified : IB  (http://www.maskolis.co./) */
   .glossymenu{
       position: relative;
       padding: 0 0 0 34px;
       margin: 0 auto 0 auto;
       background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisKB78aSL0Nc7RYrvssPVkmALxtKmTj-wbMHgiqOwCmXH8tP01namX2EzHA1n7HVTsf9KUVOzk03nioGasayxThBqdt-VE0P2y-i_giFsPRP1aX3yLsPogW4GRM_t6tQs-_r6OP5-_YEQ/s1600/maskolis+menu.png) repeat-x; /*tab background image path*/
       height: 46px;
       list-style: none;
   }
   .glossymenu li{
       float:left;
   }
   .glossymenu li a{
       float: left;
       display: block;
       color:#000;
       text-decoration: none;
       font-family: sans-serif;
       font-size: 13px;
       font-weight: bold;
       padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
       height: 46px;
       line-height: 46px;
       text-align: center;
       cursor: pointer;   
   }
   .glossymenu li a b{
       float: left;
       display: block;
       padding: 0 24px 0 8px; /*Padding of menu items*/
   }
   .glossymenu li.current a, .glossymenu li a:hover{
       color: #fff;
       background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaHEEjNKQ0YLbn1thi3F-UugzwQF6xL2wG9F3WMeHnJM0sqL0agM1J5Voarr5cGpmL7rhhX7zf8bOJo7Qu2H8AVQKQyQuOd0qCwuJylR7tIs7En5dPNwibV-OmyNJo8x_TxZkANshFKKc/s1600/maskolis+nav.png) no-repeat; /*left tab image path*/
       background-position: left;
   }
   .glossymenu li.current a b, .glossymenu li a:hover b{
       color: #fff;
       background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE6Ba-UJ5FE-fpekzhVurh-5o4R3Wf7ANmSFhcodeO6dWnpDIAD8Yo0rz_Ll6UPvEejoSmm2HHCEF9nWgHHaDxcduv0sghaiVMG4fVLCmOmuD7zDQ2WgyoV_XkvwFcl6IQBTdmxwdtTzg/s1600/naskolis+leftnav.png) no-repeat right top; /*right tab image path*/
   }
   Jika gambarnya tidak cocok, bisa anda ganti sesuaikan dengan template yang dipakai. Di bawah ini adalah contoh gambar background yang bisa anda gunakan :
   
    
4. Silahkan upload dulu image diatas ke tempat hosting masing-masing. 
5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>

   <ul class='glossymenu'>

   <li class='current'><a href='http://creatingwebsite-maskolis.blogspot.com/'><b>Home</b></a></li>

   <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/tutorial blog' title='tutorial blog'><b>Tutorial Blog</b></a></li>

   <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/SEO' title='SEO'><b>SEO</b></a></li>

   <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/wordpress' title='wordpress'><b>Wordpress</b></a></li>

   <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/affiliate' title='affiliate'><b>Affiliate</b></a></li> 

   <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/hosting' title='hosting'><b>Hosting</b></a></li> 

   </ul>

6. Temen-temen bisa edit link dan anchor teks kode HTML diatas 
7. Terakhir Save template anda

Memang banyak sekali menu navigasi horisontal yang dapat kita pakai untuk memperindah blog. Pada postingan selanjutnya saya akan coba memberikan cara membuat menu navigasi animasi dengan jQuery..Tunggu tanggal mainnya.....

Read More

Membuat Effect JQuery Link Nudging di Blog

Kali ini kembali saya akan memberikan penjelasan kepada temen-temen dalam memodifikasi tampilan link di blog. Jika sebelumnya saya sudah pernah posting membuat efek pelangi link, kali ini saya akan menjelaskan cara menambahkan efek jQuery nudging link. JQuery link nudging adalah effect animasi pada link hasil dari penambahan padding kiri, effect ini akan nampak saat kita menyentuhkan pointer/mouse  pada link, link akan bergerak kekanan atau bergoyang.

Untuk contoh dari efek jQuery nudging ini bisa anda lihat disini. Klik salah satu label yang ada pada sidebar blog demo itu. Jika temen-temen tertarik, langsung saja saya akan berikan penjelasannya :

1. Login ke blogger dengan akun anda 
2. Kemudian pada dasbor  klik Rancangan >> Edit HTML
3. Tambahkan Script JQuery berikut diatas kode </head>
   

   <script  type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"  ></script>

   Catatan : Jika anda sudah memasukkan script JQuery diatas, langkah ketiga bisa anda abaikan
4. Setelah itu tambahkan lagi script berikut dibawah script JQuery tadi:
   

   <script type='text/javascript'>        
   $(document).ready(function()  {         
   $(&#39;#Label1 li&#39;).hover(function() {  //mouse in         
   $(this).animate({ marginLeft:  &#39;12px&#39; }, 400);         
   }, function() { //mouse out          
   $(this).animate({ marginLeft: 0 }, 400);         
   });          
   });         
   </script><!-- end LinkNudging -->

5. Terakhir Save Template anda, dan lihat hasilnya

Itu tadi tutorial kali ini, jika ada pertanyaan teman-teman bisa isi kotak komentar di bawah. Selamat mencoba dan semoga bermanfaat

Read More

Membuat Multi Level Drop Down dengan jQuery

Saya sebelumnya ucapkan terima kasih kepada temen-temen yang telah setia mengunjungi blog ini. Saya akan terus berikan apa yang saya tahu tentang tutorial membuat website kepada anda semua. Nah, kali ini saya akan memberikan satu lagi tutorial blog mengenai cara membuat multi level drop down menu dengan jQuery. Memang sebelumnya saya sudah pernah posting cara membuat menu drop down yang sederhana, kali ini saya akan berikan lagi cara membuat menu drop down lagi, bedanya kali ini lebih menarik karena terdapat beberapa sub menu yang dapat ditampilkan setelah menu utama. Jika anda penasaran silahkan lihat gambar di bawah ini atau langsung saja klik disini.

Gimana, menarik kan? Nah, jika temen-temen berminat membuatnya simak langkah-langkah pembuatannya :

1. Login ke Blogger dengan akun   
2. Kemudian pada dasbor klik Tata Letak >> Edit HTML centang expand template widget
3. Jangan lupa untuk download template anda, berjaga-jaga jika nanti ada kesalahan.
4. Letakkan script JQuery berikut sebelum tag </head>
   

   <script  type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

   Catatan : bagi anda yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah ini abaikan saja
5. Tambahkan juga script berikut setelah script JQuery yadi
   

   <link rel="stylesheet" type="text/css"  href="jqueryslidemenu.css" />      <!--[if lte IE 7]>         
   <style type="text/css">         
   html  .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/         
   </style>          
   <![endif]--> 
   <script  type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/maskolis.js"></script>
   

6. Selanjutnya tambahkan kode CSS berikut diatas tag  ]]></b:skin>: 
   
   .jqueryslidemenu{
   font: bold 12px Verdana;
   background: #414141;
   width: 100%;
   }
   
   .jqueryslidemenu ul{
   margin: 0;
   padding: 0;
   list-style-type: none;
   }
   
   /*Top level list items*/
   .jqueryslidemenu ul li{
   position: relative;
   display: inline;
   float: left;
   }
   
   /*Top level menu link items style*/
   .jqueryslidemenu ul li a{
   display: block;
   background: #414141; /*background of tabs (default state)*/
   color: white;
   padding: 8px 10px;
   border-right: 1px solid #778;
   color: #2d2b2b;
   text-decoration: none;
   }
   
   * html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
   display: inline-block;
   }
   
   .jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
   color: white;
   }
   
   .jqueryslidemenu ul li a:hover{
   background: black; /*tab link background during hover state*/
   color: white;
   }
   
   /*1st sub level menu*/
   .jqueryslidemenu ul li ul{
   position: absolute;
   left: 0;
   display: block;
   visibility: hidden;
   }
   
   /*Sub level menu list items (undo style from Top level List Items)*/
   .jqueryslidemenu ul li ul li{
   display: list-item;
   float: none;
   }
   
   /*All subsequent sub menu levels vertical offset after 1st level sub menu */
   .jqueryslidemenu ul li ul li ul{
   top: 0;
   }
   
   /* Sub level menu links style */
   .jqueryslidemenu ul li ul li a{
   font: normal 13px Verdana;
   width: 160px; /*width of sub menus*/
   padding: 5px;
   margin: 0;
   border-top-width: 0;
   border-bottom: 1px solid gray;
   }
   
   .jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
   background: #eff9ff;
   color: black;
   }
   
   /* ######### CSS classes applied to down and right arrow images  ######### */
   
   .downarrowclass{
   position: absolute;
   top: 12px;
   right: 7px;
   }
   
   .rightarrowclass{
   position: absolute;
   top: 6px;
   right: 5px;
   }
7. Setelah itu tambahkan kode HTML berikut diatas <div id='header-wrapper'> (menu drop down diatas header), jika ingin meletakkan di bawah header cari kode penutup header seperti ini       </div><!-- end header-wrapper --> kemudian letakkan dibawahnya :
   

   <div id="myslidemenu" class="jqueryslidemenu">
   <ul>
   <li><a href="http://creatingwebsite-maskolis.blogspot.com/">Item 1</a></li>
   <li><a href="#">Item 2</a></li>
   <li><a href="#">Folder 1</a>
     <ul>
     <li><a href="#">Sub Item 1.1</a></li>
     <li><a href="#">Sub Item 1.2</a></li>
     <li><a href="#">Sub Item 1.3</a></li>
     <li><a href="#">Sub Item 1.4</a></li>
     </ul>
   </li>
   <li><a href="#">Item 3</a></li>
   <li><a href="#">Folder 2</a>
     <ul>
     <li><a href="#">Sub Item 2.1</a></li>
     <li><a href="#">Folder 2.1</a>
       <ul>
       <li><a href="#">Sub Item 2.1.1</a></li>
       <li><a href="#">Sub Item 2.1.2</a></li>
       <li><a href="#">Folder 3.1.1</a>
           <ul>
               <li><a href="#">Sub Item 3.1.1.1</a></li>
               <li><a href="#">Sub Item 3.1.1.2</a></li>
               <li><a href="#">Sub Item 3.1.1.3</a></li>
               <li><a href="#">Sub Item 3.1.1.4</a></li>
               <li><a href="#">Sub Item 3.1.1.5</a></li>
           </ul>
       </li>
       <li><a href="#">Sub Item 2.1.4</a></li>
       </ul>
     </li>
     </ul>
   </li>
   <li><a href="http://creatingwebsite-maskolis.blogspot.com/">Item 4</a></li>
   </ul>
   <br style="clear: left" />
   </div>

8. Terakhir Save Template anda, dan lihat hasilnya.

Silahkan ganti kode yang saya beri warna dengan tulisan anda sendiri, itu dulu tutorial kali ini selamat mencoba dan jangan sungkan jika bingung anda bisa isi kotak komentar di bawah.

Read More

Membuat Info Panel Slide Vertikal dengan jQuery

Temen-temen sudah baca artikel saya tentang Membuat Chatbox Slide Vertikal Dengan jQuery kan? Tutorial kali ini pada dasarnya sama, yaitu kita menyembunyikan panel ini dengan tombol. Hanya disini yang kita sembunyikan adalah informasi tentang blog kita atau seputar tentang penulis blog. Nah, pada tutorial blog kali ini saya akan memberikan cara dalam membuat info panel slide vertikal dengan jQuery.

Sesuai dengan namanya fungsi dari menu ini adalah memberikan informasi tentang penulis kepada pembaca dengan sedikit kemasan animasi jQuery untuk memperindahnya.Untuk contoh gambarnya anda bisa lihat di atas, atau langsung lihat disini, klik tombol info yang ada di sebelah kiri atas. Bagi anda yang tertarik untuk membuatnya berikut ini langkah-langkahnya :

1. Login ke blogger dengan akun anda.
2. Kemudian klik rancangan
3. Pilih Edit HTML jangan lupa centang "Expand Template Widget"
4. Cari kode berikut ]]></b:skin> gunakan control + f biar cepet, kemudian copy kode dibawah dan letakkan diatas kode tersebut
   

   .panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
   .panel p{color:#ccc;margin:0 0 15px;padding:0}
   .panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
   .panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
   a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
   a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
   a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
   .columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
   .colleft{float:left;width:130px;line-height:22px}
   .colright{float:right;width:130px;line-height:22px}
   a:focus{outline:none}
   .panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
   .panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
   .columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

5. Setelah itu cari kode </head> lalu copy kode dibawah ini dan letakkan diatasnya.
   

   <script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'  type='text/javascript'/>

Jika anda telah memasang script Jquery sebelumnya anda dapat meninggalkan langkah diatas.
6. Masukan kode Javascript berikut dibawah script jQuery tadi:
   

   <script type="text/javascript">
   $(document).ready(function(){
   $(".trigger").click(function(){
   $(".panel").toggle("fast");
   $(this).toggleClass("active");
   return false;
   });
   });
   </script>

7. Langkah terakhir cari lagi kode berikut </body> setelah itu copas kode dibawah ini dan taruh diatasnya.

   <div class='panel'>
   <h3>Selamat Datang bahasa inggrisnya welcome</h3>
   <p style='text-align:justify'>Selamat datang di blog maskolis, saya harap anda senang berada diblog sederhana ini. Blog ini saya tulis dengan komputer yang sederhana dan koneksi internet yang juga sederhana. Saya berharap Anda sering datang kembali. Silahkan anda mencari hal-hal yang baru di blog saya ini <a href='http://creatingwebsite-maskolis.blogspot.com/' title='creating website'>Selengkapnya tentang blog ini</a></p>
   
   <h3>Sekilas tentang maskolis</h3>
   <img height='73px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjs0MGE8RGAiiYrcK7IRkhe6APqRDpplApJTnKDNev37nY1JnsoxsLZwNyfritmSC4pY3-gQ3qMewCPTJU6Wx5JIP-Koj-LvNXEaWUjd5oAYn9yTTQkPX8q2tTkLOWxptopFvi22TOblE/s1600/maskolis.jpeg' width='73px'/>
   <p>Photo di samping itu bukan saya dan juga bukan pacar saya, pokoknya bukan siapa-siap saya. Nama saya maskolis saya seorang yang ingin belajar blogger. Saya mulai belajar blogger sejak bulan Oktober 2010, dan blog ini saya buat pada bulan Desember 2010</p>
   
   <div style='clear:both;'/>
   
   <div class='columns'>
   <div class='colleft'>
   <h3>Navigasi</h3>
   <ul>
   <li><a href='#' title='home'>Home</a></li>
   <li><a href='#' title='about'>About</a></li>
   <li><a href='#' title='portfolio'>Portfolio</a></li>
   <li><a href='#' title='contact'>Contact</a></li>
   <li><a href='#' title='blog'>Blog</a></li>
   </ul>
   </div>
   
   <div class='colright'>
   <h3>Social Stuff</h3>
   <ul>
   <li><a href='http://twitter.com/#!/4rifin123' title='Twitter'>Twitter</a></li>
   <li><a href='http://www.blogger.com/profile/00429201158192562265' title='About Me'>About Me</a></li>
   <li><a href='mailto:helmi4rifin@gmail.com' title='Gmail'>Gmail</a></li>
   </ul>
   </div>
   </div>
   <div style='clear:both;'/>
   </div>
   <a class='trigger' href='#'>Info</a>

8. Terakhir Save Template anda, dan lihat hasilnya

Tentu temen-temen sudah tahu kan? Tulisan yang saya beri warna bisa diganti dengan tulisan yang diinginkan. Demikian tadi penjelasan mengenai membuat panel info dengan jQuery selamat mencoba dan semoga bermanfaat.

Read More

Menambah Add Ons Feedburner Pada Browser di blog

Jika sebelumnya saya membahas tentang meningkatkan feedburner reader di blog. Tutorial kali ini saya akan membahas tentang cara memantau aktivitas feedburner dengan memasangnya pada browser yang kita pakai. Para blogger biasanya menampilkan feedburner RSS readers pada blog. Perlu temen-temen ketahui bahwa sebenarnya ada cara lain untuk memantau jumlah feed readers selain ditampilkan pada blog. Yaitu dengan FeedBurner Subscribers add-ons mozilla, kita dapat memantau jumlah RSS readers dan melihat hits yang terjadi pada blog tanpa harus mengunjungi blog. Cukup dengan instal add-ons Feedburner Subscribers ini, maka RSS readers dan hit count akan tampil di browser anda. 

Gambar diatas adalah contoh tampilan feedburner RSS reader pada browser anda. Nah, jika temen-temen tertarik berikut ini saya akan jelaskan caranya :

1. Klik link ini FeedBurner Subscribers 
2. Kemudian akan muncul halaman seperti gambar di bawah, klik tombol Add to Firefox.
   
   
   
3. Setelah itu muncul gambar seperti di bawah ini dan klik tombol Install Now.
   
   
   
   
   
4. Berikutnya, akan tampil lagi seperti gambar di bawah ini dan klik tombol restart firefox.
   
   
5. Selesai

Jika sudah terpasang anda harus rajin nulis artikel, biar feed readers-nya tambah banyak, Oke sampai jumpa lagi pada tutorial yang lain, selamat mencoba dan semoga bermanfaat.

Read More

Menghilangkan Link Posting Lama dan Posting Baru di Blog

Setelah pada postingan sebelumnya saya sudah jelaskan cara menghilangkan show older post di blog, kali ini saya kembali akan memberikan tutorial yang temanya menghilangkan. Temen-temen jangan heran ini bukan sulap, hanya menambahkan beberapa kode pada template kita tulisan itu hilang. Sebenarnya tampilan link ini tidak terlalu mengganggu karena letaknya di bawah kotak komentar. Anda pun bisa mengganti tampilan link ini dengan icon atau gambar sehingga kelihatan menarik.

Tapi jika temen-temen bersikeras untuk menghilangkannya, ya sabar dulu di bawah ini akan saya jelaskan caranya :

1. Login ke Blogger dengan akun temen-temen.
   
2. Kemudian pilih Layout/Tata Letak >> Edit HTML
3. Jangan lupa untuk mencentang pada kotak Expand Template Widget

Menghilangkan Link Posting Baru atau Newer Post

1. Cari kode berikut ini:
   

   #blog-pager-newer-link {
   float: left;
   }

2. Ganti kode di atas dengan kode di bawah ini:
   

   #blog-pager-newer-link {
   display:none;
   }

3. Simpan Template

Menghilangkan Link Posting Lama atau Older Post

1. Cari kode berikut ini:
   

   #blog-pager-older-link {
   float:right;
   padding-right:5px;
   }

2. Ganti dengan kode berikut ini:
   

   #blog-pager-older-link {
   display:none;
   }

3. Simpan template kamu

Menghilangkan Home atau Halaman Muka

1. Cari kode berikut ini:
   

   #blog-pager {
   text-align: center;
   }

2. Ganti dengan kode berikut ini:
   

   #blog-pager {
   display:none;
   }

3. Kemudian Save Template anda

Nah, gampang kan? Jangan lupa untuk meninggalkan komentar di bawah, karena komentar temen-temen semua sangat berarti bagi saya. Terima kasih dan semoga bermanfaat.

Read More

Menghilangkan Show Older Post Pada Blogger

Walaupun sudah banyak diulas oleh blogger-blogger lain, tidak apalah kalau tutorial ini saya tulis lagi. Yah, daripada hari ini nggak posting, soalnya lagi banyak kerjaan. Nah, tutorial yang saya maksud diatas adalah cara menghilangkan tampilan entri lawas atau orang Inggris bilang Show Older Post. Tampilan entri lawas atau Show Older Post akan muncul apabila Anda mengklik link dari label atau kategori yang terdapat di blogger. Gambar di bawah adalah contoh dari show older post, jika kurang jelas anda klik salah satu label yang terdapat di navigasi menu blog ini.

Untuk menghilangkan agar tulisan itu tidak muncul lagi, berikut ini saya akan berikan caranya :

1. Login ke Blogger dengan akun anda
2. Kemudian pilih Rancangan 
3. Setelah itu klik Edit HTML 
4. Jangan lupa untuk centang expand template widget
5. Biasakan mem-backup template kalian
6. Habis itu, cari kode di bawah ini :
   

   <b:includable id='status-message'>
   <b:if cond='data:navMessage'>
   <div class='status-msg-wrap'>
   <div class='status-msg-body'>
   <data:navMessage/>
   </div>
   <div class='status-msg-border'>
   <div class='status-msg-bg'>
   <div class='status-msg-hidden'><data:navMessage/></div>
   </div>
   </div>
   </div>
   <div style='clear: both;'/>
   </b:if>
   </b:includable>

   Biar gampang silahkan anda gunakan CTRL+F dan ketikkan sebagian kode diatas, misalnya :
   

   <b:includable id='status-message'>

7. Ganti kode diatas dengan kode dibawah ini:
   

   <b:includable id='status-message'>
   <b:if cond='data:navMessage'>
   <div>
   </div>
   <div style='clear: both;'/>
   </b:if>
   </b:includable>

8. Terakhir Save Template anda dan lihat hasilnya.

Itu saja, tutorialnya. Selamat mencoba dan happy blogging.......!!!

Read More