Daftar Isi Otomatis pada Sidebar Berjalan

Kali ini saya akan memberikan kepada anda semuanya lain dari yang lain kali ini tampilnya pada Sidebar jadi kita bisa melihat keduanya artikel di halaman postingan dan Daftar isi di Sidebar, ada 2 jenis yang akan saya tampilkan disini efek Marquee dan efek Scrol.

Cara memasang Code Script tidak akan mengacak-acak HTML Blog anda cukup dengan mengkilk Tata Letak kemudian Tambah Gadgit kilk HTML/Java Script lalu Paste Codenya dan inilah Codenya :

Dengan Efek Scrol

<style></style>
<div style="margin: 0px; padding: 0px; overflow: auto; width: 400px; height: 200px; background-color: rgb(128, 0, 0);">
<script style="text/javascript" src="http://adesanusi.googlepages.com/daftar-isi.txt"></script><script style="text/javascript">var numposts = 150;var showpostdate = false;var showpostsummary = false;var numchars = 150;var standardstyling = true;</script><script src="http://blogidinrohidin.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script><br /><br /></div>

Dengan Efek Marquee

<marquee direction="down" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="2" height="200"><br/><br/><script style="text/javascript" src="http://adesanusi.googlepages.com/daftar-isi.txt"></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://blogidinrohidin.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script><br/><br/></marquee>

Simpan dan silahkan lihat hasilnya

Cara Mudah Membuat Scroll Pada Archive Blogspot

Membuat Scroll Pada Archive Blog memang ini merupakan tips dan trik blogspot lama alias jadul. Tapi gak ada salahnya kalau saya sampaikan disini kembali mengingat banyak teman-teman yang saat ini belajar ngeblog dengan blogspot dan tertarik untuk Membuat Scroll Pada Archive Blog mereka. Jangan tanya bagaimana di wordpress.com karena judulnya Cara Mudah Membuat Scroll Pada Archive Blogspot, ya ini untuk blogspot

Oke langsung saja ya, soalnya saya juga g hobi ngoceh panjang-panjang, lagian masih banyak kerjaan . Ingat Cara Mudah Membuat Scroll Pada Archive Blogspot ini hanya untuk pengguna blogspot, dan baca baik-baik caranya berikut ini

Untuk jelasnya langsung saja langkahnya seperti ini :

• Masuk dulu ke Acount Blogger atau Dashboard
• Pilih Layout , lalu klik Edit HTML
• Centang dulu Expand Widget Templates
• Cari kode yang seperti ini : <div id=’ArchiveList’> atau kata Archive.
  Untuk memudahkan mencarinya , pakai saja Ctrl +F , terus ketik kata yang dicari dikotak yang disediakan, lalu klik next.
• Kalau sudah, tambahkan kode warna merah itu sebagai scollnya
  Lengkapnya kode tersebut seperti dibawah ini :
  

  <h2><data:title/></h2></b:if>
  <div class='widget-content'>
  <div style='overflow:auto; width:ancho; height:200px;'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
  <b:if cond='data:style == &quot;HIERARCHY&quot;'> <b:include data='data' name='interval'/>
  </b:if>
  <b:if cond='data:style == &quot;FLAT&quot;'>
  <b:include data='data' name='flat'/>
  </b:if>
  <b:if cond='data:style == &quot;MENU&quot;'>
  <b:include data='data' name='menu'/>
  </b:if>
  </div></div>
  </div>
  <b:include name='quickedit'/>
  </div> </b:includable>

Sampai disini, masih ada yang bingung dan ingin ditanyakan ? sebagai catatan saja angka 200 tersebut merupakan ukuran dari tinggi kotak scroll itu, kalian bisa merubahnya sendiri sesuai dengan selera masing-masing dan silahkan disesuaikan.

Cara Pasang Iklan Adsense dan PPC di tengah-tengah postingan Blogger

Cara pasang iklan adsense di tengah postingan blogger bisa gak mas ? begitulah pertanyaan salah satu peserta ngopi bareng kemarin. Banyak sekali cara ditempuh agar pendapatan earning Adsense kita meningkat, salah satunya dengan cara meningkatkan CRT. Lalu pertanyaanya bagaimana cara meningkatkan CTR Adsense ? banyak juga kok caranya untuk meningkatkan CTR Adsense, baik dari coba-coba penempatan iklan yang mudah dijangkau oleh visitor atau dengan cara melakukan blanded iklan.

Namun pada kesempatan kali ini saya hanya ingin memberikan sedikit tips Cara Pasang Iklan Adsense dan PPC di tengah-tengah postingan Blogger, yang ditanyakan teman saya. Oke langsung saja caranya

Berikut Cara Pasang Iklan Adsense dan PPC di tengah-tengah postingan Blogger

• Lalu langsung menuju Tata Letak
• Edit HTML
• Jangan lupa centang Expand Templates Widget
• Cari kode berikut ini <data:post.body/>
• Ganti dengan script di bawah ini
  

  <div expr:id='"aim1" + data:post.id'></div><div style="clear:both; margin:10px 0">
  <!-- Letakkan HTML Adsense yang sudah di encode disini -->
  </div><div expr:id='"aim2" + data:post.id'><data:post.body/></div><script type="text/javascript">var obj0=document.getElementById("aim1<data:post.id/>");var obj1=document.getElementById("aim2<data:post.id/>");var s=obj1.innerHTML;var r=s.search(/\x3C!-- adsense --\x3E/igm);if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}</script>

• Lalu untuk menggunakannya kamu tinggal memasang code <!– adsense –> yang bisa kamu taruh disembarang paragraf untuk memanggil iklan Adsense kamu,
  
  Contoh

  Orang yang bersyukur dengan otomatis akan mensetting pola pikirnya menuju yang positif. Dan ibarat yang mendera fisik dan batinnya pun tetap disikapinya dengan senyum.
  
  <!– adsense –>
  
  Pikirannya menuntunnya untuk berpendapat bahwa, mungkin kesakitan itu untuk menghapus dosanya, atau mungkin mengingatkan dia agar lebih dekat kepada yang kuasa dan beristigfar atas semua dosa dan khilafnya.

Selamat mencoba Cara Pasang Iklan Adsense dan PPC di tengah-tengah postingan Blogger.

Background Blog Transparan

Secara umum latar belakang image hanya tampil sebagian karena tertutup oleh warna latar dari outer wapper, main wrapper dan sidebar wrapper. Untuk mengatasi masalah tersebut anda harus sedikit menyamarkan latar yang menghalangi background berupa gambar tadi.

Bisa juga dilakukan dengan menghapus warna latar belakang dari outer wapper, main wrapper dan sidebar wrapper, tapi hasilnya artilkel/postingan blog anda akan menjadi kurang jelas karena bersatu dengan gambar latar.

Tutorial ini merupakan salah satu solusi bagi anda untuk menampilkan bayangan latar berupa gambar tetapi tidak terlalu mengganggu bagian lainnya dari blog.

Jika anda tertarik untuk menampilkannya, ikuti langkah-langkahnya :

• Masuk ke Blogger.
• Masuk ke Rancangan bagian Edit HTML.
• Cari kode seperti dibawah ini :
  

  #outer-wrapper {
  width: 1000px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  background:black;
  }

• Tambahkan kode dibawah ini yang diletakkan dibawah kode diatas
  

  filter: alpha(opacity=100);
  -moz-opacity: 1.0;
  opacity: 0.8;
  -khtml-opacity: 0.0;

