Membuat Kotak Pencarian (Search Box)

Membuat Kotak Pencarian (Search Box) | Tutorial Blog

Tutorial kali ini saya akan berbagi cara Membuat Kotak Pencarian (Search Box).

Berikut caranya :

• Login ke Dasbor blogger, klik Design (Rancangan) > Edit HTML, Taruh kode ini di atas kode  ]]></b:skin>
  berikut kodenya:
  #search {

  width: 280px;

  font-size: 11px;

  float: right;

  margin: 0;

  padding: 6px 0 0;

  }

  #searchform {

  margin: 0;

  padding: 0;

  overflow: hidden;

  display: inline;

  }

  #searchbox {

  background: #84CAF6;

  width: 220px;

  color: #000;

  margin: 0;

  padding: 4px 0 3px 5px;

  border: 1px solid #005BC3;

  display: inline;

  font: normal 12px Georgia, Times New Roman, Trebuchet MS;

  }

  #searchbutton {

  background: #84CAF6 !important;

  color: #000;

  margin: 0 0 0 5px;

  padding: 3px 3px 2px;

  border: 1px solid #005BC3;

  font: bold 11px Georgia, Times New Roman, Trebuchet MS;

  }
• Save Template.
• Sekarang ke Page Element, klik Add a Widget > HTML/Javascript Masukkan kode ini di dalam area content.
<div id='search'>
<form action='/search/' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='200' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
<input class='btn' type='submit' value='Go'/>
</form>
</div>
• Save dan lihat hasilnya.

Semoga bermanfaat...!

Artikel lainnya :

• Memasang Widget Search Box
• Widget Google Followers Show Hide
• Membuat Daftar Isi Blog

Membuat Related Post (Artikel Terkait)

Membuat Related Post (Artikel Terkait) | Tutorial Blog

Related post atau Artikel Terkait sangat bermanfaat untuk memberitahu pengunjung tentang artikel yang lain dalam satu label / category pada blog kita.

Berikut cara Membuat Related Post :

• Login ke Blogger, Klik Design/Rancangan > Edit HTML.
  
• Beri tanda centang pada Expand Template Widget.
  
  Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
• Cari kode </head>, lalu Copy kode dibawah ini dan letakkan diatas kode </head>.
  <!--Simple Related Posts Scripts Start-->
  <script type='text/javascript'>
  //<![CDATA[
  var relatedTitles = new Array();
  var relatedTitlesNum = 0;
  var relatedUrls = new Array();
  function related_results_labels(json) {
  for (var i = 0; i < json.feed.entry.length; i++) {
  var entry = json.feed.entry[i];
  relatedTitles[relatedTitlesNum] = entry.title.$t;
  for (var k = 0; k < entry.link.length; k++) {
  if (entry.link[k].rel == 'alternate') {
  relatedUrls[relatedTitlesNum] = entry.link[k].href;
  relatedTitlesNum++;
  break;
  }
  }
  }
  }
  function removeRelatedDuplicates() {
  var tmp = new Array(0);
  var tmp2 = new Array(0);
  for(var i = 0; i < relatedUrls.length; i++) {
  if(!contains(tmp, relatedUrls[i])) {
  tmp.length += 1;
  tmp[tmp.length - 1] = relatedUrls[i];
  tmp2.length += 1;
  tmp2[tmp2.length - 1] = relatedTitles[i];
  }
  }
  relatedTitles = tmp2;
  relatedUrls = tmp;
  }
  function contains(a, e) {
  for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
  return false;
  }
  function printRelatedLabels() {
  var r = Math.floor((relatedTitles.length - 1) * Math.random());
  var i = 0;
  document.write('<ul>');
  while (i < relatedTitles.length && i < 5) {
  document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
  if (r < relatedTitles.length - 1) {
  r++;
  } else {
  r = 0;
  }
  i++;
  }
  document.write('</ul>');
  }
  //]]>
  </script>
      <!--Simple Related Posts Scripts and Styles End-->
• Kemudian silakan Sobat cari kode seperti berikut
  <div class='post-footer-line post-footer-line-1'>
  Lalu letakkan kode berikut dibawah kode tersebut.
  <!-- Simple Related Posts Code Start-->
  <b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'>
  Related Post on <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
  <b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
  </b:if></b:loop>
  <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script></div></b:if>
  <!-- Simple Related Posts Code End-->