• Jika digabungkan kodenya akan menjadi seperti dibawah ini :
  

  #outer-wrapper {
  width: 1020px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  background:black;
  filter: alpha(opacity=100);
  -moz-opacity: 1.8;
  opacity: 0.8;
  -khtml-opacity: 0.0;
  }

  Angka berwarna merah merupakan ukuran yang digunakan oleh blog ini .Silakan anda ubah angka-angka tersebut. Semakin kecil angkanya, akan semakin semakin samar bagian outer wrapper blog anda.


• Klik tombol Simpan Template.
• Lihat perubahan blog anda.

Trik ini dapat juga anda terapka pada bagian lainnya dari blog anda.
Jika masih terkendala silahkan tinggalkan komentar
Selamat mencoba, semoga bermanfaat.

Penggunaan Google Font API di Blogger

Hal ini sebenarnya sudah pernah saya jelaskan sebelumnya pada artikel Tutorial Penggunaan Google Fonts, namun kebetulan ada yang bertanya mengenai font yang saya gunakan di blog ini jadi tidak ada salahnya saya tulis kembali tutorial ini. Font yang saya gunakan di blog ini adalah Droid Sans, bagi yang belum mengerti silahkan baca kembali postingan saya yang lalu mengenai google fonts. Jika sobat ingin menggunakan font yang lain, silahkan kunjungi langsung Google Web Fonts.

Pada halaman depan, silahkan sobat sorting saja berdasarkan Popularity.

Setelah itu sobat bisa melihat font yang paling banyak digunakan termasuk 'Droid Sans' yang juga saya gunakan di blog ini, pilih font yang sobat suka dan klik Add to Collection.

Jika ingin melihat bentuk tulisan dalam format Paragraph atau Headline, sobat bs klik Review pada tab button yang ada dibagian kanan bawah.

Kemudian untuk tahap terakhir, silahkan klik tab button Use pada bagian kanan bawah. Sobat akan mendapatkan kode untuk font yang sebelumnya sudah sobat pilih.

Jangan lupa untuk menambahkan tanda [ / ] di akhir kode sehingga menjadi seperti berikut :

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'/>

Tahap selanjutnya memasukkan kode tersebut ke dalam template blogger, silahkan login ke blogger.

• Klik Rancangan
• Kemudian klik Edit HTML
• Tambahkan kode tersebut sebelum kode </head>, sehingga menjadi seperti :
  

  <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'/>
  </head>

• Cari kode css untuk body, contohnya seperti berikut :
  

  body {
  width: 980px;
  background: #FFF;
  font-size: 13px;
  font-family: 'Droid Sans', verdana, arial;
  text-align: left;
  color: #000;
  margin: 0 auto;
  padding: 0;
  }
  

  Perhatikan huruf yang saya tebalkan, itulah kode css yang harus sobat tambahkan.
• Kode css tersebut sengaja saya letakkan dibagian body, sehingga font seluruh isi blog akan berubah menjadi Droid Sans. Jika sobat menemukan kode font : verdana, arial, trebuchet ms dan sebagainya dibagian css yang lain silahkan hapus saja, misal seperti ini :
  

  .post {
  text-align: left;
  background: #FFF;
  font-family: arial, verdana;
  border: 1px solid #CCC;
  margin-bottom: 10px;
  padding: 10px 10px 0;
  }
  

Baiklah selamat mencoba, semoga bermanfaat !

Mempercantik Kotak Komentar

Pada tutorial kali ini saya akan membahas bagaimana caranya mempercantik kotak Komentar dengan memasukkan background Gambar di Blogger.

Tanpa banyak Cerita sekarang saya akan memberikan langkahnya tahap demi tahap.

1. Silahkan Sobat Login ke Akun Blogger Klik Rancangan --> Edit HTML
2. Beri tanda chacklist pada tulisan "Expand Template Widget"
   Cari Kode berikut :
   

   <div class='comment-form'>
   

3. Setelah ketemu ganti kode tersebut dengan kode seperti ini
   

   <div id='ib-form'>
   

4. Kemudian tambahkan kode berikut di atas kode ]]></b:skin>
   

   #ib-form iframe{
   background:#ffffff url(http://i649.photobucket.com/albums/uu217/teaade/backroundpos.gif) no-repeat bottom right;
   border:7px solid #C7C7C7;
   padding:5px;
   font:normal 12pt "ms sans serif", Arial;
   color:#7EB2AC;
   width:95%;height:250px;}
   #ib-form iframe:hover{
   background:#ffffff url(http://i649.photobucket.com/albums/uu217/teaade/backroundpos.gif) no-repeat bottom right;
   border:7px solid #7EB2AC;}
   #ib-form a{
   color:#7EB2AC;}
   

5. Setelah semua langkah-langkah di atas selesai silahkan simpan kerjaan anda dengan menekan tumbol "Save Template" dan lihat hasilnya

Semoga Tutorial yang singkat ini dapat bermanfaat dan tentunya menambah wawasan Sobat untuk memodif Blog Sobat supaya terlihat Profesional, Jika masih mengalami kendala dalam penempatan kodenya silahkan tinggalkan Komentar

Mengganti tampilan Cursor Mouse

Selamat datang di blog yang sederhana ini.!, melakukan modifikasi tampilan pada cursor mouse adalah salah satu cara yang dapat mempercantik blog kita. Cara ini cukup mudah dan sederhana. Sekarang kita akan bahas 2 jenis trik untuk merubah tampilan cursor mouse.

Type Pertama ( variasi image )

• Pilih tab Elemen Halaman ( Page Element ).
• Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
• Copykan script berikut dan letakkan pada kotak Content yang tersedia:
  Note : Bisa kamu letakan dimana saja pada layout.
  

  <style type="text/css">body {cursor:url("http://lh5.ggpht.com/_wC8_9aR_6uE/S6ufngy_rmI/AAAAAAAACcg/XQ6AD06Zt10/appstarting.gif"),default}</style>
  

  Keterangan :
  Warna merah, URL cursor ( ganti dengan URL cursor lain yang sesuai dengan warna / type template )
• Simpan dan lihat hasilnya.. !

Type Kedua ( variasi Texs )

• Pilih tab Elemen Halaman ( Page Element ).
• Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
• Copykan script berikut dan letakkan pada kotak Content yang tersedia:
  Note : Bisa kamu letakan dimana pada layout.
  

  <script>
  //mouse
  //Circling text trail- Tim Tilton
  //Website: http://www.tempermedia.com/
  //Visit http://www.dynamicdrive.com for this script and more
  function cursor_text_circle(){
  // your message here
  var msg='Inspirasi dan Kreasi'.split('').reverse().join('');
  
  var font='Times New Roman';
  var size=3; // up to seven
  var color='#ff0000';
  
  // This is not the rotation speed, its the reaction speed, keep low!
  // Set this to 1 for just plain rotation w/out drag
  var speed=.2;
  
  // This is the rotation speed, set it negative if you want
  // it to spin clockwise
  var rotation=-.2;
  
  // Alter no variables past here!, unless you are good
  //---------------------------------------------------
  
  
  var ns=(document.layers);
  var ie=(document.all);
  var dom=document.getElementById;
  msg=msg.split('');
  var n=msg.length;
  var a=size*13;
  var currStep=0;
  var ymouse=0;
  var xmouse=0;
  var props="<font face="+font+" color="+color+" size="+size+">";
  
  if (ie)
  window.pageYOffset=0
  
  // writes the message
  if (ns){
  for (i=0; i < n; i++)
  document.write('<layer left="0" top="0" width="+a+" name="nsmsg'+i+'" height="+a+"><center>'+props+msg[i]+'</font></center></layer>');
  }
  else if (iedom){
  document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
  for (i=0; i < n; i++)
  document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
  document.write('</div></div>');
  }
  (ns)?window.captureEvents(Event.MOUSEMOVE):0;
  
  function Mouse(evnt){
  ymouse = (ns(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
  xmouse = (ns(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
  }
  
  if (nsiedom)
  (ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
  var y=new Array();
  var x=new Array();
  var Y=new Array();
  var X=new Array();
  for (i=0; i < n; i++){
  y[i]=0;
  x[i]=0;
  Y[i]=0;
  X[i]=0;
  }
  
  var iecompattest=function(){
  return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
  }
  
  var makecircle=function(){ // rotation properties
  if (ie) outer.style.top=iecompattest().scrollTop+'px';
  currStep-=rotation;
  for (i=0; i < n; i++){ // makes the circle
  var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
  d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(iedom? 'px' : '');
  d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(iedom? 'px' : ''); // remove *2 for just a plain circle, not oval
  }
  }
  
  var drag=function(){ // makes the resistance
  y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
  x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
  for (var i=1; i < n; i++){
  y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
  x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
  
  }
  makecircle();
  // not rotation speed, leave at zero
  setTimeout(function(){drag();},10);
  }
  if (nsiedom)
  if ( typeof window.addEventListener != "undefined" )
  window.addEventListener( "load", drag, false );
  else if ( typeof window.attachEvent != "undefined" )
  window.attachEvent( "onload", drag );
  else {
  if ( window.onload != null ) {
  var oldOnload = window.onload;
  window.onload = function ( e ) {
  oldOnload( e );
  drag();
  };
  }
  else
  window.onload = drag;
  }
  
  }
  cursor_text_circle();
  
  </script>
  

  Keterangan :
  Teks akan muncul sebagai animasi yang mengikuti cursor mouse
  

Selamat mencoba, bila masih terkendala dalam penerapannya silahkan sobat tinggalkan komentar

Multi Level Drop Down JQuery

Bagaimana caranya membuat Blog semakin Dinamis dan enak Di pandang mata? Tentu saja dengan menggunakan Script yang berasal dari JQuery, dengan memakai script ini blog yang tadinya Standard jadi lebih Fresh.

Untuk bahasan kali ini masih ada hubungannya dengan Script JQuery, yaitu membuat Multi Level Drop Down, dari nama judulnya saja sudah pasti ditebak kita akan membahas Link menu yang bila mana di Klik akan bergerak kebawah (...kurang lebih seperti itu... :D).

Gimana tertarik?? Nah berikut langkah-langkah membuat multi level drop-down menu dengan JQuery.

1. Seperti biasa Log In pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML


2. Tambahkan 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 sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah kedua abaikan saja


3. Tambahkan juga script berikut setelah script JQuery yang tadi
   

   <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="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/Dropdownmenuwithjquery.js"></script>
   

4. 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;
   }
   

5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>
   

   <div id="myslidemenu" class="jqueryslidemenu">
   <ul>
   <li><a href="http://amatullah83.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://amatullah83.blogspot.com/">Item 4</a></li>
   </ul>
   <br style="clear: left" />
   </div>
   

6. Simpan template dan lihat hasilnya

Bagi yang paham dengan kode CSS silahkan ganti sesuai selera,
Semoga tutorial ini bermanfaat bagi sobat, bila masih bingung silahkan tinggalkan komentar.

Merubah tag H1 di Artikel Post

Ahli seo mengatakan kalau search engine mengutamakan susunan header (h1, h2) dari blog kita.Jika anda ingin merubah judul post menjadi h1 tentunya akan ada dua h1 dalam template blog kamu, nah untuk mensiasatinya kita harus memastikan jika sedang berada di single post (artikel) judul post menjadi H1 dan judul blog menjadi p. title (tidak ada H) dan jika berada di homepage maka susunannya kembali semula (judul blog H1 dan judul post h2 atau h3).

Untuk membuat judul post blog kita menjadi H1 maka ikuti tahapan berikut ini:

1. Saat klik -> rancangan dan pilih edit -> html lalu centang expand template
   
2. Cari kode berikut di template blog kamu :
   

   <h1 class='title' style='background: transparent; border-width: 0px'>
   <b:include name='title'/>
   </h1>
   

   Jika sudah ketemu, ganti dengan dibawah ini:
   

   <h1 class='title' style='background: transparent; border-width: 0px'>
   <a expr:href='data:blog.homepageUrl'>
   <b:include name='title'/></a>
   </h1>
   

3. Cari kode berikut di template kamu
   

   <!--No header image -->
   <div id='header-inner'>
   <div class='titlewrapper'>
   <h1 class='title'>
   <b:include name='title'/>
   </h1>
   </div>
   <b:include name='description'/>
   </div>
   

   jika sudah ketemu, ganti dengan kode dibawah ini:
   

   <!--No header image -->
   <div id='header-inner'>
   <div class='titlewrapper'>
   <b:if cond='data:blog.pageType != "item"'>
   <H1 class='title'>
   <b:include name='title'/>
   </H1>
   <b:else/>
   <p class='title'>
   <b:include name='title'/>
   </p>
   </b:if>
   </div>
   <b:include name='description'/>
   </div>
   

4. Kemudian cari kode berikut di template kamu:
   

   <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>
   <b:else/>
   <b:if cond='data:post.url'>
   <b:if cond='data:blog.url != data:post.url'>
   <a expr:href='data:post.url'><data:post.title/></a>
   <b:else/>
   <data:post.title/>
   </b:if>
   <b:else/>
   <data:post.title/>
   </b:if>
   </b:if>
   </h3>
   </b:if>
   

   Jika sudah ketemu, ganti dengan kode dibawah ini:
   

   <b:if cond='data:blog.pageType != "item"'>
   <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>
   <b:else/>
   <b:if cond='data:post.url'>
   <a expr:href='data:post.url'><data:post.title/></a>
   <b:else/>
   <data:post.title/>
   </b:if>
   </b:if>
   </H3>
   </b:if>
   <b:else/>
   <H1 class='post-title entry-title'>
   <b:if cond='data:post.link'>
   <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
   <b:else/>
   <b:if cond='data:post.url'>
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
   <b:else/>
   <data:post.title/>
   </b:if>
   </b:if>
   </H1>
   </b:if>
   

Jika anda memakai gambar/image untuk header blogspot kamu, maka tahapannya sudah selesai sampai disini. Tapi jika kamu tidak memakai gambar maka tulisan judul blog kamu akan berubah-ubah (besar kecil), jika dihomepage judul blog tetap normal (sesuai css) tapi jika di single post (permalink artikel) maka judul blog kamu menjadi kecil seperti huruf artikel. Hal ini karena kita belum menambahkan css untuk kode p.title (css alternatif judul blog ketika berada di artikel).

Oleh sebab itu kita harus menambahkan kode css yang sama ukuran dan elemennya dengan kode title/header (judul blog kita)

Contoh:
#header h1{elemen/ukuran css title blog kamu}
#header h1 a{Disini elemen/ukuran css title blog kamu}

Maka tambahkan css seperti berikut ini:
P.title {Nah Disini harus sama dengan elemen/ukuran css title blog kamu}
P.title a{Nah Disini harus sama dengan elemen/ukuran css title blog kamu}

Untuk makin jelasnya kita coba dengan css berikut ini:
Jika css header kamu seperti ini:


#header h1{font-size:23px;font-weight:700;float:left;width:40%;text-shadow:1px 0 #2B4462;letter-spacing:-1px}
#header h1 a{color:#fff;text-decoration:none}


Maka tambahkan dibawahnya dengan kode css:


P.title {font-size:23px;font-weight:700;float:left;width:40%;text-shadow:1px 0 #2B4462;letter-spacing:-1px}
P.title a{color:#fff;text-decoration:none}


5. Setelah itu jangan lupa save template.

Catatan:
Ingat syarat bagi search engine dan browser membaca sebuah weblog adalah adanya unsur H1, H2 dan H3 (minimal itu saja cukup). Hati-hati karena ketika berada disingle post/artikel yang sudah menjadi H1 sedangkan jika di homepage artikel post (permalink post) kita H3, berarti kamu harus menyiapkan H3 tambahan, agar syarat H1, H2, dan H3 di blog kamu tetap ada baik itu ketika di homepage ataupun ketika di artikel postingan kita.

Penomoran Komentar Blogger

Menambah nomor urut komentar
Anda mungkin sudah tidak asing lagi dengan judul trik blogger di atas. Yah, berita lama (± tahun 2008) yang mungkin terlupakan, tapi tidak ketinggalan zaman. Perbedaan tampilan & tata letak pada trik ini hanya merupakan hasil kostumisasi dari kode/script aslinya.

Tambahkan CSS (Cascading Style Sheets) berikut di atas ]]></b:skin>.

.numberingcomments {
float:right;
text-align:right;
display:block;
width:50px;
margin:0 5px 0 0;
font-size:1em;
font-weight:normal;
}

1. Untuk merubah letak nomor ke kanan (right) atau ke kiri (left) dapat Anda lihat pada atribut kode yang berwarna biru.
2. Kode yang diberi background kuning, mungkin bisa Anda hilangkan atau jika Anda memerlukan properti tersebut, silakan dibiarkan apa adanya.
3. Untuk mengatur letak nomor agar sesuai dengan keinginan Anda, silakan rubah nilai properti kode yang diberi warna merah [dimulai dari 0 (atas), 5px (kanan), 0 (bawah), 0 (kiri)].
4. Warna hijau menunjukkan nilai properti untuk mengatur ukuran font.

Dan berikut merupakan kode HTML (HyperText markup Language) dari penomoran komentar.

<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>

<span class='numberingcomments'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</span>

</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>

Sisipkan kode yang berwarna merah di antara kode-kode di atas.

HTML di atas hanya akan memberikan nomor urut tidak termasuk permalink komentar. Oleh karena permalink komentar sudah terwakili oleh timestamp komentar.

<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>

Apabila Anda ingin menerapkan nomor urut komentar sebagai permalink komentar, maka cukup mengambil kode yang berwarna merah pada timestamp & letakkan pada script seperti yang tampak di bawah ini.

<span class='numberingcomments'>
<a expr:href='data:comment.url' title='comment permalink'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Kostumisasi nomor urut komentar
Jika Anda telah melakukan kostumisasi avatar komentar dengan meletakkannya di sebelah kanan, mungkin lebih baik meletakkan nomor komentar di sebelah kiri. Anda perlu sedikit merubah & menambah CSS penomoran komentar, seperti:

.numberingcomments {
float:left;
text-align:right;
display:block;
margin-left:-50px;
font-size:1em;
font-weight:normal;
}

.numberingcomments:after {content:"."}

Silakan Anda melakukan trial & error, baik menambah dan/atau mengurangi kode CSS penomoran komentar, sampai Anda menemukan posisi yang tepat untuk meletakkan nomor urut tersebut.

Script Kasih Judul ketika di Copas

Memang sangat disayangkan bila Karya tulis kita di Blog di Copas orang tanpa menyertakan sumber blog yang telah di "Bajak" karya tulisnya, sehingga terkesan bahwa yang mencuri itu adalah yang punya Hak Karya tulis yang telah di Bajak.

Bila hal itu menimpa Saya dan sobat bagaimana? jangan khawatir, dengan adanya Script berikut, pastinya sipencuri akan memutar otak untuk menghapus Judul yang akan muncul bila Hasil karya kita di Bajak...

Berikut Step by Stepnya, supaya hasil yang diperoleh tidak mengecewakan, silahkan Sobat perhatikan baik-baik kode berikut ini :

1. Login Blogger Dengan Google Akun Anda
2. Jika sudah di dashboard Pergi Ke Rancangan » Edit HTML
3. Masukkan Script berikut di bawah kode <head> :
   

   <script type='text/javascript'>
   function addLink() {
   var body_element = document.getElementsByTagName('body')[0];
   var selection;
   selection = window.getSelection();
   var pagelink = "<br/><br/> Read more at: <a href='"+document.location.href+"'>"+document.location.href+"</a><br/>Copyright hakimramadhan.blogspot.com Under Common Share Alike Atribution"; // change this if you want
   var copytext = selection + pagelink;
   var newdiv = document.createElement('div');
   newdiv.style.position='absolute';
   newdiv.style.left='-99999px';
   body_element.appendChild(newdiv);
   newdiv.innerHTML = copytext;
   selection.selectAllChildren(newdiv);
   window.setTimeout(function() {
   body_element.removeChild(newdiv);
   },0);
   }document.oncopy = addLink;
   </script>
   

4. Ganti url hakimramadhan.blogspot.com pada Script dengan url blog Kamu .
5. Setelah itu simpan template .

Selamat Mencobat semoga berhasil, bila sobat masih menemui kendala silahkan tinggalkan komentar...

Widget Whos Amung Us

User online widget nampaknya menjadi salah satu widget wajib blogger saat ini. Hampir semua blog dan website memasangnya. Dengan widget ini pengunjung dapat melihat berapa orang yang sedang online saat itu di blog atau website. Saya pasang widget whos amung us. Selain itu, masih banyak situs lainnya yang menyediakan widget user online. Anda dapat mencarinya di google dengan keyword "user online widget" atau "user online status" atau "user online". Silahkan pilih widget dari situs mana yang akan anda pasang pada blog anda.

Secara umum, widget ini sangat mudah dipasang. Biasanya anda diharuskan mendaftar dulu untuk membuat akun. Proses pendaftaran pun sangat mudah, cukup dengan email saja. Bahkan ada yang tidak memerlukan pendaftaran. Setelah itu anda akan diberikan script user online status yang siap untuk dipasang. Nah, selain user online status dari whos.amung.us masih ada lagi yang lain seperti radarURL.com, whosread.com, 24counter.com, widgetbox.com, histas.com, dan banyak situs lainnya.

Oke, misalnya kita pakai user online status dari whos.amung.us karena widget ini termasuk yang terbaik dan teraman dari widget user online status lainnya yang ada di internet. Sekarang cara pasang widget nya seperti ini :

1. Login ke blogger dengan id anda. Setelah itu tinggalkan sebentar
2. Kunjungi situs whos.amung.us
3. Klik Showcase pada daftar di sebelah atas
4. Klik Color Me lalu klik color wheel
5. Halaman berikutnya, pada Already have a map, or our widget? klik button No
6. Berikutnya silahkan pilih widget color dan font color. Akan ada preview untuk melihat widget. Sesuaikan dengan desain template blog anda.
7. Jika sudah, kembali ke blogger
8. Klik Tata Letak --> HTML/Javascript
9. Copy kode widget Whos Amung Us ke HTML/Javascript
10. Klik Simpan dan Selesai

Kotak dengan CSS

Belajar css memang sangat menyenangkan, kali ini saya coba berikan sedikit tips dalam membuat border blog. Mungkin ada yang belum mengetahui ragam atau jenis border, padahal ada banyak jenis border yang bisa di gunakan untuk mempercantik tulisan atau blog. Dibawah ini ada beberapa daftar jenis border yang bisa sobat gunakan untuk mengganti border sidebar atau main post blog.

• border-style: dotted
• border-style: solid
• border-style: groove
• border-style: inset
• border-style: dashed
• border-style: double
• border-style: ridge
• border-style: outset

Berikut ini contoh dari border yang bisa sobat gunakan :

1. Border-style: dotted
   

   <div style="border:5px dotted #08088A; background:#FFF; width:500px; padding:20px">
   dotted dotted dotted dotted dotted
   </div>
   

   
   dotted dotted dotted dotted dotted
   


2. Border-style: solid
   

   <div style="border:5px solid #08088A; background:#FFF; width:500px; padding:20px">
   solid solid solid solid solid
   </div>
   

   
   solid solid solid solid solid
   


3. Border-style: dashed
   

   <div style="border:5px dashed #08088A; background:#FFF; width:500px; padding:20px">
   dashed dashed dashed dashed dashed
   </div>
   

   
   dashed dashed dashed dashed dashed
   


4. Border-style: groove
   

   <div style="border:5px groove #08088A; background:#FFF; width:500px; padding:20px">
   groove groove groove groove groove
   </div>
   

   
   groove groove groove groove groove
   


5. Border-style: double
   

   <div style="border:5px double #08088A; background:#FFF; width:500px; padding:20px">
   double double double double double
   </div>
   

   
   double double double double double
   


6. Border-style: inset
   

   <div style="border:5px inset #08088A; background:#FFF; width:500px; padding:20px">
   inset inset inset inset inset
   </div>
   

   
   inset inset inset inset inset
   


7. Border-style: outset
   

   <div style="border:5px outset #08088A; background:#FFF; width:500px; padding:20px">
   outset outset outset outset outset
   </div>
   

   
   outset outset outset outset outset
   


8. Border-style: ridge
   

   <div style="border:5px ridge #08088A; background:#FFF; width:500px; padding:20px">
   ridge ridge ridge ridge ridge
   </div>
   

   
   ridge ridge ridge ridge ridge
   


9. Border Campur Aduk
   

   <div style="border-style:dotted dashed double outset; border-color:red orange blue purple; border-width:5px; background:#FFF; width:500px; padding:20px">
   dotted dashed double outset
   </div>
   

   
   dotted dashed double outset
   

Keterangan :

• border:5px adalah tebal dari border.
• #08088A adalah kode untuk warna biru, selengkpnya bisa dilihat disini.
• width:500px adalah lebar dari kotak.
• padding:20px adalah jarak antara tulisan dengan border.
• background:#FFF adalah warna latar.

Read More Otomatis dengan Thumbnail

Sebelumnya Blogger masih pake cara lama untuk untuk membuat Read More blog mereka, dengan cara menambahkan tag <span id=”fullpost”> dan </span> setiap kali kita posting di blog yang dinilai Blogger terlalu rumit dengan segala keterbatasanya. Berikut ini cara yang mudah untuk membuat Read More Otomatis dengan Thumbnail di Blogger sepertihalnya yang saya gunakan pada Blog Sederhana Saya ini.

Cara Membuat Read More Otomatis dengan Thumbnail di Blogger adalah sebagai berikut :

1. Silahkan Login dan masuk pada Edit.
2. Tambahkan kode dibawah ini diatas kode </head> :

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Fais

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>


Ubah angka di atas sesuai kebutuhan :
summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar
summary_img = 340; adalah tinggi potongan artikel dengan gambar
img_thumb_height = 100; adalah ukuran tinggi thumbnail
img_thumb_width = 120; adalah ukuran lebar thumbnail

3. Selanjutnya cari kode <data:post.body/> lalu ganti kode tsb dengan kode berikut:

<b:if cond='data:blog.pageType != "item"'>
<div style=' text-align: justify;' expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Selamat mencoba dan semoga berhasil...

Text Resizer di Blogger

Terkadang jika kita mengunjungi sebuah blog atau web, kita dihadapkan pada tulisan blog yang menurut kita terlalu kecil sehingga kita susah untuk membacanya. Nah, untuk menyikapi hal itu, diperlukan sebuah fasilitas untuk memperbesar ukuran huruf tersebut, benar kan? Kali ini saya akan membahas mengenai cara membuat tombol text resizer itu. Dengan adanya tombol resizer itu, otomatis tulisan teks pada blog akan membesar atau memperkecil.

Untuk contoh soalnya, temen-temen bisa lihat disini, klik tulisan berwarna biru dengan background ungu tersebut anda akan melihat huruf yang akan semakin membesar. Nah, sudah mengerti kan? Jika anda tertarik berikut ini akan saya jelaskan langkah pembuatannya :

1. Login ke Blogger dengan akun anda
2. Selanjutnya klik Rancangan >> pilih Edit html
3. Jangan lupa centang Expand Template Widget
4. Saya sarankan untuk membackup template anda dengan cara klik download template lengkap
5. Langkah selanjutnya copy CSS di bawah ini, lalu paste persis di atas kode ]]></b:skin>

.textsizernorm, .textsizerbig, .textsizerbigger, .textsizersmall {
padding-top: 20px;
-o-transition: font 2s ease-in;
-moz-transition: font 2s ease-in;
-webkit-transition: font 2s ease-in;
}
.textsizersmall{font-size:12px}
.textsizernorm{font-size:13px}
.textsizerbig{font-size:14px}
.textsizerbigger{font-size:15px; font-weight:bold}
span.sizer {
float: right;
text-align: center;
height: 20px;
width: 250px;
margin: 0 10px 10px 0;
background: #333366;
display: block;
font-size: 18px;
padding: 2px 10px;
color: #00CCFF;
text-shadow: 1px 1px 1px blue;
cursor: pointer;
border: 1px solid #eee;
font-family: Times New Roman;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 1px 1px 6px #000;
-moz-box-shadow: 1px 1px 6px #000;
-webkit-box-shadow: 1px 1px 6px #000;display: block;
}
span.sizer:active {
border: 1px solid #555;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: #003399;
box-shadow:0px 0px 12px #000;
-moz-box-shadow:0px 0px 12px #000;
-webkit-box-shadow:0px 0px 12px #000;
margin-top: -1px;
}
.clr20 {clear: both; height: 20px;}


6. Selanjutnya cari kode <data:post.body/> lalu letakkan kode dibawah ini diatasnya

<div class='textsizersmall' onclick='if (this.className==&quot;textsizersmall&quot;) { this.className=&quot;textsizernorm&quot; } else if (this.className==&quot;textsizernorm&quot;) { this.className=&quot;textsizerbig&quot; } else if (this.className==&quot;textsizerbig&quot;) { this.className=&quot;textsizerbigger&quot; } else if (this.className==&quot;textsizerbigger&quot;) { this.className=&quot;textsizersmall&quot; } else { this.className=&quot;textsizersnall&quot; }'><span class='sizer'>Text Resizer: Click for Resizer</span>
<div class="clr20"/>


7. Kemudian letakkan kode </div> setelah kode <data:post.body/> tersebut untuk lebih lengkapnya silahkan sobat lihat contoh dibawah ini.

<div class='textsizersmall' onclick='if (this.className==&quot;textsizersmall&quot;) { this.className=&quot;textsizernorm&quot; } else if (this.className==&quot;textsizernorm&quot;) { this.className=&quot;textsizerbig&quot; } else if (this.className==&quot;textsizerbig&quot;) { this.className=&quot;textsizerbigger&quot; } else if (this.className==&quot;textsizerbigger&quot;) { this.className=&quot;textsizersmall&quot; } else { this.className=&quot;textsizersnall&quot; }'><span class='sizer'>Text Resizer: Click for Resizer</span>
<div class="clr20"/>

<data:post.body/>

</div>


8. Yang terakhir Save Template anda, kemudian lihat hasilnya.

Jika temen-temen ingin tampilan hurufnya lebih besar lagi, anda bisa menggantinya dengan cara mengganti font-size diatas. Sudah dulu ya penjelasannya, waktunya tidur selamat mencoba dan semoga bermanfaat.

Tab Slick dengan Java Script jQuery

Setelah kemarin membuat artikel tentang bagaimana membuat tab view, kali ini saya akan membuat tab view dengan manggunakan java script JQuery yang biasa di sebut dengan 'Tab Slick' dengan menggunakan Tab slick blogger sobat akan menjadi lebih indah dan dapat mengundang pengunjung blog semakin betah berlama-lama menatap blog anda.

Tanpa banyak basa-basi saya akan memberikan langkah-langkahnya sebagai berikut :

1. Pertama kali tentu saja sobat harus login ke Blogger
2. Setelah masuk ke Blogger, sobat langsung saja menuju ke Tab Rancangan -> Edit HTML
3. Jangan lupa centang di bagian Expand Template Widget
4. Silahkan sobat kopi kode dibawah ini dan letakkan diatas kode ini ]]></b:skin>
   

   /* -------------- * SLICK TAB * ------------------- */
   #slick_area {border:0px solid #cccccc;background-color:#f4f4f4;padding:0px;margin:10px 0;line-height:14px;width:337px;}
   
   #slick_area a{color:#0aaaf5;text-decoration:none;}
   .slick_area a:hover{color:#0aaaf5;}
   ul.slick {margin:5px 5px 8px 0;padding:0px;}
   ul.slick li {list-style:none;display:inline;background-color:#cccccc;padding:6px 14px;text-decoration:none;font-size:10px;font-weight:bold;text-transform:uppercase;cursor:pointer;border:1px solid #cccccc;}
   ul.slick li:hover {color:#0aaaf5;}
   ul.slick li.active {background-color:#f4f4f4;border:1px solid #cccccc;}
   .content-slick {background-color:#f4f4f4;border:1px solid #cccccc;color:#121212;min-height:40px;padding:5px 5px 5px;text-align:justify;}
   .content-slick ul {margin:2px;padding:0;}
   .content-slick ul li {list-style:none;border-bottom:0px solid #585858;padding:4px;}
   .content-slick ul li:last-child {border-bottom:none;}
   .content-slick ul li:hover, .content-slick ul li a:hover {display:block;background-color:#cccccc;}
   .content-slick ul li a {text-decoration:none;color:#FFF;display:block;}
   
   #komentar, #terkait { display:none; }
   

5. Setelah langkah diatas sudah dilakukan, kopi kode di bawah ini dan letakkan diatas </head>
   

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
   <script type='text/javascript'>
   $(document).ready(function(){
   $(&#39;#tab2, #tab3, #tab4&#39;).hide();
   $(&quot;ul.slick li&quot;).click(function () {
   $(&quot;.active&quot;).removeClass(&quot;active&quot;);
   $(this).addClass(&quot;active&quot;);
   $(&quot;.content-slick&quot;).slideUp();
   var content_show = $(this).attr(&quot;title&quot;);
   $(&quot;#&quot;+content_show).slideDown();
   });
   });
   </script>
   

   Jangan lupa Save pekerjaan sobat
6. Berikutnya sobat buka tab Edit laman yang masih di bagian Pengaturan, terus sobat klik Tambah Gadget pilih HTML/JavaScript, dan Letakkan kode dibawah ini kedalam kotak Gadget
   

   <div id="slick_area">
   
   <ul class="slick">
   <li title="tab1" class="slick active">Tab1</li>
   <li title="tab2" class="slick">Tab2</li>
   <li title="tab3" class="slick">Tab3</li>
   <li title="tab4" class="slick">Tab4</li>
   </ul>
   
   <div id="tab1" class="content-slick">
   Isi tulisan di Tab1
   </div>
   
   <div id="tab2" class="content-slick">
   Isi tulisan di Tab2
   </div>
   
   <div id="tab3" class="content-slick">
   Isi tulisan di Tab3
   </div>
   
   <div id="tab4" class="content-slick">
   Isi tulisan di Tab4
   </div>
   
   </div>
   

7. Dan Lihaat hasilnya

Semoga tutorial ini dapat membantu sobat supaya blognya tambah keren, jika masih mengalami kesulitan dalam penerapannya silahkan tinggalkan komentar, saya siap membantu

Cara Mengetahui Seberapa Berat Blogmu

Dalam membuat blog tentunya kita ingin supaya blog kita tampil semenarik mungkin, ya to? Tapi karena saking semangatnya kita dalam mempercantik blog, kadang-kadang kita sampai melupakan sesuatu yang penting, yaitu masalah berat (size) dan kecepatan (speed) berapa lama waktu yang dibutuhkan untuk membuka blog kita.

Walaupun blog kita bagus tapi kalo blog kita lama banget dibukanya maka pengunjungpun jadi enggan untuk singgah di blog kita. Kita tentu pernah kan membuka suatu web/blog yg luama buanget, karena saking lamanya kita akhirnya tidak jadi membuka web/blog tersebut. Nha tentu km gak pingin gitu kan, blogmu jadi miskin pengunjung gara-gara loading membukanya lama.

Nah dibawah ini ada alat untuk mengukur berapa besar ukuran (size) blog dan seberapa cepat loadingnya... Untuk menggunakan alat dibawah ini kamu tinggal memasukkan alamat blog yang ingin di cek. Kemudian hasilnya akan langsung keluar. Hasil yang ditampilkan yaitu : Size, Load Time dan Avarege Speed per KB. Yang perlu diperhatikan adalah "Size", karena "Load Time" dan "Avarege Speed per KB" hasilnya akan selalu berubah-ubah. Jika hasil tes menunjukkan blogmu size-nya lebih dari 100 KB, usahakan untuk menguranginya dengan cara mengurangi pernak-pernik yang kurang begitu berguna seperti jam, kalender, dll. Dengan alat ini km juga bisa membandingkan dengan web/blog kepunyaan orang lain.

Selamat mencoba.

Your domain(s): Enter each address on a new line (Maximum 10) (eg. iwebtool.com)

Powered by iWEBTOOL

Menambah Fitur Reply Pada Kotak Komentar

Menambah fasilitas Reply pada Kotak Komentar adalah bertujuan untuk mempermudah dalam membalas setiap komentar di blog yang kita cintai.

Sesungguhnya artikel tentang cara membuat fitur Reply pada kotak komentar sudah banyak yang membuat tutorialnya, namun mungkin saja para pengunjung Blog Serba Tersedia belum tahu atau sudah tau tetapi masih belum yakin untuk menerapkan pada blognya. Nah jika jawabannya adalah masih belum yakin, maka mudah-mudahan artikel yang saya buat ini bisa menambah keyakinan.

Baiklah untuk mempersingkat waktu, kita langsung saja ke Cara Menambah Fitur Reply pada Kotak Komentar, sebagai berikut :

1. Seperti biasa Login dulu ke account Blogger Anda;
2. Pilih Rancangan, lalu perhatikan dulu pada Address Bar, disitu ada No. ID Blog Anda silahkan dicatat dan disimpan, karena ID tersebut nanti akan diperlukan.
   
3. Klik Edit HTML => Download Template Lengkap untuk mengantisifasi kesalahan dalam pemasangan kode, lalu beri tanda centang pada Expan Template Widget;
4. Cari kode ini : <dd class='comment-footer'> gunakan Ctrl F untuk mempermudah proses pencarian. Jika kode tersebut tidak ditemukan Anda bisa mencari kode alternatif seperti ini : <b:include data='comment' name='commentDeleteIcon'/> ;
5. Tambahkan kode di bawah ini ke salah satu kode diatas. Berikut ini kodenya:

<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=Masukan Blog ID Anda Disini&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'><img alt='Reply To This Comment' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5kystU_CvLBuM9A4mEB7X2nGBcc5qM8XFQC6v7mX-dEynD_9sHqWQSWCTYZeeyqIc_AxnDOhpCm-6v3BBXd4KfsBNWxaF1OWqapPoT-GLTAsLSGqnEP11phqRnGeSajSr4IKqO8IzN_c/s1600/reply.gif'/></a>

6. Masukan No. ID Blog Anda yang telah disimpan tadi tepat di tulisan: Masukan Blog ID Anda Disini ;
7. Simpan Template, selesai!!!

Kompas mempunyai situs yang interaktif sehingga enak di pandang mata, diantara yang bikin interaktif adalah Berita Slide Show, dulu saya tak tau cara membuatnya tapi sekarang dengan adanya situs Dinamic Drive yang menyediakan Css dan Java Script terlengkap saya bisa mengaplikasikannya di Blog saya dan saya tinggal menikmati hasilnya

Tanpa panjang lebar, saya akan langsung memberitahukan Step by Stepnya, sebagai berikut :

1. Masuk ke Design ► Edit HMTL
2. Anda Download template anda untuk berjaga-jaga dengan cara Download Full Template
3. Kemudian cari </head> (dengan cara CTRL+F kemudian ketikan kode tsb) setelah ketemu kode </head> , anda Ganti kode </head> dengan script di bawah ini

   <script type='text/javascript'>
   //<![CDATA[
   //** Tab Content script v2.0- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
   //** Updated Oct 7th, 07 to version 2.0. Contains numerous improvements:
   // -Added Auto Mode: Script auto rotates the tabs based on an interval, until a tab is explicitly selected
   // -Ability to expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted
   // -Ability to dynamically select a tab either based on its position within its peers, or its ID attribute (give the target tab one 1st)
   // -Ability to set where the CSS classname "selected" get assigned- either to the target tab's link ("A"), or its parent container
   //** Updated Feb 18th, 08 to version 2.1: Adds a "tabinstance.cycleit(dir)" method to cycle forward or backward between tabs dynamically
   //** Updated April 8th, 08 to version 2.2: Adds support for expanding a tab using a URL parameter (ie: http://mysite.com/tabcontent.htm?tabinterfaceid=0)
   
   ////NO NEED TO EDIT BELOW////////////////////////
   
   function ddtabcontent(tabinterfaceid){
   this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
   this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
   this.enabletabpersistence=true
   this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container
   this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array
   this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)
   this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)
   this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")
   }
   
   ddtabcontent.getCookie=function(Name){
   var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
   if (document.cookie.match(re)) //if cookie found
   return document.cookie.match(re)[0].split("=")[1] //return its value
   return ""
   }
   
   ddtabcontent.setCookie=function(name, value){
   document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)
   }
   
   ddtabcontent.prototype={
   
   expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers
   this.cancelautorun() //stop auto cycling of tabs (if running)
   var tabref=""
   try{
   if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr
   tabref=document.getElementById(tabid_or_position)
   else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr
   tabref=this.tabs[tabid_or_position]
   }
   catch(err){alert("Invalid Tab ID or position entered!")}
   if (tabref!="") //if a valid tab is found based on function parameter
   this.expandtab(tabref) //expand this tab
   },
   
   cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )
   if (dir=="next"){
   var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0
   }
   else if (dir=="prev"){
   var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1
   }
   if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function
   this.cancelautorun() //stop auto cycling of tabs (if running)
   this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])
   },
   
   setpersist:function(bool){ //PUBLIC function to toggle persistence feature
   this.enabletabpersistence=bool
   },
   
   setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")
   this.selectedClassTarget=objstr || "link"
   },
   
   getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to
   return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref
   },
   
   urlparamselect:function(tabinterfaceid){
   var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\d+)", "i")) //check for "?tabinterfaceid=2" in URL
   return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
   },
   
   expandtab:function(tabref){
   var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand
   //Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through
   var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/s+/, "")+"," : ""
   this.expandsubcontent(subcontentid)
   this.expandrevcontent(associatedrevids)
   for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
   this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
   }
   if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
   ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
   this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array
   },
   
   expandsubcontent:function(subcontentid){
   for (var i=0; i<this.subcontentids.length; i++){
   var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)
   subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" //"show" or hide sub content based on matching id attr value
   }
   },
   
   expandrevcontent:function(associatedrevids){
   var allrevids=this.revcontentids
   for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface
   //if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it
   document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"
   }
   },
   
   setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)
   for (var i=0; i<this.hottabspositions.length; i++){
   if (tabposition==this.hottabspositions[i]){
   this.currentTabIndex=i
   break
   }
   }
   },
   
   autorun:function(){ //function to auto cycle through and select tabs based on a set interval
   this.cycleit('next', true)
   },
   
   cancelautorun:function(){
   if (typeof this.autoruntimer!="undefined")
   clearInterval(this.autoruntimer)
   },
   
   init:function(automodeperiod){
   var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)
   var selectedtab=-1 //Currently selected tab index (-1 meaning none)
   var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index
   this.automodeperiod=automodeperiod || 0
   for (var i=0; i<this.tabs.length; i++){
   this.tabs[i].tabposition=i //remember position of tab relative to its peers
   if (this.tabs[i].getAttribute("rel")){
   var tabinstance=this
   this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers
   this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)
   this.tabs[i].onclick=function(){
   tabinstance.expandtab(this)
   tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
   return false
   }
   if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element
   this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/s*,s*/))
   }
   if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){
   selectedtab=i //Selected tab index, if found
   }
   }
   } //END for loop
   if (selectedtab!=-1) //if a valid default selected tab index is found
   this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)
   else //if no valid default selected index found
   this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr
   if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){
   this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)
   }
   } //END int() function
   
   } //END Prototype assignment
   
   //]]>
   </script>
   
   </head>