• Terakhir klik Save / Simpan Template.
  

Selamat mencoba dan semoga berhasil Membuat Related Post (Artikel Terkait).

Membuat Auto Read More

Membuat Auto Read More | Tutorial Blog

Auto Read More adalah opsi yang otomatis memotong artikel Sobat saat di tampilkan pada home page blog Anda. Auto Read More ini dilengkapi dengan pengaturan jumlah karakter, Ada 2 pengaturan jumlah karakter yaitu jumlah karakter Read More tanpa gambar dan jumlah karakter Read More dengan gambar.

Berikut cara membuat auto read more :

1. Login ke akun Blogger Sobat, klik Design / Rancangan  > Edit HTML.
   Penting!!! Biasakan men-Download / membackup template blog Anda sebelum mengedit template.
2. Beri tanda centang pada Expand widget template, kemudian letakkan kode berikut ini di atas kode </head> (tekan Ctrl+F untuk mempermudah dalam pencarian kode)
   <script type="text/javascript">
   var thumbnail_mode = &quot;float&quot; ;
   summary_noimg = 250;
   summary_img = 220;
   img_thumb_height = 120;
   img_thumb_width = 220;
   </script>
   <script type="text/javascript">
   //<![CDATA[
   function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf("
   ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>
   "+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
   //]]>
   </script>
   Anda juga dapat merubah kode berikut:
   var thumbnail_mode = "float";
   summary_noimg = 250;
   summary_img = 250;
   img_thumb_height = 120;
   img_thumb_width = 120;
   Ganti angka pada summary_noimg untuk mengatur jumlah karakter yang tampil pada kutipan artikel tanpa gambar.
   Ganti angka pada summary_img untuk mengatur jumlah karakter yang tampil pada kutipan artikel dengan gambar.
   Ganti angka pada img_thumb_height untuk mengatur tinggi gambar yang tampil pada kutipan artikel.
   Ganti angka pada img_thumb_width untuk mengatur lebar gambar yang tampil pada kutipan artikel.
3. Selanjutnya cari kode <data:post.body> lalu ganti dengan kode ini;
         <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
   <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
   <span class='rmlink' style='float:left'><a expr:href='data:post.url'><b>More about</b> &#8594;</a></span>
   </b:if>
Ganti kata left dengan right untuk menampilkan link readmore di bagian kanan.
Ganti kata More about dengan kata yang Anda inginkan. Misalnya Read More,Baca Selengkapnya, Selanjutnya atau Seterusnya.
4. Terakhir klik Pratinjau / Preview untuk melihat hasilnya. Jika Anda rasa sudah sesuai, klik tombol Simpan / Save Template.

Catatan : Jika Sobat menggunakan opsi ini, Artikel pada halaman juga akan terpotong.

Semoga tutorial ini bisa berguna buat sobat yang ingin Membuat Auto Read More.

Cara Membuat Schedule / Jadwal Postingan di Wordpress

Cara Membuat Schedule / Jadwal Postingan di Wordpress | Tutorial Blog

Pada postingan kali ini saya akan berbagi cara membuat Jadwal Postingan di WordPress. Jika kita menggunakan opsi ini maka postingan yang kita buat akan dipublish secara otomatis sesuai pengaturan yang kita lakukan. Untuk Blogspot silakan baca Membuat Schedule / Jadwal Postingan Blogspot.

Berikut Cara Membuat Schedule / Jadwal Postingan di Wordpress :

1. Login ke Dashboard Wordpress Anda, klik Posts > Add New, dan buat sebuah postingan.
   
2. Sebelum di Publish klik Edit yang terletak disamping Publish immediately.
   
3. Atur tanggal dan jam kapan postingan Sobat ingin dipublish.
   
4. Terakhir klik tombol Schedule.
   

Semoga tutorial diatas bermanfaat buat sobat yang ingin Membuat Schedule / Jadwal Postingan di Wordpress.

Memasang Jam di Wordpress

Memasang Jam di Wordpress | Tutorial Blog

Untuk memasang widget jam di wordpress.com caranya sama dengan Memasang Jam di Blogspot, namun ada kode yang harus Sobat rubah, Berikut tutorialnya :

• Kunjungi www.clocklink.com
• Lalu klik pada menu Gallery (kita bisa memilih kategori-kategori yang ingin kita pilih), sebagai contoh pilih kategori Digital.
• Kemudian klik View HTML Tag.
• Akan timbul halaman baru. disitu ada ketentuan-ketentuan yang memakai bahasa inggris, pilih Accept.
• Selanjutnya kita diminta memilih warna (color), time zone, serta ukuran jam agar sesuai dengan sidebar blog. Kemudian Copy kode HTML yang di bagian bawah.
  
  Contoh Kode:
  
  <embed src="http://www.clocklink.com/clocks/5005-blue.swf?TimeZone=JOG&"  width="240" height="80" wmode="transparent" type="application/x-shockwave-flash">
• Hapus bagian "<embed" dan penutup ">" dan ganti dengan "[gigya" dan "]". Agar widget menjadi rata tengah tambahkan "center" sehingga kodenya akan menjadi seperti ini:
  
  <div style="text-align:center;">[gigya src="http://www.clocklink.com/clocks/5005-blue.swf?TimeZone=JOG&"  width="240" height="80" wmode="transparent" type="application/x-shockwave-flash"]</div>
• Kemudian pasang pada widget "Teks" blog Sobat, Jika belum bisa cara memasang widget di wordpress.com silakan baca Memasang Widget di Wordpress.com, Selesai...

Sekian tutorial tentang Memasang Jam di Wordpress.

Memberi Tag dan Kategori Postingan di Wordpress

Memberi Tag dan Kategori Postingan di Wordpress | Tutorial Blog

Tutorial kali ini tentang memasang / memberi Tag dan Kategori pada postingan di wordpress. Berikut caranya :

• Login ke WordPress anda.
• Pada Dashboard klik menu Post > Add New.
  
• Lalu Check List kategorinya sesuai dengan isi postingan anda.
  
• Tulis Tag yang ingin Anda berikan pada kolom tag, dan klik Add.
  
• Setelah selesai membuat postingan klik Publish.

Artikel Yang Lain :

• Membuat ReadMore Pada Postingan
• Menonaktifkan Komentar pada Halaman WordPress
• Memasang Widget di Wordpress.com

Semoga tutorial ini bermanfaat buat Sobat yang masih belum tau cara Memberi Tag dan Kategori Postingan di WordPress.

Setting Komentar Tanpa Moderasi

Setting Komentar Tanpa Moderasi | Tutorial Blog

Opsi ini memberikan kita kesempatan untuk melakukan filter pada setiap komentar yang masuk ke blog. maksudnya setiap komentar tidak langsung di tampilkan di blog, tetapi harus melalui persetujuan dari Admin blog untuk bisa di tampilkan atau tidak.

Jika Sobat gak mau ribet, mending ospi ini dimatikan, jadi apabila ada komentar oleh pengunjung bisa langsung tampil di blog tanpa disetujui atau di moderasi terlebih dahulu oleh admin, kecuali untuk komentar SPAM, komentar yang dianggap SPAM tidak akan muncul secara otomatis.

Perlu diingat, semua link yang dikirim oleh pengunjung pada saat komentar juga akan langsung tampil. Baik itu link yang diperbolehkan, maupun link-link yang tidak diperbolehkan, jadi sebelum Sobat menerapkan setting komentar ini, sebaiknya pertimbangkan terlebih dahulu.

Berikut Tutorial Setting Komentar Tanpa Moderasi :

• Untuk Wordpress
1. Login ke Wordpress Anda, pada dashboard klik Settings > Discussion.
   
2. Kemudian hapus tanda centang [ √ ] pada An administrator must always approve the comment dan Comment author must have a previously approved comment.
   
3. Lalu klik Save Changes.
   

• Untuk Blogspot
1. Login ke blogger, klik Settings > Comments.
   
2. Pada Comment Moderation pilih Never.
   
3. Terakhir klik Save Settings.
   

Demikian Postingan saya tentang Setting Komentar Tanpa Moderasi.