4. Sekarang anda cari kode kode ]]></b:skin> kemudian anda Ganti kode ]]></b:skin> dengan kode CSS di bawah ini

   /* Start Slide*/
   .img400{width:300px;height:250px;}.img400 img{width:297px;height:250px;border:2px solid#000;z-index:80;}.cursor{cursor:pointer;}.h250{height:250px;}.min250{margin-top:-250px;}.des_4{background:#000;padding:3px 8px;filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80;width:80px;color:#F60;margin-bottom:2px;z-index:990;}.des_1{background:#000;height:57px;padding:3px 10px 0 10px;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;z-index:990;}.des_1a{background:#000;height:50px;padding:10px 10px 0 10px;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;margin-top:-60px;}.font16{font-size:13px;}.font16{font-size:14px;}.c_white{color:#FFF;}.c_white a{text-decoration:none;color:#FFF;}.c_white a:hover{text-decoration:underline;}.page_hl a{font:bold 12px arial;color:#FFF;text-decoration:none;padding:2px 5px;display:inline;background:#000000;filter:alpha(opacity=95);-moz-opacity:.95;opacity:.95;}.page_hl a:hover,.page_hl a.selected{color:#fff;text-decoration:none;background:#000;filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60;}.page_hl span a{color:#FFF;text-decoration:none;background:#F30;filter:alpha(opacity=90);-moz-opacity:.90;opacity:.90;}.pd_5{padding:5px;}.clearit{clear:both;margin:0;padding:0;}.pb_10{padding-bottom:10px;}
   
   ]]></b:skin>

5. Kemudian silahkan menuju Page Elements
6. Pilih Sidebar kemudian Add Gadget ► HTML/JavaScript
   P.s : Usahakan Sidebar yang akan anda gunakan untuk Slidenya berukuran Lebar: 300px dan Tinggi: 250px, Lebih di utamakan Lebarnya
   Selanjutnya anda pastekan kode di bawah ini di dalam Gadget tsb

   <div id="gal1" class="img400">
   <div class="h250"><img src="http://screenshots.en.softonic.com/en/scrn/44000/44630/coffeecup-free-dhtml-menu-builder-6.jpg" /></div>
   <div class="min250">
   <div style="margin-top:168px;" class="des_4"><strong>HEADLINE</strong></div>
   <div class="des_1 font16 c_white"><span class="font11 c_orange">DOWNLOAD</span><br /><a href="http://blogidinrohidin.blogspot.com/2011/02/coffeecup-free-dhtml-menu-builder.html">CoffeeCup Free DHTML Menu Builder</a>
   </div>
   </div>
   </div><div id="gal2" style="display:none;" class="img400">
   <div class="h250"><img src="http://www.ppcforhire.com/blog/wp-content/uploads/2010/03/heading-tags.gif" /></div>
   <div class="min250">
   <div style="margin-top:168px;" class="des_4"><strong>HEADLINE</strong></div>
   <div class="des_1 font16 c_white"><span class="font11 c_orange">TIPS BLOGGER</span><br /><a href="http://blogidinrohidin.blogspot.com/2011/06/merubah-tag-h1-di-artikel-post.html">Merubah tag H1 di artikel post</a>
   </div>
   </div>
   </div><div id="gal3" style="display:none;" class="img400">
   <div class="h250"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIFRVWTYga0WA2gL5OHsJKL5v_OoHlzBbxThpAqQTo1rkeWwGQBSoEUCLP9O2f46JhkAibo8difYxW9T-EbUIFDxg2LCwT9Gd1VhIWKRxKlz_2CH98i9Rz-jHkkzfYF2SFxHu5MUM01xs/s1600/artikel+ter.bmp" /></div>
   <div class="min250">
   <div style="margin-top:168px;" class="des_4"><strong>HEADLINE</strong></div>
   <div class="des_1 font16 c_white"><span class="font11 c_orange">TIPS BLOGGER</span><br /><a href="http://blogidinrohidin.blogspot.com/2011/07/related-post-tanpa-label.html">Related Post tanpa Label</a>
   </div>
   </div>
   </div><div id="gal4" style="display:none;" class="img400">
   <div class="h250"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlhrRfxSuV0_6NRrGxxkt4m6jRvHUUvRKT0XKjVz1_i-n4seX6yRoa7kEjuAIciX0vPBQHNx0-ERjl_gdsDZwgb-EeNxL3K-bdLv_Jen4HXwP2zyLXYCb6z67k0YUPFij7NDv3sg3LAYU/s1600/muhammad_saw.jpg" /></div>
   <div class="min250">
   <div style="margin-top:168px;" class="des_4"><strong>HEADLINE</strong></div>
   <div class="des_1 font16 c_white"><span class="font11 c_orange">ISLAM</span><br /><a href="http://blogidinrohidin.blogspot.com/2011/05/sejarah-hidup-muhammad-saw-membentuk.html">Membentuk Masyarakat Madani</a>
   </div>
   </div>
   </div><div id="gal5" style="display:none;" class="img400">
   <div class="h250"><img src="http://blog.uin-malang.ac.id/rantingkering/files/2010/09/browsers-css.jpg" /></div>
   <div class="min250">
   <div style="margin-top:168px;" class="des_4"><strong>HEADLINE</strong></div>
   <div class="des_1 font16 c_white"><span class="font11 c_orange">TIPS BLOGGER</span><br /><a href="http://blogidinrohidin.blogspot.com/2011/02/membuat-menu-blog-menggunakan-css.html">Membuat Blog Menu menggunakan CSS</a>
   </div>
   </div>
   </div><div style="height:250px; margin-top:-250px;"><div id="galtabs" class="page_hl pd_5"><a href="#" rel="gal1">1</a> <a href="#" rel="gal2">2</a> <a href="#" rel="gal3">3</a> <a href="#" rel="gal4">4</a> <a href="#" rel="gal5">5</a> </div></div><div class="clearit"></div>
   <div class="clearit pb_10"></div>
   <script type="text/javascript">
   var myheads=new ddtabcontent("galtabs");myheads.setpersist(false);myheads.setselectedClassTarget("link");myheads.init(5000)
   </script>

7. Simpan pekerjaan anda dengan klik tombol Save

Kalau tidak ada kesalahan Mungkin Slide anda telah berkerja dengan baik, jika masih mengalami kendala silahkan tinggalkan Komentar

Read more »

Menu Transparan dengan CSS3

Berikut adalah cara membuat menu transparan dengan css 3 Langsung saja untuk cara pembuatannya

1. Login ke Blogger
2. Klik Design / Rancangan, lalu pilih edit html.
3. Centang Expand Widget Template
4. Cari kode ]]></b:skin> Jika sudah ketemu anda simpan kode di bawah ini di atas kode ]]></b:skin>

#top_navigation { background : transparent; width: 800px; height : 77px; list-style : none; margin-top : 7px; margin-bottom : 11px; width : 100%; } ul.nav { background : transparent; width: 800px; height : 57px; line-height : 31px; list-style : none; padding : 0 10px; font-size : 14px; } ul.nav li { display : inline; padding : 0; background : transparent; } ul.nav a { background : transparent; height : 30px; font-size : 16px; color : #808080; float : left; padding : 11px 19px 11px 16px; text-decoration : none; border-top: 1px solid #252525; border-bottom : 4px solid #252525; border-left : 1px solid transparent; border-right : 1px solid transparent; border-radius : 4px; -moz-border-radius : 4px; -webkit-border-radius: 4px; } ul.nav a:hover { background : #252525; border-top : 1px solid #252525; border-bottom : 4px solid #000; border-left : 1px solid #252525; border-right : 1px solid #252525; color : #FFF; padding : 11px 19px 11px 16px; border-radius : 4px; -moz-border-radius : 4px; -webkit-border-radius: 4px; }

5. Setelah itu cari kode <body>

<div id="top_navigation">
<ul class="nav">
<li><a href="#"> Home </a></li>
<li><a href="#"> Blogidin</a></li>
<li><a href="#"> About</a></li>
<li><a href="#"> Kontak Saya </a></li>
<li><a href="#"> Artikelku</a></li></ul></div>

KETERANGAN

Kode # adalah URL nya
dan kode berwarna biru adalah judul URL nya atau Link nya
semoga tips blogger ini bermanfaat